/* ==========================================================================
   DropHub Рулетка — палитра и раскладка сайта (только roulette.html,
   body.ht-roll)

   Подключается СРАЗУ ПОСЛЕ roulette.css и ДО mobile.css — так же, как
   crash.theme.css у краша. Префикс :where(.ht-roll) веса не добавляет:
   правило перебивает roulette.css порядком, а mobile.css на телефоне
   по-прежнему сильнее. Где mobile.css нужно перебить намеренно — явно
   body.ht-roll (таких мест два, оба подписаны).

   Что меняется: вся игра собрана в одну карточку-«стол» шириной 1040 px
   (раньше блоки тянулись на всё окно, колесо 780), индиго-палитра сайта,
   у кнопок сторон — название, шанс, множитель и возможный выигрыш,
   подсказка по фазе раунда, полоса под таймером.
   Что НЕ меняется: геометрия колеса (cqw из config.geom), разметка и
   классы, на которые опирается roulette.main.js. Без backdrop-filter,
   бесконечных анимаций и крупных размытых теней; свечение итога, которое
   просили убрать, не возвращается.
   Отключить тему целиком — убрать класс ht-roll у body.
   ========================================================================== */

/* ═══════════ ПАЛИТРА — та же, что у главной и краша ═══════════ */
body.ht-roll {
  --ht-bg:        #1A1430;
  --ht-deep:      #120C26;
  --ht-surface:   #221B3E;
  --ht-surface-2: #2C2452;
  --ht-line:      #3A3166;
  --ht-text:      #F5F3FF;
  --ht-text-dim:  #BDB7DE;
  --ht-text-mute: #8F87B8;
  --ht-scrim:     16, 10, 36;

  background-color: var(--ht-bg);
}

/* Токены — на .cf-page, а не на body: games.css задаёт свои --text,
   --panel и пр. на .gm-body.cf-body (вес 0,2,0), и у body их не перебить
   без !important. Ближайший предок выигрывает и так. */
:where(.ht-roll) .cf-page {
  --rl-table: 1040px;        /* ширина стола на широком экране */
  --rl-wheel: 620px;         /* диаметр колеса (было 780) */
  /* рамка пульта 1 px + его отступ; на столько же сдвинуты колонки
     игроков — чтобы стояли ровно под кнопками сторон */
  --rl-inset: 15px;

  --text:      var(--ht-text);
  --text-dim:  var(--ht-text-dim);
  --text-mute: var(--ht-text-mute);
  --panel-2:   var(--ht-surface-2);
  --panel-3:   var(--ht-deep);
  --line:      var(--ht-line);
  --gray-btn:  var(--ht-surface-2);

  /* Ячейки колеса, фишки истории, кнопки сторон. Яркие, но не кислотные:
     прежние #EB1E33 / #36B144 на индиго резали глаз, а приглушённые
     #33405F / #C23149 / #22A262 (до 2026-10-19) выглядели блёкло.
     Красный подобран так, чтобы белый мелкий текст на кнопке «T» держал
     ≥ 4.5:1 (#DB2F4B — 4.7:1), синий — 6:1. */
  --z-black: #3E5BBF;  --z-black-br: #7C95F0;  --z-black-ic: #DCE6FF;
  --z-red:   #DB2F4B;  --z-red-br:   #FF6E85;  --z-red-ic:   #FFD9E0;
  --z-green: #26C06E;  --z-green-br: #5CF0A0;  --z-green-ic: #D8FFE9;

  max-width: calc(var(--rl-table) + 2 * var(--pad-x, 20px));
}
/* арт за столом — фоном, а не соперником колеса */
:where(.ht-roll) .cf-page::before { opacity: .28; }

/* Фокус с клавиатуры. roulette.css глобально гасит outline у кнопок
   (button { outline: none }); вес этого правила (0,2,1) его перебивает,
   а сам ресет не трогаем — от него зависят остальные кнопки страницы. */
:where(.ht-roll) .cf-page :is(button, summary, a):focus-visible {
  outline: 2px solid var(--lime, #D7FF00); outline-offset: 2px;
}
/* У кнопок сторон фокус фиолетовый: лаймовая рамка на них значит
   «Выпало», белая — «тут ваша ставка». Вес (0,3,0) выше общего (0,2,1). */
:where(.ht-roll) .cf-page .cf-zone:focus-visible {
  outline: 2px solid var(--violet, #A62CFF); outline-offset: 3px;
}

/* ═══════════ СТОЛ ═══════════ */
:where(.ht-roll) .cf-table {
  position: relative; width: 100%;
  padding: 16px 24px 24px;
  border: 1px solid var(--ht-line); border-radius: 20px;
  background: var(--ht-surface);   /* запасной фон для браузеров без color-mix */
  /* мягкий фиолетовый свет сверху — колесо будто под лампой стола */
  background:
    radial-gradient(55% 300px at 50% 0, color-mix(in srgb, var(--violet, #A62CFF) 14%, transparent), transparent 75%),
    linear-gradient(180deg, var(--ht-surface), color-mix(in srgb, var(--ht-surface) 72%, var(--ht-bg)));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 24px 48px -30px rgba(6,3,18,.9);
  isolation: isolate;   /* сетка (::before, z -1) — над заливкой стола, под содержимым */
}
/* Фирменная сетка 44 px, как у столов плинко, минёра, хило и апгрейда:
   гаснет к краям, самая заметная — вокруг колеса. */
:where(.ht-roll) .cf-table::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-radius: inherit;
  background-image:
    linear-gradient(rgba(190, 170, 255, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(190, 170, 255, .06) 1px, transparent 1px);
  background-size: 44px 44px; background-position: center -1px;
  -webkit-mask-image: radial-gradient(64% 70% at 50% 40%, #000 0%, rgba(0, 0, 0, .35) 55%, transparent 85%);
          mask-image: radial-gradient(64% 70% at 50% 40%, #000 0%, rgba(0, 0, 0, .35) 55%, transparent 85%);
}
/* Фон страницы (кадр рулетки, .cf-page::before из roulette.css) снят по
   просьбе владельца (2026-10-29): стол на ровном фоне сайта. */
:where(.ht-roll) .cf-page::before { content: none; }

/* ═══════════ ШАПКА ИГРЫ И ПРАВИЛА ═══════════ */
:where(.ht-roll) .cf-gamebar { position: relative; padding: 14px 0 12px; }
:where(.ht-roll) .cf-gamebar__side { gap: 10px; }
:where(.ht-roll) .cf-gamebar__title { font-weight: 600; letter-spacing: .06em; color: #fff; }

/* «?» — <details>: окно правил открывается без скрипта. Само окно
   привязано к .cf-gamebar (position: relative выше), а не к кнопке: на
   375 px окно от кнопки уезжало бы за левый край экрана. */
:where(.ht-roll) .cf-rules { position: static; }
:where(.ht-roll) .cf-rules > summary {
  list-style: none; display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--ht-surface-2); border: 1px solid var(--ht-line);
  color: var(--ht-text-dim); font: 600 13px/1 'Inter', sans-serif;
  cursor: pointer; transition: color .15s, border-color .15s;
}
:where(.ht-roll) .cf-rules > summary::-webkit-details-marker { display: none; }
:where(.ht-roll) .cf-rules > summary:hover,
:where(.ht-roll) .cf-rules[open] > summary {
  color: #fff; border-color: color-mix(in srgb, var(--violet, #A62CFF) 60%, var(--ht-line));
}
:where(.ht-roll) .cf-rules__body {
  position: absolute; right: 0; top: calc(100% - 4px); z-index: 30;
  width: min(340px, 100%); padding: 14px 16px;
  border: 1px solid var(--ht-line); border-radius: 14px;
  background: var(--ht-surface-2);
  box-shadow: 0 18px 36px -16px rgba(6,3,18,.85);
  font-size: 13px; line-height: 1.5; color: var(--ht-text-dim); text-align: left;
  animation: rl-pop .16s ease-out both;
}
:where(.ht-roll) .cf-rules__body h3 {
  margin-bottom: 8px;
  font: 600 13px/1.2 var(--f-cond, 'Oswald'), sans-serif; letter-spacing: .08em; text-transform: uppercase;
  color: #fff;
}
:where(.ht-roll) .cf-rules__body ul { list-style: none; display: grid; gap: 6px; }
:where(.ht-roll) .cf-rules__body li { position: relative; padding-left: 14px; }
:where(.ht-roll) .cf-rules__body li::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--ht-text-mute);
}
:where(.ht-roll) .cf-rules__body b { color: #fff; font-weight: 600; }
/* раунд, хэш и сид — пишет roulette.main.js (_renderFair); моноширинно,
   чтобы хэш читался посимвольно и переносился где угодно */

/* ═══════════ ИСТОРИЯ И СЧЁТ ═══════════ */
:where(.ht-roll) .cf-toprow { padding: 0 0 6px; }
/* на широком экране — лента во всю длину блока, счёт справа строкой ниже */
@media (min-width: 761px) {
  :where(.ht-roll) .cf-hist-block {
    display: flex; flex-direction: column; align-items: stretch; gap: 8px;
    width: 100%; min-width: 0;
  }
  :where(.ht-roll) .cf-history { order: 1; }
  :where(.ht-roll) .cf-stats { order: 2; flex: none; align-self: flex-end; }
}
/* Вес body нужен против padding-bottom из mobile.css. Отступ 4 px — место
   под лаймовое кольцо свежей фишки внутри overflow; отрицательные поля
   возвращают ленту к краю стола. Старые фишки растворяются вправо. */
body.ht-roll .cf-history {
  min-width: 0; margin: -4px 0 -4px -4px; padding: 4px;
  -webkit-mask: linear-gradient(90deg, #000 82%, transparent);
          mask: linear-gradient(90deg, #000 82%, transparent);
}
:where(.ht-roll) .cf-hist {
  width: 24px; height: 24px; border-radius: 7px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
:where(.ht-roll) .cf-hist svg { width: 14px; height: 14px; }
/* свежая — слева, в лаймовом кольце: глаз сразу находит, с чего читать */
:where(.ht-roll) .cf-hist:first-child {
  box-shadow: 0 0 0 2px var(--ht-surface), 0 0 0 3.5px var(--lime, #D7FF00), inset 0 1px 0 rgba(255,255,255,.12);
}
:where(.ht-roll) .cf-stats { gap: 6px; }
:where(.ht-roll) .cf-stat-label {
  font: 600 11px/1 var(--f-cond, 'Oswald'), sans-serif; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ht-text-mute);
}
:where(.ht-roll) .cf-stat-total {
  margin-right: 4px;
  font: 600 11px/1 var(--f-cond, 'Oswald'), sans-serif; letter-spacing: .08em;
  color: var(--ht-text);
}
:where(.ht-roll) .cf-stat {
  gap: 5px; height: 24px; padding: 0 8px 0 4px; border-radius: 7px;
  border: 1px solid var(--ht-line); background: rgba(var(--ht-scrim), .55);
  font: 600 12px/1 'Inter', sans-serif; font-variant-numeric: tabular-nums;
  color: var(--ht-text); cursor: default;
}
/* в квадратике — эмблема стороны, как на колесе (её вставляет _renderStats) */
:where(.ht-roll) .cf-stat i {
  display: grid; place-items: center;
  width: 16px; height: 16px; border: 0; border-radius: 5px;
}
:where(.ht-roll) .cf-stat i svg { width: 10px; height: 10px; display: block; }
:where(.ht-roll) .cf-stat--black i { background: var(--z-black); color: var(--z-black-ic); border: 0; }
:where(.ht-roll) .cf-stat--red   i { background: var(--z-red);   color: var(--z-red-ic);   border: 0; }
:where(.ht-roll) .cf-stat--green i { background: var(--z-green); color: var(--z-green-ic); border: 0; }

/* ═══════════ КОЛЕСО: только размер, цвет и неподвижный объём ═══════════ */
/* Вес body перебивает mobile.css (.cf-wheel-wrap max-width: 100%). Маска
   сплошная до 80 %: раньше растворение начиналось с 58 %, и таймер с
   полосой под ним наполовину таял. */
body.ht-roll .cf-wheel-wrap {
  max-width: min(var(--rl-wheel), 100%);
  margin: 4px auto 0;
  -webkit-mask: linear-gradient(180deg, #000 80%, transparent 100%);
          mask: linear-gradient(180deg, #000 80%, transparent 100%);
}
:where(.ht-roll) .cf-wheel-bg { background: var(--ht-deep); box-shadow: 0 0 0 1px var(--ht-line); }
:where(.ht-roll) .cf-wheel-face { opacity: 1; }
/* Тонкий тёмный шов между ячейками — кольцо читается как набор плиток, а
   не сплошная лента. Выигравшую по-прежнему обводит .cf-seg.is-win
   .cf-seg__plate из roulette.css (вес выше). */
:where(.ht-roll) .cf-seg__plate {
  stroke: rgba(18,12,38,.7); stroke-width: 1.5px; vector-effect: non-scaling-stroke;
}
/* Неподвижный объём кольца: тень у внутреннего края, блик у внешнего.
   Стопы — geom.rInner .391 и rOuter .494, делённые на радиус .5
   (78.2 % и 98.8 %); сменится geom — пересчитать. Слой не вращается,
   поэтому кадры прокрутки его не перерисовывают; указатель (z 5) выше. */
:where(.ht-roll) .cf-stage::after {
  content: ''; position: absolute; left: 0; top: 0; z-index: 4;
  width: 100cqw; height: 100cqw; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side,
    transparent 78.2%,
    rgba(10,6,24,.45) 78.3%, rgba(10,6,24,0) 83.5%,
    rgba(255,255,255,0) 93%, rgba(255,255,255,.12) 98.4%, transparent 98.8%);
}
/* Указатель крупнее (лаймовый — см. roulette.html) и «язычком» отыгрывает
   проходящие ячейки: класс is-tick main.js уже ставит на 60 мс. Колесо
   крутится по часовой, ячейки наверху идут вправо — туда и кивает остриё. */
:where(.ht-roll) .cf-marker__arrow {
  width: clamp(9px, 2.4cqw, 16px); height: clamp(13.5px, 3.6cqw, 24px);
  transform-origin: 50% 100%; transition: transform .09s ease-out;
}
:where(.ht-roll) .cf-marker.is-tick .cf-marker__arrow { transform: rotate(5deg); transition-duration: .03s; }

/* ═══════════ ЦЕНТР КОЛЕСА ═══════════ */
:where(.ht-roll) .cf-center { top: 27cqw; }
:where(.ht-roll) .cf-center__label { color: var(--ht-text-dim); font-size: clamp(11px, 1.9cqw, 13px); }
:where(.ht-roll) .cf-center__time { font-size: clamp(26px, 7cqw, 46px); color: var(--ht-text); }
:where(.ht-roll) .cf-center--count.is-urgent .cf-center__time { color: #FF7A8C; }
:where(.ht-roll) .cf-center--lock .cf-center__time {
  font-family: var(--f-cond, 'Oswald'), sans-serif; font-size: clamp(16px, 3.8cqw, 26px); font-weight: 600;
  letter-spacing: .12em; padding-left: .12em; text-transform: uppercase; color: var(--ht-text-dim);
}
:where(.ht-roll) .cf-center--roll .cf-center__time {
  font-size: clamp(18px, 4.6cqw, 32px); letter-spacing: .18em; padding-left: .18em; color: var(--ht-text);
}
:where(.ht-roll) .cf-center--win .cf-center__time {
  font-family: var(--f-cond, 'Oswald'), sans-serif; font-size: clamp(24px, 6.4cqw, 44px); letter-spacing: .06em;
}
/* Полоса оставшегося времени приёма. Видна только в betting; ширину
   (scaleX) двигает тот же кадр отсчёта, что пишет цифры. */
:where(.ht-roll) .cf-center__bar {
  display: block; width: clamp(80px, 17cqw, 120px); height: 4px; margin-top: 6px;
  border-radius: 2px; background: rgba(255,255,255,.1); overflow: hidden;
  opacity: 0; transition: opacity .2s;
}
:where(.ht-roll) #cf-root[data-state="betting"] .cf-center__bar { opacity: 1; }
:where(.ht-roll) .cf-center__bar i {
  display: block; height: 100%; border-radius: inherit;
  background: var(--lime, #D7FF00); transform-origin: 0 50%;
}
:where(.ht-roll) .cf-center.is-urgent .cf-center__bar i { background: #FF7A8C; }

/* ═══════════ ПУЛЬТ: СУММА СТАВКИ ═══════════ */
:where(.ht-roll) .cf-deck {
  margin-top: 2px; padding: calc(var(--rl-inset) - 1px);
  border: 1px solid var(--ht-line); border-radius: 16px;
  background: rgba(var(--ht-scrim), .55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
:where(.ht-roll) .cf-betrow { padding: 0; }
/* Поле и быстрые суммы — одной строкой. Отмены здесь больше нет: она в
   строке подсказки над кнопками сторон (см. ниже), иначе её ряд сдвигал
   кнопки на 44 px. Поле — 3 доли из 10, но не уже 200 px: на 768 px шесть
   сумм в оставшемся месте ещё помещаются. */
:where(.ht-roll) .cf-betbox {
  width: 100%;
  display: grid; grid-template-columns: minmax(200px, 3fr) minmax(0, 7fr);
  grid-template-areas: "label label" "money chips";
  gap: 8px 10px; align-items: center;
}
:where(.ht-roll) .cf-betrow__label {
  grid-area: label; margin: 0;
  font: 600 11px/1.2 var(--f-cond, 'Oswald'), sans-serif; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ht-text-mute);
}
:where(.ht-roll) .cf-betrow__label i {
  font: 500 12px/1.2 'Inter', sans-serif; letter-spacing: 0; text-transform: none;
  color: var(--ht-text-dim); transition: color .15s;
}
/* отказ сервера («Войдите через Steam…», «мало средств») — красным,
   обычная подсказка «Макс. N» — спокойным */
:where(.ht-roll) .cf-betrow__label i.is-error { color: #FF8A9A; font-weight: 600; }
:where(.ht-roll) .cf-money {
  grid-area: money; height: 44px;
  border-color: var(--ht-line); border-radius: 12px; background: var(--ht-deep);
  transition: border-color .15s;
}
:where(.ht-roll) .cf-money:focus-within { border-color: var(--lime, #D7FF00); }
:where(.ht-roll) .cf-money input { font-size: 18px; }
:where(.ht-roll) .cf-money__max {
  height: 32px; border-radius: 8px;
  border-color: var(--ht-line); background: var(--ht-surface-2); color: var(--ht-text-dim);
}
:where(.ht-roll) .cf-money__max:hover:not(:disabled) { color: var(--lime, #D7FF00); border-color: var(--lime, #D7FF00); }
:where(.ht-roll) .cf-qbets {
  grid-area: chips; margin: 0;
  grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px;
}
:where(.ht-roll) .cf-chip {
  height: 44px; padding: 0 4px; border-radius: 10px;
  border-color: var(--ht-line); background: var(--ht-surface-2); color: var(--ht-text-dim);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
:where(.ht-roll) .cf-chip:hover:not(:disabled) {
  color: #fff; border-color: color-mix(in srgb, var(--violet, #A62CFF) 55%, var(--ht-line));
}
/* быстрая сумма, равная текущей ставке, — подсвечена (is-on ставит
   _renderAmt): видно, какая сумма сейчас выбрана. Чистый лайм, без
   смешивания: лайм пополам с индиго давал оливковую рамку. */
:where(.ht-roll) .cf-chip.is-on {
  color: var(--lime, #D7FF00);
  border-color: var(--lime, #D7FF00);
  background: var(--ht-surface-2);
  box-shadow: inset 0 0 0 1px var(--lime, #D7FF00);
}
/* Пока приём закрыт (locked … reset), чипы получают disabled и opacity .4
   из roulette.css — лайм под ней становился оливковым. Выбранный гаснет
   вместе с остальными; сумма по-прежнему видна в поле. Вес (0,3,0). */
:where(.ht-roll) .cf-chip.is-on:disabled {
  color: var(--ht-text-dim);
  border-color: var(--ht-line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

/* ═══════════ ПОДСКАЗКА ПО ФАЗЕ ═══════════
   Одна строка над кнопками сторон говорит, что делать сейчас. Видимую
   выбирает data-state на #cf-root — его и так ставит каждая фаза. */
:where(.ht-roll) .cf-zones {
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px;
}
/* Высота строки постоянная (34 px = кнопка отмены 30 + воздух; и две
   строки мелкого текста на 320 px): подсказки разной длины и отмена
   сменяют друг друга, а кнопки сторон под ними стоят на месте. */
:where(.ht-roll) .cf-zones__hint {
  grid-column: 1 / -1; margin: 0;
  min-height: 34px; display: flex; align-items: center; justify-content: center;
  text-align: center; font-size: 12px; line-height: 1.4; color: var(--ht-text-mute);
}
:where(.ht-roll) .cf-hint { display: none; animation: rl-fade .2s ease-out; }
:where(.ht-roll) #cf-root[data-state="boot"] .cf-hint--boot,
:where(.ht-roll) #cf-root[data-state="betting"] .cf-hint--open,
:where(.ht-roll) #cf-root:is([data-state="locked"], [data-state="spinning"]) .cf-hint--wait,
:where(.ht-roll) #cf-root:is([data-state="result"], [data-state="reset"]) .cf-hint--done { display: inline; }
/* гость: нажатие на сторону вернуло бы «войдите» — так и пишем заранее
   (is-guest ставит _renderBalance после первого ответа кошелька) */
:where(.ht-roll) #cf-root.is-guest[data-state="betting"] .cf-hint--open { display: none; }
:where(.ht-roll) #cf-root.is-guest[data-state="betting"] .cf-hint--guest { display: inline; }
/* Отмена ставки — на месте подсказки, той же высоты строки. Видна, только
   пока идёт приём и есть свои ставки (hidden снимает _renderCancel). */
:where(.ht-roll) .cf-zones__hint .cf-cancel {
  width: auto; height: 30px; margin: 0; padding: 0 14px; border-radius: 9px;
  font-size: 12px;
}
:where(.ht-roll) #cf-root .cf-zones__hint:has(.cf-cancel:not([hidden])) .cf-hint { display: none; }
/* Не хватает денег — красная строка с «Пополнить» на месте подсказки и
   отмены; видна только в приём ставок. Раньше нажатие без баланса молча
   трясло кнопку и щёлкало, как принятая ставка (владелец 2026-10-25). */
:where(.ht-roll) .cf-funds {
  display: inline-flex; align-items: center; gap: 10px; padding: 2px 3px 2px 12px; border-radius: 10px;
  background: rgba(255, 90, 110, .12); box-shadow: inset 0 0 0 1px rgba(255, 122, 140, .5);
  color: #FFB3BE; font-weight: 600; animation: rl-fade .2s ease-out;
}
:where(.ht-roll) .cf-funds[hidden], :where(.ht-roll) #cf-root:not([data-state="betting"]) .cf-funds { display: none; }
:where(.ht-roll) .cf-funds__add {
  height: 26px; margin: 0; padding: 0 12px; border: 0; border-radius: 8px; cursor: pointer;
  background: var(--lime, #D7FF00); color: #10160A; font: inherit; font-weight: 700;
}
:where(.ht-roll) .cf-funds__add:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
:where(.ht-roll) #cf-root[data-state="betting"] .cf-zones__hint:has(.cf-funds:not([hidden])) :is(.cf-hint, .cf-cancel) { display: none; }

/* ═══════════ КНОПКИ СТОРОН ═══════════
   [значок] CT          ×2
            Шанс 46.7%  выплата ◎2,000
   ПОРЯДОК ПРАВИЛ ВАЖЕН: вес у состояний равный, побеждает последнее. */
:where(.ht-roll) .cf-zone {
  --tile: var(--z-black); --edge: var(--z-black-br);
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  grid-template-areas: "icon name mult" "icon sub win";
  align-items: center; column-gap: 12px; row-gap: 3px;
  width: 100%; height: 68px; padding: 0 12px;
  overflow: visible;            /* ярлык «Выпало» выходит за верхний край */
  font: inherit; color: #fff; text-align: left;
  border: 1px solid var(--edge); border-radius: 14px;
  background: var(--tile);      /* запасной фон для браузеров без color-mix */
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--tile), #fff 9%) 0%,
    var(--tile) 52%,
    color-mix(in srgb, var(--tile), #000 18%) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -2px 0 rgba(0,0,0,.2), 0 12px 22px -16px var(--tile);
  transition: transform .14s ease, filter .14s ease, opacity .2s ease, box-shadow .14s ease, border-color .14s ease;
}
:where(.ht-roll) .cf-zone--red   { --tile: var(--z-red);   --edge: var(--z-red-br); }
/* Зелёная плитка темнее ячейки колеса (#26C06E): белый мелкий текст на
   ярком зелёном даёт ~2.5:1, на #17824B — 4.8:1. Яркость кнопке даёт кайма
   (--edge) и свечение, а колесо и фишки берут яркий токен. */
:where(.ht-roll) .cf-zone--green { --tile: #17824B; --edge: #5CF0A0; }
:where(.ht-roll) .cf-zone:hover:not(.is-disabled) { transform: translateY(-1px); filter: brightness(1.07); }
:where(.ht-roll) .cf-zone.is-press:not(.is-disabled) { transform: translateY(1px) scale(.985); filter: brightness(.96); }
:where(.ht-roll) .cf-zone.is-disabled { opacity: .55; filter: saturate(.75); cursor: not-allowed; }
/* своя ставка — белая рамка; во время вращения кнопка с ней не гаснет */
:where(.ht-roll) .cf-zone.has-bet {
  border-color: rgba(255,255,255,.75);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.55), inset 0 1px 0 rgba(255,255,255,.16), 0 12px 22px -16px var(--tile);
}
:where(.ht-roll) .cf-zone.has-bet.is-disabled { opacity: .85; }
/* Выпавшая сторона — лаймовая рамка и ярлык «Выпало». Раньше она была
   ещё и is-disabled, то есть наполовину прозрачной в момент итога. */
:where(.ht-roll) .cf-zone.is-win,
:where(.ht-roll) .cf-zone.is-win.is-disabled {
  opacity: 1; filter: none;
  border-color: var(--lime, #D7FF00);
  box-shadow: 0 0 0 1px var(--lime, #D7FF00), inset 0 1px 0 rgba(255,255,255,.18), 0 14px 28px -14px var(--tile);
}
:where(.ht-roll) .cf-zone.is-lose,
:where(.ht-roll) .cf-zone.is-lose.is-disabled { opacity: .42; filter: saturate(.35); }
:where(.ht-roll) .cf-zone.is-win::after {
  content: 'Выпало'; position: absolute; top: -9px; right: 12px;
  height: 18px; padding: 0 8px; border-radius: 9px;
  background: var(--lime, #D7FF00); color: #0B0B0E;
  font: 700 10px/18px var(--f-cond, 'Oswald'), sans-serif; letter-spacing: .1em; text-transform: uppercase;
  pointer-events: none;
  animation: rl-badge .28s cubic-bezier(.2, 1.5, .4, 1) both;
}
:where(.ht-roll) .cf-zone__icon {
  grid-area: icon; width: 40px; height: 40px; border-radius: 11px;
  background: rgba(10,6,24,.22); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
:where(.ht-roll) .cf-zone__icon svg { width: 26px; height: 26px; }
:where(.ht-roll) .cf-zone__label {
  grid-area: name; align-self: end; flex: none; min-width: 0;
  font: 600 18px/1.1 var(--f-cond, 'Oswald'), sans-serif; letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Мелкий текст на кнопках — чисто белый: полупрозрачный на зелёной и
   красной плитке не дотягивал до 4.5:1. Второстепенность — весом 500. */
:where(.ht-roll) .cf-zone__sub {
  grid-area: sub; align-self: start; min-width: 0;
  font-size: 12px; font-weight: 500; line-height: 1.3; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
:where(.ht-roll) .cf-zone__sub i { font-style: normal; }
/* множитель — не водяной знак в углу, а читаемая плашка */
:where(.ht-roll) .cf-zone__mult {
  grid-area: mult; justify-self: end; align-self: end;
  position: static; opacity: 1;
  padding: 4px 9px; border-radius: 9px;
  background: rgba(10,6,24,.28); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
  font: 700 20px/1 var(--f-cond, 'Oswald'), sans-serif; letter-spacing: .02em; font-variant-numeric: tabular-nums;
}
:where(.ht-roll) .cf-zone__win {
  grid-area: win; justify-self: end; align-self: start;
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px; font-weight: 500; font-style: normal; line-height: 1.3; color: #fff;
  white-space: nowrap;
}
:where(.ht-roll) .cf-zone__win .coin-ico { font-size: 12px; }
:where(.ht-roll) .cf-zone__win:empty { display: none; }
/* «выплата ◎N» — только пока принимают ставки. После итога она на
   выпавшей кнопке читалась как «вы выиграли», хотя зритель не ставил.
   visibility, а не display: высота и сетка кнопки не меняются. */
:where(.ht-roll) #cf-root:not([data-state="betting"]) .cf-zone__win { visibility: hidden; }
/* «Ваша ставка ◎N» — на месте шанса и выплаты, правее значка на всю
   ширину. Число пишет _applyMine, подпись и монета — псевдоэлементы. */
:where(.ht-roll) .cf-zone__mine {
  grid-row: 2; grid-column: 2 / -1; align-self: start;
  position: static; display: flex; align-items: center; gap: 4px;
  min-width: 0; overflow: hidden;
  padding: 0; background: none; border-radius: 0;
  font-size: 12px; font-weight: 700; line-height: 1.3; color: #fff; white-space: nowrap;
  animation: rl-mine .2s ease-out;
}
:where(.ht-roll) .cf-zone__mine:empty { display: none; }
/* число ставки (обёртку пишет _applyMine): при семизначной сумме на
   узкой кнопке — многоточие, а не срезанный посреди цифры конец */
:where(.ht-roll) .cf-zone__mine-v { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
:where(.ht-roll) .cf-zone__mine::before { content: 'Ваша ставка'; order: -2; font-weight: 500; color: #fff; }
:where(.ht-roll) .cf-zone__mine::after {
  content: ''; order: -1; flex: none; width: 13px; height: 13px;
  background: url("assets/coin-64.png") center / contain no-repeat;
}
:where(.ht-roll) .cf-zone.has-bet :is(.cf-zone__sub, .cf-zone__win) { display: none; }
/* На широком экране у кнопки со ставкой справа остаётся выплата по ней:
   «Ставка ◎1,000 → ◎2,000» (текст «→ ◎N» пишет _renderAmt). Подпись
   короче, чтобы обе части влезали и при пятизначных суммах. */
@media (min-width: 981px) {
  :where(.ht-roll) .cf-zone.has-bet .cf-zone__win { display: inline-flex; }
  :where(.ht-roll) .cf-zone.has-bet .cf-zone__win:empty { display: none; }
  :where(.ht-roll) .cf-zone.has-bet .cf-zone__mine { grid-column: 2; }
  :where(.ht-roll) .cf-zone.has-bet .cf-zone__mine::before { content: 'Ставка'; }
}

/* ═══════════ КОЛОНКИ ИГРОКОВ ═══════════ */
:where(.ht-roll) .cf-players {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px; margin-top: 12px; padding: 0 var(--rl-inset);
}
:where(.ht-roll) .cf-col { --side: var(--z-black-br); gap: 6px; min-width: 0; transition: opacity .3s ease; }
:where(.ht-roll) .cf-col[data-side="red"]   { --side: var(--z-red); }
:where(.ht-roll) .cf-col[data-side="green"] { --side: var(--z-green); }
/* цвет стороны — полоской сверху шапки, а не заливкой */
:where(.ht-roll) .cf-col__head {
  height: 38px; padding: 0 12px; gap: 10px; border-radius: 10px;
  border: 1px solid var(--ht-line); border-top: 2px solid var(--side);
  background: rgba(var(--ht-scrim), .5);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  font-size: 12px;
}
:where(.ht-roll) .cf-col__icon { width: 20px; height: 20px; background: none; }
:where(.ht-roll) .cf-col__count { color: var(--ht-text-dim); }
:where(.ht-roll) .cf-col__total {
  font-family: var(--f-cond, 'Oswald'), sans-serif; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums;
}
:where(.ht-roll) .cf-col__list { gap: 4px; }
/* flex-shrink 0: строка не сжимается по высоте, даже если список чем-то
   ограничен (mobile.css давал 260 px — его снимает блок ≤760 ниже) */
:where(.ht-roll) .cf-prow {
  flex-shrink: 0;
  height: 40px; padding: 0 10px; border-radius: 9px;
  background: rgba(var(--ht-scrim), .4); border: 1px solid rgba(255,255,255,.04);
}
/* своя строка — лаймовой полосой слева; заливку лаймом не делаем: с
   фиолетом он смешивается в оливку */
:where(.ht-roll) .cf-prow.is-me { background: rgba(255,255,255,.06); box-shadow: inset 2px 0 0 var(--lime, #D7FF00); }
/* Пометка «бот» стоит после ника, а не внутри него (_renderPlayers):
   ник сжимается до многоточия, пометка за ним, сумма — у правого края. */
:where(.ht-roll) .cf-prow__name { flex: 0 1 auto; min-width: 0; color: var(--ht-text-dim); }
:where(.ht-roll) .cf-prow .rl-bot { flex: none; margin-left: 0; }
:where(.ht-roll) .cf-prow__amt { margin-left: auto; }
:where(.ht-roll) .cf-av { background-color: var(--ht-surface-2); }
/* Значок уровня вместо аватара (drophub.level.js, _renderPlayers). Размер —
   только --s: ширину, высоту и сброс оформления ставит сам компонент.
   24 px в строке 36 px — чуть крупнее прежнего кружка 22 px, чтобы
   цифра в шестиугольнике читалась. Своя строка светится цветом ступени
   (is-me ставит компонент) поверх лаймовой полосы слева. */
:where(.ht-roll) .cf-prow .cf-lvl { --s: 24px; }
/* Круглое фото с висящим значком (krazeLevel.player, .cf-pl — у него же
   .cf-lvl, поэтому место в строке задают правила выше и ниже). Круг 22 px
   поднят на четверть значка: круг, кольцо уровня вокруг него и значок,
   свисающий на полдиаметра, целиком внутри строки 40 px — с запасом не
   меньше 2.5 px до рамки (при круге 24 px в строке 36 px кольцо и значок
   упирались в рамку и торчали за неё). */
:where(.ht-roll) .cf-prow .cf-pl { --a: 22px; }
:where(.ht-roll) .cf-col__list:empty::before {
  content: 'Ставок пока нет'; display: block; padding: 10px 8px;
  border: 1px dashed var(--ht-line); border-radius: 9px;
  text-align: center; font-size: 12px; color: var(--ht-text-mute);
}
/* После итога колонки проигравших сторон гаснут, суммы выпавшей —
   зеленеют. :has — прогрессивно: без него колонки просто не гаснут.
   Класс is-result--x у колеса JS снимает на reset. */
:where(.ht-roll) .cf-table:has(.is-result--black) .cf-col:not([data-side="black"]),
:where(.ht-roll) .cf-table:has(.is-result--red)   .cf-col:not([data-side="red"]),
:where(.ht-roll) .cf-table:has(.is-result--green) .cf-col:not([data-side="green"]) { opacity: .45; }
:where(.ht-roll) .cf-table:has(.is-result--black) .cf-col[data-side="black"] .cf-prow__amt,
:where(.ht-roll) .cf-table:has(.is-result--red)   .cf-col[data-side="red"]   .cf-prow__amt,
:where(.ht-roll) .cf-table:has(.is-result--green) .cf-col[data-side="green"] .cf-prow__amt { color: var(--money, #6DEA5D); }

/* ═══════════ УЗКИЙ ПЛАНШЕТ (761–980) ═══════════
   Кнопка стороны уже ~210 px: строке «выплата ◎N» рядом с шансом места
   нет — её убираем, сумма ставки и множитель остаются. */
@media (min-width: 761px) and (max-width: 980px) {
  :where(.ht-roll) .cf-zone { column-gap: 10px; }
  :where(.ht-roll) .cf-zone__win { display: none; }
  /* шесть быстрых сумм по ~68 px: «Очистить» иначе обрезалось */
  :where(.ht-roll) .cf-betbox { grid-template-columns: minmax(170px, 3fr) minmax(0, 7fr); }
  :where(.ht-roll) .cf-chip--clear { font-size: 11px; }
  /* колонка игроков ~210 px (планшет 768): с аватаром, пометкой «бот» и
     пятизначной суммой длинный ник («w0nderful») резался на 6–9 px */
  :where(.ht-roll) .cf-prow { padding: 0 8px; gap: 6px; }
  /* значок — в размер прежнего аватара: место ника не уменьшается */
  :where(.ht-roll) .cf-prow .cf-lvl { --s: 22px; }
  :where(.ht-roll) .cf-prow .cf-pl { --a: 22px; }
}

/* ═══════════ НИЗКОЕ ОКНО НОУТБУКА (≥761 × ≤760) ═══════════
   1366×768 и 1280×720 оставляют браузеру 600–660 px высоты: с колесом
   620 px кнопки сторон уходили под край экрана. Колесо меньше, строка
   подсказки ниже — кнопки видны целиком без прокрутки. */
@media (min-width: 761px) and (max-height: 760px) {
  :where(.ht-roll) .cf-page { --rl-wheel: 480px; }
  :where(.ht-roll) .cf-zones__hint { min-height: 30px; }
  :where(.ht-roll) .cf-zones__hint .cf-cancel { height: 26px; }
}

/* ═══════════ ТЕЛЕФОН И УЗКИЙ ПЛАНШЕТ (≤760) ═══════════
   Здесь же действует mobile.css: быстрые суммы 3×2 по 32 px, поле 38 px,
   компактные шапки колонок (сеткой), строки игроков 34 px, список до
   260 px с прокруткой, зазор колонок 6 px, лента истории с прокруткой
   вбок. Тема добавляет только своё. */
@media (max-width: 760px) {
  /* order обязателен: .cf-page здесь flex, и у шапки игры order 1 из
     mobile.css — без order 2 стол встал бы над шапкой. Внутри стола
     обычный поток, прежние order детей ни на что не влияют. */
  :where(.ht-roll) .cf-table { order: 2; padding: 12px; border-radius: 16px; }
  :where(.ht-roll) .cf-gamebar { padding: 8px 0 0; }
  :where(.ht-roll) .cf-betbox { grid-template-columns: minmax(0, 1fr); grid-template-areas: "label" "money" "chips"; }
  :where(.ht-roll) .cf-zones { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  /* три кнопки в ряд, содержимое столбиком: [значок CT] / ×2 / 46.7% */
  :where(.ht-roll) .cf-zone {
    grid-template-columns: auto auto;
    grid-template-areas: "icon name" "mult mult" "sub sub";
    justify-content: center; justify-items: center;
    column-gap: 5px; row-gap: 2px;
    height: auto; min-height: 78px; padding: 8px 4px; border-radius: 12px;
    text-align: center;
  }
  :where(.ht-roll) .cf-zone__icon { width: 20px; height: 20px; border-radius: 0; background: none; box-shadow: none; }
  :where(.ht-roll) .cf-zone__icon svg { width: 18px; height: 18px; }
  :where(.ht-roll) .cf-zone__label { align-self: center; font-size: 14px; }
  :where(.ht-roll) .cf-zone__mult { justify-self: center; align-self: center; padding: 0; background: none; box-shadow: none; font-size: 20px; }
  :where(.ht-roll) .cf-zone__sub { font-size: 10.5px; }
  :where(.ht-roll) .cf-zone__sub i,
  :where(.ht-roll) .cf-zone__win { display: none; }
  /* своя ставка — пилюлей «◎N» вместо шанса */
  :where(.ht-roll) .cf-zone__mine {
    grid-row: 3; grid-column: 1 / -1; justify-self: center; max-width: 100%;
    padding: 1px 6px; border-radius: 6px; background: rgba(10,6,24,.35); font-size: 11px;
  }
  :where(.ht-roll) .cf-zone__mine::before { content: none; }
  :where(.ht-roll) .cf-zone.is-win::after { left: 0; right: 0; margin: 0 auto; width: max-content; top: -8px; }
  :where(.ht-roll) .cf-zones__hint { font-size: 11px; line-height: 1.35; }
  :where(.ht-roll) .cf-col__list:empty::before { padding: 8px 4px; font-size: 11px; }
  /* Вес body — против padding 8px из mobile.css: в колонке ~100 px
     «0 игроков» с ним не помещалось и обрезалось многоточием. */
  body.ht-roll .cf-col__head { padding: 8px 6px; column-gap: 5px; }
  /* Список — без своей прокрутки: mobile.css ограничивает его 260 px,
     и при 6–8 ставках последняя строка срезалась посередине внутри
     прокрутки страницы. Строк и так не больше 8 (_renderPlayers). */
  body.ht-roll .cf-col__list { max-height: none; overflow: visible; }
  /* Аватар убираем: в колонке ~170 px (601–760, телефон боком) рядом с
     пометкой «бот» и суммой на ник оставалось ~32 px — «huN…», «Ho…».
     У ботов там всё равно заглушка. */
  body.ht-roll .cf-prow .cf-av { display: none; }
}
@media (max-width: 600px) {
  :where(.ht-roll) .cf-page { --rl-inset: 9px; }
  :where(.ht-roll) .cf-table { padding: 10px; }
  /* Подпись над таймером здесь упирается в нижний минимум шрифта (11 px)
     и относительно колеса крупнее, чем на десктопе: на 27cqw её верхние
     углы задевали внутренний край кольца. Чуть ниже — и полоса таймера
     всё ещё в сплошной части маски. */
  :where(.ht-roll) .cf-center { top: 28.5cqw; }

  /* Строка игрока в колонке ~100 px (на 320 — ~80): в одну строку с
     аватаром ник сжимался до 0 px, а на 320 обрезались и суммы. Здесь —
     две строки: ник с пометкой «бот», под ним сумма; аватар убран.
     Вес body — против .cf-prow из mobile.css (34 px, один ряд). */
  body.ht-roll .cf-prow {
    display: grid;
    grid-template-columns: minmax(0, max-content) auto minmax(0, 1fr);
    grid-template-areas: "name bot ." "amt amt amt";
    align-items: center; column-gap: 0; row-gap: 1px;
    height: auto; min-height: 38px; padding: 5px 8px;
  }
  body.ht-roll .cf-prow__name { grid-area: name; font-size: 11px; line-height: 1.3; }
  body.ht-roll .cf-prow .rl-bot { grid-area: bot; margin-left: 4px; padding: 0 3px; font-size: 8px; line-height: 13px; }
  body.ht-roll .cf-prow__amt {
    grid-area: amt; justify-content: flex-start; min-width: 0; margin-left: 0;
    font-size: 12px; line-height: 1.3; overflow: hidden;
  }
  body.ht-roll .cf-prow__amt .coin-ico { font-size: 13px; }
}
/* Значок уровня на телефоне (drophub.level.js, _renderPlayers): слева на
   обе строки, справа ник с пометкой «бот», под ним сумма. В одну строку
   (601–760) ему места нет: в колонке ~170 px рядом с пометкой и суммой
   ник сжимался до 23 px («osk…», «Ho…»). Поэтому и 601–760 — в две
   строки, как ≤600 выше; ник там получает ~120 px. */
@media (min-width: 601px) and (max-width: 760px) {
  body.ht-roll .cf-prow {
    display: grid; align-items: center; column-gap: 0; row-gap: 1px;
    height: auto; padding: 5px 8px;
  }
  body.ht-roll .cf-prow__name { grid-area: name; font-size: 11px; line-height: 1.3; }
  body.ht-roll .cf-prow .rl-bot { grid-area: bot; margin-left: 4px; padding: 0 3px; font-size: 8px; line-height: 13px; }
  body.ht-roll .cf-prow__amt {
    grid-area: amt; justify-content: flex-start; min-width: 0; margin-left: 0;
    font-size: 12px; line-height: 1.3; overflow: hidden;
  }
  body.ht-roll .cf-prow__amt .coin-ico { font-size: 13px; }
}
/* Колонка от ~155 px (экран от 541): значок 24 px с отступом 8 оставляет
   нику и сумме ~107 px — целиком и «w0nderful БОТ» (~81), и ник людей
   в 16 знаков (~95), и максимальная ставка «◎ 10,000,000» (~83). Уже 541
   значок слева отнимал бы эти 32 px у ника и суммы — там раскладка ниже. */
@media (min-width: 541px) and (max-width: 760px) {
  body.ht-roll .cf-prow {
    grid-template-columns: auto minmax(0, max-content) auto minmax(0, 1fr);
    grid-template-areas: "lvl name bot ." "lvl amt amt amt";
    min-height: 40px;
  }
  body.ht-roll .cf-prow .cf-lvl { grid-area: lvl; --s: 24px; margin-right: 8px; }
  body.ht-roll .cf-prow .cf-pl { --a: 24px; }
}
/* Телефон в портрет (360–540, колонка ~95–155 px, внутри от ~80 px).
   Значок здесь — в начале строки суммы: ник с пометкой «бот» остаётся
   на всю ширину, как было без значка («w0nderful БОТ» ~81 px — целиком
   уже на 360), а в строке суммы место есть: пятизначная ставка бота
   (до ~58 px, ботам сервер ставит не больше 50 100) рядом со значком
   помещается и на 360. Сумма, которой рядом со значком тесно (ставки
   людей от ~150 000 на 360, от миллиона — на телефонах до 430), не
   режется, а переносится под значок отдельной строкой.
   Поэтому flex с переносом, а не сетка: ник с основой 1 px всегда
   остаётся в первой строке рядом с пометкой и растёт до своей ширины
   (max-content), ::after на всю ширину — разрыв строки (основа ника не
   0, иначе ник без пометки и разрыв делили бы строку и ник сжимался
   в ноль), за ним значок и сумма; сумма, которой не хватило места,
   уходит строкой ниже. */
@media (min-width: 360px) and (max-width: 540px) {
  body.ht-roll .cf-prow {
    display: flex; flex-wrap: wrap; align-items: center; align-content: center;
    row-gap: 0; padding: 5px 7px;
  }
  body.ht-roll .cf-prow__name { order: 1; flex: 1 1 1px; max-width: max-content; }
  body.ht-roll .cf-prow .rl-bot { order: 2; }
  body.ht-roll .cf-prow::after { content: ''; order: 3; flex: 0 0 100%; height: 0; }
  body.ht-roll .cf-prow .cf-lvl { order: 4; --s: 18px; margin-right: 4px; }
  /* фото в строке суммы: круг 20 px без подъёма, висящему значку —
     место снизу (строка чуть выше), чтобы он не лёг на соседнюю строку */
  body.ht-roll .cf-prow .cf-pl { --a: 20px; --b: 14px; top: 0; margin: 2px 5px calc(var(--b) * .5 - 1px) 0; }
  body.ht-roll .cf-prow__amt { order: 5; flex: 0 1 auto; max-width: 100%; }
}
/* 360–389 (колонка ~95–104 px): пятизначная сумма — до ~58 px, и рядом
   со значком 18 px на 360 ей не хватало 2 px — почти каждая ставка бота
   уходила третьей строкой. Значок 16 px (в высоту строки суммы), отступ 3
   и поля строки 6 px — как у шапки колонки — дают сумме ~62 px на 360
   и ~67 на 375 (там помещается и «◎ 999,999»). */
@media (min-width: 360px) and (max-width: 389px) {
  body.ht-roll .cf-prow { padding-left: 6px; padding-right: 6px; }
  body.ht-roll .cf-prow .cf-lvl { --s: 16px; margin-right: 3px; }
  body.ht-roll .cf-prow .cf-pl { --a: 18px; --b: 13px; margin-right: 4px; }
}
/* 320–359: внутри колонки от ~63 px. На 320 рядом со значком не
   помещается и «◎ 8,364» (~50 px) — почти каждая сумма уходила бы
   третьей строкой.
   Значка в строках нет; свой уровень — в шапке и шторе. */
@media (max-width: 359px) {
  body.ht-roll .cf-prow .cf-lvl { display: none; }
}
/* 320 px: в шапке колонки ~80 px «6 игроков» обрезалось до «6 игр…».
   Значок стороны убираем — сторону и так называют цветная полоса сверху
   шапки и кнопка прямо над колонкой; сетка шапки — в одну колонку. */
@media (max-width: 360px) {
  body.ht-roll .cf-col__head { grid-template-columns: minmax(0, 1fr); padding: 8px 4px; column-gap: 4px; }
  :where(.ht-roll) .cf-col__icon { display: none; }
  :where(.ht-roll) .cf-col__count { font-size: 11px; }
}

/* ═══════════ КЛЮЧЕВЫЕ КАДРЫ ═══════════ */
@keyframes rl-fade  { from { opacity: 0; } }
@keyframes rl-mine  { from { opacity: 0; transform: translateY(3px); } }
@keyframes rl-badge { from { opacity: 0; transform: scale(.6); } }
@keyframes rl-pop   { from { opacity: 0; transform: translateY(-4px); } }

/* ═══════════ МЕНЬШЕ ДВИЖЕНИЯ ═══════════
   Закрывает то, что пропускал блок в roulette.css: появление фишки
   истории (cpop), тряску ошибки, появление отмены, переходы при
   наведении. Тост, толчок указателя и тряску проигрыша по-прежнему
   гасит roulette.css. Прокрутка колеса остаётся — это сам геймплей, её
   длительность задаёт сервер. Полоса таймера тоже остаётся: она сообщает
   время и сдвигается по кадрам без перехода. */
@media (prefers-reduced-motion: reduce) {
  :where(.ht-roll) .cf-zone, :where(.ht-roll) .cf-chip, :where(.ht-roll) .cf-money,
  :where(.ht-roll) .cf-col, :where(.ht-roll) .cf-center__bar, :where(.ht-roll) .cf-marker__arrow,
  :where(.ht-roll) .cf-rules > summary { transition: none; }
  :where(.ht-roll) .cf-zone:hover:not(.is-disabled),
  :where(.ht-roll) .cf-zone.is-press:not(.is-disabled),
  :where(.ht-roll) .cf-marker.is-tick .cf-marker__arrow { transform: none; }
  :where(.ht-roll) .cf-hist.is-new, :where(.ht-roll) .cf-cancel, :where(.ht-roll) .cf-zone.is-invalid,
  :where(.ht-roll) .cf-zone__mine, :where(.ht-roll) .cf-zone.is-win::after,
  :where(.ht-roll) .cf-rules__body, :where(.ht-roll) .cf-hint { animation: none; }
  /* тряску ошибки заменяет красная рамка на те же 360 мс (класс is-invalid) */
  :where(.ht-roll) .cf-zone.is-invalid { box-shadow: 0 0 0 2px #FF7A8C; }
}

/* ═══ ВЫБРАННОЕ И ВКЛЮЧЁННОЕ — ГРАДИЕНТ ЛОГОТИПА ═══
   Статичный градиент кислотный → розовый через светлый тон (напрямую
   смесь рыжеет), как ⚡/🛒 в «1 Клике» (oneclick.css). Стоит в конце
   файла: те же селекторы выше рисовали лаймовую рамку. */
:where(.ht-roll) .cf-chip.is-on {
  color: #F4FFD6;
  border: 1.5px solid transparent;
  background: linear-gradient(180deg, #2A2158 0%, #1C1540 100%) padding-box, linear-gradient(135deg, #D7FF00 0%, #F0FFC8 45%, #FFD6F7 55%, #F535F0 100%) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), -4px -4px 14px rgba(215, 255, 0, .16), 4px 4px 14px rgba(245, 53, 240, .2);
}
/* приём закрыт — выбранная гаснет вместе с остальными, без рамки */
:where(.ht-roll) .cf-chip.is-on:disabled { background: var(--ht-surface-2); }