/* The Nuts Poker — оформление игрового сайта.
 *
 * Дизайн-система взята из казино (product/public/templates/woo/css/cx-home.css) и
 * перенесена сюда: те же фон, карточки, рамки, акцентный градиент, радиусы и
 * плашка баланса. Два наших продукта должны выглядеть как один бренд.
 *
 * Правило проекта: любая вёрстка сразу адаптивная под телефон. За покерным столом
 * сидят с телефона чаще, чем с компьютера.
 *
 * ДВЕ ОШИБКИ, ИЗ-ЗА КОТОРЫХ СТРАНИЦЫ РАЗЪЕХАЛИСЬ (2026-10-10). Записаны здесь,
 * потому что обе повторимы и обе выглядели как «вёрстка поехала сама».
 *
 *   1. Класс `.card` был объявлен ДВАЖДЫ: как карточка-панель (фон, рамка, радиус
 *      14) и ниже как игральная карта (34×48, белая, flex по центру). Вторая
 *      перебивала первую, и каждая панель на сайте — рейкбек, честность,
 *      кабинет — превращалась в белый прямоугольник размером с игральную карту,
 *      из которого вываливался весь текст. Игральная карта теперь `.pc`, и
 *      имя `card` занято ровно одним компонентом.
 *
 *   2. Сетку панелей задавали классом `.stats` с инлайновым
 *      `grid-template-columns:repeat(2,1fr)`. Инлайновый стиль сильнее
 *      медиа-запроса, поэтому на телефоне эти блоки оставались в две колонки по
 *      150 пикселей. Для таких случаев есть `.grid--2` / `.grid--3`: они сами
 *      складываются в одну колонку. Инлайновых `grid-template-columns` в
 *      разметке быть не должно.
 */

/* Атрибут hidden должен скрывать ВСЕГДА.
 *
 * Любое правило вида `.seat__sit{display:flex}` сильнее браузерного
 * `[hidden]{display:none}`, и элемент остаётся на экране. За столом это
 * выглядело так: у свободного места одновременно видны и кнопка «сесть», и
 * надпись «свободно», а у занятого — пустая плашка игрока. Скрипт при этом
 * отрабатывал правильно. */
[hidden]{display:none !important}

:root{
  /* Палитра — ровно та же, что в казино */
  --bg:#0e0f15;
  --bg-soft:#12131a;
  --card:#171923;
  --card-2:rgba(255,255,255,.035);
  --card-h:rgba(255,255,255,.07);
  --bd:rgba(255,255,255,.08);
  --bd-h:rgba(255,255,255,.16);
  --txt:#e7e9f0;
  --mut:#8b90a2;
  --dim:#6e7384;
  --acc:#8b5cf6;
  --acc-2:#6d28d9;
  --acc-grad:linear-gradient(135deg,#8b5cf6,#6d28d9);
  --ok:#3fb950;
  --warn:#d29922;
  --bad:#f85149;
  /* Зелёный стола — единственное, чего в казино нет: покерный стол обязан
     читаться как стол, иначе лобби выглядит как список товаров. */
  --felt:#13543f;
  --felt-2:#0d3a2b;

  /* Радиусы и тени вынесены в токены: иначе в вёрстке заводятся «почти такие же»
     значения, и карточки перестают выглядеть одной системой. */
  --r-s:9px;
  --r-m:12px;
  --r-l:16px;
  --r-xl:20px;
  --sh-1:0 1px 2px rgba(0,0,0,.3);
  --sh-2:0 10px 26px rgba(0,0,0,.4);
  --sh-3:0 18px 44px rgba(0,0,0,.5);
  /* Блик по верхней кромке. Он и даёт карточкам объём: без него тёмная плашка на
     тёмном фоне читается как дырка, а не как поверхность. */
  --lip:inset 0 1px 0 rgba(255,255,255,.055);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--txt);
  font:14.5px/1.6 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  min-height:100vh;display:flex;flex-direction:column;
  /* Подсветка за шапкой. Одно пятно вверху страницы, не повторяется: оно
     отделяет «верх» от «низа» и не мешает читать таблицы. */
  /* Одно сдержанное пятно вверху вместо двух ярких. Фон не должен спорить с
     таблицами: на нём читают цифры, а не любуются им. */
  background-image:radial-gradient(1100px 380px at 50% -220px,rgba(139,92,246,.10),transparent 72%);
  background-repeat:no-repeat;
}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.mut{color:var(--mut)}
.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 18px}
.lnk{color:var(--acc);font-weight:600}
.lnk:hover{text-decoration:underline;text-underline-offset:3px}

/* Фокус виден всегда и одинаково. Обводка по клавиатуре — не украшение: без неё
   страницу нельзя пройти табом, а на планшете с клавиатурой это единственный
   способ навигации. */
:focus-visible{outline:2px solid rgba(139,92,246,.7);outline-offset:2px;border-radius:6px}

/* ------------------------------------------------------------- падающий фон */
/* Фишки и монеты, медленно падающие за содержимым. Три условия, без которых
   такой фон превращается из украшения в помеху:
     • он НИЧЕГО не перехватывает (pointer-events:none);
     • он ПОД содержимым (z-index 0, у .wrap и шапки — выше);
     • его почти не видно. Фон, который заметен, мешает читать таблицу столов,
       а за ней сюда и приходят. */
#rain{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
#rain img{position:absolute;top:-16vh;will-change:transform,opacity;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.3));
  animation-name:rainfall;animation-timing-function:linear;animation-iteration-count:infinite}
@keyframes rainfall{
  0%{transform:translate3d(0,-16vh,0) rotate(0deg);opacity:0}
  10%{opacity:var(--op)}
  90%{opacity:var(--op)}
  100%{transform:translate3d(var(--drift),116vh,0) rotate(var(--rot));opacity:0}
}
/* Содержимое всегда поверх фона. Без этого карточки «ныряют» под фишки.
   Шапке и подвалу слой добавлен в их собственных правилах — второе объявление
   того же имени проверка вёрстки справедливо считает коллизией. */
main{position:relative;z-index:1}

/* ------------------------------------------------------------- появление */
/* Короткий сдвиг вверх при загрузке. Длительность намеренно маленькая: цель —
   чтобы страница «собралась», а не чтобы её ждали. Всё это отключается
   системной настройкой «меньше движения» (блок в конце файла). */
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.hero,.stat,.why,.panel,.scroll,.empty{animation:rise .42s cubic-bezier(.22,.7,.3,1) both}
.stats .stat:nth-child(2){animation-delay:.05s}
.stats .stat:nth-child(3){animation-delay:.1s}
.stats .stat:nth-child(4){animation-delay:.15s}
.grid--3 .why:nth-child(2){animation-delay:.06s}
.grid--3 .why:nth-child(3){animation-delay:.12s}

/* Строки списка столов проявляются друг за другом. Шесть шагов по 40 мс —
   четверть секунды на весь список: заметно, что он живой, и не успевает
   надоесть. */
@keyframes rowin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.tbl tbody tr{animation:rowin .34s ease both}
.tbl tbody tr:nth-child(2){animation-delay:.04s}
.tbl tbody tr:nth-child(3){animation-delay:.08s}
.tbl tbody tr:nth-child(4){animation-delay:.12s}
.tbl tbody tr:nth-child(5){animation-delay:.16s}
.tbl tbody tr:nth-child(6){animation-delay:.2s}
.tbl tbody tr:nth-child(n+7){animation-delay:.24s}

/* ---------------------------------------------------------------- шапка */
.hdr{view-transition-name:hdr;
  position:sticky;top:0;z-index:60;   /* и поверх падающего фона */
  background:rgba(14,15,21,.78);
  -webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.hdr__in{display:flex;align-items:center;gap:14px;height:66px}
.logo{font-size:19px;font-weight:800;letter-spacing:.2px;color:#fff;flex:none;display:flex;align-items:center;gap:9px}
.logo b{background:var(--acc-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.logo__m{
  width:28px;height:28px;flex:none;border-radius:9px;background:var(--acc-grad);
  display:flex;align-items:center;justify-content:center;box-shadow:var(--sh-1),var(--lip);
}
.logo__m svg{width:16px;height:16px;fill:#fff}

/* Верхнее меню — ОДНА СТЕКЛЯННАЯ КАПСУЛА с сегментами внутри.
 *
 * Почему капсула, а не ряд отдельных ссылок. На тёмной шапке пять слов без
 * общего фона висели между логотипом слева и балансом справа, и глаз не
 * находил, где начинается навигация: всё это читалось как одна длинная строка
 * разной яркости. Капсула собирает меню в один предмет — его видно боковым
 * зрением, и шапка перестаёт выглядеть набором разрозненных элементов.
 *
 * Активный пункт — ЗАЛИТАЯ таблетка в цвете акцента. Прежняя версия метила его
 * чуть более светлым фоном плюс чертой снизу: на экране с подсветкой похуже
 * разница «чуть светлее» терялась, а черта под словом внутри капсулы выглядит
 * мусором. Заливка видна при любой подсветке и не требует второй пометки.
 *
 * flex:0 1 auto вместо flex:1 — капсула по содержимому, а не во всю ширину:
 * растянутая на половину шапки, она превращается в пустую полосу. Правый
 * кластер прижимает margin-right:auto. */
.nav{
  display:flex;align-items:center;gap:3px;margin-left:16px;margin-right:auto;
  flex:0 1 auto;min-width:0;padding:4px;border-radius:15px;
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07);
  box-shadow:var(--lip);
}
.nav a{
  position:relative;padding:8px 14px;border-radius:11px;
  font-size:14.5px;font-weight:600;letter-spacing:.01em;color:#b9bdcc;
  transition:background .15s,color .15s,box-shadow .15s;white-space:nowrap;
}
.nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.nav a.on{
  background:linear-gradient(180deg,rgba(139,92,246,.28),rgba(139,92,246,.15));
  color:#fff;box-shadow:inset 0 0 0 1px rgba(139,92,246,.42),0 4px 14px rgba(139,92,246,.16);
}
/* Пункт «Войти» живёт только в мобильном меню. */
.nav__auth{display:none}

/* Плашка баланса — компонент из казино, размеры сохранены: высота 44, радиус 13,
   сумма 16px/800 табличными цифрами, кнопка «+» 30px. */
.bal{
  display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 6px 0 12px;
  border-radius:13px;background:linear-gradient(180deg,#191b25,#141621);
  border:1px solid rgba(255,255,255,.1);cursor:pointer;
  box-shadow:var(--lip);
  transition:border-color .16s,transform .14s,box-shadow .16s;flex:none;
}
.bal:hover{border-color:rgba(139,92,246,.42);transform:translateY(-1px);box-shadow:var(--sh-2)}
.bal__ic{width:27px;height:27px;flex:none;border-radius:50%;display:flex;align-items:center;
  justify-content:center;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}
.bal__ic img{width:21px;height:21px;display:block}
.bal__amt{font-size:16px;font-weight:800;color:#fff;line-height:1;letter-spacing:-.01em}
.bal__cur{font-size:11px;font-weight:800;color:var(--acc);letter-spacing:.6px}
.bal__add{
  width:30px;height:30px;flex:none;border-radius:var(--r-s);display:flex;align-items:center;justify-content:center;
  background:var(--acc-grad);color:#fff;transition:filter .16s;
}
.bal:hover .bal__add{filter:brightness(1.08)}
.bal__add svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round}

/* Кнопка кабинета в шапке — стеклянная, 44 пикселя, с иконкой и подписью.
   Перенесена из казино как есть: одинаковая ширина у всех игроков, поэтому
   шапка не «пляшет» от длины ника. */
.hprof{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:none;
  height:44px;padding:0 17px;border-radius:12px;
  background:var(--card-2);border:1px solid rgba(255,255,255,.14);color:var(--txt);
  font-size:14px;font-weight:600;white-space:nowrap;
  transition:background .15s,border-color .15s,color .15s,transform .14s}
.hprof:hover{background:rgba(139,92,246,.12);border-color:rgba(139,92,246,.4);color:#fff;
  transform:translateY(-1px)}
.hprof svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}

.ava{
  width:38px;height:38px;border-radius:11px;flex:none;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:14px;color:#fff;background:var(--acc-grad);box-shadow:var(--lip);
}

/* Переключатель языка: кнопка показывает ТЕКУЩИЙ язык, список даёт выбрать.
   Сделан на <details> — раскрытие и работу с клавиатуры браузер берёт на себя,
   и переключатель остаётся рабочим даже если скрипт не выполнился. Человеку,
   попавшему не на свой язык, иначе не помочь вообще. */
.lang{position:relative;flex:none}
.lang__btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  height:44px;padding:0 12px;border-radius:12px;cursor:pointer;list-style:none;
  background:var(--card-2);border:1px solid rgba(255,255,255,.14);color:var(--mut);
  transition:background .15s,border-color .15s,color .15s}
/* Треугольник, который браузер рисует у <summary> сам, убираем в обоих
   движках: он не вписывается в кнопку и съезжает. */
.lang__btn::-webkit-details-marker{display:none}
.lang__btn::marker{content:""}
.lang__btn:hover{background:rgba(139,92,246,.12);border-color:rgba(139,92,246,.4);color:#fff}
.lang[open] .lang__btn{background:rgba(139,92,246,.14);border-color:rgba(139,92,246,.45);color:#fff}
/* Флажок языка вместо глобуса.
 *
 * Глобус говорил «тут что-то про языки», но не говорил, какой язык стоит
 * сейчас, — за этим приходилось читать код рядом. Флаг узнаётся до чтения, и
 * так же сделано в казино: два проекта одного владельца не должны отличаться
 * в мелочах, которые человек запоминает глазами.
 *
 * Скругление делает border-radius на самом <svg> — он обрезает содержимое, и
 * флагу не нужен ни clipPath с уникальным идентификатором (а он повторился бы
 * в кнопке и в списке), ни отдельная обёртка. Тонкая обводка нужна белой
 * полосе российского флага: без неё она сливается со светлым фоном кнопки. */
.lang__f{width:21px;height:14px;flex:none;display:block;border-radius:3px;
  box-shadow:0 0 0 1px rgba(255,255,255,.18)}
.lang__c{font-size:12.5px;font-weight:800;letter-spacing:.05em}
.lang__ch{width:13px;height:13px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;opacity:.7;transition:transform .16s}
.lang[open] .lang__ch{transform:rotate(180deg)}

.lang__pop{position:absolute;top:52px;right:0;min-width:188px;z-index:70;padding:6px;
  background:#161a26;border:1px solid var(--bd-h);border-radius:14px;
  box-shadow:var(--sh-3);display:flex;flex-direction:column;gap:2px}
.lang__i{display:flex;align-items:center;gap:10px;
  padding:9px 11px;border-radius:9px;font-size:13.5px;color:#dfe2ea;
  transition:background .12s,color .12s}
/* Название языка занимает всё свободное место, код прижат вправо. */
.lang__n{flex:1;min-width:0}
.lang__i:hover{background:rgba(255,255,255,.07);color:#fff}
.lang__i.on{background:rgba(139,92,246,.16);color:#fff;font-weight:700}
/* Галочка у текущего языка. Подсветки мало: в списке из двух строк она
   читается как «наведено», а не как «выбрано». */
.lang__i.on .lang__k::after{content:" ✓";color:var(--acc)}
.lang__k{font-size:11px;font-weight:800;letter-spacing:.06em;color:var(--mut)}
.lang__i.on .lang__k{color:#fff}

/* ---------------------------------------------------------------- кнопки */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  height:42px;padding:0 17px;border-radius:var(--r-m);border:1px solid var(--bd);
  background:var(--card-2);color:var(--txt);font:inherit;font-size:13.5px;font-weight:700;
  cursor:pointer;transition:background .15s,border-color .15s,transform .12s,box-shadow .15s;
  white-space:nowrap;box-shadow:var(--lip);
}
.btn:hover{background:var(--card-h);border-color:var(--bd-h)}
.btn:active{transform:translateY(1px)}
.btn--acc{background:var(--acc-grad);border-color:transparent;color:#fff;box-shadow:var(--lip)}
.btn--acc:hover{filter:brightness(1.08);background:var(--acc-grad)}
.btn--sm{height:34px;padding:0 12px;font-size:12.5px;border-radius:var(--r-s)}
/* Кнопка ШАПКИ. Отдельный размер, потому что в шапке всё остальное — выбор
   языка, баланс, кабинет — ровно 44 пикселя высотой и со скруглением 12.
   «Войти» и «Регистрация» стояли там маленькими (34 и другой радиус), и ряд
   выглядел собранным из разных наборов: три кнопки рядом, и ни одна не
   совпадает с соседней ни высотой, ни углами. */
.btn--hd{height:44px;padding:0 17px;font-size:14px;border-radius:12px}
.btn--lg{height:48px;padding:0 22px;font-size:15px}
.btn--wide{width:100%}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}

/* ---------------------------------------------------------------- сетки */
/* Сетки отдельными классами, а не инлайновым grid-template-columns.
   Инлайновый стиль сильнее медиа-запроса и не даёт колонкам сложиться на
   телефоне — именно так страницы и разъехались. */
.grid{display:grid;gap:14px}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.grid--side{grid-template-columns:1.6fr 1fr;align-items:start}

/* ---------------------------------------------------------------- блоки */
.sec{margin:30px 0 0}
.sec:first-child{margin-top:22px}
.sec__eyebrow{
  font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--acc);margin:0 0 7px;
}
.sec__h{
  display:flex;align-items:center;gap:10px;font-size:19px;font-weight:700;color:#fff;
  letter-spacing:-.015em;margin:0 0 15px;
}
.sec__h::before{content:"";width:3px;height:19px;border-radius:3px;background:var(--acc-grad);flex:none}
.sec__hd{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin:0 0 15px;flex-wrap:wrap}
.sec__hd .sec__h{margin:0}
.sec__note{font-size:13px;color:var(--mut);padding-bottom:2px}

.card{
  background:linear-gradient(180deg,#1a1c27,var(--card));
  border:1px solid var(--bd);border-radius:var(--r-l);
  box-shadow:var(--lip);
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
.card__pad{padding:18px 20px}

/* Панель с заголовком. Шапка отделена волоском, а не отступом: так заголовок
   перестаёт «висеть» над содержимым и блок читается как один предмет. */
.panel{
  background:linear-gradient(180deg,#1a1c27,var(--card));
  border:1px solid var(--bd);border-radius:var(--r-l);box-shadow:var(--lip);
  display:flex;flex-direction:column;overflow:hidden;
}
.panel__hd{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 18px;border-bottom:1px solid var(--bd);
  background:rgba(255,255,255,.015);
}
.panel__h{font-size:14px;font-weight:700;color:#fff;letter-spacing:-.005em}
.panel__meta{font-size:11.5px;font-weight:700;color:var(--mut);letter-spacing:.04em;text-transform:uppercase}
.panel__bd{padding:18px;flex:1}
.panel__bd>:first-child{margin-top:0}
.panel__bd>:last-child{margin-bottom:0}
.panel__ft{padding:14px 18px;border-top:1px solid var(--bd);background:rgba(0,0,0,.14);
  font-size:12.5px;color:var(--mut);line-height:1.55}

/* ---------------------------------------------------------------- показатели */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.stat{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,#1a1c27,var(--card));
  border:1px solid var(--bd);border-radius:var(--r-l);padding:16px 18px;box-shadow:var(--lip);
  transition:border-color .16s,transform .16s,box-shadow .16s;
}
/* Акцентная полоска сверху проявляется под курсором. На плитке-ссылке это
   единственный честный признак «сюда можно нажать»: курсор на телефоне не
   показать, а вид плитки одинаков у ссылок и у цифр. */
.stat::after{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--acc-grad);opacity:0;transition:opacity .16s;
}
a.stat:hover{border-color:var(--bd-h);transform:translateY(-3px);box-shadow:var(--sh-3),var(--lip)}
a.stat:hover::after{opacity:1}
.stat__lab{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.stat__val{font-size:25px;font-weight:700;margin-top:8px;letter-spacing:-.03em;color:#fff;line-height:1.15}
.stat__val--acc{background:var(--acc-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat__sub{font-size:12px;color:var(--mut);margin-top:4px}

/* Точка «живое». Пульсация нужна ровно в одном месте — у счётчика онлайна:
   в руме без игроков вопрос «тут вообще кто-то есть» первый. */
.pulse{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ok);
  box-shadow:0 0 0 0 rgba(63,185,80,.55);animation:pulse 2.1s infinite;vertical-align:middle;margin-right:6px}
@keyframes pulse{
  70%{box-shadow:0 0 0 7px rgba(63,185,80,0)}
  100%{box-shadow:0 0 0 0 rgba(63,185,80,0)}
}
.pulse--off{background:var(--dim);animation:none;box-shadow:none}

/* ---------------------------------------------------------------- главный блок */
.hero{
  position:relative;overflow:hidden;
  border:1px solid var(--bd);border-radius:var(--r-xl);
  background:
    radial-gradient(520px 260px at 88% -40%,rgba(139,92,246,.22),transparent 70%),
    linear-gradient(180deg,#1b1d29,#15161f);
  box-shadow:var(--sh-2),var(--lip);
  padding:26px 28px;
}
.hero__in{position:relative;z-index:2;max-width:620px}
.hero__k{display:inline-flex;align-items:center;gap:7px;height:27px;padding:0 11px;border-radius:999px;
  background:rgba(139,92,246,.14);border:1px solid rgba(139,92,246,.3);
  font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#c4b5fd}
.hero__h{font-size:30px;font-weight:700;color:#fff;letter-spacing:-.035em;line-height:1.18;margin:14px 0 10px}
.hero__p{font-size:14.5px;color:#a8adbe;margin:0 0 20px;max-width:560px;line-height:1.6}
.hero__b{display:flex;gap:10px;flex-wrap:wrap}
/* Декоративный стол в правом углу. Он не несёт данных, поэтому скрыт от
   озвучки и исчезает на узком экране, а не поджимает заголовок.
 *
 * Важно, чтобы он читался СТОЛОМ, а не зелёным пятном: для этого нужен борт
 * целиком и хотя бы намёк на места. Первая версия была обрезана углом блока
 * наполовину и выглядела как ошибка вёрстки. */
.hero__art{position:absolute;right:-70px;bottom:-96px;width:340px;height:210px;
  border-radius:999px;opacity:.45;transform:rotate(-10deg);pointer-events:none;
  background:radial-gradient(ellipse at 50% 38%,#17644a,var(--felt) 52%,var(--felt-2));
  border:12px solid #2a1d13;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.07),inset 0 8px 26px rgba(0,0,0,.35)}
/* Шесть мест по ободу — намёком, чтобы овал читался как покерный стол. */
.hero__art::before,.hero__art::after{content:"";position:absolute;inset:26px 40px;
  border-radius:999px;border:2px dashed rgba(255,255,255,.1)}
.hero__art::after{inset:58px 86px;border-style:solid;border-color:rgba(255,255,255,.06)}

/* Факты в главном блоке. Пришли на место абзаца на четыре строки: условия
   рейка — это четыре числа, и читаются они числами, а не текстом. */
.facts{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 20px}
.fact{display:inline-flex;align-items:baseline;gap:6px;padding:6px 12px;border-radius:999px;
  background:rgba(255,255,255,.05);border:1px solid var(--bd);
  font-size:12px;color:var(--mut);white-space:nowrap}
.fact b{font-size:13.5px;font-weight:800;color:#fff;letter-spacing:-.01em}

/* Три коротких довода вместо двух панелей с абзацами. */
.why{padding:20px;border-radius:var(--r-l);border:1px solid var(--bd);
  background:linear-gradient(180deg,#1a1c27,var(--card));box-shadow:var(--lip);
  transition:border-color .16s,transform .16s,box-shadow .16s}
.why:hover{border-color:var(--bd-h);transform:translateY(-3px);box-shadow:var(--sh-3),var(--lip)}
.why__i{display:flex;align-items:center;justify-content:center;width:38px;height:38px;
  border-radius:11px;background:rgba(139,92,246,.13);border:1px solid rgba(139,92,246,.25);
  margin-bottom:13px}
.why__i svg{width:19px;height:19px;fill:none;stroke:var(--acc);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.why__h{display:block;font-size:15px;font-weight:700;color:#fff;letter-spacing:-.01em}
.why__p{margin:7px 0 11px;font-size:13px;color:var(--mut);line-height:1.55}

/* Имя стола. Подзаголовок «6-max · безлимитный холдем» повторялся у каждой
   строки — шесть раз одно и то же, и он ушёл в шапку раздела. */
.tname{font-weight:700;color:#fff;font-size:14px}

/* ---------------------------------------------------------------- лобби */
.bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.chip{
  display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 13px;border-radius:var(--r-s);
  background:var(--card-2);border:1px solid var(--bd);color:var(--mut);
  font:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:all .15s;
}
.chip:hover{background:var(--card-h);color:#fff;border-color:var(--bd-h)}
.chip.on{background:var(--acc-grad);border-color:transparent;color:#fff}

.tbl{width:100%;border-collapse:separate;border-spacing:0;
  background:linear-gradient(180deg,#1a1c27,var(--card));
  border:1px solid var(--bd);border-radius:var(--r-l);overflow:hidden;box-shadow:var(--lip)}
.tbl th,.tbl td{text-align:left;padding:13px 16px;border-bottom:1px solid rgba(255,255,255,.05);font-size:14px}
.tbl th{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);
  background:rgba(255,255,255,.015)}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr{transition:background .13s}
.tbl tbody tr:hover{background:rgba(255,255,255,.028)}
.tbl td.r,.tbl th.r{text-align:right}
/* Вариант без собственной рамки — для таблицы ВНУТРИ панели: двойная рамка
   вокруг одного содержимого выглядит как ошибка вёрстки, потому что ею и является. */
.tbl--bare{background:none;border:0;border-radius:0;box-shadow:none}
.tbl--bare th,.tbl--bare td{padding:11px 0}
.tbl--bare th{background:none}

/* Мини-стол: шесть мест по овалу. Игрок должен видеть заполненность одним
   взглядом — список чисел «3/6» читается медленнее, чем картинка. */
.felt{
  position:relative;width:76px;height:44px;flex:none;border-radius:999px;
  background:radial-gradient(ellipse at 50% 40%,var(--felt),var(--felt-2));
  border:1px solid rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}
.felt i{position:absolute;width:9px;height:9px;border-radius:50%;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);
  transform:translate(-50%,-50%)}
.felt i.on{background:var(--ok);border-color:transparent;box-shadow:0 0 0 2px rgba(63,185,80,.22)}
.felt i:nth-child(1){left:50%;top:0}
.felt i:nth-child(2){left:96%;top:30%}
.felt i:nth-child(3){left:96%;top:70%}
.felt i:nth-child(4){left:50%;top:100%}
.felt i:nth-child(5){left:4%;top:70%}
.felt i:nth-child(6){left:4%;top:30%}

.stake{font-size:15px;font-weight:800;color:#fff;letter-spacing:-.01em}
.tag{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;
  padding:3px 8px;border-radius:7px;border:1px solid var(--bd);color:var(--mut)}
.tag--ok{color:#8fe3b0;border-color:rgba(143,227,176,.3);background:rgba(63,185,80,.08)}
.tag--warn{color:#ffd480;border-color:rgba(255,212,128,.3);background:rgba(210,153,34,.08)}
.tag--acc{background:var(--acc-grad);border-color:transparent;color:#fff}

.empty{
  padding:38px 26px;text-align:center;color:var(--mut);
  background:var(--card-2);border:1px dashed var(--bd);border-radius:var(--r-l);
}
.empty b{display:block;color:#fff;font-size:16.5px;font-weight:800;margin-bottom:8px}
.empty p{margin:0 auto;max-width:560px}

/* ---------------------------------------------------------------- шаги */
/* Нумерованные шаги. Раньше это была таблица с цифрами в первой ячейке: номера
   не выравнивались, и инструкция читалась как таблица данных. */
.steps{list-style:none;margin:0;padding:0;counter-reset:s}
.steps li{position:relative;padding:0 0 18px 42px;counter-increment:s;font-size:14px}
.steps li::before{
  content:counter(s);position:absolute;left:0;top:-1px;
  width:27px;height:27px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:12.5px;font-weight:800;color:#fff;background:var(--acc-grad);box-shadow:var(--lip);
}
/* Линия между номерами: она и делает список последовательностью, а не перечнем. */
.steps li::after{
  content:"";position:absolute;left:13px;top:29px;bottom:4px;width:1px;
  background:linear-gradient(180deg,rgba(139,92,246,.45),rgba(255,255,255,.06));
}
.steps li:last-child{padding-bottom:0}
.steps li:last-child::after{display:none}
.steps b{color:#fff}

/* Пары «что → сколько». Для коротких списков это честнее таблицы: таблица
   обещает сортировку и сравнение строк, которых тут нет. */
.kv{display:flex;flex-direction:column;gap:0}
.kv__r{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:11px 0;border-bottom:1px solid rgba(255,255,255,.05);font-size:14px}
.kv__r:last-child{border-bottom:0}
.kv__k{color:var(--mut)}
.kv__v{font-weight:700;color:#fff;text-align:right}

/* Большая доля — для рейкбека. Процент это главное число страницы, и оно обязано
   читаться первым, а не стоять абзацем в тексте. */
.big{display:flex;align-items:baseline;gap:10px;margin:0 0 4px}
.big__v{font-size:52px;font-weight:800;line-height:1;letter-spacing:-.04em;
  background:var(--acc-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.big__u{font-size:13px;font-weight:700;color:var(--mut)}

/* ---------------------------------------------------------------- формы */
.fld{margin-bottom:14px}
.fld label{display:block;font-size:12.5px;font-weight:600;color:#a8adbe;margin:0 0 7px}
.inp{
  width:100%;height:44px;padding:0 13px;border-radius:var(--r-m);background:#10111a;
  border:1px solid var(--bd);color:var(--txt);font:inherit;font-size:15px;
  transition:border-color .15s,box-shadow .15s;
}
.inp:focus{outline:none;border-color:rgba(139,92,246,.55);box-shadow:0 0 0 3px rgba(139,92,246,.14)}
textarea.inp{height:auto;padding:11px 13px;resize:vertical}
.hint{font-size:12.5px;color:var(--mut);margin-top:7px;line-height:1.5}

.note{
  padding:13px 15px;border-radius:var(--r-m);font-size:13.5px;
  background:rgba(139,92,246,.09);border:1px solid rgba(139,92,246,.22);
}
.note b{color:#fff}
.note--bad{background:rgba(248,81,73,.09);border-color:rgba(248,81,73,.26);color:#ffb4ab}
.note--bad b{color:#ffd5d0}
.note--ok{background:rgba(63,185,80,.09);border-color:rgba(63,185,80,.26);color:#8fe3b0}

/* ---------------------------------------------------------------- касса */
/* Выбор сети плитками с монетами — перенесено из казино (cx-coingrid). Список
   из двенадцати строк в выпадающем поле читается медленнее, чем сетка значков:
   игрок ищет СВОЮ монету, а не строку текста. */
.lbl{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mut);margin:0 0 9px}
.coins{display:grid;grid-template-columns:repeat(auto-fill,minmax(152px,1fr));gap:9px;margin-bottom:14px}
.coin{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:var(--r-m);
  background:var(--card-2);border:1px solid var(--bd);cursor:pointer;text-align:left;
  font:inherit;color:inherit;transition:background .14s,border-color .14s}
.coin:hover{background:var(--card-h);border-color:var(--bd-h)}
.coin.on{border-color:rgba(139,92,246,.55);background:rgba(139,92,246,.09);
  box-shadow:inset 0 0 0 1px rgba(139,92,246,.3)}
.coin img{width:28px;height:28px;flex:none;display:block}
.coin__t{min-width:0;display:flex;flex-direction:column;gap:1px}
.coin__n{font-size:13px;font-weight:800;color:#fff;letter-spacing:-.01em}
.coin__c{font-size:11px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Предупреждение про сеть. Отдельным видом, а не серой подписью: ошибка сети —
   это потерянный перевод, и она должна бросаться в глаза. */
.warn{display:flex;gap:8px;margin:0 0 16px;font-size:12.5px;color:#ffd480;line-height:1.45}
.warn::before{content:"!";flex:none;width:17px;height:17px;border-radius:50%;margin-top:1px;
  background:rgba(255,212,128,.16);border:1px solid rgba(255,212,128,.4);
  font-size:11px;font-weight:800;text-align:center;line-height:16px}
/* Пустое предупреждение не рисуется: текст в нём проставляет скрипт по
   выбранной сети, и до выбора оставался голый восклицательный знак. */
.warn:empty{display:none}


/* Оплата: QR слева, сумма и адрес справа. На телефоне — в колонку.
   Сумма и адрес ОБЯЗАТЕЛЬНО текстом рядом с кодом: если скрипт QR не
   загрузился, платёж всё равно должен быть возможен. */
.pay{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
.pay__qr{flex:none;background:#fff;border-radius:var(--r-m);padding:10px;
  box-shadow:var(--sh-2);line-height:0}
.pay__d{flex:1;min-width:240px}
.pay__d .fld:last-of-type{margin-bottom:10px}

/* Поле «значение + кнопка копировать». Копирование здесь не удобство, а защита:
   адрес, введённый руками, — это опечатка и перевод в пустоту. */
.copy{display:flex;gap:7px;align-items:stretch}
/* Узкий вариант: под сумму. Поле во всю ширину под «50.0001» выглядит пустым,
   и число в нём приходится искать глазами. */
.copy--sm{max-width:260px}
.inp--sm{max-width:200px}
.copy .inp{flex:1;min-width:0}
.copy .btn{flex:none;height:44px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px}
select.inp{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--mut) 50%),
                   linear-gradient(135deg,var(--mut) 50%,transparent 50%);
  background-position:calc(100% - 18px) 20px,calc(100% - 13px) 20px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:36px}

/* ---------------------------------------------------------------- кабинет */
/* Окно с боковым меню — перенесено из кабинета казино. Слева разделы, справа
   содержимое, баланс и крестик в шапке.
 *
 * Почему окно, а не страница с вкладками: кабинет — место, где игрок проводит
 * время не меньше, чем за столом (касса, история, безопасность). Вкладками это
 * выглядит как «ещё одна страница сайта», а не как отдельный инструмент. */
/* Окно фиксированной высоты: меню слева НЕ ЕЗДИТ, прокручивается только
   содержимое справа — как в кабинете казино.
 *
 * Высота считается от экрана, а не от содержимого: иначе на длинной истории
 * окно вытягивается на три экрана, и меню уезжает вверх ровно тогда, когда оно
 * нужнее всего. Нижний предел — чтобы на коротком экране окно не схлопнулось. */
.cab{
  display:grid;grid-template-columns:252px 1fr;
  height:calc(100vh - 150px);min-height:520px;max-height:860px;
  margin:14px 0 8px;
  background:linear-gradient(180deg,#15171f,#111219);
  border:1px solid var(--bd);border-radius:var(--r-xl);
  box-shadow:var(--sh-3),var(--lip);overflow:hidden;
}

/* min-height:0 обязателен в ОБОИХ местах — и на колонке, и на прокручиваемом
   блоке. Без него элемент сетки раздаётся под содержимое, overflow никогда не
   срабатывает, и прокрутка уезжает на всю страницу вместе с меню. */
.cab__side{display:flex;flex-direction:column;padding:18px 14px;min-height:0;
  overflow-y:auto;border-right:1px solid var(--bd);background:rgba(0,0,0,.18)}
.cab__me{display:flex;align-items:center;gap:12px;padding:0 6px 16px;
  border-bottom:1px solid var(--bd);margin-bottom:14px}
.cab__who{min-width:0}
.cab__nick{font-size:14.5px;font-weight:800;color:#fff;letter-spacing:-.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.cab__nav{display:flex;flex-direction:column;gap:3px}
.cab__i{display:flex;align-items:center;gap:12px;width:100%;
  padding:11px 14px;border-radius:999px;border:1px solid transparent;
  font:inherit;font-size:14px;font-weight:600;color:var(--mut);
  background:none;cursor:pointer;text-align:left;
  transition:background .14s,color .14s}
.cab__i svg{width:19px;height:19px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cab__i:hover{background:var(--card-2);color:#fff}
/* Активный пункт — БЕЛАЯ таблетка, как в кабинете казино (.cx-cab__nav .active).
   Белое на тёмном читается с любого расстояния и не спорит с акцентом, который
   в этом окне занят кнопками действий. */
.cab__i.on{background:#fff;color:#12131a;font-weight:700}
.cab__i.on svg{stroke:#12131a}

.cab__out{margin-top:auto;padding-top:14px;border-top:1px solid var(--bd)}
.cab__i--out{color:#a8adbe}
.cab__i--out:hover{background:rgba(248,81,73,.1);color:#ffb4ab}

.cab__main{display:flex;flex-direction:column;min-width:0;min-height:0}
.cab__hd{display:flex;align-items:center;gap:14px;padding:20px 24px;
  border-bottom:1px solid var(--bd)}
.cab__h{font-size:18px;font-weight:700;color:#fff;letter-spacing:-.02em;flex:1;min-width:0}
.cab__bal{display:inline-flex;align-items:center;gap:9px;height:40px;padding:0 14px;
  border-radius:11px;background:linear-gradient(180deg,#191b25,#141621);
  border:1px solid rgba(255,255,255,.1);box-shadow:var(--lip);flex:none}
.cab__bal__c{font-size:10.5px;font-weight:800;color:var(--acc);letter-spacing:.06em}
.cab__bal__v{font-size:15px;font-weight:800;color:#fff;letter-spacing:-.01em}
.cab__x{width:40px;height:40px;flex:none;border-radius:11px;display:flex;
  align-items:center;justify-content:center;border:1px solid var(--bd);
  color:var(--mut);transition:background .14s,color .14s,border-color .14s}
.cab__x svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.cab__x:hover{background:var(--card-h);color:#fff;border-color:var(--bd-h)}

.cab__body{padding:24px;flex:1;min-width:0;min-height:0;overflow-y:auto}
/* Тонкая полоса прокрутки: обычная серая на тёмном выглядит как заплатка. */
.cab__body::-webkit-scrollbar{width:9px}
.cab__body::-webkit-scrollbar-track{background:transparent}
.cab__body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:9px;
  border:2px solid transparent;background-clip:content-box}
.cab__body::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.2);background-clip:content-box}
.cab__body{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.16) transparent}
.cab__body .grid{gap:14px}

@media(max-width:900px){
  /* Боковое меню уезжает наверх строкой с прокруткой: 252 пикселя на 375 не
     оставляют содержимому ничего. */
  .cab{grid-template-columns:1fr;height:auto;min-height:0;max-height:none;
    border-radius:var(--r-l)}
  .cab__side{overflow-x:auto;overflow-y:visible}
  .cab__body{overflow:visible}
  .cab__side{flex-direction:row;align-items:center;gap:10px;overflow-x:auto;
    padding:10px 12px;border-right:0;border-bottom:1px solid var(--bd)}
  .cab__me{display:none}
  .cab__nav{flex-direction:row;gap:6px;flex:1}
  .cab__i{padding:9px 13px;white-space:nowrap;font-size:13.5px}
  .cab__i span{display:inline}
  .cab__out{margin:0;padding:0;border-top:0;border-left:1px solid var(--bd);padding-left:8px}
  .cab__out .cab__i span{display:none}
  .cab__hd{padding:14px 15px;gap:10px}
  .cab__h{font-size:17px}
  .cab__body{padding:15px}
}

/* ---------------------------------------------------------- профиль и история */
/* Перенесено из кабинета казино: тот же вид карточек, тех же размеров. */

.who-big{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.ava--lg{width:52px;height:52px;border-radius:15px;font-size:20px}
.who-big__n{font-weight:800;color:#fff;font-size:17px;letter-spacing:-.01em}
.who-big__s{font-size:12.5px;color:var(--mut);margin-top:2px}

/* Предупреждение со щитом. Отдельный вид, а не серая подпись: это объяснение
   паузы на вывод, и игрок должен прочесть его ДО того, как нажмёт «сохранить»,
   а не удивиться потом. */
.shield{display:flex;gap:10px;align-items:flex-start;margin:0 0 15px;padding:11px 13px;
  border-radius:var(--r-m);background:rgba(139,92,246,.07);border:1px solid rgba(139,92,246,.2);
  font-size:12.5px;color:#c9cbda;line-height:1.5}
.shield svg{width:17px;height:17px;flex:none;margin-top:1px;fill:none;stroke:var(--acc);
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.btn--out{color:#ffb4ab;border-color:rgba(248,81,73,.28)}
.btn--out:hover{background:rgba(248,81,73,.1);border-color:rgba(248,81,73,.45)}
.btn--out svg{stroke:currentColor}

/* Строка операции в истории: стрелка направления, название, ссылка. */
.op{display:flex;align-items:center;gap:11px}
.op__ic{width:28px;height:28px;flex:none;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:14px;font-weight:800;line-height:1}
.op__ic--in{background:rgba(63,185,80,.14);color:#8fe3b0;border:1px solid rgba(63,185,80,.3)}
.op__ic--out{background:rgba(248,81,73,.13);color:#ffb4ab;border:1px solid rgba(248,81,73,.28)}
.op__t{display:block;font-weight:700;color:#fff;font-size:13.5px}
.op__s{display:block;font-size:11.5px;color:var(--mut);margin-top:1px}

/* Сумма красится по НАПРАВЛЕНИЮ, пока операция прошла. Если не прошла —
   красным независимо от направления: зелёное «+50» у просроченного счёта
   читается как «деньги пришли», то есть прямо противоположно правде. */
.amt--in{color:#8fe3b0;font-weight:800}
.amt--out{color:#ffb4ab;font-weight:800}
.amt--bad{color:#f85149;font-weight:800;text-decoration:line-through;
  text-decoration-thickness:1px;text-decoration-color:rgba(248,81,73,.5)}
.amt--wait{color:#ffd480;font-weight:800}

.netcell{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:#cfd3e0}
.netcell img{width:22px;height:22px;flex:none;display:block}

/* Поле суммы с валютой внутри — как в кассе казино. Подпись снаружи читается
   как отдельное слово, а внутри поля сразу ясно, в чём вводят. */
.amt{position:relative;max-width:240px}
.amt .inp{padding-right:58px}
.amt__c{position:absolute;right:13px;top:50%;transform:translateY(-50%);
  font-size:12px;font-weight:800;color:var(--mut);pointer-events:none;letter-spacing:.04em}

/* ---------------------------------------------------------------- подвал */
/* margin-top:auto обязателен: body — flex-колонка на всю высоту экрана, и без
   него подвал короткой страницы (вход, пустая история) висит посередине, а под
   ним остаётся полоса фона. Отступ от содержимого даёт padding-bottom у main. */
.ftr{margin-top:auto;border-top:1px solid var(--bd);background:rgba(0,0,0,.2);
  position:relative;z-index:1}   /* поверх падающего фона */
/* Одна строка, как в казино: слева возраст и копирайт, справа ссылки плашками.
   Три колонки со ссылками, которые все есть в верхнем меню, подвал только
   удлиняли. */
.ftr__in{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:20px 0 24px}
.ftr__brand{display:flex;align-items:center;gap:13px;flex:1;min-width:240px}
/* Знак 18+ рисуется, а не картинкой: один запрос за 40 пикселей — это запрос,
   которого можно не делать. */
.ftr__18{flex:none;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:12px;font-weight:800;letter-spacing:.02em;
  color:var(--mut);border:1.5px solid var(--bd-h)}
.ftr__cr{display:flex;flex-direction:column;gap:3px;line-height:1.45}
.ftr__name{font-size:13px;font-weight:700;color:#cfd2e0}
.ftr__name b{background:var(--acc-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.ftr__y{font-weight:500;color:var(--dim)}
.ftr__warn{font-size:12px;color:var(--dim);max-width:52ch}
.ftr__nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-left:auto}
.ftr__nav a{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:9px;
  font-size:12px;font-weight:600;color:var(--mut);background:rgba(255,255,255,.04);
  border:1px solid var(--bd);transition:color .15s,background .15s,border-color .15s}
.ftr__nav a:hover{color:#fff;background:rgba(139,92,246,.14);border-color:rgba(139,92,246,.35)}
.ftr__nav svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
/* На широком экране уводим ссылки от кнопки чата в правом нижнем углу. */
@media(min-width:992px){.ftr__nav{margin-right:68px}}

/* ---------------------------------------------------------------- телефон */
.mnav{display:none}

@media(max-width:1000px){
  .grid--side{grid-template-columns:1fr}
  .ftr__in{gap:16px}
}

@media(max-width:900px){
  .wrap{padding:0 13px}
  .stats,.grid--4{grid-template-columns:repeat(2,1fr)}
  .grid--3{grid-template-columns:1fr}
  /* Панели в одну колонку. Две по 150 пикселей с таблицей внутри — это то, из-за
     чего страницы выглядели сломанными. */
  .grid--2{grid-template-columns:1fr}
  /* На телефоне меню — выпадающая панель во всю ширину, а не капсула:
     капсула внутри панели выглядела бы рамкой в рамке. Поэтому её фон,
     скругление и тень здесь снимаются явно. */
  /* Фон ПЛОТНЫЙ, без размытия. Полупрозрачная панель поверх баннера оставляла
     за пунктами меню чужой текст: на телефоне баннер занимает весь экран, и
     «Турниры» читались поверх заголовка. Размытие это не спасало — на части
     устройств backdrop-filter просто не применяется, и тогда панель становится
     стеклом без стекла. */
  .nav{display:none;position:absolute;top:58px;left:0;right:0;flex-direction:column;
    align-items:stretch;gap:2px;padding:10px 13px 14px;margin:0;
    border:0;border-bottom:1px solid var(--bd);border-radius:0;
    background:#0f1118;box-shadow:0 18px 40px rgba(0,0,0,.5)}
  .nav.open{display:flex}
  .nav a{padding:12px 13px;font-size:15px}
  .nav__auth{display:block;margin-top:6px;padding-top:12px;
    border-top:1px solid var(--bd);color:#fff}
  .hdr__in{height:58px;position:relative}
  .mnav{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;flex:none;
    background:var(--card-2);border:1px solid var(--bd);border-radius:var(--r-m);cursor:pointer;padding:0;order:-1}
  .mnav svg{width:20px;height:20px;stroke:#e8eaf0;fill:none;stroke-width:2;stroke-linecap:round}
  .logo{font-size:17px;margin-right:auto}
  .logo__m{width:26px;height:26px}
  .bal{height:40px;border-radius:12px;padding:0 5px 0 10px;gap:8px}
  .bal__amt{font-size:14.5px}
  /* На телефоне кнопка кабинета — круглая, только иконка: подпись там
     вытесняет баланс за край экрана. */
  .hprof{width:40px;height:40px;padding:0;border-radius:50%}
  .hprof__t{display:none}
  /* Переключатель остаётся в шапке и на телефоне: он узкий, а язык — первое,
     что ищет человек, попавший не на свой язык. Жмём только отступы. */
  .lang__btn{height:40px;padding:0 10px;gap:6px}
  .ava{width:36px;height:36px}
  /* Таблицы прокручиваются внутри своей карточки, а не растягивают страницу —
     то же правило, что в админке казино. */
  .scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r-l);
    border:1px solid var(--bd)}
  .scroll .tbl{border-radius:0;border:0}
  .tbl th,.tbl td{padding:11px 13px;white-space:nowrap}
  .tbl--bare th,.tbl--bare td{white-space:normal;padding:10px 0}
  /* Поля от 16px: иначе iOS зумит страницу при фокусе и назад не вернуться. */
  .inp{font-size:16px}
  .sec{margin-top:24px}
  .sec__h{font-size:18px}
  .stat__val{font-size:22px}
  .hero{padding:22px 18px;border-radius:var(--r-l)}
  .hero__h{font-size:25px}
  .hero__art{display:none}
  .big__v{font-size:44px}
}

@media(max-width:560px){
  .ftr__in{flex-direction:column;text-align:center;gap:18px;
    /* Запас снизу под кнопку чата: без него она ложится прямо на последние
       ссылки подвала, и нажать «Контакты» на телефоне нельзя. */
    padding-bottom:80px}
  .ftr__brand{flex-direction:column;flex:none;min-width:0;text-align:center}
  .ftr__cr{align-items:center}
  .ftr__nav{margin:0;width:100%;justify-content:center}
  .pay{gap:14px}
  .pay__qr{margin:0 auto}
  .pay__d{min-width:0;width:100%}
}

@media(max-width:560px){
  /* В шапке помещается ровно одна кнопка. Оставляем главное действие —
     регистрацию; «Войти» уехал в выпадающее меню. */
  .hdr .btn--hd:not(.btn--acc){display:none}
  .lang__btn{padding:0 9px}
  /* У вошедшего игрока в шапке четыре элемента вместо двух, и они не влезают.
     Убираем то, без чего можно: название рядом со значком и подпись валюты
     рядом с суммой. Сама сумма и кнопки остаются целиком. */
  .logo__t{display:none}
  .bal__cur{display:none}
  .bal{padding:0 5px 0 7px;gap:7px}
  .hdr__in{gap:9px}
}

@media(max-width:480px){
  .coins{grid-template-columns:1fr 1fr;gap:7px}
  .coin{padding:9px 10px;gap:9px}
  .coin img{width:24px;height:24px}
  .stats,.grid--4{grid-template-columns:1fr 1fr;gap:10px}
  .stat{padding:13px 14px}
  .felt{width:62px;height:36px}
  .hero__h{font-size:22px}
  .hero__b .btn{width:100%}
}

/* Отключение анимаций по настройке системы. Для части людей движение на экране —
   причина головной боли, а не украшение. */
@media(prefers-reduced-motion:reduce){
  .tag--soon{animation:none}

  /* Задержку гасим вместе с длительностью. Без этого строки с animation-delay
     и fill-mode:both остаются в начальном состоянии (прозрачными) всю свою
     задержку: длительность-то ноль, а ждать всё равно надо. На экране это
     выглядит как пропавшие строки таблицы. */
  *{animation-duration:.001ms !important;animation-delay:0ms !important;
    animation-iteration-count:1 !important;transition-duration:.001ms !important}
  #rain{display:none}
  a.stat:hover{transform:none}
}

/* ================================================================ стол */
/* Стол — единственный экран, где игрок проводит часы. Поэтому здесь важнее не
   «богато», а читаемо: стек и банк крупные, чужие карты не отвлекают, ход
   соперника виден периферийным зрением. */

.tbl-wrap{background:linear-gradient(180deg,#1a1c27,var(--card));
  border:1px solid var(--bd);border-radius:var(--r-l);padding:16px;margin-top:4px;box-shadow:var(--lip)}

.clock{height:3px;background:rgba(255,255,255,.06);border-radius:3px;overflow:hidden;margin-bottom:14px}
.clock__bar{height:100%;width:0;background:var(--acc);transition:width .25s linear}
.clock__bar--hot{background:var(--bad)}

/* СТОЛ.
 *
 * Настоящий овал-рейстрек, а не плашка. Было `border-radius:999px/72px` при
 * высоте по содержимому: получалась линза со срезанными боками, на которой
 * шесть мест лежали сеткой 3×2 и перекрывали банк в центре. Выглядело это не
 * как стол, а как список прямоугольников на зелёном фоне.
 *
 * Теперь форму держит пропорция (aspect-ratio), а не текст внутри, скругление
 * полное, и места стоят ПО ПЕРИМЕТРУ, оставляя центр банку и борду. Ровно так
 * устроен стол в любом руме, и не из-за красоты: игрок должен одним взглядом
 * видеть, кто где сидит и сколько поставил, не читая.
 */
.felt-big{
  position:relative;
  width:100%;max-width:900px;margin:34px auto;
  aspect-ratio:1000/520;
  border-radius:999px;
  background:
    radial-gradient(ellipse at 50% 38%,#17644a,var(--felt) 45%,var(--felt-2) 100%);
  /* Борт. Два слоя: тёмное дерево снаружи и светлый кант изнутри — без канта
     зелёное поле сливается с бортом и стол выглядит плоским. */
  border:14px solid #2a1d13;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.07),
    inset 0 10px 40px rgba(0,0,0,.35),
    0 22px 50px rgba(0,0,0,.5);
}

/* Центр: банк и борд. Места его не перекрывают — они по краям. */
.felt-big__mid{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;gap:12px;
  /* Ширина центра подобрана так, чтобы боковые таблички до него не доставали:
     при 70% на планшете место слева налезало на борд. Пять карт по 36 с
     промежутками — это 208 пикселей, в 360 помещаются с запасом. */
  pointer-events:none;width:min(360px,56%);
}
.pot{display:flex;align-items:baseline;gap:9px;
  padding:5px 14px;border-radius:999px;
  background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.09)}
.pot__lab{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.5)}
.pot__v{font-size:22px;font-weight:800;color:#fff;letter-spacing:-.02em}
.pot__st{font-size:11px;color:rgba(255,255,255,.5)}
.board{display:flex;gap:8px;min-height:66px;align-items:center;justify-content:center}

/* ИГРАЛЬНАЯ КАРТА — класс `.pc`, не `.card`.
 *
 * Имя `card` занято карточкой-панелью в app.css. Когда оба компонента звались
 * одинаково, правило игральной карты перебивало правило панели: каждая панель
 * на сайте становилась белым прямоугольником 34×48, из которого вываливался
 * текст. Разметку карт выдаёт assets/js/table.js — переименовывать надо в двух
 * местах сразу.
 *
 * Карты рисуем, а не грузим картинками: шесть мест по две карты плюс борд — это
 * 17 изображений на экран, и на телефоне они грузились бы дольше самой раздачи. */
/* Карты КРУПНЕЕ прежних 36×50 и 46×64. На снимке со стола было видно главное:
   масть и достоинство приходилось выискивать, а это то, ради чего на стол и
   смотрят. Борд — 54×75, карманные карты — 40×56. */
.pc{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  width:54px;height:75px;border-radius:9px;background:linear-gradient(180deg,#fff,#e9ebf2);
  color:#14161c;font-weight:800;line-height:1;flex:none;
  box-shadow:0 3px 8px rgba(0,0,0,.45),inset 0 -2px 0 rgba(0,0,0,.07);
  /* Переход — здесь же, а не отдельным правилом ниже: второе объявление
     `.pc` перебивало бы это целиком (так `.card` однажды стала картой). */
  transition:opacity .25s,box-shadow .25s,transform .25s,filter .25s}
.pc b{font-size:25px}
.pc i{font-size:20px;font-style:normal;margin-top:1px}
.pc--red{color:#d12b3a}
.pc--back{background:
    repeating-linear-gradient(45deg,#2f3860,#2f3860 4px,#243055 4px,#243055 8px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 3px 8px rgba(0,0,0,.45)}

/* ---- места по периметру ---- */
/* Своё место всегда внизу по центру, остальные по часовой от него (поворот
   делает table.js). Шесть точек посадки — те же, что у мини-стола в лобби,
   чтобы лобби и стол читались как одна картинка. */
.seats{position:absolute;inset:0;z-index:2}
.seat{position:absolute;transform:translate(-50%,-50%);display:flex;justify-content:center}
.seat--p0{left:50%;top:93%}
.seat--p1{left:13%;top:76%}
.seat--p2{left:13%;top:24%}
.seat--p3{left:50%;top:7%}
.seat--p4{left:87%;top:24%}
.seat--p5{left:87%;top:76%}

.seat__box{
  display:flex;align-items:center;gap:8px;min-height:50px;padding:6px 10px;
  /* Ширина по содержимому с потолком: фиксированные 182 растягивали табличку
     под коротким ником и оставляли дыру там, где карт нет. */
  width:max-content;max-width:218px;
  border-radius:14px;
  background:linear-gradient(180deg,rgba(23,25,35,.94),rgba(14,15,21,.94));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 8px 20px rgba(0,0,0,.45),var(--lip);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:border-color .16s,box-shadow .16s,opacity .16s;
}
.seat__ava{position:relative;width:34px;height:34px;flex:none;border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:800;color:#fff;background:var(--acc-grad)}
/* Кнопка дилера — кружок на углу аватара, а не буква в строке ника: в строке
   она съедала место у длинных ников и терялась среди букв. */
.seat__btn{position:absolute;right:-5px;bottom:-5px;width:17px;height:17px;border-radius:50%;
  background:#fff;color:#14161c;font-size:10px;font-weight:800;line-height:17px;text-align:center;
  box-shadow:0 1px 3px rgba(0,0,0,.5)}
.seat__who{display:flex;flex-direction:column;min-width:0;flex:1;gap:1px}
.seat__nick{font-size:12.5px;font-weight:700;color:#fff;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.seat__stack{font-size:13px;font-weight:800;color:#8fe3b0;letter-spacing:-.01em}
.seat__cards{display:flex;gap:3px;flex:none}
.seat__cards:empty{display:none}
.seat__cards .pc{width:40px;height:56px;border-radius:7px}
.seat__cards .pc b{font-size:18px}
.seat__cards .pc i{font-size:14px}

.seat__tag{position:absolute;left:50%;top:-9px;transform:translateX(-50%);
  padding:1px 8px;border-radius:999px;font-size:9.5px;font-weight:800;
  text-transform:uppercase;letter-spacing:.08em;white-space:nowrap;
  background:#2a2d3a;color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.12)}
.seat__tag--allin{background:var(--acc-grad);color:#fff;border-color:transparent}
/* «Ждёт раздачи» и «встаёт» — состояния ожидания, а не отказа от игры. */
.seat__tag--wait{background:rgba(255,212,128,.16);color:#ffd480;border-color:rgba(255,212,128,.32)}

/* Своё место, чей ход, сбросивший, пропускающий. Четыре состояния, и каждое
   должно читаться периферийным зрением — игрок смотрит в центр стола. */
.seat--me .seat__box{border-color:rgba(139,92,246,.65);
  box-shadow:0 0 0 1px rgba(139,92,246,.35),0 8px 22px rgba(0,0,0,.5)}
.seat--act .seat__box{border-color:var(--ok);
  box-shadow:0 0 0 2px rgba(63,185,80,.3),0 0 22px rgba(63,185,80,.22),0 8px 22px rgba(0,0,0,.5)}
.seat--fold .seat__box{opacity:.4}
.seat--out .seat__box{opacity:.62}

/* Свободное место: пунктирный кружок с плюсом. Раньше это был прямоугольник в
   треть стола с кнопкой посередине — шесть таких закрывали всё поле. */
.seat__sit,.seat__empty{
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  padding:8px 14px;border-radius:999px;font:inherit;font-size:12.5px;font-weight:700;
  border:1px dashed rgba(255,255,255,.28);background:rgba(0,0,0,.28);color:rgba(255,255,255,.72);
}
.seat__sit{cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.seat__sit:hover{background:var(--acc-grad);border-color:transparent;border-style:solid;color:#fff}
.seat__plus{font-size:15px;font-weight:800;line-height:1}
.seat__empty{opacity:.55}

/* Фишка ставки — между местом и центром стола. У нижнего ряда сверху, у
   верхнего снизу: так она всегда оказывается со стороны банка. */
/* Ставка: столбик фишек и сумма рядом. Плашка тёмная, а не жёлтая, — цвет
   теперь несут сами фишки, и жёлтый фон с ними спорил. */
.seat__chip{
  position:absolute;left:50%;transform:translateX(-50%);
  display:inline-flex;align-items:flex-end;gap:7px;--sz:16px;
  padding:4px 10px 4px 8px;border-radius:999px;
  font-size:12px;font-weight:800;color:#fff;white-space:nowrap;
  background:rgba(12,14,20,.86);border:1px solid rgba(255,255,255,.14);
  box-shadow:0 4px 12px rgba(0,0,0,.5);
}
.seat__chip__v{line-height:16px}
/* Ставка — ЦЕЛИКОМ за пределами плашки. На -14px фишка наезжала на ник и
   стек: было непонятно, это ставка или часть стека. */
.seat--p0 .seat__chip,.seat--p1 .seat__chip,.seat--p5 .seat__chip{bottom:calc(100% + 7px)}
.seat--p2 .seat__chip,.seat--p3 .seat__chip,.seat--p4 .seat__chip{top:calc(100% + 7px)}

.ctl{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:16px;min-height:42px}

/* ПАНЕЛЬ ДЕЙСТВИЙ.
 *
 * Прежние кнопки были обычными `.btn` в ряд: одинаковые, мелкие и без сумм. За
 * столом в них попадают пальцем за секунду до автосброса, и «сбросить» рядом с
 * «колл» одинакового вида — это потерянные деньги, а не вопрос вкуса. Поэтому
 * кнопки крупные, разного цвета по смыслу и с суммой прямо на себе. */
.act{display:flex;flex-direction:column;gap:8px;width:100%}
.act__btns{display:flex;gap:8px;flex-wrap:wrap}
/* Кнопка компактная: в один ряд с суммой, высотой как поле ввода. Крупные
   «плитки» в два этажа занимали треть панели и выглядели чужеродно. */
.actb{
  flex:0 1 auto;min-width:104px;height:42px;padding:0 16px;border-radius:11px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font:inherit;font-size:13.5px;font-weight:700;letter-spacing:.01em;
  border:1px solid var(--bd-h);background:var(--card-2);color:var(--txt);
  transition:transform .12s,filter .15s,background .15s,border-color .15s;
}
.actb b{font-size:13.5px;font-weight:800;letter-spacing:-.01em}
.actb:hover{filter:brightness(1.12)}
/* Нажатие видно: кнопка проседает. Без этого на телефоне непонятно, попал ли. */
.actb:active{transform:translateY(1px)}
.actb--fold{background:rgba(248,81,73,.1);border-color:rgba(248,81,73,.38);color:#ffb4ab}
.actb--check{background:rgba(255,255,255,.06)}
.actb--call{background:linear-gradient(180deg,#3fb950,#2b8a3a);border-color:transparent;color:#fff}
.actb--raise{background:var(--acc-grad);border-color:transparent;color:#fff}

/* Ползунок повышения: доли банка сверху, ползунок и точная сумма снизу. */
.rs{display:flex;flex-direction:column;gap:8px}
.rs__row{display:flex;gap:8px;align-items:center}
.rs__q{
  flex:0 0 auto;min-width:40px;height:30px;padding:0 11px;border-radius:8px;cursor:pointer;
  font:inherit;font-size:13px;font-weight:700;
  border:1px solid var(--bd);background:var(--card-2);color:var(--mut);
  transition:background .15s,color .15s,border-color .15s}
.rs__q:hover{background:var(--card-h);color:#fff;border-color:var(--bd-h)}
.rs__hint{margin-left:auto;font-size:12.5px;font-weight:700;color:var(--mut);white-space:nowrap}
.rs__v{width:98px;height:38px;flex:none;text-align:center}
.rs__sl{flex:1;min-width:120px;height:34px;background:none;border:0;cursor:pointer;
  -webkit-appearance:none;appearance:none}
.rs__sl::-webkit-slider-runnable-track{height:8px;border-radius:999px;
  background:linear-gradient(90deg,rgba(139,92,246,.75),rgba(139,92,246,.2))}
.rs__sl::-moz-range-track{height:8px;border-radius:999px;
  background:linear-gradient(90deg,rgba(139,92,246,.75),rgba(139,92,246,.2))}
.rs__sl::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:22px;height:22px;margin-top:-7px;border-radius:50%;
  background:linear-gradient(180deg,#fff,#d8d9e2);border:1px solid rgba(0,0,0,.35);
  box-shadow:0 2px 6px rgba(0,0,0,.5)}
.rs__sl::-moz-range-thumb{width:22px;height:22px;border-radius:50%;
  background:linear-gradient(180deg,#fff,#d8d9e2);border:1px solid rgba(0,0,0,.35);
  box-shadow:0 2px 6px rgba(0,0,0,.5)}
.rs__sl:focus-visible{outline:2px solid var(--acc);outline-offset:4px}

.tcols{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.tcols__h{margin:0 0 10px;font-size:14px;font-weight:800;color:#fff}
.tlog{height:176px;overflow-y:auto;font-size:12.5px;color:var(--mut);
  display:flex;flex-direction:column;gap:3px}
.tlog__i{padding:3px 0;border-bottom:1px solid rgba(255,255,255,.04)}

.modal{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.66);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;padding:16px}
.modal__box{width:100%;max-width:380px;
  background:linear-gradient(180deg,#1b1d28,var(--card));
  border:1px solid var(--bd-h);border-radius:var(--r-l);padding:20px;box-shadow:var(--sh-3)}

/* Планшет: овал остаётся, таблички мест ужимаются. */
@media(max-width:900px){
  .tcols{grid-template-columns:1fr}
  .felt-big{aspect-ratio:1000/600;border-width:10px;margin:28px auto}
  /* Ширины подобраны по расчёту, а не на глаз: на 760 пикселях боковая табличка
     шириной 148 и центр в 56% пересекались на полтора сантиметра. */
  .seat__box{max-width:162px}
  .felt-big__mid{width:min(300px,46%)}
  .seat__box{gap:6px;padding:5px 8px;min-height:44px}
  .seat__ava{width:28px;height:28px;border-radius:9px;font-size:12px}
  .seat__nick{font-size:11.5px}
  .seat__stack{font-size:12px}
  .seat__cards .pc{width:26px;height:36px}
  .seat__cards .pc b{font-size:12px}
  .seat__cards .pc i{font-size:9px}
  .pc{width:38px;height:53px}
  .pc b{font-size:17px}
  .pc i{font-size:13px}
  .pot__v{font-size:19px}
  .board{min-height:55px;gap:6px}
  .potpile{--sz:18px;min-height:24px;margin-bottom:8px}
  .seat__chip{--sz:14px;gap:6px;padding:3px 9px 3px 7px}
  .ctl{position:sticky;bottom:0;background:var(--card);padding:10px 16px 2px;
    margin:12px -16px -16px;border-top:1px solid var(--bd);z-index:5}
  .rs__v{width:88px}
  .rs__q{min-width:36px;padding:0 9px}
  .actb{flex:1 1 92px;min-width:0;padding:0 10px}
}

/* Телефон: овала больше нет.
 *
 * Шесть табличек по периметру на 375 пикселях не помещаются ни при каком
 * размере шрифта: боковые места налезают на борт, а в центре не остаётся места
 * под борд. Поэтому поле становится прямоугольником, банк и борд уходят
 * наверх, а места — в два столбца. Это честнее, чем овал, на котором ничего
 * не разобрать. Порог 700, а не 620: между ними боковые таблички уже налезают
 * на центр — проверено расчётом ширин. */
@media(max-width:700px){
  .tbl-wrap{padding:12px}
  .felt-big{aspect-ratio:auto;border-radius:var(--r-xl);border-width:6px;
    padding:14px 12px;margin:0}
  .felt-big__mid{position:static;transform:none;width:auto;margin:0 0 14px}
  .seats{position:static;display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
  /* Место — колонка «табличка, под ней фишка». min-width:0 обязателен: без него
     ячейка сетки не даёт содержимому ужаться, и таблички вылезают за экран. */
  .seat{position:static;transform:none;display:flex;flex-direction:column;gap:5px;min-width:0}
  /* Содержимое таблички переносится по строкам, а ник не ужимается в ноль.
     Без переноса аватар, ник, стек, две карты и метка делят 160 пикселей —
     и ник сжимался до нулевой ширины, а метка налезала на стек. */
  .seat__box{width:auto;max-width:none;min-width:0;min-height:56px;
    flex-wrap:wrap;gap:7px 13px}
  .seat__who{flex:1 1 auto;min-width:58px}
  .seat__cards{order:3}
  .seat__tag{order:4}
  /* Фишка ставки — под табличкой. Без align-self она как элемент колонки
     растягивается во всю ширину и превращается в жёлтый блин. */
  .seat__chip{position:static;transform:none;align-self:center;margin:0;--sz:14px}
  .potpile{--sz:17px;min-height:22px;margin-bottom:8px}
  /* Метка «пропускает»/all-in встаёт в строку таблички: висеть ей над ячейкой
     сетки негде — она налезала бы на соседний ряд. */
  .seat__tag{position:static;transform:none;flex:none;font-size:9px;padding:2px 6px}
  /* Свободное место — пилюля по центру ячейки. Рамку ячейке не даём: у самой
     пилюли она уже пунктирная, получилось бы две рамки подряд. */
  .seat--free{align-items:center;justify-content:center;min-height:56px}
}


/* ---------------------------------------------------------------- вопросы */
/* Аккордеон на <details>: без единой строки JS, работает с клавиатуры и
   открывается по якорю. Скрипт здесь был бы лишним способом сломать. */
.faq{display:flex;flex-direction:column;gap:26px;margin-top:22px}
.faq__gh{font-size:15px;font-weight:700;letter-spacing:.01em;margin:0 0 10px;color:var(--txt)}
.faq__i{background:var(--card);border:1px solid var(--bd);border-radius:var(--r-m);margin-bottom:8px}
.faq__i[open]{border-color:var(--bd-h)}
.faq__i summary{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 17px;cursor:pointer;font-weight:600;font-size:14.5px;color:var(--txt);
  list-style:none;
}
.faq__i summary::-webkit-details-marker{display:none}
.faq__i summary:hover{color:#fff}
.faq__x{position:relative;width:13px;height:13px;flex:none}
.faq__x::before,.faq__x::after{
  content:"";position:absolute;background:var(--mut);border-radius:2px;
  transition:transform .18s,background .18s;
}
.faq__x::before{left:0;right:0;top:5.5px;height:2px}
.faq__x::after{top:0;bottom:0;left:5.5px;width:2px}
.faq__i[open] .faq__x::after{transform:scaleY(0)}
.faq__i[open] .faq__x::before{background:var(--acc)}
.faq__a{padding:0 17px 15px;color:var(--mut);font-size:14px;line-height:1.65;max-width:76ch}

/* Контакт крупно: адрес поддержки переписывают с экрана руками. */
.ctc{display:inline-block;font-size:17px;font-weight:700;color:#fff;
  word-break:break-all;margin-bottom:6px}
.ctc:hover{color:var(--acc)}

/* ------------------------------------------- панель лобби над списком */
/* Заголовок, живые числа и фильтры — одной рамкой. Раньше это были три блока
   подряд: полоса статистики во всю ширину (мелкие числа на пустом поле
   выглядели как недогрузившаяся страница), подпись «живой список» ни о чём и
   строка фильтров вразнобой. Всё это про один список. */
.lobbar{background:var(--card);border:1px solid var(--bd);border-radius:var(--r-m);
  margin-bottom:16px}
.lobbar__top{display:flex;align-items:center;justify-content:space-between;gap:18px;
  flex-wrap:wrap;padding:15px 18px}
.lobbar__h{font-size:20px;font-weight:700;letter-spacing:-.02em;margin:0;line-height:1.15}
.lobbar__sub{display:block;font-size:12.5px;color:var(--mut);margin-top:3px}

/* Числа компактной группой у правого края: разнесённые по всей ширине, они
   читались как четыре отдельных блока, а не как состояние рума. */
.lnums{display:flex;align-items:center;gap:0;flex-wrap:wrap}
.lnum{display:inline-flex;align-items:baseline;gap:6px;padding:0 15px;position:relative;
  font-size:12.5px;color:var(--mut);white-space:nowrap}
.lnum+.lnum::before{content:"";position:absolute;left:0;top:2px;bottom:1px;width:1px;
  background:var(--bd)}
.lnum b{font-size:19px;font-weight:700;color:#fff;letter-spacing:-.02em;line-height:1}
.lnum .pulse{align-self:center;margin-right:-1px}

.lobbar__flt{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;padding:12px 18px;border-top:1px solid var(--bd)}
.flt__g{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.chip__n{
  display:inline-block;min-width:18px;padding:0 5px;margin-left:7px;border-radius:9px;
  background:rgba(255,255,255,.08);font-size:11px;font-weight:700;line-height:17px;
  text-align:center;color:var(--mut);
}
.chip.on .chip__n{background:rgba(0,0,0,.22);color:#fff}

/* Пустая ячейка — прочерк, а не ноль: ноль читается как измеренное значение,
   хотя раздач просто не было. */
.tbl td.dim{color:var(--dim)}


@media(max-width:700px){
  .live{padding:2px 4px}
  .live__i{padding:10px 14px;min-width:130px;flex:1 1 40%}
  .live__i+.live__i::before{display:none}
  .live__n{font-size:20px}
}

/* Ник: поле и кнопка в одну строку — форма из одного поля не заслуживает
   отдельного блока с кнопкой под ним. */
.nickf{margin-top:16px;padding-top:15px;border-top:1px solid var(--bd)}
.nickf__l{display:block;font-size:12px;color:var(--mut);margin-bottom:7px}
.nickf__r{display:flex;gap:8px}
.nickf__r .inp{flex:1;min-width:0}
.nickf__r .btn{flex:none}
.nickf .hint{margin-top:7px}

/* ------------------------------------------------- столы карточками */
/* Игрок выбирает стол глазами: где сидят люди и куда можно сесть. Овал с
   шестью местами отвечает на это за долю секунды, не читая ни одной цифры. */
.tcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:14px}
/* ИМЕНА .gt*, А НЕ .tc*.
 *
 * Карточка стола и карточка турнира обе звались .tc и объявляли .tc__hd и
 * .tc__ft по-разному. Побеждали правила того компонента, который объявлен ниже
 * в файле, — то есть вид карточки стола зависел от того, что написано в блоке
 * турниров. Ровно эта ошибка однажды превратила панели в игральные карты
 * (см. bin/layout_check.php). Теперь имена разные и оба в списке проверки. */
.gt{
  background:var(--card);border:1px solid var(--bd);border-radius:var(--r-m);
  padding:14px 14px 16px;display:flex;flex-direction:column;gap:12px;
  transition:border-color .16s,transform .16s;
}
.gt:hover{border-color:var(--bd-h);transform:translateY(-2px)}
/* Живой стол подсвечен рамкой: в списке из двадцати столов взгляд должен
   сразу падать туда, где идёт игра, а не перебирать цифры. */
.gt--live{border-color:rgba(63,185,80,.3)}
.gt__hd{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.gt__name{font-weight:700;font-size:15px;letter-spacing:-.01em}
.gt__lim{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex:none}
.gt__stake{font-size:13px;color:var(--mut);font-weight:600;white-space:nowrap}
/* Диапазон закупки. Пока лимиты были микро, он не был нужен: «вход 0.40–2.00»
   не влияет ни на чьё решение. С появлением 5/10 и 25/50 влияет на всё — на
   столе с блайндами 25/50 закупка начинается с тысячи долларов, и узнавать об
   этом в окне закупки поздно. */
.gt__in{font-size:11px;color:var(--dim);white-space:nowrap;letter-spacing:.01em}

/* Сукно. Радиальная подсветка к центру — так стол читается столом, а не
   зелёной таблеткой. */
.felt2{position:relative;width:100%;aspect-ratio:1.9/1;min-height:116px}
.felt2__oval{
  position:absolute;left:12%;right:12%;top:16%;bottom:16%;border-radius:999px;
  background:radial-gradient(ellipse at 50% 38%,#17644a 0%,var(--felt) 55%,var(--felt-2) 100%);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.05), inset 0 10px 24px rgba(0,0,0,.35),
             0 8px 22px rgba(0,0,0,.35);
}
.felt2__s{
  position:absolute;width:15px;height:15px;margin:-7.5px 0 0 -7.5px;border-radius:50%;
  background:#1b1d27;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.12);
}
.felt2__s.on{
  background:var(--ok);box-shadow:0 0 0 3px rgba(63,185,80,.18),0 0 10px rgba(63,185,80,.45);
}
.felt2__mid{
  position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;align-items:center;gap:1px;pointer-events:none;
}
.felt2__pot{font-size:17px;font-weight:700;color:#fff;line-height:1.1;
  text-shadow:0 1px 6px rgba(0,0,0,.5)}
.felt2__cap{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(255,255,255,.52)}

.gt__ft{display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  font-size:12.5px;flex-wrap:wrap}
.gt__seats b{font-size:15px;color:#fff}
.gt__hh{font-size:12.5px;color:var(--txt)}
.gt__b{width:100%;justify-content:center;text-align:center}

/* Занятое место чуть дышит — стол выглядит живым, а не снимком. Выключается
   вместе со всей анимацией при prefers-reduced-motion (правило ниже в файле). */
@keyframes seatbeat{0%,100%{box-shadow:0 0 0 3px rgba(63,185,80,.18),0 0 10px rgba(63,185,80,.45)}
  50%{box-shadow:0 0 0 5px rgba(63,185,80,.10),0 0 14px rgba(63,185,80,.6)}}
.tc--live .felt2__s.on{animation:seatbeat 2.6s ease-in-out infinite}
.tc--live .felt2__s.on:nth-child(3){animation-delay:.4s}
.tc--live .felt2__s.on:nth-child(4){animation-delay:.8s}
.tc--live .felt2__s.on:nth-child(5){animation-delay:1.2s}

/* ------------------------------------------------------ профиль в кабинете */
/* Ритм 1 — 2 — 1: широкая шапка, две равные формы, журнал во всю ширину.
   Масонри из панелей разной высоты выглядело случайным — колонки обрывались
   на разных уровнях, и глазу не за что было зацепиться. */
.prof{display:flex;flex-direction:column;gap:14px}
.prow{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
@media(max-width:820px){.prow{grid-template-columns:1fr}}

.pcard{background:var(--card);border:1px solid var(--bd);border-radius:var(--r-m);padding:18px}
.pcard__h{font-size:13.5px;font-weight:700;letter-spacing:.01em;margin-bottom:14px}
.pcard--me{padding-bottom:16px}

.pme{display:flex;align-items:center;gap:13px;flex-wrap:wrap}
.pme__t{flex:1;min-width:0}
.pme__n{font-size:19px;font-weight:700;letter-spacing:-.01em;line-height:1.2}
.pme__s{font-size:12.5px;color:var(--mut);margin-top:2px}
.pme__tag{flex:none}

/* Факты строкой, а не списком в столбик: их пять, и столбиком они
   растягивали карточку на пол-экрана ради пяти коротких значений. */
.pfacts{
  /* 108, а не 130: фактов пять, и при ширине окна 920 они обязаны встать в один
     ряд. С порогом 130 влезало четыре, пятый уезжал вниз один и оставлял в
     полоске дыру на три пустые ячейки. */
  display:grid;grid-template-columns:repeat(auto-fit,minmax(108px,1fr));gap:1px;
  margin:16px 0 0;background:var(--bd);border:1px solid var(--bd);border-radius:var(--r-s);
  overflow:hidden;
}
.pfact{background:var(--card);padding:11px 13px;display:flex;flex-direction:column;gap:2px;min-width:0}
/* Все ячейки одной ширины: растянутые на две колонки логин и почта оставляли
   в сетке дыру — пятая ячейка не влезала в строку и уезжала вниз одна. */
.pfact__v{font-size:14px;font-weight:700;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pfact__l{font-size:11.5px;color:var(--mut)}

/* Ник: поле и кнопка в одну строку — форма из одного поля не заслуживает
   отдельной карточки с кнопкой под ним. */
.nickf{margin-top:16px;padding-top:15px;border-top:1px solid var(--bd)}
.nickf__l{display:block;font-size:12px;color:var(--mut);margin-bottom:7px}
.nickf__r{display:flex;gap:8px}
.nickf__r .inp{flex:1;min-width:0}
.nickf__r .btn{flex:none}
.nickf .hint{margin-top:7px}

.shield--wide{margin:0}

/* Журнал изменений: три колонки одной сеткой, а не пары «ключ — значение».
   Событие, время и адрес выстраиваются по вертикали и читаются столбцами. */
.slog{display:flex;flex-direction:column}
.slog__r{
  display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:baseline;
  padding:10px 0;border-bottom:1px solid var(--bd);font-size:13px;
}
.slog__r:last-child{border-bottom:0}
.slog__d,.slog__i{color:var(--mut);font-size:12px;white-space:nowrap}
@media(max-width:620px){
  .slog__r{grid-template-columns:1fr auto}
  .slog__i{grid-column:1/-1;font-size:11.5px}
}

/* Сортировка рядом с фильтрами: отдельной строкой она выглядит как форма. */
.srt__s{
  appearance:none;-webkit-appearance:none;
  background:var(--card) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2 4.5 6 8.5l4-4' fill='none' stroke='%238b90a2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat right 10px center;background-size:12px 12px;
  border:1px solid var(--bd);border-radius:var(--r-s);color:var(--txt);
  font:inherit;font-size:13px;font-weight:600;padding:8px 30px 8px 12px;cursor:pointer;
}
.srt__s:hover{border-color:var(--bd-h)}
.srt__s:focus{outline:none;border-color:var(--acc)}
@media(max-width:760px){
  .lobbar__top{padding:13px 14px;gap:12px}
  .lnums{width:100%;justify-content:space-between;gap:0}
  .lnum{padding:0 10px;flex:1 1 auto;justify-content:center}
  .lnum:first-child{padding-left:0}
  .lnum:last-child{padding-right:0}
  .lobbar__flt{padding:11px 14px}
  .flt__g{width:100%}
  .srt__s{width:100%}
}

/* --------------------------------------------------- прогресс рейкбека */
/* Без прогресса ступени не работают как мотивация: игрок не знает, где он и
   сколько осталось, — а значит и не стремится никуда. */
.rbp__n{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  font-size:13.5px;color:var(--mut);margin-bottom:8px}
.rbp__n b{font-size:22px;font-weight:700;color:#fff;letter-spacing:-.02em}
.rbp__bar{height:10px;background:rgba(255,255,255,.07);border-radius:6px;overflow:hidden}
.rbp__bar>div{height:100%;border-radius:6px;background:var(--acc-grad)}
.rbp__h{font-size:12.5px;color:var(--mut);margin-top:8px}
/* Своя ступень в таблице подсвечена: иначе в пяти строках себя не найти. */
.tbl tr.on td{background:rgba(139,92,246,.08)}


/* Панели своей высоты, а не по самой длинной в строке. Сетка с равными
   высотами хороша для карточек-близнецов и плоха для панелей с разным
   содержимым: короткая превращается в пустую коробку. */
.grid--top{align-items:start}

/* Акцентный тег. Зелёный в проекте означает «состояние в порядке» — баланс,
   связь, доступность вывода. Особенности условий («рейка нет», «ваша
   ступень») это не состояние, и красить их в тот же зелёный значит смешать
   два разных смысла. */
.tag--acc{color:#c4b5fd;border-color:rgba(139,92,246,.45);background:rgba(139,92,246,.12)}

/* Панель, в которой таблица идёт от края до края: собственные отступы тела
   складывались с отступами ячеек, и строки отъезжали от заголовка панели. */
.panel__bd--flush{padding:0}
.panel__bd--flush .tbl th:first-child,
.panel__bd--flush .tbl td:first-child{padding-left:18px}
.panel__bd--flush .tbl th:last-child,
.panel__bd--flush .tbl td:last-child{padding-right:18px}

/* Полоса чисел на странице условий — та же, что в лобби, но крупный
   заголовок в ней не название раздела, а само число. */
/* На странице условий крупное число — это и есть заголовок: ради него сюда
   и заходят, и 20px «как в лобби» ему мало. */
.lobbar--hero .lobbar__h{font-size:34px;line-height:1.05;letter-spacing:-.03em}
/* Число прогресса прижато к правому краю, как суммы в таблицах ниже.
   С ограничением по ширине оно повисало посреди панели ни к чему не
   привязанным. */
.rbp__n,.rbp__bar,.rbp__h{max-width:none}

/* ------------------------------------------------- страница «Рейк и рейкбек» */
/*
 * Собрана по образцу информационных страниц казино (pg-style.tpl): узкая
 * колонка, крупная шапка, секции с подписями, ступени рядами.
 *
 * ПОЧЕМУ УЗКАЯ КОЛОНКА. Прежняя версия растягивала панели на всю ширину
 * экрана: таблица из четырёх столбцов превращалась в редкую решётку с
 * полуметром пустоты между «Бронза» и «18%», а две карточки внизу стояли
 * рядом разной высоты, и под короткой зияла дыра. Текст, который читают, не
 * бывает шириной в полтора метра — 880 пикселей это примерно то же, что
 * колонка книги.
 */
.rk{max-width:880px;margin:0 auto;padding:10px 0 72px}
/* Информационные страницы (вопросы, правила, честность, контакты) собраны тем
   же способом: та же колонка, та же шапка, те же подписи секций. Раздел с
   условиями не должен выглядеть собранным из кусков — ровно это и было, пока
   каждая страница придумывала свою ширину. */
.rk .panel,.rk .faq,.rk .steps,.rk .kv{max-width:none}
.rk .grid--side{grid-template-columns:1fr}
.rk .panel+.panel,.rk .grid+.panel,.rk .faq+.panel{margin-top:14px}
.rk .sec__eyebrow{margin-bottom:12px}
.rk__head{padding:18px 0 24px;border-bottom:1px solid var(--bd)}
.rk__h1{margin:0 0 12px;font-size:32px;line-height:1.08;font-weight:800;
  letter-spacing:-.025em;color:#fff}
.rk__lead{margin:0;font-size:15.5px;line-height:1.65;color:var(--mut);max-width:62ch}

/* Шапка с главным числом. Градиент и крупный кегль — потому что ради этого
   числа на страницу и заходят; остальное на ней объясняет именно его. */
.rk__hero{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:24px;
  padding:24px 26px;border-radius:var(--r-l);border:1px solid rgba(139,92,246,.26);
  background:linear-gradient(135deg,rgba(139,92,246,.16),rgba(109,40,217,.05) 62%,transparent),
             var(--card);box-shadow:var(--sh-2)}
.rk__big{flex:1;min-width:230px}
.rk__big b{display:block;font-size:40px;line-height:1;font-weight:800;color:#fff;
  letter-spacing:-.035em}
.rk__big span{display:block;margin-top:9px;font-size:13.5px;color:var(--mut);max-width:44ch}
.rk__facts{display:flex;gap:0;flex:none}
.rk__fact{padding:0 20px;border-left:1px solid var(--bd)}
.rk__fact:first-child{border-left:0;padding-left:0}
.rk__fact:last-child{padding-right:0}
/* Число не переносится: «0.02–10.00» ломалось на две строки, и три факта
   получались разной высоты — полоса выглядела сломанной. */
.rk__fact b{display:block;font-size:19px;font-weight:800;color:#fff;letter-spacing:-.02em;
  white-space:nowrap}
.rk__fact span{display:block;margin-top:5px;font-size:11.5px;color:var(--dim)}

.rk__sec{margin-top:34px}
.rk__lbl{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin:0 0 13px;font-size:12px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:#c9cdd8}
.rk__lblMut{font-size:11.5px;font-weight:600;letter-spacing:.02em;
  text-transform:none;color:var(--dim)}

/* Личное состояние */
.rk__me{padding:18px 20px;border:1px solid var(--bd);border-radius:var(--r-m);
  background:var(--card)}
.rk__meTop{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;
  margin-bottom:12px}
.rk__meK{display:block;font-size:12.5px;color:var(--mut)}
.rk__meV{display:block;margin-top:3px;font-size:28px;font-weight:800;color:#fff;
  letter-spacing:-.03em;line-height:1}
.rk__tierTag{flex:none;padding:6px 12px;border-radius:999px;font-size:12.5px;font-weight:700;
  color:#c4b5fd;background:rgba(139,92,246,.14);border:1px solid rgba(139,92,246,.34)}
.rk__bar{height:10px;border-radius:6px;background:rgba(255,255,255,.07);overflow:hidden}
.rk__bar>div{height:100%;border-radius:6px;background:var(--acc-grad)}
.rk__meH{margin-top:9px;font-size:12.5px;color:var(--mut)}

/* СТУПЕНИ РЯДАМИ. В таблице из четырёх столбцов процент возврата — главное
   число страницы — стоял третьим и терялся среди порогов. */
.rk__tier{display:flex;align-items:center;gap:16px;margin-bottom:9px;padding:14px 18px;
  border:1px solid var(--bd);border-radius:var(--r-m);background:var(--card);
  transition:border-color .16s,transform .16s}
.rk__tier:hover{border-color:var(--bd-h);transform:translateY(-1px)}
.rk__tier.on{border-color:rgba(139,92,246,.45);
  background:linear-gradient(135deg,rgba(139,92,246,.11),transparent 70%),var(--card)}
.rk__tierVol{flex:none;min-width:116px;padding:9px 12px;text-align:center;border-radius:11px;
  background:rgba(255,255,255,.04);border:1px solid var(--bd)}
.rk__tier.on .rk__tierVol{background:rgba(139,92,246,.14);border-color:rgba(139,92,246,.3)}
.rk__tierVol b{display:block;font-size:15px;font-weight:800;color:#fff;line-height:1.15}
.rk__tierVol span{display:block;margin-top:2px;font-size:10.5px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--dim)}
.rk__tierB{flex:1;min-width:0}
.rk__tierN{display:block;font-size:14.5px;font-weight:700;color:#fff}
.rk__tierD{display:block;margin-top:3px;font-size:12.5px;color:var(--mut)}
.rk__tierP{flex:none;font-size:22px;font-weight:800;color:var(--acc);letter-spacing:-.02em}
.rk__tier.on .rk__tierP{color:#c4b5fd}

/* Ступень — КНОПКА: по ней открывается карточка с подробностями. Поэтому у неё
   сбрасывается оформление кнопки, выравнивается текст и появляется стрелка —
   без стрелки ряд не выглядит нажимаемым, и карточку никто не найдёт. */
.rk__tier{width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer;
  -webkit-appearance:none;appearance:none}
.rk__tier:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.rk__tierGo{flex:none;width:26px;height:26px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;color:var(--dim);background:rgba(255,255,255,.05);
  transition:color .16s,background .16s,transform .16s}
.rk__tierGo svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.rk__tier:hover .rk__tierGo{color:#fff;background:rgba(139,92,246,.22);transform:translateX(2px)}
.rk__tierHint{margin:10px 2px 0;font-size:12px;color:var(--dim)}

/* Карточка ступени */
.rk__mbox{max-width:420px}
.rk__mhd{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:4px}
.rk__mn{margin:0;font-size:19px;font-weight:800;color:#fff;letter-spacing:-.02em}
.rk__mp{font-size:26px;font-weight:800;color:#c4b5fd;letter-spacing:-.03em;line-height:1}
.rk__mr{margin:0 0 14px;font-size:13px;color:var(--mut)}
.rk__mr b{color:var(--txt)}
.rk__mrows{border:1px solid var(--bd);border-radius:var(--r-m);overflow:hidden}
.rk__mrow{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:11px 14px;font-size:13.5px;color:var(--mut);border-bottom:1px solid var(--bd)}
.rk__mrow:last-child{border-bottom:0}
.rk__mrow b{font-size:15px;font-weight:800;color:#fff}
.rk__mnote{margin:12px 0 0;padding:10px 12px;border-radius:10px;font-size:13px;color:#c4b5fd;
  background:rgba(139,92,246,.12);border:1px solid rgba(139,92,246,.3)}
.rk__mhint{margin:12px 0 16px;font-size:12.5px;line-height:1.55;color:var(--dim)}

/* Таблицы страницы: своя, а не общая .tbl — у общей отступы рассчитаны на
   панель во всю ширину, и в узкой колонке строки получались тесными. */
.rk__tw{border:1px solid var(--bd);border-radius:var(--r-m);overflow:hidden;overflow-x:auto;
  background:var(--card)}
.rk__t{width:100%;border-collapse:collapse}
.rk__t th,.rk__t td{padding:13px 18px;text-align:left;font-size:14px;
  border-bottom:1px solid var(--bd)}
.rk__t thead th{font-size:11px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--dim);font-weight:700;background:rgba(255,255,255,.02)}
.rk__t tbody tr:last-child td{border-bottom:0}
.rk__t .r{text-align:right}
.rk__t tbody td.num{font-weight:700;color:var(--txt)}
.rk__hint{margin:11px 2px 0;font-size:12.5px;line-height:1.6;color:var(--dim)}
.rk__hint--pad{margin-top:34px;padding:16px 18px;border:1px solid var(--bd);
  border-radius:var(--r-m);background:var(--card);color:var(--mut)}

/* Карточки фактов: по две в ряд. В три колонки строки текста ломались на
   два-три слова, и карточка выглядела обрывком, а не фактом. */
.rk__cards{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
/* Три карточки в ряд — там, где их ровно три: в сетке по две последняя висела
   одна в пустом ряду и читалась как недоделанная. */
.rk__cards--3{grid-template-columns:repeat(3,1fr)}
.rk__card{padding:16px 17px;border:1px solid var(--bd);border-radius:var(--r-m);
  background:var(--card)}
.rk__cardV{display:inline-block;margin-bottom:10px;padding:5px 10px;border-radius:999px;
  font-size:11.5px;font-weight:700;color:#c4b5fd;background:rgba(139,92,246,.12);
  border:1px solid rgba(139,92,246,.34)}
.rk__card b{display:block;font-size:14px;color:#fff;margin-bottom:5px}
.rk__card p{margin:0;font-size:12.5px;line-height:1.6;color:var(--mut)}

/* Правила списком. Каждое — своя строка с точкой: четыре панели по четыре
   пункта давали экран, на четверть состоящий из текста и на три четверти из
   рамок, а на телефоне вытягивались в бесконечную колонку коробок. */
.rk__rules{display:grid;gap:8px}
.rk__rules p{display:flex;gap:12px;margin:0;padding:13px 16px;border:1px solid var(--bd);
  border-radius:var(--r-m);background:var(--card);font-size:13.5px;line-height:1.55;color:var(--txt)}
.rk__rules p::before{content:"";flex:none;width:6px;height:6px;margin-top:8px;border-radius:50%;
  background:var(--acc);opacity:.75}

.rk__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}

@media(max-width:760px){
  .rk{padding-bottom:48px}
  .rk__h1{font-size:25px}
  .rk__hero{padding:20px;gap:16px}
  .rk__big b{font-size:34px}
  .rk__facts{width:100%}
  .rk__fact{flex:1;padding:0 9px;min-width:0}
  .rk__fact b{font-size:15px}
  .rk__fact span{font-size:10.5px}
  .rk__cards,.rk__cards--3{grid-template-columns:1fr}
  /* Ступень на телефоне: порог и процент в одну строку, название под ними. */
  .rk__tier{flex-wrap:wrap;gap:12px}
  .rk__tierB{order:3;flex-basis:100%}
  .rk__tierP{margin-left:auto}
  .rk__cta .btn{flex:1;justify-content:center}
}

/* ------------------------------------------------- окно кабинета и всплывашки */
/* Кабинет открывается ОКНОМ ПОВЕРХ САЙТА с размытым фоном — как в казино.
 *
 * До этого кабинет был обычной страницей: под окном оставался подвал, страница
 * прокручивалась целиком вместе с окном, и «закрыть» означало уйти по ссылке.
 * Выглядело это как ещё один раздел сайта, а не как касса, в которую зашли на
 * минуту. Окно решает три вещи сразу: фон размыт и не отвлекает, под окном
 * ничего нет, прокручивается только содержимое.
 *
 * Фон НЕ рисуется заново: размывается настоящая шапка сайта за окном. Поэтому
 * видно, откуда пришёл, и возврат по крестику читается как закрытие, а не как
 * переход куда-то ещё. */
body.win{overflow:hidden}
.ovl{view-transition-name:cab;position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;
  padding:18px;background:rgba(8,9,13,.66);
  -webkit-backdrop-filter:blur(16px) saturate(130%);backdrop-filter:blur(16px) saturate(130%);
  animation:ovlIn .18s ease-out both}
@keyframes ovlIn{from{opacity:0}to{opacity:1}}
/* В окне высота считается от окна, а не от страницы: иначе длинная история
   вытягивает карточку за экран, и крестик с меню уезжают туда же. */
/* Размер окна ФИКСИРОВАННЫЙ: 900×580, но не больше экрана.
 *
 * Высота по содержимому, которую я пробовал, выглядит хуже обоих крайностей:
 * окно меняет размер на каждом переключении раздела — на «Пополнить» низкое, на
 * «Профиле» высокое, — и это читается как поломка, а не как компактность.
 * Постоянный размер важнее экономии пустоты: меню, шапка и крестик всегда на
 * одном месте.
 *
 * 900×580, а не 960×660 как в казино: там окно заметно крупнее, чем нужно
 * нашему кабинету — у нас четыре раздела вместо шести. Четыре плитки сетей в
 * ряд при этом по-прежнему помещаются (236 меню + 48 отступов + 4×148 + 3×10).
 *
 * Ограничение по экрану обязательно: без него на ноутбуке с короткой рамкой
 * окно упиралось бы в края. */
.ovl .cab{margin:0;width:min(900px,96vw);height:min(580px,calc(100vh - 48px));
  max-height:none;
  /* В окне раскладка НЕ СЕТКОЙ, а флексом, и это не вкусовщина.
     У сетки с высотой по содержимому строка считается по содержимому ЦЕЛИКОМ,
     а max-height обрезает уже готовый блок. Колонка внутри остаётся во всю
     длину содержимого, прокручиваемому блоку обрезание не видно — и профиль
     просто обрубался снизу вместо прокрутки.
     Флекс устроен иначе: сначала высота контейнера зажимается в max-height, а
     потом элементы растягиваются под НЕЁ. Колонка получает конечную высоту, и
     overflow-y внутри наконец срабатывает. */
  display:flex}
.ovl .cab__side{flex:0 0 236px}
.ovl .cab__main{flex:1 1 auto;min-width:0;min-height:0}

/* Всплывающее окно сети — второй уровень поверх кабинета.
 *
 * Та же схема, что у кассы казино: плитка сети → окно с суммой → окно с адресом
 * и QR. Почему окном, а не разделом на странице: выбор сети и ввод суммы — это
 * один короткий шаг, после которого на экране должен остаться ТОЛЬКО адрес и
 * точная сумма. Всё прочее в этот момент мешает: ошибка здесь стоит перевода. */
.mdl{position:fixed;inset:0;z-index:80;display:none;align-items:center;justify-content:center;
  padding:16px}
.mdl.on{display:flex}
.mdl__ovl{position:absolute;inset:0;background:rgba(6,7,11,.7);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
/* 380, а не 420: окно сети стоит поверх кабинета шириной 900, и прежняя
   ширина занимала почти половину его — выглядело тяжелее самого кабинета. */
.mdl__box{position:relative;width:380px;max-width:100%;max-height:calc(100vh - 32px);
  overflow-y:auto;overscroll-behavior:contain;
  background:linear-gradient(180deg,#191b25,#13141b);
  border:1px solid var(--bd-h);border-radius:var(--r-xl);
  box-shadow:0 28px 70px rgba(0,0,0,.6),var(--lip);
  animation:mdlIn .2s cubic-bezier(.2,.9,.3,1) both}
@keyframes mdlIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.mdl__box::-webkit-scrollbar{width:9px}
.mdl__box::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:9px;
  border:2px solid transparent;background-clip:content-box}
.mdl__hd{display:flex;align-items:center;gap:11px;padding:14px 16px;
  border-bottom:1px solid var(--bd);position:sticky;top:0;z-index:2;
  background:linear-gradient(180deg,#1b1d27,#181a23)}
.mdl__ic{width:34px;height:34px;flex:none;border-radius:11px;display:flex;align-items:center;
  justify-content:center;background:var(--card-2);border:1px solid var(--bd)}
.mdl__ic img{width:22px;height:22px;display:block}
.mdl__t{flex:1;min-width:0}
.mdl__n{font-size:14px;font-weight:800;color:#fff;letter-spacing:-.01em}
.mdl__s{font-size:11.5px;color:var(--mut);margin-top:1px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.mdl__x{width:32px;height:32px;flex:none;border-radius:50%;display:flex;align-items:center;
  justify-content:center;background:var(--card-2);border:1px solid var(--bd);
  color:var(--mut);cursor:pointer;padding:0}
.mdl__x svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round}
.mdl__x:hover{background:var(--card-h);color:#fff}
.mdl__bd{padding:16px}
.mdl__ft{padding:11px 16px 14px;border-top:1px solid var(--bd);font-size:11px;
  color:var(--dim);line-height:1.5}

/* Сумма в долларах крупно и по центру — так же, как в кассе казино. Это главное
   поле окна, и мелкое поле в строку заставляет его искать. */
.amtf{display:flex;align-items:baseline;justify-content:center;gap:4px;
  background:var(--card-2);border:1px solid var(--bd);border-radius:var(--r-m);
  padding:9px 12px;margin-bottom:9px}
.amtf__s{font-size:19px;font-weight:800;color:var(--mut);line-height:1}
.amtf input{flex:0 1 190px;min-width:0;background:none;border:0;outline:none;color:#fff;
  font:800 24px/1.1 inherit;text-align:left;letter-spacing:-.02em}
.amtf input::-webkit-outer-spin-button,.amtf input::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0}
.amtf:focus-within{border-color:rgba(139,92,246,.5);background:rgba(139,92,246,.07)}

/* Быстрые суммы. Не «удобство»: девять из десяти депозитов — круглые числа,
   и попадание в них одним нажатием убирает ошибку ввода вместе с опечаткой. */
.qa{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}
.qa button{flex:1 1 0;min-width:52px;padding:7px 5px;border-radius:9px;
  background:var(--card-2);border:1px solid var(--bd);color:var(--txt);
  font:700 13px/1 inherit;cursor:pointer}
.qa button:hover{background:var(--card-h);border-color:var(--bd-h);color:#fff}

/* Строка «что получится». Курс и количество монеты — ответ на единственный
   вопрос игрока в этот момент: сколько именно отправлять. */
.calc{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:10px 12px;margin-bottom:12px;border-radius:var(--r-m);
  background:rgba(139,92,246,.07);border:1px solid rgba(139,92,246,.2)}
.calc__l{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--mut)}
.calc__v{font-size:14px;font-weight:800;color:#fff;text-align:right;word-break:break-all}
.calc__r{font-size:11px;color:var(--dim);margin-top:2px}

/* Плитка сети в кассе. Крупнее обычной `.coin`: здесь она не переключатель, а
   кнопка, открывающая окно, и на ней должен быть виден минимум. */
/* Плитка сети — геометрия .cx-coin из кабинета казино, до пикселя.
 *
 * Два правила, из-за которых мой первый вариант выглядел рваным:
 *   • тикер и название — БЛОЧНЫЕ, всегда в две строки. Пока они были
 *     строчными, короткая подпись («Cardano») вставала в одну строку с
 *     тикером, а длинная («USDT · TRC-20») переносилась — и высота плиток
 *     гуляла в каждом ряду;
 *   • стрелки справа нет. В казино её нет, и она тут лишняя: плитка и так
 *     очевидно нажимается, а на узкой колонке стрелка съедает место у подписи.
 */
/* Подпись над сеткой — как .cx-lbl в казино: обычный регистр, спокойный серый.
   Капслок с разрядкой кричал громче самих плиток, ради которых игрок и пришёл. */
.cashlbl{font-size:12px;color:#8b90a2;margin:0 0 10px}
/* Порог 140, а не 148: при ширине окна 900 на содержимое остаётся 616
   пикселей, и с порогом 148 четвёртая колонка не помещалась — плитки вставали
   по три в ряд, чего в кабинете казино нет. 140 даёт ровно четыре. */
.netg{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.nett{display:flex;align-items:center;gap:11px;padding:12px 13px;border-radius:13px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
  cursor:pointer;text-align:left;font:inherit;color:inherit;transition:all .14s}
.nett:hover{background:rgba(255,255,255,.08);transform:translateY(-1px)}
.nett img{width:30px;height:30px;flex:none;display:block}
.nett__t{min-width:0}
.nett__n{display:block;font-size:13px;font-weight:700;color:#fff}
.nett__c{display:block;font-size:11px;color:#8b90a2;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
/* Сеть без свежего курса. Не прячем: исчезнувшая монета читается как «у них
   больше нет биткоина», а причина в нашем фиде, и она временная. */
.nett--off{opacity:.5;cursor:not-allowed}
.nett--off:hover{transform:none;border-color:var(--bd);background:var(--card-2)}

/* Открытый счёт карточкой: монета, точная сумма, остаток времени. */
.invs{display:flex;flex-direction:column;gap:9px;margin-top:14px}
.invr{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:var(--r-m);
  background:rgba(255,212,128,.06);border:1px solid rgba(255,212,128,.22);
  cursor:pointer;text-align:left;font:inherit;color:inherit;width:100%}
.invr:hover{background:rgba(255,212,128,.1)}
.invr img{width:26px;height:26px;flex:none}
.invr__t{flex:1;min-width:0}
.invr__a{font-size:13.5px;font-weight:800;color:#fff;word-break:break-all}
.invr__s{font-size:11.5px;color:#ffd480;margin-top:1px}

@media(max-width:900px){
  /* На телефоне окно занимает экран целиком: отступы по краям на 375 пикселях
     съедают ширину, из-за которой адрес переносится на три строки. */
  .ovl{padding:0;align-items:stretch}
  .ovl .cab{width:100%;height:100dvh;min-height:0;border-radius:0;border-left:0;border-right:0;
    flex-direction:column}
  .ovl .cab__side{flex:0 0 auto}
  .mdl{padding:0;align-items:flex-end}
  .mdl__box{width:100%;max-height:92dvh;border-radius:var(--r-xl) var(--r-xl) 0 0}
  .netg{grid-template-columns:1fr 1fr;gap:8px}
  .nett{padding:11px;gap:9px}
  .nett img{width:26px;height:26px}
  .nett__a{display:none}
}

/* ------------------------------------------- плавность кабинета */
/* Окно ПОЯВЛЯЕТСЯ, а не возникает, и разделы внутри меняются без перезагрузки.
 *
 * До этого каждый раздел кабинета был отдельной загрузкой страницы: экран
 * моргал, фон перерисовывался, а окно каждый раз «прыгало» на место. В казино
 * это всплывающее окно, и переключение там — просто смена содержимого, поэтому
 * оно выглядит плавным. Здесь сделано так же: содержимое подменяется запросом,
 * адрес обновляется историей браузера, и видно только короткий переход.
 *
 * Без скрипта всё работает по-прежнему: пункты меню остаются обычными
 * ссылками, просто переход будет с перезагрузкой. */
.ovl .cab{animation:cabIn .24s cubic-bezier(.2,.9,.3,1) both}
@keyframes cabIn{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
.cab__body.swapout{opacity:0;transform:translateY(4px);
  transition:opacity .11s ease-in,transform .11s ease-in}
.cab__body.swapin{animation:swapIn .2s ease-out both}
@keyframes swapIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
/* Пункт меню подсвечивается переходом, а не скачком: при смене раздела без
   перезагрузки скачок заметен сильнее, чем при полной загрузке страницы. */
.cab__i{transition:background .16s ease,color .16s ease,border-color .16s ease}

/* ---------------------------------------------------------------- турниры */
/* Карточка турнира. Главное на ней — бай-ин и сколько мест осталось: по этим
   двум числам игрок и решает, садиться ли. Всё остальное (структура, стек,
   длина уровня) нужно реже и стоит ниже. */
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:14px}
.tc{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--bd);
  border-radius:var(--r-l);padding:16px 17px;transition:border-color .16s,transform .16s}
.tc:hover{border-color:var(--bd-h);transform:translateY(-1px)}
.tc--run{border-color:rgba(63,185,80,.32);background:linear-gradient(180deg,rgba(63,185,80,.05),transparent)}
/* Турнир, до старта которого меньше четверти часа. Подсвечен сам ряд, а не
   только плашка: в списке из десяти карточек маленький значок не находится
   взглядом, а именно этот турнир игрок и ищет. */
.tc--soon{border-color:rgba(139,92,246,.42);
  background:linear-gradient(180deg,rgba(139,92,246,.07),transparent)}
.tag--soon{color:#c4b5fd;border-color:rgba(139,92,246,.5);background:rgba(139,92,246,.14);
  animation:soonPulse 2.4s ease-in-out infinite}
@keyframes soonPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(139,92,246,.35)}
  50%{box-shadow:0 0 0 4px rgba(139,92,246,0)}
}
/* «Горячий» — собралась половина мест или есть гарантия. Тёплый цвет, чтобы не
   путался с акцентом «скоро»: это разные вещи, и игрок должен различать их не
   читая. */
.tag--fire{color:#ffc99a;border-color:rgba(255,166,87,.42);background:rgba(255,138,61,.12)}
.tc__hd{display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.tc__n{font-size:15px;font-weight:800;color:#fff;letter-spacing:-.01em;flex:1;min-width:0}
.tc__buy{display:flex;align-items:baseline;gap:8px;margin-bottom:14px}
.tc__sum{font-size:28px;font-weight:800;color:#fff;letter-spacing:-.03em;line-height:1}
.tc__fee{font-size:11.5px;color:var(--mut)}
.tc__rows{display:flex;flex-direction:column;gap:7px;margin-bottom:15px}
.tc__row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  font-size:12.5px;color:var(--mut)}
.tc__row b{color:#fff;font-weight:700;text-align:right}
/* Полоса заполнения мест — то же, что счётчик, но видно боковым зрением. */
.tc__bar{height:5px;border-radius:999px;background:rgba(255,255,255,.07);overflow:hidden;margin:1px 0 3px}
.tc__bar div{height:100%;border-radius:999px;background:var(--acc-grad)}
.tc__ft{margin-top:auto}
.tc__note{display:block;margin-top:8px;font-size:11.5px;color:var(--dim);text-align:center}

/* Строка «мои турниры»: короткая сводка с действием. */
.myt{display:flex;flex-direction:column;gap:7px}
.myt__r{display:flex;align-items:center;gap:10px;padding:10px 13px;border-radius:var(--r-m);
  background:var(--card-2);border:1px solid var(--bd)}
.myt__n{flex:1;min-width:0;font-size:13.5px;font-weight:700;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.myt__p{font-size:13.5px;font-weight:800;color:#8fe3b0}

@media(max-width:600px){
  .tgrid{grid-template-columns:1fr}
}

/* ------------------------------------------------- плавность переходов */
/* Переход между страницами — плавное затухание вместо мигания белым.
 *
 * Это родной механизм браузера (View Transitions): одно правило, никакого
 * скрипта, и там, где его нет, просто ничего не происходит. Вместе с
 * предзагрузкой по наведению это и даёт ощущение «переключается мгновенно»:
 * страница уже скачана, а смена кадра занимает 180 мс и не моргает.
 *
 * Шапку и окно кабинета помечаем отдельно: они остаются на месте, и браузер
 * анимирует их как один и тот же элемент, а не как «исчез — появился». */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vtOut .14s ease both}
::view-transition-new(root){animation:vtIn .20s ease both}
@keyframes vtOut{to{opacity:0}}
@keyframes vtIn{from{opacity:0}}
@media(prefers-reduced-motion:reduce){
  /* Движение гасим, но сам переход оставляем: без него браузер возвращается к
     мгновенной подмене кадра, а это и есть мигание, от которого уходили. */
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.001ms}
}

/* ------------------------------------------------- чек на оплату */
/* Строка срока: часы, подпись и время. Отдельной строкой наверху, потому что
   это первое, что нужно знать — через час счёт закроется, и платёж по нему уже
   не привяжется. */
.ttlrow{display:flex;align-items:center;justify-content:center;gap:7px;margin:0 0 12px;
  font-size:12.5px;color:#ffd480}
.ttlrow svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.ttlrow b{font-size:14px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums}

/* Точная сумма — главное число чека, поэтому отдельной плашкой и крупно.
   Вся плашка — кнопка: нажатие кладёт сумму в буфер. Поле ввода здесь было
   хуже: его хочется править, а править нечего — сумма задана счётом. */
.exact{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  padding:11px 13px;margin:0 0 12px;border-radius:var(--r-m);text-align:left;
  background:var(--card-2);border:1px solid var(--bd);color:inherit;font:inherit;cursor:pointer;
  transition:background .14s,border-color .14s}
.exact:hover{background:var(--card-h);border-color:rgba(139,92,246,.45)}
.exact.copied{border-color:rgba(63,185,80,.5);background:rgba(63,185,80,.08)}
.exact__l{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--mut);flex:none}
.exact__v{display:flex;align-items:baseline;gap:5px;min-width:0}
.exact__v b{font-size:16px;font-weight:800;color:#fff;letter-spacing:-.01em;word-break:break-all}
.exact__c{font-size:11.5px;font-weight:700;color:#cfd3e0;flex:none}

/* Адрес и кнопка — одной высоты и в один ряд. Раньше они жили в разных блоках
   с разными отступами, и ряд выглядел собранным из чужих деталей. */
.copyrow{display:flex;gap:8px;align-items:stretch}
.copyrow .inp{flex:1;min-width:0;height:42px}
.copyrow .btn{flex:none;height:42px}

/* Подвал чека: слева сколько это в долларах, справа отмена. Отмена ссылкой, а
   не кнопкой: это запасной выход, а не действие, к которому зовут. */
.invfoot{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:12px;font-size:11.5px;color:var(--dim)}
.invfoot form{margin:0}
/* Отмена — ссылка, а не кнопка. Без сброса браузерной отделки <button>
   получает светлую плашку и рамку: в тёмном чеке это выглядело как случайно
   попавший сюда элемент чужой страницы. */
.invfoot .lnk{background:none;border:0;padding:0;font:inherit;font-size:11.5px;
  color:var(--mut);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.invfoot .lnk:hover{color:#ffb4ab}

/* ------------------------------------------------- чек операции */
/* Открывается нажатием на строку истории. Устроен как чек в кабинете казино:
   крупный значок направления, название, статус, сумма цветом статуса и ниже
   подробности парами «ключ — значение».
 *
 * Почему цвет по СТАТУСУ, а не по направлению: игрок смотрит на чек, когда
 * что-то пошло не так, и первым делом ему нужен ответ «прошло или нет», а не
 * «приход или расход» — это он и так видит по знаку суммы. */
.rcpt{width:360px;padding:0 0 18px;border-top:3px solid transparent}
.rcpt--ok{border-top-color:#3fb950}
.rcpt--wait{border-top-color:#ffd480}
.rcpt--bad{border-top-color:#f85149}
.rcpt__x{position:absolute;top:12px;right:12px;z-index:2}
.rcpt__top{display:flex;flex-direction:column;align-items:center;gap:9px;padding:26px 20px 4px;text-align:center}
.rcpt__ic{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:21px;font-weight:800;line-height:1}
.rcpt__ic--in{background:rgba(63,185,80,.16);color:#8fe3b0;border:1px solid rgba(63,185,80,.35)}
.rcpt__ic--out{background:rgba(139,92,246,.16);color:#c4b5fd;border:1px solid rgba(139,92,246,.4)}
.rcpt__ic--bad{background:rgba(248,81,73,.14);color:#ffb4ab;border:1px solid rgba(248,81,73,.35)}
.rcpt__t{font-size:14px;font-weight:700;color:#fff}
.rcpt__amt{font-size:27px;font-weight:800;text-align:center;padding:4px 20px 14px;letter-spacing:-.02em}
.rcpt__amt--ok{color:#8fe3b0}
.rcpt__amt--wait{color:#ffd480}
.rcpt__amt--bad{color:#ffb4ab}
/* Пунктир между строками — как на бумажном чеке: взгляд не упирается в
   сплошную линию и легко идёт по парам. */
.rcpt__rows{padding:0 20px}
.rcpt__r{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  padding:10px 0;border-top:1px dashed var(--bd);font-size:12.5px}
.rcpt__r:first-child{border-top:0}
.rcpt__k{color:var(--mut);flex:none}
.rcpt__v{color:var(--txt);text-align:right;font-weight:600;word-break:break-all}
.rcpt__cp{margin-left:7px;padding:0;border:0;background:none;color:var(--acc);
  font:inherit;font-size:11.5px;font-weight:700;cursor:pointer}
.rcpt__cp:hover{text-decoration:underline}

/* Ячейка состояния: плашка и кнопка в один ряд, без переноса. Плашка не
   переносится по словам — «ждёт оплаты» в две строки тянуло вверх всю строку
   таблицы, и соседние строки получались разной высоты. */
.stcell{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.stcell .tag{white-space:nowrap}

/* Строка истории нажимается — курсор и подсветка обязаны об этом говорить. */
.hrow{cursor:pointer}
.hrow:hover td{background:rgba(255,255,255,.03)}
/* «Оплатить» на открытом счёте: маленькая кнопка прямо в строке, чтобы не
   искать счёт заново в кассе. */
.paybtn{margin-left:7px;padding:3px 10px;border-radius:7px;border:0;cursor:pointer;
  background:var(--acc-grad);color:#fff;font:inherit;font-size:11px;font-weight:700}
.paybtn:hover{filter:brightness(1.08)}
/* Три цвета — три СМЫСЛА, и путать их нельзя:
     зелёный — прошло, жёлтый — ещё в работе, красный — не прошло.
   Отказ и просроченный счёт раньше красились в «warn», то есть жёлтым, и
   выглядели как «ещё в работе» — ровно наоборот тому, что случилось. */
.tag--wait{background:rgba(255,212,128,.14);color:#ffd480;border-color:rgba(255,212,128,.3)}
.tag--bad{background:rgba(248,81,73,.12);color:#ffb4ab;border-color:rgba(248,81,73,.35)}

/* ------------------------------------------------- движение за столом */
/* Карту ВЫКЛАДЫВАЮТ, а не подменяют кадр: она прилетает сверху и
   доворачивается. Задержка по номеру (--i) превращает флоп из одного кадра в
   три карты подряд — так видно работу дилера. */
.pc--deal{animation:dealIn .42s cubic-bezier(.2,.85,.3,1) both;
  animation-delay:calc(var(--i, 0) * 190ms)}
/* Досдача при all-in: карта за картой, с паузой — это решающий момент раздачи,
   и он не должен проскакивать одним кадром. */
.pc--slow{animation:dealSlow .6s cubic-bezier(.2,.8,.25,1) both;
  animation-delay:calc(var(--i, 0) * 900ms)}
@keyframes dealSlow{
  0%{opacity:0;transform:translateY(-34px) rotate(-10deg) scale(.8)}
  60%{opacity:1;transform:translateY(0) rotate(0) scale(1.1)}
  100%{opacity:1;transform:none}
}
@keyframes dealIn{
  from{opacity:0;transform:translateY(-26px) rotate(-8deg) scale(.86)}
  to{opacity:1;transform:none}
}

/* Фишка ставки: появляется с подскоком и улетает в банк, когда круг закрыт. */
/* Бросок: фишки вылетают ОТ таблички игрока к центру стола. Направление
   зависит от того, с какой стороны овала сидит игрок. */
.seat__chip--in{animation:chipToss .26s cubic-bezier(.2,.9,.3,1) both}
.seat--p0 .seat__chip--in,.seat--p1 .seat__chip--in,.seat--p5 .seat__chip--in{
  animation-name:chipTossUp}
@keyframes chipToss{from{opacity:0;transform:translateX(-50%) translateY(-16px) scale(.74) rotate(6deg)}
  to{opacity:1;transform:translateX(-50%)}}
@keyframes chipTossUp{from{opacity:0;transform:translateX(-50%) translateY(16px) scale(.74) rotate(-6deg)}
  to{opacity:1;transform:translateX(-50%)}}
.chipfly{position:absolute;z-index:6;pointer-events:none;
  display:inline-flex;align-items:flex-end;gap:7px;--sz:16px;
  padding:4px 10px 4px 8px;border-radius:999px;
  font-size:12px;font-weight:800;color:#fff;white-space:nowrap;
  background:rgba(12,14,20,.86);border:1px solid rgba(255,255,255,.14);
  box-shadow:0 4px 12px rgba(0,0,0,.5);
  transition:transform .5s cubic-bezier(.3,.7,.3,1),opacity .5s ease-in}

/* ------------------------------------------------- фишки
 *
 * Имя `pchip`, а не `chip`: класс `chip` в этом файле уже занят кнопкой-
 * фильтром (высота 34, паддинги, рамка). Поле `padding:0 13px` от неё досталось
 * игровой фишке, и столбик ставки налезал на сумму. Третий раз подряд одна и та
 * же ошибка в проекте — после `.card`/`.pc` и `.big`/`.amtf`.
 *
 * Фишка рисуется, а не грузится картинкой: на столе их бывает под тридцать,
 * и тридцать картинок на телефоне грузились бы дольше раздачи.
 *
 * Три слоя, снизу вверх:
 *   1) насечки по ободу — повторяющийся конический градиент;
 *   2) лицо фишки — радиальный градиент, он перекрывает насечки в середине;
 *   3) внутреннее кольцо и блик — тенями.
 * Номиналы и цвета — как в зале: белая 0.01, красная 0.05, зелёная 0.25,
 * синяя 1, оранжевая 5, бирюзовая 25, чёрная 100, фиолетовая 500, золотая 1000.
 */
.pchip{position:absolute;left:0;bottom:calc(var(--k,0) * var(--sz,20px) * .26);
  width:var(--sz,20px);height:var(--sz,20px);border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%, var(--cb) 0 54%, rgba(0,0,0,0) 55%),
    repeating-conic-gradient(var(--ce) 0 15deg, var(--cs) 15deg 30deg);
  box-shadow:0 1px 2px rgba(0,0,0,.5),
             inset 0 0 0 1px rgba(0,0,0,.28),
             inset 0 1px 0 rgba(255,255,255,.35)}
.pchip--w{--cb:#eef1f6;--ce:#c9cfdb;--cs:#8d94a6}
.pchip--r{--cb:#e04b3c;--ce:#b5342a;--cs:#fff}
.pchip--n{--cb:#2fa468;--ce:#1f7a4c;--cs:#fff}
.pchip--b{--cb:#3b74d6;--ce:#2a55a3;--cs:#fff}
.pchip--o{--cb:#e0832a;--ce:#b35f14;--cs:#fff}
.pchip--t{--cb:#1fa5a0;--ce:#157a76;--cs:#fff}
.pchip--k{--cb:#2a2d38;--ce:#15171e;--cs:#c9cfdb}
.pchip--v{--cb:#8b5cf6;--ce:#6227c7;--cs:#fff}
.pchip--g{--cb:#e8b53a;--ce:#b5861b;--cs:#fff7e0}

/* Столбик. Высота считается по числу фишек, иначе он либо режется, либо
   оставляет под собой пустоту в половину плашки. */
.pstack{position:relative;display:inline-block;flex:none;vertical-align:bottom;
  width:var(--sz,20px);
  height:calc(var(--sz,20px) + (var(--n,1) - 1) * var(--sz,20px) * .26)}

/* Что сказал игрок — подписью у места. Журнал сбоку за игрой читать некогда.
   Подпись уходит ОТ центра стола, фишка ставки — К центру: иначе они встают
   на одно место и накрывают друг друга. */
.seat--p0 .seat__say,.seat--p1 .seat__say,.seat--p5 .seat__say{top:calc(100% + 7px)}
.seat--p2 .seat__say,.seat--p3 .seat__say,.seat--p4 .seat__say{top:auto;bottom:calc(100% + 7px)}
.seat__say{position:absolute;left:50%;top:calc(100% + 7px);transform:translateX(-50%);
  padding:3px 10px;border-radius:999px;white-space:nowrap;
  font-size:11.5px;font-weight:700;color:#fff;
  background:rgba(18,20,28,.92);border:1px solid rgba(255,255,255,.16);
  box-shadow:0 4px 12px rgba(0,0,0,.5)}
.seat__say--in{animation:sayIn .22s ease-out both}
@keyframes sayIn{from{opacity:0;transform:translateX(-50%) translateY(5px)}
  to{opacity:1;transform:translateX(-50%)}}

/* Кольцо времени вокруг аватара того, чей ход: видно, У КОГО кончается время,
   а не просто что оно идёт. Полоска под столом этого не говорила.
   Кольцо тонкое и ОТДЕЛЬНОЕ от аватара: когда время красили прямо по фону,
   аватар превращался в зелёный квадрат и кольца было не разглядеть. */
.seat__ava--tick::after{
  content:'';position:absolute;inset:-4px;border-radius:15px;padding:2.5px;
  background:conic-gradient(from -90deg,
    var(--ring,var(--ok)) calc(var(--p, 100) * 1%), rgba(255,255,255,.13) 0);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
  pointer-events:none}
.seat__ava--hot{--ring:#f85149;animation:avaHot 1s ease-in-out infinite}
@keyframes avaHot{0%,100%{box-shadow:0 0 0 0 rgba(248,81,73,.4)}
  50%{box-shadow:0 0 0 7px rgba(248,81,73,0)}}

/* Секунды поверх аватара. Кольцо говорит «время идёт», цифра — сколько его. */
.seat__secs{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;border-radius:inherit;
  background:rgba(10,12,18,.72);color:#fff;font-size:13px;font-weight:800;
  letter-spacing:-.02em;backdrop-filter:blur(1px)}
.seat__ava--hot .seat__secs{color:#ffb4ab}

/* Банк: короткий толчок при росте. */
.pot__v--bump{animation:potBump .32s ease-out}
@keyframes potBump{0%{transform:scale(1)}40%{transform:scale(1.14)}100%{transform:scale(1)}}

/* Куча фишек в центре стола. Столбики по четыре: один высокий столбик не
   читается, а несколько рядом сразу говорят «банк большой». */
.potpile{display:flex;align-items:flex-end;justify-content:center;gap:7px;
  --sz:22px;min-height:30px;margin:0 0 10px}

/* Сброс: карты улетают к середине стола и гаснут. */
.muckfly{position:absolute;z-index:4;pointer-events:none;
  transition:transform .55s cubic-bezier(.3,.7,.3,1),opacity .55s ease-in}

/* ВСКРЫТИЕ: чем забрали банк.
   Карты комбинации остаются яркими, остальные притухают — подсветить все значит
   не подсветить ничего. Подпись комбинации встаёт со стороны центра стола: там
   же, где фишка ставки, но к вскрытию ставок уже нет. */
.pc--best{box-shadow:0 0 0 2px var(--ok),0 4px 14px rgba(63,185,80,.45);
  transform:translateY(-2px)}
.pc--dim{opacity:.42;filter:saturate(.5)}

.seat__combo{position:absolute;left:50%;transform:translateX(-50%);z-index:3;
  padding:2px 9px;border-radius:999px;white-space:nowrap;
  font-size:10.5px;font-weight:800;letter-spacing:.02em;
  color:#dfe3ec;background:rgba(10,12,18,.9);border:1px solid rgba(255,255,255,.14)}
.seat__combo--win{color:#0e1512;background:linear-gradient(180deg,#8fe3b0,#3fb950);
  border-color:transparent}
.seat--p0 .seat__combo,.seat--p1 .seat__combo,.seat--p5 .seat__combo{bottom:calc(100% + 7px)}
.seat--p2 .seat__combo,.seat--p3 .seat__combo,.seat--p4 .seat__combo{top:calc(100% + 7px)}

/* Шансы при all-in — прямо в табличке игрока, рядом со стеком. */
.seat__odds{flex:none;padding:2px 7px;border-radius:999px;font-size:11px;font-weight:800;
  color:#ffd480;background:rgba(255,212,128,.14);border:1px solid rgba(255,212,128,.3)}

/* Конец раздачи: кто сколько забрал. Плашка живёт паузу между раздачами и
   уходит, как только сдали новые карты. Прозрачный фон поверх поля, а не
   модальное окно: игра не останавливается, игрок просто видит итог.
   Стоит она НА МЕСТЕ БАНКА: банк к этому моменту уже разъехался по игрокам, а
   борд, подсветка выигравшей пятёрки и подписи комбинаций обязаны остаться на
   виду — ради них вскрытие и смотрят. */
.hend{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);z-index:7;
  min-width:186px;padding:8px 14px;border-radius:13px;text-align:center;
  background:rgba(10,12,18,.9);border:1px solid rgba(255,255,255,.16);
  box-shadow:0 16px 40px rgba(0,0,0,.6);pointer-events:none}
.hend__h{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.55);margin-bottom:4px}
.hend__w{display:flex;justify-content:space-between;gap:16px;font-size:13px;
  font-weight:700;color:#fff;padding:1px 0}
.hend__w b{color:#8fe3b0}
.hend__w i{font-style:normal;font-weight:600;color:rgba(255,255,255,.55)}
.hend--in{animation:hendIn .28s cubic-bezier(.2,.9,.3,1) both}
@keyframes hendIn{from{opacity:0;transform:translate(-50%,-50%) scale(.9)}
  to{opacity:1;transform:translate(-50%,-50%)}}
/* На телефоне поля-овала нет, и середина занята бордом: плашка встаёт внизу. */
@media(max-width:700px){
  .hend{top:auto;bottom:10px;transform:translateX(-50%)}
  @keyframes hendIn{from{opacity:0;transform:translateX(-50%) scale(.92)}
    to{opacity:1;transform:translateX(-50%)}}
}

/* Начало новой раздачи — короткая подпись сверху поля. */
.hnew{position:absolute;left:50%;top:14px;transform:translateX(-50%);z-index:7;
  padding:4px 14px;border-radius:999px;pointer-events:none;
  font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.8);background:rgba(10,12,18,.76);
  border:1px solid rgba(255,255,255,.14)}
.hnew--in{animation:hnewIn 1.3s ease-out both}
@keyframes hnewIn{0%{opacity:0;transform:translateX(-50%) translateY(-8px)}
  18%{opacity:1;transform:translateX(-50%)}
  70%{opacity:1}100%{opacity:0}}

/* Подсветка хода — плавная, а не скачком. */
.seat__box{transition:border-color .2s,box-shadow .2s,opacity .2s}

/* Телефон, продолжение. Этот блок стоит в самом конце файла намеренно: правила
   подписи объявлены НИЖЕ основного телефонного медиа-блока, и с одинаковой
   силой побеждали бы они. Подпись оставалась абсолютной, цепляться ей было не
   за что — и «Рейз 0.05» уезжал к нижнему краю поля, под чужие места. */
@media(max-width:700px){
  .seat__say{position:static;transform:none;align-self:center;margin:0;
    order:-1;animation:none;max-width:100%}
  .seat__combo{position:static;transform:none;align-self:center;margin:0}
  .seat--p0 .seat__say,.seat--p1 .seat__say,.seat--p2 .seat__say,
  .seat--p3 .seat__say,.seat--p4 .seat__say,.seat--p5 .seat__say{top:auto;bottom:auto}
  /* Бросок фишек на телефоне — без сдвига на половину ширины: ставка там не
     висит на абсолютных координатах, и translateX(-50%) уводил бы её влево
     НАСОВСЕМ — анимация оставляет за собой последний кадр. */
  .seat__chip--in,
  .seat--p0 .seat__chip--in,.seat--p1 .seat__chip--in,.seat--p5 .seat__chip--in{
    animation-name:chipTossFlat}
}
@keyframes chipTossFlat{from{opacity:0;transform:translateY(8px) scale(.78)}
  to{opacity:1;transform:none}}

/* ------------------------------------------------- поддержка */
/*
 * Переписка с оператором. Перенесена из казино (templates/woo/support_chat.tpl)
 * и переодета в наши токены: тот же пузырь, та же лента, те же темы обращений.
 *
 * Пузыри разного ВИДА, а не только стороны: на телефоне лента узкая, и
 * «справа-слева» перестаёт читаться, когда сообщение занимает всю ширину.
 */
.sup{margin-top:24px;border:1px solid var(--bd);border-radius:var(--r-l);
  background:var(--card);overflow:hidden}
.sup__hd{display:flex;align-items:center;gap:12px;padding:14px 18px;
  border-bottom:1px solid var(--bd)}
.sup__dot{width:9px;height:9px;flex:none;border-radius:50%;background:var(--acc);
  box-shadow:0 0 0 4px rgba(139,92,246,.16)}
.sup__t{font-size:14.5px;font-weight:700;color:#fff}
.sup__s{font-size:12px;color:var(--mut);margin-top:2px}
.sup__chip{margin-left:auto;font-size:12px;font-weight:700;padding:5px 11px;border-radius:999px;
  background:rgba(255,255,255,.05);border:1px solid var(--bd)}
.sup__close{padding:6px 12px;border-radius:9px;font-size:12px;font-weight:600;cursor:pointer;
  color:var(--mut);background:none;border:1px solid var(--bd);white-space:nowrap;
  transition:color .15s,border-color .15s,background .15s}
.sup__close:hover{color:#8fe3b0;border-color:rgba(63,185,80,.45);background:rgba(63,185,80,.08)}
.sup__chip:not([hidden])+.sup__close{margin-left:10px}
.sup__chip[hidden]+.sup__close{margin-left:auto}

.sup__body{height:46vh;min-height:300px;overflow-y:auto;padding:18px;
  display:flex;flex-direction:column;gap:10px}
.sup__empty{margin:auto;text-align:center;font-size:13.5px;color:var(--mut)}
.sup__msg{max-width:78%;padding:10px 13px;border-radius:14px;font-size:14px;line-height:1.5}
.sup__msg b{display:block;font-size:10px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;opacity:.6;margin-bottom:3px}
.sup__msg p{margin:0;white-space:pre-wrap;word-wrap:break-word}
.sup__msg span{display:block;font-size:10.5px;opacity:.5;margin-top:4px}
.sup__msg.me{align-self:flex-end;background:var(--acc-grad);color:#fff;
  border-bottom-right-radius:5px}
.sup__msg.op{align-self:flex-start;background:rgba(255,255,255,.055);color:var(--txt);
  border:1px solid var(--bd);border-bottom-left-radius:5px}
.sup__closedline{align-self:center;max-width:90%;text-align:center;font-size:12.5px;
  color:#8fe3b0;padding:9px 14px;border-radius:12px;
  background:rgba(63,185,80,.08);border:1px solid rgba(63,185,80,.22)}

/* Темы обращения */
.sup__cats{padding:14px 16px;border-top:1px solid var(--bd);background:rgba(255,255,255,.015)}
.sup__catsL{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);
  margin-bottom:9px}
.sup__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.sup__cat{display:flex;flex-direction:column;gap:3px;padding:10px 12px;border-radius:11px;
  cursor:pointer;text-align:left;background:rgba(255,255,255,.04);border:1px solid var(--bd);
  transition:background .14s,border-color .14s,transform .14s;font:inherit}
.sup__cat:hover{background:rgba(255,255,255,.07);transform:translateY(-1px)}
.sup__cat.on{border-color:currentColor;background:rgba(255,255,255,.08)}
.sup__cat .n{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--txt)}
.sup__cat .n::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.sup__cat .h{font-size:11px;line-height:1.35;color:var(--dim)}

.sup__foot{display:flex;gap:10px;padding:13px 16px;border-top:1px solid var(--bd)}
.sup__foot .inp{flex:1}
.sup__foot .btn{flex:none}

/* История закрытых обращений */
.sup__hist{margin-top:14px;border:1px solid var(--bd);border-radius:var(--r-m);
  background:var(--card);overflow:hidden}
.sup__hbar{display:flex;align-items:center;gap:10px;width:100%;padding:13px 16px;
  cursor:pointer;background:none;border:0;color:inherit;font:inherit;text-align:left}
.sup__hbar:hover{background:rgba(255,255,255,.03)}
.sup__hbarT{font-size:13.5px;font-weight:700;color:var(--txt)}
.sup__hbarC{font-size:11px;color:var(--mut);background:rgba(255,255,255,.07);
  padding:2px 8px;border-radius:999px}
.sup__hbarV{margin-left:auto;color:var(--mut);transition:transform .18s}
.sup__hbarV svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;display:block}
.sup__hist.open .sup__hbarV{transform:rotate(180deg)}
.sup__hlist{padding:0 12px 12px;max-height:320px;overflow-y:auto}
.sup__hitem{border:1px solid var(--bd);border-radius:11px;margin-bottom:8px;overflow:hidden;
  background:rgba(255,255,255,.02)}
.sup__hhead{display:flex;align-items:center;gap:10px;width:100%;padding:11px 13px;
  cursor:pointer;background:none;border:0;color:inherit;font:inherit;text-align:left}
.sup__hhead:hover{background:rgba(255,255,255,.04)}
.sup__hcat{font-size:11px;font-weight:700;white-space:nowrap}
.sup__hsub{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:12.5px;color:var(--txt)}
.sup__hmeta{font-size:11px;color:var(--dim);white-space:nowrap}
.sup__hbody{display:flex;flex-direction:column;gap:8px;padding:11px 13px;
  border-top:1px solid var(--bd);background:rgba(0,0,0,.16)}

@media(max-width:760px){
  .sup__grid{grid-template-columns:repeat(2,1fr)}
  .sup__msg{max-width:92%}
  .sup__body{height:52vh}
  .sup__hd{flex-wrap:wrap}
}

/* ------------------------------------------------- окошко поддержки в углу */
/*
 * Чат открывается прямо поверх страницы, а не уводит с неё. Причина простая:
 * вопрос возникает за столом, в момент, когда что-то пошло не так, а уйти со
 * стола нельзя — там идёт раздача.
 */
.chatw__btn{
  position:fixed;right:18px;bottom:18px;z-index:120;
  width:54px;height:54px;border:0;border-radius:50%;cursor:pointer;
  background:var(--acc-grad);color:#fff;box-shadow:0 10px 26px rgba(109,40,217,.42);
  display:flex;align-items:center;justify-content:center;
  transition:transform .16s,box-shadow .16s;
}
.chatw__btn:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(109,40,217,.5)}
/* Пока чат открыт, кнопка убирается: окошко и есть открытый чат, а круглая
   кнопка рядом с ним выглядит как вторая такая же — и занимает угол, в который
   окошко могло бы опуститься. Не display:none, а прозрачность с pointer-events:
   так возвращение кнопки при закрытии не моргает. */
body.chatw-on .chatw__btn{opacity:0;transform:scale(.82);pointer-events:none}
.chatw__btn svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
/* Значок непрочитанного: ответ оператора, который игрок ещё не видел. Без него
   ответ лежит до следующего захода на страницу поддержки, то есть неделю. */
.chatw__badge{
  position:absolute;top:-2px;right:-2px;min-width:20px;height:20px;padding:0 5px;
  border-radius:999px;background:var(--bad);color:#fff;border:2px solid var(--bg);
  font-size:11px;font-weight:800;line-height:16px;text-align:center;
}
/*
 * РАЗМЕР ОКОШКА ЗАДАЁТ ЭКРАН, А НЕ ВЁРСТКА.
 *
 * Было так: фиксированная высота ленты (300px) плюс темы плюс поле ввода давали
 * 662 пикселя всегда. На ноутбуке 1366×768 окошко упиралось в шапку, а на
 * экране пониже верх уезжал за край — вместе с заголовком и крестиком, то есть
 * закрыть его было нечем.
 *
 * Теперь окошко — колонка с потолком по высоте экрана, а лента внутри тянется и
 * сжимается. dvh вместо vh: на телефоне адресная строка то появляется, то
 * исчезает, и vh считается по максимальной высоте — ровно на её разницу окошко
 * и вылезало за экран.
 */
.chatw{
  position:fixed;right:18px;bottom:20px;z-index:121;width:min(400px,calc(100vw - 32px));
  display:flex;flex-direction:column;
  /* Угол свободен: пока окошко открыто, кнопки там нет. */
  max-height:calc(100vh - 40px);
  max-height:calc(100dvh - 40px);
  border:1px solid var(--bd-h);border-radius:var(--r-l);overflow:hidden;
  background:var(--bg-soft);box-shadow:0 24px 60px rgba(0,0,0,.55);
  animation:chatwIn .18s ease-out both;
}
@keyframes chatwIn{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
.chatw__hd{display:flex;align-items:center;gap:10px;padding:12px 14px;
  border-bottom:1px solid var(--bd);background:rgba(255,255,255,.02)}
.chatw__t{font-size:14px;font-weight:700;color:#fff}
.chatw__x{margin-left:auto;width:28px;height:28px;border:0;border-radius:8px;cursor:pointer;
  background:rgba(255,255,255,.06);color:var(--mut);display:flex;align-items:center;justify-content:center;
  transition:background .14s,color .14s}
.chatw__x:hover{background:rgba(255,255,255,.12);color:#fff}
.chatw__x svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.chatw__guest{padding:18px}
.chatw__guest b{display:block;font-size:14.5px;color:#fff;margin-bottom:6px}
.chatw__guest p{margin:0 0 14px;font-size:13px;line-height:1.55;color:var(--mut)}
/* Внутри окошка чат без собственной рамки: рамка уже у окошка. Заголовок там
   тоже свой («Поддержка»), поэтому внутренний не дублируем — две строки с одним
   смыслом друг под другом съедали половину высоты и ломали кнопку на вторую
   строку. Остаётся состояние обращения: оно меняется и потому полезно. */
.chatw .sup{margin:0;border:0;border-radius:0;background:transparent;
  display:flex;flex-direction:column;min-height:0;flex:1}
.chatw .sup__t{display:none}
.chatw .sup__hd{padding:10px 14px;flex:none}
.chatw .sup__close{padding:5px 10px;font-size:11.5px}
/* Лента занимает то, что осталось, и прокручивается внутри себя.
   Нижняя граница — чтобы в окошке помещался разговор, а не два пузыря; верхняя
   — чтобы на большом экране оно не вытягивалось во всю высоту: это переписка в
   углу, а не вторая страница. Обе уступают потолку по высоте экрана. */
.chatw .sup__body{flex:1 1 auto;height:auto;min-height:260px;max-height:460px;padding:15px}
.chatw .sup__cats,.chatw .sup__foot{flex:none}
.chatw .sup__grid{grid-template-columns:repeat(2,1fr);gap:6px}
.chatw .sup__cats{padding:11px 14px}
/* Подсказка под названием темы в окошке не нужна: там и так тесно, а темы
   названы понятно. На странице поддержки она остаётся. */
.chatw .sup__cat{padding:8px 10px}
.chatw .sup__cat .h{display:none}
.chatw .sup__foot{padding:11px 14px}

@media(max-width:560px){
  /* На телефоне окошко шире — во всю ширину за вычетом полей: 352 пикселя
     рядом с краем превращаются в щель. Высоту по-прежнему ограничивает экран. */
  .chatw{right:10px;left:10px;bottom:14px;width:auto;
    max-height:calc(100vh - 28px);max-height:calc(100dvh - 28px)}
  .chatw .sup__body{max-height:none}
  .chatw__btn{right:14px;bottom:14px;width:50px;height:50px}
}

/* ======================================================================
   ВХОД И РЕГИСТРАЦИЯ — пространство имён `au`.
   ======================================================================

   Строение взято из казино (fame-auth.tpl): одна панель, переключатель
   «Вход / Регистрация» вверху, крупные поля, глазок у пароля, согласие
   отдельной строкой и одна широкая кнопка действия. Оформление — наше:
   та же палитра и те же радиусы, что у остального сайта.

   ДВЕ ВЕЩИ, КОТОРЫЕ ЗДЕСЬ СДЕЛАНЫ НАРОЧНО.

   1. Это страница, а не всплывающее окно. Модалка казино живёт поверх
      витрины, и её нельзя ни открыть ссылкой, ни вернуть «назад». У нас
      на /login приходят из писем, из поддержки и по ссылке от знакомого —
      страница обязана открываться сама по себе и работать без скрипта.

   2. Обе формы отрисованы сразу, переключатель — обычные ссылки. Скрипт
      только прячет лишнюю и меняет адрес в строке браузера. Без скрипта
      ссылки ведут на /login и /register, и всё продолжает работать: вход
      в аккаунт с деньгами не должен зависеть от того, доехал ли JS. */

.au{max-width:468px;margin:30px auto 24px;padding:0 2px}
.au__card{
  position:relative;overflow:hidden;border-radius:var(--r-l);
  background:
    radial-gradient(130% 80% at 50% -10%,rgba(139,92,246,.16),transparent 58%),
    linear-gradient(180deg,#191b26,#14151e);
  border:1px solid var(--bd);box-shadow:var(--sh-2),var(--lip);
}
.au__hd{display:flex;align-items:center;gap:13px;padding:20px 22px 18px;
  background:linear-gradient(180deg,rgba(139,92,246,.1),rgba(139,92,246,0));
  border-bottom:1px solid var(--bd)}
.au__em{width:42px;height:42px;flex:none;border-radius:13px;display:flex;align-items:center;
  justify-content:center;background:var(--acc-grad);box-shadow:var(--sh-1),var(--lip)}
.au__em svg{width:20px;height:20px;fill:#fff}
/* Герб в кружке: он круглый и с прозрачным полем, поэтому вписывается целиком,
   без обрезки по краям — обрезанная корона читается как ошибка вёрстки. */
.au__em img{width:100%;height:100%;object-fit:contain;display:block}
.ftr__logo{width:58px;height:58px;object-fit:contain;flex:none;
  filter:drop-shadow(0 4px 14px rgba(139,92,246,.3))}
.au__em:has(img){background:none;box-shadow:none;width:46px;height:46px}
.au__t{margin:0;font-size:19px;font-weight:800;letter-spacing:.2px}
.au__s{margin:3px 0 0;font-size:13px;color:var(--mut);line-height:1.45}

/* Переключатель — та же капсула с сегментами, что и в верхнем меню: это
   один и тот же жест выбора, и выглядеть он должен одинаково. */
.au__tabs{display:flex;gap:4px;margin:16px 18px 0;padding:4px;border-radius:14px;
  background:rgba(255,255,255,.04);border:1px solid var(--bd)}
.au__tab{flex:1;height:42px;display:flex;align-items:center;justify-content:center;
  border-radius:10px;color:var(--mut);font-weight:700;font-size:14px;text-decoration:none;
  transition:background .15s,color .15s,box-shadow .15s}
.au__tab:hover{color:var(--txt)}
.au__tab.on{background:var(--acc-grad);color:#fff;box-shadow:var(--lip)}

.au__body{padding:18px 22px 22px;display:flex;flex-direction:column;gap:14px}
.au__f{display:flex;flex-direction:column;gap:7px;position:relative}
.au__l{font-size:12.5px;font-weight:700;color:var(--mut);letter-spacing:.02em}
/* Поля выше обычных: на телефоне в поле ростом 40 пикселей промахиваются
   мимо, а это первое, что игрок делает на сайте. */
.au__inp{height:52px;border-radius:14px;font-size:15.5px;padding:0 16px}
.au__f--pw .au__inp{padding-right:52px}
.au__eye{position:absolute;right:8px;bottom:6px;width:40px;height:40px;border:0;padding:0;
  background:transparent;color:var(--mut);cursor:pointer;border-radius:11px;
  display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s}
.au__eye:hover{background:rgba(255,255,255,.07);color:var(--txt)}
.au__eye svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8}
.au__hint{font-size:12px;color:var(--dim);line-height:1.45}

/* Согласие. Круглая галочка — как в казино; отметка обязательна и
   проверяется ещё и на сервере: правила принимают нажатием, а не вёрсткой. */
.au__terms{display:flex;align-items:flex-start;gap:11px;cursor:pointer;user-select:none;
  font-size:13px;color:var(--mut);line-height:1.5;padding:2px 0}
.au__terms input{position:absolute;opacity:0;width:0;height:0}
.au__cbx{width:24px;height:24px;flex:none;margin-top:1px;border-radius:50%;
  border:2px solid rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;
  transition:background .15s,border-color .15s}
.au__terms input:checked + .au__cbx{background:var(--acc);border-color:var(--acc)}
.au__terms input:focus-visible + .au__cbx{outline:2px solid var(--acc);outline-offset:2px}
.au__cbx svg{width:13px;height:13px;fill:none;stroke:#fff;stroke-width:3;opacity:0;transition:opacity .15s}
.au__terms input:checked + .au__cbx svg{opacity:1}
.au__terms a{color:#b39dff}
/* Две галочки подряд — возраст и условия — стоят ближе друг к другу, чем к
   полям: это один блок подтверждений, а не два отдельных вопроса. */
.au__terms + .au__terms{margin-top:-7px}

.au__go{height:54px;font-size:15.5px;border-radius:15px}
.au__legal{font-size:12.5px;color:var(--dim);line-height:1.6;margin:16px 4px 0}

@media(max-width:560px){
  .au{margin:18px auto 18px}
  .au__hd{padding:17px 16px 15px}
  .au__tabs{margin:14px 13px 0}
  .au__body{padding:16px 16px 18px}
}

/* ======================================================================
   ПЕРЕХОД МЕЖДУ СТРАНИЦАМИ — пространство имён `pl`.
   ======================================================================

   Герб выходит в центр на время, пока открывается следующий раздел, и уходит
   вместе со старой страницей. Не заставка: по умолчанию его нет вовсе, он
   появляется только после нажатия.

   Почему затемнение неплотное и с размытием: за ним должна угадываться
   страница, с которой уходишь. Плотный чёрный экран на каждое нажатие читается
   как «сайт перезагружается», и быстрый переход начинает ощущаться долгим.

   Герб сложный — корона, фишки, карты. Поэтому он здесь крупный: в шапке на 28
   пикселях от него осталось бы фиолетовое пятно. */

.pl{position:fixed;inset:0;z-index:9999;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:16px;
  opacity:0;visibility:hidden;pointer-events:none;
  background:rgba(10,11,16,.66);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  transition:opacity .16s ease,visibility .16s ease}
.pl--on{opacity:1;visibility:visible}
/* Появление: герб чуть подрастает и всплывает. Вход быстрый (160 мс), чтобы не
   задерживать переход, дыхание — медленное, чтобы ожидание не выглядело
   зависшим кадром. */
.pl__logo{width:min(188px,44vw);height:auto;
  filter:drop-shadow(0 14px 40px rgba(139,92,246,.45));
  transform:scale(.88);opacity:0;transition:transform .22s cubic-bezier(.2,.9,.3,1),opacity .22s ease}
.pl--on .pl__logo{transform:none;opacity:1;animation:pl-breathe 2.4s ease-in-out .25s infinite}
@keyframes pl-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
/* Название под гербом показывается ТОЛЬКО когда самого герба нет: имя клуба
   написано на нём самом, и дублировать его — лишняя строка под картинкой.
   Нужно это для случая, когда файл не доехал: пустое затемнение без единого
   знака читается как сбой. */
.pl__word{display:none;flex-direction:column;align-items:center;gap:4px;line-height:1;text-align:center;
  opacity:0;transform:translateY(6px);transition:opacity .22s ease .04s,transform .22s ease .04s}
.pl--on .pl__word{opacity:1;transform:none}
.pl__word span{font-size:11px;font-weight:800;letter-spacing:.4em;color:var(--mut);padding-left:.4em}
.pl__word b{font-size:20px;font-weight:800;letter-spacing:.02em;
  background:var(--acc-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.pl--text .pl__word{display:flex}
.pl--text .pl__word span{font-size:14px}
.pl--text .pl__word b{font-size:30px}
/* Движение отключено в системе — отключено и здесь: пульсирующая картинка во
   весь экран у части людей вызывает тошноту, и это не фигура речи. */
@media(prefers-reduced-motion:reduce){
  .pl__logo,.pl--on .pl__logo{animation:none;transition:opacity .16s ease}
}