/* ==========================================================================
   DropHub Рулетка — базовый вид: геометрия колеса, ставка, зоны, игроки.
   Палитра и раскладка сайта (индиго, карточка стола) — в roulette.theme.css
   (body.ht-roll), он подключается сразу после этого файла.
   font: Inter, заголовки — Oswald (var(--f-cond))
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Тот же переход на нейтральный чёрный, что и в home.css. Этот файл
     грузится без него, поэтому значения продублированы, а не наследуются. */
  --bg:         #000000;
  --panel:      #0F1011;
  --panel2:     #16171A;
  --border:     #1E2023;
  --yellow:     #D7FF00;
  --yellow-dk:  #B9C41B;
  --text:       #ffffff;
  --text-dim:   #8a9aa3;
  --text-mute:  #4a5a63;
  --gray-btn:   #1B1D20;

  /* tile palette, sampled off the live csgofast wheel */
  --z-black:    #222735;  --z-black-br: #2C3241;  --z-black-ic: #A2D1FD;
  --z-red:      #EB1E33;  --z-red-br:   #FE5062;  --z-red-ic:   #FF97A8;
  --z-green:    #36B144;  --z-green-br: #61FF6B;  --z-green-ic: #61FF6B;
  /* плитки ставок — тот же приглушённый глянец, что у исходов в HiLo */
  --t-black:    #15161B;  --t-red:      #B3222E;  --t-green:    #2E9E3F;

  /* --WD — полный диаметр диска; на экране только его верх (купол, см.
     aspect-ratio у .cf-wheel-wrap). */
  /* 780px: при 1060px купол на широком экране занимал полэкрана, и
     ставки с зонами уезжали за нижний край окна. */
  --WD: min(780px, calc(100vw - 48px));
}

body {
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  /* Заливки фона здесь нет: он общий и живёт в home.css, а плоский цвет
     отсюда перекрывал общий градиент. */
  color: var(--text);
  min-height: 100vh;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

/* Своего фона у рулетки НЕТ.

   Здесь стоял собственный задник в два слоя на body::before и body::after —
   графитовые радиальные пятна, шум и виньетка. Ровно эти же псевдоэлементы
   занимает общий фон сайта в home.css, а roulette.css подключается после
   него: страница молча перекрывала общий градиент своим, и рулетка была
   единственным разделом с другим фоном. Удалено целиком. */

a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; border: none; outline: none; }

/* Стили старой своей шапки (.cf-header, .cf-nav, .cf-btn-*) удалены:
   страница давно на общей kz-header из home.css. */

/* ─── PAGE ─── */
.cf-page {
  display: flex; flex-direction: column; align-items: center;
  /* roulette.css грузится без home.css, поэтому у токенов есть запасные
     значения — иначе страница осталась бы без ширины вовсе. */
  max-width: var(--shell, 2040px); margin: 0 auto; padding: 0 var(--pad-x, 20px) 40px;
}
/* Фон страницы — свой кадр рулетки (assets/roulette_page_bg.webp)
   фиксированным полупрозрачным слоем за блоками, к низу растворяется. */
.cf-page::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: url("assets/roulette_page_bg.webp") center top / cover no-repeat;
  opacity: .45;
  -webkit-mask: linear-gradient(180deg, #000 45%, transparent 100%); mask: linear-gradient(180deg, #000 45%, transparent 100%);
}

/* ─── TOP ROW ─── */
.cf-toprow {
  display: flex; align-items: flex-start; justify-content: space-between;
  width: 100%; gap: 16px; padding: 10px 0 4px;
}
.cf-history { display: flex; gap: 4px; flex-wrap: nowrap; overflow: hidden; margin-top: 6px; }
.cf-hist {
  width: 26px; height: 26px; border-radius: 6px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid transparent;
}
.cf-hist svg { width: 15px; height: 15px; display: block; }
.cf-hist--black { background: var(--z-black); border-color: var(--z-black-br); color: var(--z-black-ic); }
.cf-hist--red   { background: var(--z-red);   border-color: var(--z-red-br);   color: var(--z-red-ic); }
.cf-hist--green { background: var(--z-green); border-color: var(--z-green-br); color: var(--z-green-ic); }
.cf-hist.is-new { animation: cpop .25s ease; }
@keyframes cpop { from { transform: scale(.5); opacity:0; } to { transform: scale(1); opacity:1; } }

.cf-stats { display: flex; align-items: center; gap: 6px; }
.cf-stat-label { font-size: 12px; color: var(--text-dim); font-weight: 500; }
.cf-stat-total { font-size: 12px; font-weight: 600; color: var(--accent, #D7FF00); margin-right: 4px; }
.cf-stat { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; }
.cf-stat i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.cf-stat--black i { background: var(--z-black); border: 1px solid var(--z-black-br); }
.cf-stat--red   i { background: var(--z-red); }
.cf-stat--green i { background: var(--z-green); }

/* Стили плашки джекпота удалены вместе с самой плашкой (см. roulette.html). */

/* ─── WHEEL SECTION ───
   The disc is a full circle --WD across; the wrapper only reveals its top
   --WH, which is what makes the shallow dome. Sizing is in cqw (1cqw == 1% of
   the disc diameter) so tiles never collide regardless of viewport. */
.cf-wheel-wrap {
  position: relative;
  width: 100%;
  max-width: var(--WD);
  /* купол — верхние 41.46 % диска плюс 3cqw воздуха сверху: выигравшая
     ячейка выезжает наружу за кольцо, и ей нужно место над ним */
  aspect-ratio: 1 / 0.45963;   /* 0.41463 + 4.5cqw воздуха */
  margin: 6px auto 0;
  overflow: hidden;
  container-type: inline-size; /* 1cqw == 1% of the disc diameter */
  /* низ купола растворяется в фон страницы, а не обрывается ровной
     линией над панелью ставок */
  -webkit-mask: linear-gradient(180deg, #000 58%, rgba(0,0,0,.6) 80%, transparent 100%);
          mask: linear-gradient(180deg, #000 58%, rgba(0,0,0,.6) 80%, transparent 100%);
}

/* Photo-finish zoom. Scaling happens about the marker, so the pointer stays
   nailed in place and the cells grow around it — a camera push-in, not a
   resize. Only .cf-stage moves; the readout sits outside it and stays put. */
.cf-stage {
  position: absolute; inset: 4.5cqw 0 0 0;   /* 4.5cqw — воздух над кольцом, см. .cf-wheel-wrap */
  /* Точка отсчёта — САМЫЙ ВЕРХ кольца, а не указатель.

     Считается так. Диск занимает 0..100cqw, внешний радиус полосы
     rOuter = 0.494, значит верхняя точка кольца лежит на
     (0.5 − 0.494) · 100 = 0.6cqw. Указатель — на 10.9cqw.

     Раньше масштабирование шло от указателя, и при 1.5x верх кольца
     уезжал на 10.9 + 1.5·(0.6 − 10.9) = −4.55cqw, то есть на четыре с
     половиной сотых диаметра ВЫШЕ рамки. Рамка со своим overflow: hidden
     его и срезала — верхушка колеса пропадала ровно в тот момент, ради
     которого зум и затевался.

     От верхней точки кольца при любом масштабе верх остаётся на месте:
     0.6 + s·(0.6 − 0.6) = 0.6. Плюс 1.2cqw вниз на воздух, чтобы кольцо
     не липло к самому краю. Указатель при этом съезжает вниз вместе с
     плитками — он лежит ВНУТРИ .cf-stage, поэтому с ячейками не
     расходится, а это единственное, что важно. */
  transform-origin: 50% 0.6cqw;
}
/* Наезд камеры на финише (scale 1.42) отключён. Две причины: при смене
   масштаба браузер перерисовывал весь SVG колеса (30 плит) на каждом
   кадре торможения — это и были рывки; и выехавшая ячейка в увеличении
   выглядела грубо. Колесо теперь всегда в одном масштабе. */
.cf-wheel-wrap.is-closecall .cf-stage { transform: none; }

/* ── wheel backing, painted bottom-up exactly like the live game ──
   1  .cf-wheel-bg    flat #111418 disc, 1.01x, sits behind everything
   2  .cf-wheel-face  gradient inner circle at 0.7777x with a #22272F rim
   3  ::before        result colour wash
   4  .cf-disc        the rotating tiles
   5  .cf-marker      arch + glow at the top
   6  .cf-center      readout                                              */
/* Подложка целиком внутри рамки. Раньше она была 1.01x и начиналась на
   0.5cqw выше рамки — overflow: hidden срезал ей макушку, и над кольцом
   торчала плоская полоса. Теперь верх подложки на 0.1cqw ниже края рамки,
   а до кольца (0.6cqw) остаётся тонкий тёмный обод. */
.cf-wheel-bg {
  position: absolute; left: 50%; top: 0.1cqw;
  width: 100cqw; height: 100cqw; margin-left: -50cqw;
  border-radius: 50%;
  background: #121315;
  pointer-events: none; z-index: 1;
}
/* sized so its rim lands just inside geom.rInner (0.391) and stays visible */
.cf-wheel-face {
  position: absolute; left: 50%; top: 50cqw;
  width: 76.6cqw; height: 76.6cqw;
  transform: translate(-50%, -50%);
  opacity: .9;                 /* без blur-фильтра: он перерисовывался при каждом изменении сцены */
  pointer-events: none; z-index: 2;
}

/* Цветного свечения результата под кольцом больше нет — просили убрать.
   Итог показывают сама ячейка (выезжает и обводится) и указатель. */

/* the rotating disc */
.cf-disc {
  position: absolute; top: 0; left: 0;
  width: 100cqw; height: 100cqw;
  border-radius: 50%;
  overflow: visible;           /* выигравшая ячейка выходит за радиус диска */
  transform-origin: 50% 50%;
  will-change: transform;
  z-index: 4;
}

/* ─── SEGMENTS ───
   One SVG, one <g> per slot; the plate is a rounded annular sector so the
   seam between neighbours stays the same width from rInner to rOuter.
   Geometry is generated in roulette.wheel.js — only colour lives here. */
/* overflow: visible — у <svg> по умолчанию hidden, и выехавшую за viewBox
   выигравшую ячейку он срезал ровной линией по верху диска */
.cf-ring { display: block; width: 100%; height: 100%; overflow: visible; }
/* no stroke: the colour change is the only edge. The layout guarantees
   neighbours never share a colour, so tiles stay legible without one. */
.cf-seg__plate { stroke: none; }
.cf-seg__mark  { transition: fill .3s ease; }

.cf-seg--black .cf-seg__plate { fill: var(--z-black); }
.cf-seg--red   .cf-seg__plate { fill: var(--z-red); }
.cf-seg--green .cf-seg__plate { fill: var(--z-green); }
.cf-seg--black .cf-seg__mark  { fill: var(--z-black-ic); }
.cf-seg--red   .cf-seg__mark  { fill: var(--z-red-ic); }
.cf-seg--green .cf-seg__mark  { fill: var(--z-green-ic); }

.cf-seg.is-dim { opacity: .3; }
/* Выигравшая ячейка выезжает наружу и обводится по граням. Масштаб от
   центра диска (transform-box: view-box): плита растёт радиально, то есть
   выходит за кольцо, а не раздувается на месте. Обводка — чёткая белая
   линия постоянной толщины в пикселях (non-scaling-stroke), без
   размытых свечений. Плита и значок масштабируются одинаково, поэтому
   значок остаётся по центру плиты. */
/* Поворот ячейки задан CSS-переменной (--rot из roulette.wheel.js), а не
   атрибутом transform: иначе CSS-масштаб выигравшей ячейки затирал бы
   поворот. Масштабируется вся группа — плита вместе со значком. */
.cf-seg {
  transform-box: view-box; transform-origin: 50% 50%;
  transform: rotate(var(--rot, 0deg));
  transition: opacity .35s ease, transform .42s cubic-bezier(.2, 1.5, .4, 1);
}
.cf-seg.is-win { transform: rotate(var(--rot, 0deg)) scale(1.06); }
.cf-seg.is-win .cf-seg__plate {
  stroke: #fff; stroke-width: 2.5px; vector-effect: non-scaling-stroke;
  paint-order: stroke; stroke-linejoin: round;
  filter: brightness(1.22);
}
/* цвет обводки повторяет цвет ячейки, но светлее: белый на чёрной, тёплый
   на красной, мятный на зелёной */
.cf-seg--red.is-win   .cf-seg__plate { stroke: #ffd0d4; }
.cf-seg--green.is-win .cf-seg__plate { stroke: #c9ffd2; }

/* ─── WINNER MARKER ───
   A wide low arch pinned at 9.5% of the diameter from the disc's top edge,
   i.e. right under the tile ring, with a blurred bar behind it that takes on
   the winning colour. Same construction as the live .wheel__arrow. */
.cf-marker {
  position: absolute; left: 50%; top: 10.9cqw;   /* == 0.5 - geom.rInner */
  transform: translateX(-50%);
  width: 90cqw; height: 2.8cqw;
  display: flex; align-items: flex-start; justify-content: center;
  pointer-events: none; z-index: 5;
}
.cf-marker__glow { display: none; }   /* размытая полоса под указателем убрана */
/* Tall and thin so it reads as a needle. Ratio matches the 20x30 viewBox —
   distorting it would blunt the tip, which is the whole point of the shape. */
.cf-marker__arrow {
  position: relative;
  width: 1.8cqw; height: 2.7cqw; display: block;
}

/* ─── CENTER TEXT ─── */
.cf-center {
  position: absolute;
  left: 50%; top: 30.5cqw;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center;
  text-align: center; white-space: nowrap;
  pointer-events: none; z-index: 5;
}
.cf-center__label {
  font-size: clamp(11px, 1.17cqw, 13px);
  font-weight: 500; color: #A3B4BC; line-height: 1.2;
}
.cf-center__time {
  display: flex; align-items: center; justify-content: center; gap: .22em;
  font-size: clamp(28px, 4.68cqw, 48px);
  font-weight: 700; color: #fff; line-height: 1.25;
  font-variant-numeric: tabular-nums;
}
.cf-center__time .coin-ico { font-size: .82em; }
.cf-center--count.is-urgent .cf-center__time { color: #FB4B57; }
.cf-center--lock .cf-center__time { font-size: clamp(16px, 2.3cqw, 24px); color: #A3B4BC; }
/* «Идёт игра» — фирменным узким шрифтом, спокойным белым. Здесь был
   бегущий перелив лайм → белый → фиолет: он тянул взгляд на себя ровно
   в тот момент, когда смотреть надо на колесо. */
.cf-center--roll .cf-center__time {
  font-family: var(--f-cond, 'Oswald'), 'Inter', sans-serif;
  font-size: clamp(22px, 3.4cqw, 36px); font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; padding-left: .22em;
  color: #E9EEF5;
}
.cf-center--win  .cf-center__time { font-size: clamp(22px, 3.9cqw, 40px); }
.cf-center--win.win--black .cf-center__time { color: var(--z-black-ic); }
.cf-center--win.win--red   .cf-center__time { color: var(--z-red-ic); }
.cf-center--win.win--green .cf-center__time { color: var(--z-green-ic); }
/* the payout figure itself stays white — only the coin glyph is tinted */
.cf-center--win.is-payout .cf-center__time { color: #fff; }

/* ─── GAME BAR ─── в стиле заголовков игр сайта: значок, название
   заглавными шрифтом сайта, справа «Честная игра» зелёным. */
.cf-gamebar {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 12px 0 4px;
}
.cf-gamebar__side { display: flex; align-items: center; gap: 14px; }
.cf-gamebar__badge { width: 30px; height: 30px; border-radius: 0; background: none; }
.cf-gamebar__title {
  font-family: var(--f-cond, 'Oswald'), sans-serif; font-size: 18px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
}

/* ─── СТАВКА ─── поле с монетой и MAX, под ним быстрые суммы: тот же
   блок, что в HiLo, минере и плинко. */
.cf-betrow { width: 100%; display: flex; justify-content: center; padding: 18px 0 14px; }
.cf-betbox { width: min(100%, 420px); }
.cf-betrow__label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12px; color: var(--text-mute); margin-bottom: 7px;
}
.cf-betrow__label i { font-style: normal; font-size: 11px; }
.cf-money {
  display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 6px 0 12px;
  border: 1px solid var(--line, #1E2023); border-radius: 10px; background: var(--panel-3, #16171A);
}
.cf-money__coin { display: flex; align-items: center; flex: none; font-size: 18px; }
.cf-money input {
  flex: 1; min-width: 0; width: 100%; border: 0; background: none; outline: none;
  font: inherit; font-family: var(--f-cond, 'Oswald'), sans-serif; font-size: 16px; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.cf-money input:disabled { opacity: .5; }
.cf-money__max {
  height: 30px; padding: 0 10px; border-radius: 7px;
  border: 1px solid var(--line, #1E2023); background: var(--panel-2, #16171A);
  font-family: var(--f-cond, 'Oswald'), sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--text-mute);
  transition: color .14s, border-color .14s;
}
.cf-money__max:hover:not(:disabled) { color: var(--text); border-color: var(--text-mute); }
.cf-money__max:disabled { opacity: .4; cursor: not-allowed; }
.cf-qbets { display: grid; grid-template-columns: repeat(5, 1fr) auto; gap: 6px; margin-top: 8px; }
.cf-chip {
  height: 34px; padding: 0 10px; border-radius: 9px;
  border: 1px solid var(--line, #1E2023); background: var(--panel-3, #16171A);
  font-family: var(--f-cond, 'Oswald'), sans-serif; font-size: 13px; font-weight: 700; color: var(--text-mute); font-variant-numeric: tabular-nums;
  transition: color .14s, border-color .14s;
}
.cf-chip:hover:not(:disabled) { color: var(--text); border-color: var(--text-mute); }
.cf-chip:disabled { opacity: .4; cursor: not-allowed; }
.cf-chip--clear { font-family: inherit; font-size: 12px; font-weight: 600; letter-spacing: 0; }
/* Отмена ставки — видна, только пока приём открыт и есть что отменять */
.cf-cancel {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 36px; margin-top: 8px; border-radius: 9px;
  border: 1px solid rgba(238, 43, 62, .45); background: rgba(238, 43, 62, .1);
  font-size: 13px; font-weight: 600; color: #FF6B78;
  transition: background .14s, border-color .14s, color .14s, opacity .14s;
  animation: cf-cancel-in .18s ease-out;
}
.cf-cancel[hidden] { display: none; }
.cf-cancel b { font-family: var(--f-cond, 'Oswald'), sans-serif; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.cf-cancel:hover:not(:disabled) { background: rgba(238, 43, 62, .2); border-color: #EE2B3E; color: #fff; }
.cf-cancel:disabled { opacity: .5; cursor: wait; }
@keyframes cf-cancel-in { from { opacity: 0; transform: translateY(-4px); } }

/* ─── ZONE CARDS (4) ─── */
.cf-zones {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%;
}
.cf-zone {
  position: relative; display: flex; align-items: center; gap: 12px;
  height: 56px; padding: 0 16px;
  border-radius: 12px; border: 2px solid transparent;
  cursor: pointer; overflow: hidden;
  transition: filter .15s, transform .1s, border-color .15s; user-select: none;
}
/* Глянец: блик сверху, затемнение к низу, тень в цвет плитки — как у
   плиток исходов в HiLo. */
.cf-zone {
  --gloss: linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.04) 38%, rgba(0,0,0,.08) 52%, rgba(0,0,0,.28) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(0,0,0,.3), 0 10px 22px -12px var(--tile, transparent);
  border: 1px solid transparent; border-radius: 11px;
}
.cf-zone--black { --tile: #000; background: var(--gloss), var(--t-black); }
.cf-zone--red   { --tile: var(--t-red);   background: var(--gloss), var(--t-red); }
.cf-zone--green { --tile: var(--t-green); background: var(--gloss), var(--t-green); }
.cf-zone--black .cf-zone__icon { color: var(--z-black-ic); }
.cf-zone--red   .cf-zone__icon,
.cf-zone--green .cf-zone__icon { color: #fff; }
.cf-zone:hover:not(.is-disabled) { filter: brightness(1.18); }
.cf-zone.is-press { transform: scale(.97); }
.cf-zone.is-invalid { animation: shake .3s ease; }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }
.cf-zone.is-disabled { cursor: not-allowed; opacity: .5; }
.cf-zone.has-bet { border-color: rgba(255,255,255,.35); box-shadow: 0 0 0 1px rgba(255,255,255,.35) inset; }
.cf-zone.is-win  { border-color: var(--green, #43D97A); box-shadow: 0 0 0 2px var(--green, #43D97A) inset; filter: brightness(1.1); }
.cf-zone.is-lose { opacity: .35; filter: saturate(.3); }

.cf-zone__icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cf-zone__icon svg { width: 28px; height: 28px; display: block; }
.cf-zone__label { font-family: var(--f-cond, 'Oswald'), sans-serif; font-size: 14px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; flex: 1; }
.cf-zone__mult {
  font-size: 42px; font-weight: 800; opacity: .18; line-height: 1;
  position: absolute; right: 8px; bottom: -8px; letter-spacing: -2px;
}
.cf-zone__mine {
  position: absolute; top: 4px; right: 8px;
  font-size: 11px; font-weight: 700;
  color: rgba(255,255,255,.9); background: rgba(0,0,0,.35);
  border-radius: 4px; padding: 1px 5px;
}

/* ─── PLAYER COLUMNS ─── */
.cf-players {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  width: 100%; margin-top: 12px;
}
.cf-col { display: flex; flex-direction: column; gap: 12px; }
.cf-col__head {
  display: flex; align-items: center; gap: 12px;
  height: 44px; padding: 8px 12px; border-radius: 12px;
  background: rgba(8, 10, 16, .55);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-size: 13px; font-weight: 500;
}
.cf-col__icon {
  width: 24px; height: 24px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: #1D1E22;
}
.cf-col__icon svg { width: 16px; height: 16px; display: block; }
.cf-col[data-side="black"] .cf-col__icon { color: var(--z-black-ic); }
.cf-col[data-side="red"]   .cf-col__icon { color: var(--z-red-ic); }
.cf-col[data-side="green"] .cf-col__icon { color: var(--z-green-ic); }
.cf-col__count { flex: 1; color: var(--text-dim); white-space: nowrap; }
.cf-col__total { display: flex; align-items: center; gap: 5px; font-weight: 700; white-space: nowrap; }
.cf-col__list { display: flex; flex-direction: column; gap: 4px; }
.cf-prow {
  display: flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 12px; font-size: 12px; border-radius: 10px;
  background: rgba(8, 10, 16, .55);
}
.cf-av {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  background: var(--gray-btn) center/16px no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%234a5a63'%3E%3Cpath d='M12 12c2.2 0 4-1.8 4-4s-1.8-4-4-4-4 1.8-4 4 1.8 4 4 4zm0 2c-2.7 0-8 1.3-8 4v2h16v-2c0-2.7-5.3-4-8-4z'/%3E%3C/svg%3E");
}
.cf-prow__name { flex: 1; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-prow__amt  { font-weight: 600; display: flex; align-items: center; gap: 3px; white-space: nowrap; }

/* ─── COIN ─── */
/* Наша монета (assets/coin-64.png) везде, где на странице сумма: и в
   статичной разметке (там лежал старый SVG с буквой F), и в строках,
   которые собирает скрипт. Рисуется фоном, содержимое значка скрыто. */
.coin-ico {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px; width: 1em; height: 1em;
  flex-shrink: 0; vertical-align: middle;
  background: url("assets/coin-64.png") center / contain no-repeat;
}
.coin-ico svg, .coin-ico img { display: none; }

/* ─── TOAST ─── */
/* Плашка выигрыша. Была ровная: .25s линейного роста с 0.7 до 1 — то есть
   надпись просто появлялась. Стало три отдельных участка:

     вылет   — с перелётом за единицу и обратно, это и читается как удар;
     стояние — секунду висит неподвижно, чтобы успеть прочитать сумму;
     уход    — вверх и в прозрачность.

   Перелёт маленький (1.12): большой превращает выплату в мультфильм. */
/* Выигрыш — не плашка, а зелёные цифры с нашей монетой: выскакивают из
   центра колеса, чуть перелетают и уплывают вверх. Ни рамки, ни фона. */
.cf-toast {
  position: absolute; top: 22%; left: 50%;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: .18em;
  font-family: var(--f-cond, 'Oswald'), 'Inter', sans-serif;
  font-size: clamp(34px, 5.2cqw, 56px); font-weight: 700; letter-spacing: .02em;
  /* тот же зелёный, что у кнопок сайта (--green), без тёмных теней,
     которые его глушили; только тонкая обводка ради контраста */
  color: var(--green, #43D97A); font-variant-numeric: tabular-nums;
  -webkit-text-stroke: .5px rgba(0,0,0,.35);
  text-shadow: 0 1px 0 rgba(0,0,0,.4);
  animation: cf-tin .5s cubic-bezier(.2, 1.6, .4, 1) both,
             cf-tout .55s 1.5s ease-in forwards;
  z-index: 20; pointer-events: none; white-space: nowrap;
}
.cf-toast .coin-ico { font-size: .78em; filter: drop-shadow(0 2px 4px rgba(0,0,0,.6)); }
@keyframes cf-tin {
  from { opacity: 0; transform: translateX(-50%) translateY(26px) scale(.55); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0)    scale(1); }
}
@keyframes cf-tout {
  to { opacity: 0; transform: translateX(-50%) translateY(-54px) scale(1.04); }
}

/* ═══════════════ МОМЕНТ ОСТАНОВКИ ═══════════════

   Раньше остановка не была отмечена ничем: колесо замирало, подсветка
   зажигалась ровным светом, и глаз ловил результат позже, чем он
   наступал. Три добавки, каждая — про своё:

     вспышка   — сам момент удара, 0.5 с и всё;
     толчок    — указатель отыгрывает попадание;
     тряска    — проигравшие ставки, чтобы поражение читалось не только
                 приглушением, которое легко пропустить. */

/* Белой вспышки по кольцу на результате больше нет — просили убрать
   свечения. */

/* Толчок указателя. По оси Y и с возвратом: указатель «принимает» ячейку,
   а не отъезжает от неё. */
.cf-marker.is-land { animation: cf-land .5s cubic-bezier(.2, 1.4, .4, 1); }
/* В кадрах обязательно translateX(-50%): указатель центрирован именно им,
   и кадры только с translateY на полсекунды сдвигали его на полширины
   вправо — он «пропадал» в момент остановки. */
@keyframes cf-land {
  0%   { transform: translateX(-50%) translateY(0); }
  28%  { transform: translateX(-50%) translateY(3.2%); }
  100% { transform: translateX(-50%) translateY(0); }
}

/* Проигравшая ставка: короткая тряска поверх приглушения. Приглушение
   говорит «эта ставка больше не в игре», тряска — «ты её проиграл
   прямо сейчас». Первое статично и легко пропускается, второе нет. */
.cf-zone.is-lost-bet { animation: cf-loseshake .34s ease both; }
@keyframes cf-loseshake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-5px); }
  55%      { transform: translateX(4px); }
  80%      { transform: translateX(-2px); }
}

/* Сумма выплаты в центре — тот же перелёт, что и у плашки, чтобы оба
   числа появлялись одним движением, а не вразнобой. */
.cf-center--win.is-payout .cf-center__time { animation: cf-payout .5s cubic-bezier(.2, 1.5, .4, 1) both; }
@keyframes cf-payout {
  from { opacity: 0; transform: scale(.68); }
  to   { opacity: 1; transform: scale(1); }
}

/* Зелёное — единственное выпадение с выплатой x14, и до сих пор класс
   is-rare навешивался, но не был описан НИ ОДНИМ правилом: празднование
   редкого события состояло из ничего. */
.cf-wheel-wrap.is-rare { animation: none; }   /* засветка всего колеса на зелёном убрана */

@media (prefers-reduced-motion: reduce) {
  .cf-toast, .cf-marker.is-land, .cf-zone.is-lost-bet,
  .cf-center--win.is-payout .cf-center__time {
    animation-duration: .01ms; animation-iteration-count: 1;
  }
  .cf-seg { transition: none; }
}

/* ─── RESPONSIVE ───
   Зоны и игроки на телефоне больше не переходят на две колонки: три
   стороны в ряд читаются сразу (зоны — из roulette.theme.css, игроки — из
   mobile.css), а в две колонки бомба оставалась одна во втором ряду. */
@media (max-width: 760px) {
  :root { --WD: calc(100vw - 24px); }
  .cf-toprow { flex-direction: column; }
}