/* ==========================================================================
   DropHub «1 Клик»

   Продолжение home.css (токены, шрифты Oswald/Inter, лаймовый акцент) и
   games.css. Поверхности игры — тёмно-сине-фиолетовое «стекло», акценты —
   лайм (главная кнопка, указатель) и зелёный (бонус, выигрыш).

   Компоновка:
   • заголовок «1 Клик» на тонкой линии;
   • игра — в карточке-сцене (.oc-game): мягкая виньетка, сетка, искры,
     свечение «пола» под колесом;
   • компьютер (≥1024): слева колонка 106px — «Правила», «Быстрая игра»,
     «Автопродажа» и вертикальная шкала бонуса; по центру — широкая
     коробка колеса 2.2:1, видна только нижняя дуга кольца (~5 клеток),
     сверху её закрывает купол; под колесом (до 440px) — подпись, поле
     ставки с «Инвентарём» и кнопка «Начать игру»;
   • планшет и телефон: «Правила» — квадрат над куполом, тумблеры — в
     строке подписи, под кнопкой — горизонтальная карточка бонуса; на
     телефоне (<640) коробка 1.27:1 и видно 3 клетки;
   • ленты «Последние открытия» и «Топ выигрыши» — две колонки, на
     телефоне вкладками.

   Колесо — свой рисунок (oneclick.view.js): размеры внутри кольца — в cqw
   квадрата кольца (.oc-disc), поэтому одинаковы на любой ширине.
   Анимации — только transform/opacity; backdrop-filter не используется.
   ========================================================================== */

/* угол кольца — регистрируем, иначе его нельзя анимировать */
@property --spin { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

/* фон страницы — как на главной (index.css, body.ht-home: --ht-bg);
   камуфляж поверх — общий слой body::before из home.css */
.oc-body { background-color: #1A1430; }

.oc-page {
  --oc-s1: #221B3E;              /* поверхности — токены главной (--ht-surface…) */
  --oc-s2: #2C2452;
  --oc-s3: #372E62;
  --oc-deep: #150F2B;            /* утопленные поля: ввод, трубка шкалы */
  --oc-glass: linear-gradient(180deg, #2C2452 0%, #241D45 100%);
  --oc-line: #3A3166;
  --oc-line2: #4C4182;
  --oc-hl: inset 0 1px 0 rgba(255, 255, 255, .07);
  --oc-mute: #A69FCF;            /* приглушённый текст на поверхностях */
  --oc-pay: #FFEBC2;             /* суммы в клетках */
  --oc-win: #9DF58C;             /* суммы выигрышей в лентах */
  max-width: 1480px; margin: 0 auto;
  padding: 6px var(--pad-x) 56px;
  display: flex; flex-direction: column; gap: 14px;
}
.oc-page [hidden] { display: none !important; }

/* ═══════════════ ЗАГОЛОВОК НА ЛИНИИ ═══════════════ */

.oc-title {
  display: flex; align-items: center; gap: 18px; margin: 0;
  font-family: var(--f-cond); font-size: 30px; font-weight: 600; line-height: 1.1; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text);
}
.oc-title::before, .oc-title::after { content: ''; flex: 1; height: 1px; }
.oc-title::before { background: linear-gradient(90deg, transparent, rgba(166, 120, 255, .35)); }
.oc-title::after { background: linear-gradient(270deg, transparent, rgba(166, 120, 255, .35)); }
.oc-title span { white-space: nowrap; text-shadow: 0 0 24px rgba(166, 44, 255, .45); }

/* ═══════════════ ИГРА — КАРТОЧКА-СЦЕНА ═══════════════ */

.oc-game {
  position: relative; min-width: 0; isolation: isolate; overflow: hidden;
  padding: 18px 18px 24px; border-radius: 28px;
  border: 1px solid var(--oc-line);
  background:
    radial-gradient(44% 40% at 50% 0%, rgba(140, 90, 255, .34), transparent 72%),
    radial-gradient(60% 50% at 0% 100%, rgba(110, 80, 230, .14), transparent 70%),
    radial-gradient(60% 50% at 100% 100%, rgba(110, 80, 230, .14), transparent 70%),
    linear-gradient(180deg, #261E4A 0%, #201941 58%, #1D163A 100%);
  box-shadow: 0 24px 60px rgba(8, 4, 24, .45), inset 0 1px 0 rgba(255, 255, 255, .07), inset 0 0 120px rgba(14, 8, 36, .35);
}
/* тонкая сетка, гаснущая к краям */
.oc-game::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  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(70% 62% at 50% 38%, #000 0%, rgba(0, 0, 0, .35) 55%, transparent 85%);
          mask-image: radial-gradient(70% 62% at 50% 38%, #000 0%, rgba(0, 0, 0, .35) 55%, transparent 85%);
}
/* искры в палитре сайта */
.oc-game::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    radial-gradient(1.6px 1.6px at 7% 18%, rgba(215, 255, 0, .8), transparent),
    radial-gradient(1.2px 1.2px at 13% 52%, rgba(255, 255, 255, .55), transparent),
    radial-gradient(1.8px 1.8px at 19% 82%, rgba(166, 120, 255, .8), transparent),
    radial-gradient(1.2px 1.2px at 27% 30%, rgba(255, 255, 255, .4), transparent),
    radial-gradient(1.4px 1.4px at 74% 24%, rgba(166, 120, 255, .85), transparent),
    radial-gradient(1.2px 1.2px at 81% 58%, rgba(255, 255, 255, .5), transparent),
    radial-gradient(1.7px 1.7px at 88% 14%, rgba(215, 255, 0, .7), transparent),
    radial-gradient(1.3px 1.3px at 93% 76%, rgba(166, 120, 255, .7), transparent),
    radial-gradient(1.1px 1.1px at 64% 88%, rgba(255, 255, 255, .35), transparent),
    radial-gradient(1.1px 1.1px at 36% 92%, rgba(255, 255, 255, .35), transparent);
  animation: oc-twinkle 5s ease-in-out infinite alternate;
}

/* ── левая колонка (компьютер) ── */
.oc-side { position: absolute; left: 18px; top: 18px; z-index: 4; width: 106px; }
.oc-tools { display: flex; gap: 8px; width: max-content; }
.oc-tool {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 36px; padding: 0 12px; border-radius: 11px; cursor: pointer;
  border: 1px solid var(--oc-line); background: var(--oc-glass); color: #CFC8F0;
  box-shadow: var(--oc-hl), 0 4px 12px rgba(8, 4, 24, .3);
  font: inherit; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  transition: color .14s, background-color .14s, border-color .14s, box-shadow .14s, transform .14s;
}
.oc-tool svg { width: 16px; height: 16px; flex: none; }
.oc-tool--sq { width: 36px; padding: 0; }
.oc-tool:active { transform: translateY(1px); }
.oc-tool[aria-pressed="true"] {
  color: var(--lime); border-color: rgba(215, 255, 0, .4);
  background: linear-gradient(180deg, rgba(215, 255, 0, .16), rgba(215, 255, 0, .05));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 14px rgba(215, 255, 0, .16);
}
.oc-tool:focus-visible, .oc-wrules:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }

/* вертикальная шкала бонусной игры */
.oc-meter {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px;
  width: 106px; margin-top: 12px; padding: 12px 8px 14px; border-radius: 22px;
  border: 1px solid var(--oc-line);
  background:
    radial-gradient(100% 34% at 50% 100%, rgba(109, 234, 93, .2), transparent 72%),
    radial-gradient(100% 30% at 50% 0%, rgba(124, 72, 255, .2), transparent 72%),
    linear-gradient(180deg, #2C2452 0%, #241D45 55%, #1F2B3A 100%);
  box-shadow: 0 14px 30px rgba(8, 4, 24, .4), inset 0 1px 0 rgba(255, 255, 255, .08);
  transition: border-color .3s, box-shadow .3s;
}
.oc-meter.is-ready { border-color: rgba(109, 234, 93, .45); box-shadow: 0 14px 30px rgba(8, 4, 24, .4), 0 0 24px rgba(109, 234, 93, .22), inset 0 1px 0 rgba(255, 255, 255, .07); }
.oc-meter__cap { margin-bottom: -4px; font-size: 9.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--oc-mute); }
.oc-meter__goal {
  padding: 3px 8px; border-radius: 99px; border: 1px solid var(--oc-line); background: rgba(255, 255, 255, .04);
  font-size: 12px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.oc-meter__track { display: grid; grid-template-columns: 1fr 24px 1fr; gap: 6px; width: 100%; height: 220px; margin-top: 2px; }
.oc-meter__ticks { display: flex; flex-direction: column-reverse; justify-content: space-between; padding: 7px 0; }
.oc-meter__ticks--l { align-items: flex-end; }
.oc-meter__ticks--r { align-items: flex-start; }
.oc-meter__ticks i { display: block; height: 2px; border-radius: 1px; background: rgba(200, 185, 255, .2); transition: background-color .3s, box-shadow .3s; }
.oc-meter__ticks i.is-l { width: 11px; }
.oc-meter__ticks i.is-s { width: 6px; }
.oc-meter__ticks i.is-on { background: #A6F59A; box-shadow: 0 0 6px rgba(109, 234, 93, .9), 0 0 2px rgba(200, 255, 190, .9); }
.oc-meter__tube {
  position: relative; overflow: hidden; border-radius: 12px;
  background: linear-gradient(90deg, #0F0A22 0%, #1A1338 50%, #0F0A22 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), inset 0 8px 16px rgba(0, 0, 0, .7), 0 0 0 3px rgba(255, 255, 255, .03);
}
.oc-meter__tube::after {       /* стеклянный блик */
  content: ''; position: absolute; z-index: 2; top: 6px; bottom: 6px; left: 4px; width: 4px; border-radius: 2px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, .03) 70%);
}
.oc-meter__fill {
  position: absolute; inset: 0; transform: translateY(100%);
  background: linear-gradient(0deg, #0F7A35 0%, #2FBF4A 45%, var(--money) 80%, #D2FFBE 100%);
  box-shadow: 0 0 14px rgba(109, 234, 93, .5);
  transition: transform .7s cubic-bezier(.2, .8, .2, 1);
}
.oc-meter__fill::before {      /* мягкое свечение на верхушке */
  content: ''; position: absolute; left: -30%; right: -30%; top: -8px; height: 18px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(230, 255, 215, .95), rgba(109, 234, 93, 0));
}
.oc-meter__fill::after {       /* блестящий край */
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: rgba(240, 255, 232, .95);
}
.oc-meter__val { font-size: 14px; font-weight: 800; color: var(--money); text-shadow: 0 0 12px rgba(109, 234, 93, .45); }
.oc-meter__ico, .oc-bcard__ico {
  display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; color: #BFFFB0;
  background: radial-gradient(70% 70% at 50% 30%, rgba(109, 234, 93, .35), rgba(20, 70, 40, .5));
  box-shadow: inset 0 0 0 1px rgba(109, 234, 93, .45), 0 0 14px rgba(109, 234, 93, .25);
}
.oc-meter__ico svg, .oc-bcard__ico svg { width: 16px; height: 16px; }
.oc-meter__label {
  font-family: var(--f-cond); font-size: 13px; font-weight: 700; line-height: 1.05; letter-spacing: .06em;
  text-transform: uppercase; text-align: center; color: #E9FFE2;
}
.oc-meter__btn {
  position: relative; display: none; width: 100%; height: 34px; border: 0; border-radius: 11px; cursor: pointer;
  background: linear-gradient(180deg, #A3F795, #3FB935); color: #0C2A09;
  font: inherit; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  box-shadow: 0 6px 18px rgba(109, 234, 93, .35), inset 0 1px 0 rgba(255, 255, 255, .5);
}
.oc-meter.is-ready .oc-meter__btn { display: block; }
.oc-meter__btn[disabled] { filter: saturate(.5) brightness(.8); cursor: default; }
.oc-count {
  position: absolute; top: -8px; right: -8px; display: inline-grid; place-items: center;
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; border: 2px solid #221B3E;
  background: #E5484D; color: #fff; font-style: normal; font-size: 10.5px; font-weight: 800; letter-spacing: 0;
}

/* ── сцена: колесо и ставка ── */
.oc-stage { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; min-width: 0; }

.oc-wheel {
  position: relative; width: min(100% - 260px, 960px, (100vh - 290px) * 2.2); min-width: 560px;
  aspect-ratio: 2.2; container-type: inline-size;
}
/* свечение «пола» под дугой */
.oc-wheel::before {
  content: ''; position: absolute; z-index: -1; left: 12%; right: 12%; bottom: -16%; height: 44%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(150, 80, 255, .3), rgba(150, 80, 255, .08) 55%, transparent);
}
/* обрезка дуги: мягкое затухание к бокам и к верхнему краю */
.oc-clip {
  position: absolute; inset: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(180deg, transparent 0, #000 8%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(180deg, transparent 0, #000 8%);
          mask-composite: intersect;
}
/* квадрат кольца: центр чуть выше коробки, видна нижняя дуга */
.oc-disc {
  position: absolute; left: 1cqw; top: -56.7cqw; width: 98cqw; aspect-ratio: 1;
  container-type: inline-size;
}
.oc-track {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle closest-side,
    #07081A 0 63.6%, rgba(150, 140, 255, .16) 64.3%, #090B1E 65% 97%,
    rgba(170, 120, 255, .55) 97.7%, rgba(40, 30, 90, .5) 98.4%, rgba(11, 13, 34, 0) 99.6%);
  box-shadow: 0 0 6cqw rgba(110, 60, 255, .2), 0 2cqw 6cqw rgba(0, 0, 0, .5);
}

/* --spin — угол прокрутки в покое; спин анимирует transform, а в покое
   поверх плывёт свойство rotate — обе анимации на композиторе
   (oneclick.main.js — turn, idleStart): на время анимации браузер сам
   выносит кольцо в слой. Постоянного will-change нет — стоящее колесо
   рисуется сразу повёрнутым, скины и цифры чёткие. */
.oc-ring { position: absolute; inset: 0; z-index: 1; transform: rotate(var(--spin)); }

/* клетка: кольцевой сектор, обращённый к центру; угол — --a */
.oc-cell {
  position: absolute; left: 50%; top: 50%;
  width: var(--cw); height: var(--ch); margin: calc(var(--ch) / -2) 0 0 calc(var(--cw) / -2);
  transform: rotate(var(--a)) translateY(calc(-1 * var(--rc))) rotate(180deg);
  transition: opacity .35s ease;
}
.oc-cell__body { position: absolute; inset: 0; transform-origin: 50% 50%; }
.oc-cell__bg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* обод — 1.5 единицы кольца за краем стеклянной клетки (градиент — в разметке) */
.oc-cell__rim { stroke-width: 17; stroke-linejoin: round; }
.oc-sr0 { stop-color: var(--c); stop-opacity: .9; }
.oc-sr1 { stop-color: color-mix(in srgb, var(--c) 35%, #fff); stop-opacity: .2; }
.oc-sr2 { stop-color: #fff; stop-opacity: .12; }
.oc-cell__shape { stroke-width: 14; stroke-linejoin: round; }
/* Заливка — вся клетка цветом редкости (решение владельца 2026-10-14;
   раньше цвет был только у обода и пятном за скином, сама клетка —
   тёмно-синяя): у внешнего края ярче, к центру глубже — сумма и скин
   читаются на тёмном. */
.oc-st0 { stop-color: color-mix(in srgb, var(--c) 78%, #12152F); }
.oc-st1 { stop-color: color-mix(in srgb, var(--c) 50%, #131732); }
.oc-st2 { stop-color: color-mix(in srgb, var(--c) 30%, #0C0F25); }
/* размытое цветное пятно у внешнего обода */
.oc-cell__flare {
  position: absolute; left: 12%; right: 12%; bottom: -2%; height: 36%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 65%, transparent), transparent);
  opacity: .55;
}
.oc-cell__in {
  position: absolute; inset: 10% 11% 7%;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
}
.oc-cell__val {
  max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  padding: .28cqw .9cqw; border-radius: 99px;
  background: rgba(5, 6, 18, .55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
  font-size: clamp(9px, 1.3cqw, 16px); font-weight: 800; line-height: 1.15; color: var(--oc-pay);
  font-variant-numeric: tabular-nums;
}
.oc-cell__val .kz-cur { margin-right: .2em; }
.oc-cell__skin {
  flex: 1; min-height: 0; width: 72%; display: grid; place-items: center; margin: .3cqw 0;
  background: radial-gradient(50% 48% at 50% 55%, color-mix(in srgb, var(--c) 45%, rgba(255, 255, 255, .5)), transparent 76%);
}
.oc-cell__skin img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 .5cqw .8cqw rgba(0, 0, 0, .65)); }
.oc-cell__ph { width: 7cqw; height: 3.6cqw; border-radius: .8cqw; background: rgba(255, 255, 255, .06); }
.oc-cell__coin { display: inline-grid; place-items: center; width: 5cqw; height: 5cqw; }
.oc-cell__coin img { width: 100%; height: 100%; }
.oc-cell__x {
  padding: .4cqw 1.15cqw; border-radius: 99px; font-style: normal; white-space: nowrap;
  font-family: var(--f-cond); font-size: clamp(9px, 1.3cqw, 15px); font-weight: 600; line-height: 1.1; letter-spacing: .04em;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 45%, #12152E), color-mix(in srgb, var(--c) 22%, #0B0D20));
  color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 75%, #fff), inset 0 1px 0 rgba(255, 255, 255, .2), 0 .3cqw .9cqw rgba(0, 0, 0, .5);
}

/* предпросмотр для новой ставки ещё едет — старые клетки приглушены */
.oc-wheel.is-stale .oc-cell__in { opacity: .5; }

/* Итог. В покое и на прокрутке не светится ничего — подсвечивается
   только выигравшая клетка, когда колесо на ней остановилось: лаймовый
   контур прорисовывается по краю, клетка чуть «выпрыгивает», ореол цвета
   редкости, плашка множителя заливается цветом. Пока колесо стоит,
   остальные клетки гаснут; поплыло в покое (.is-idle) — снова видны, а
   подсветка выигрыша держится до следующего спина. */
.oc-cell__hl { fill: none; stroke: var(--lime); stroke-width: 3.5; stroke-linejoin: round; stroke-linecap: round; opacity: 0; }
.oc-wheel.is-done:not(.is-idle) .oc-cell:not(.is-win) { opacity: .3; }
.oc-wheel.is-done .oc-cell.is-win { z-index: 2; }
.oc-wheel.is-done .oc-cell.is-win .oc-cell__body { animation: oc-win .6s cubic-bezier(.2, .8, .3, 1) both; }
.oc-wheel.is-done .oc-cell.is-win .oc-cell__bg {
  filter: drop-shadow(0 0 .45cqw rgba(215, 255, 0, .5)) drop-shadow(0 0 1.6cqw color-mix(in srgb, var(--c) 70%, transparent));
}
.oc-wheel.is-done .oc-cell.is-win .oc-cell__hl { opacity: 1; stroke-dasharray: 100; animation: oc-draw .7s ease-out both; }
.oc-wheel.is-done .oc-cell.is-win .oc-sr0 { stop-opacity: 1; }
.oc-wheel.is-done .oc-cell.is-win .oc-sr1 { stop-color: var(--c); stop-opacity: .6; }
.oc-wheel.is-done .oc-cell.is-win .oc-st0 { stop-color: var(--c); }
.oc-wheel.is-done .oc-cell.is-win .oc-st1 { stop-color: color-mix(in srgb, var(--c) 64%, #131732); }
.oc-wheel.is-done .oc-cell.is-win .oc-cell__flare { opacity: .95; }
.oc-wheel.is-done .oc-cell.is-win .oc-cell__x {
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 85%, #fff), var(--c));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 0 1.4cqw color-mix(in srgb, var(--c) 70%, transparent);
}

/* ── купол-центр ──
   Раскладка — как у референса (центр колеса 1Click): яркий купол цвета
   сайта, по нему — тонкая «паутина» изогнутых спиц и колец и водяной знак
   «1 КЛИК» по кругу; в центре видимой части — знак DropHub, под ним
   крупно название сайта и подпись «Забирай скин в 1 клик».
   Геометрия: центр купола выше коробки колеса, видна только нижняя
   треть круга (≈ от 63% до 100% его высоты), поэтому лицевые грани
   стоят в этой полосе. Тема — переменными: в бонусе фиолетовый сменяется
   зелёным денег, раскладка та же. */
.oc-hub {
  --h-c0: #A65BFF; --h-c1: #7A2FF0; --h-c2: #4A15B8; --h-c3: #250968;   /* от светлого центра к краю */
  --h-rim: #D9B8FF; --h-rim2: #3A1290;                                 /* ободок */
  --h-line: rgba(243, 232, 255, .13);
  --h-wm: rgba(255, 255, 255, .055);
  position: absolute; z-index: 3; border-radius: 50%; overflow: hidden;
  width: var(--hub); height: var(--hub); left: calc(50% - var(--hub) / 2); top: calc(50% - var(--hub) / 2);
  background:
    radial-gradient(34% 16% at 50% 73%, rgba(255, 255, 255, .22), transparent 75%),
    radial-gradient(62% 40% at 50% 76%, var(--h-c0) 0%, var(--h-c1) 38%, var(--h-c2) 72%, var(--h-c3) 100%),
    var(--h-c3);
  box-shadow:
    0 0 0 .8cqw #0A0620, 0 0 0 1.05cqw rgba(166, 92, 255, .35),
    0 1.6cqw 4cqw rgba(0, 0, 0, .6), 0 0 5cqw rgba(122, 47, 240, .25),
    inset 0 -1cqw 3cqw rgba(20, 4, 60, .55);
}
/* полированный ободок: светлый у нижней кромки, к бокам уходит в тень */
.oc-hub::after {
  content: ''; position: absolute; inset: 0; z-index: 2; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 180deg, var(--h-rim), color-mix(in srgb, var(--h-rim) 60%, transparent) 10%, var(--h-rim2) 26% 74%, color-mix(in srgb, var(--h-rim) 60%, transparent) 90%, var(--h-rim));
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - .55cqw), #000 calc(100% - .45cqw), #000 calc(100% - .1cqw), transparent 100%);
          mask: radial-gradient(closest-side, transparent calc(100% - .55cqw), #000 calc(100% - .45cqw), #000 calc(100% - .1cqw), transparent 100%);
}
.oc-wheel.is-bonus .oc-hub {
  --h-c0: #63E36B; --h-c1: #2FAE45; --h-c2: #157A2C; --h-c3: #0A4019;
  --h-rim: #CFFFC6; --h-rim2: #0E4A1E;
}
/* паутина и водяной знак — одна svg на весь купол (viewBox 1000) */
.oc-hub__web { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.oc-hub__lines { fill: none; stroke: var(--h-line); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.oc-hub__lines--ring { stroke-width: 2; opacity: .8; }
.oc-hub__wm {
  font-family: var(--f-body); font-size: 54px; font-weight: 900; font-style: italic; letter-spacing: 3px;
  text-transform: uppercase; fill: var(--h-wm);
}

.oc-hub__face {
  position: absolute; z-index: 1; left: 12%; right: 12%; bottom: 5.5%; height: 36%;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: .5cqw;
  text-align: center; opacity: 0; transform: translateY(1.5%); transition: opacity .25s ease, transform .25s ease; pointer-events: none;
}
.oc-hub[data-mode="idle"] .oc-hub__face--idle,
.oc-hub[data-mode="bonus"] .oc-hub__face--bonus,
.oc-hub[data-mode="win"] .oc-hub__face--win { opacity: 1; transform: none; }

/* заставка: знак — название — подпись, сверху вниз в видимой полосе */
.oc-hub__face--idle { top: 66%; bottom: auto; height: auto; justify-content: flex-start; gap: 0; }
.oc-hub__logo {
  display: block; width: 11.5cqw; height: 11.5cqw; margin: -1.7cqw 0 -1.9cqw; object-fit: contain;   /* у знака прозрачные поля — их съедают отрицательные отступы */
  filter: drop-shadow(0 .35cqw .5cqw rgba(20, 4, 60, .55)) drop-shadow(0 0 1.2cqw rgba(215, 255, 0, .28));
}
.oc-hub__brand {
  display: inline-flex; align-items: center; gap: .12em; margin-top: .75cqw;
  font-family: var(--f-body); font-size: 3.15cqw; font-weight: 900; font-style: italic; line-height: 1;
  letter-spacing: .005em; text-transform: uppercase; white-space: nowrap;
  filter: drop-shadow(0 .25cqw .4cqw rgba(20, 4, 60, .6));
}
.oc-hub__brand-a { padding-right: .04em; color: var(--lime); }
.oc-hub__brand-b {
  padding: .06em .26em .08em .2em; border-radius: .22em; color: #fff;
  background: linear-gradient(180deg, #2C0C78, #1A0650);
  box-shadow: inset 0 0 0 .07em #E9D4FF, 0 0 .5em rgba(214, 170, 255, .45);
}
.oc-hub__face--idle .oc-hub__sub {
  margin-top: .7cqw; font-size: max(9px, 1.12cqw); font-weight: 800; letter-spacing: .07em; color: #F1E6FF;
  text-shadow: 0 1px 2px rgba(20, 4, 60, .6);
}
.oc-hub__face--idle .oc-hub__sub::before, .oc-hub__face--idle .oc-hub__sub::after { display: none; }
.oc-hub__face--idle .oc-hub__sub em { padding: 0; background: none; box-shadow: none; color: var(--lime); text-shadow: 0 1px 2px rgba(20, 4, 60, .6); }

/* бонус: зелёная кнопка-подарок */
.oc-hub__mark { width: 6.6cqw; height: 6.6cqw; overflow: visible; filter: drop-shadow(0 0 1.1cqw rgba(109, 234, 93, .45)) drop-shadow(0 .4cqw .6cqw rgba(0, 0, 0, .5)); }
.oc-mk__ping { transform-box: fill-box; transform-origin: center; opacity: 0; animation: oc-mk-ping 2.8s ease-out infinite; }

/* «Бонусная игра» — белое слово + слово в плашке, как у названия */
.oc-lock {
  display: inline-flex; align-items: center; gap: .14em;
  font-family: var(--f-body); font-size: 2.8cqw; font-weight: 900; font-style: italic; line-height: 1; letter-spacing: .01em;
  text-transform: uppercase; white-space: nowrap; filter: drop-shadow(0 .25cqw .4cqw rgba(0, 30, 10, .55));
}
.oc-lock__a { color: #fff; }
.oc-lock__b {
  padding: .06em .26em .08em .2em; border-radius: .22em; color: #fff;
  background: linear-gradient(180deg, #0F5A26, #083A18);
  box-shadow: inset 0 0 0 .07em #D6FFCC, 0 0 .5em rgba(160, 255, 150, .4);
}

/* подписи граней бонуса и выигрыша */
.oc-hub__sub, .oc-hub__label {
  display: inline-flex; align-items: center; gap: .9cqw; white-space: nowrap;
  font-size: max(10px, 1.1cqw); font-weight: 800; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; color: #F1E6FF;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}
.oc-hub__sub::before, .oc-hub__sub::after, .oc-hub__label::before, .oc-hub__label::after {
  content: ''; flex: none; width: 2.6cqw; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55));
}
.oc-hub__sub::after, .oc-hub__label::after { transform: scaleX(-1); }
.oc-hub__sub em { font-style: normal; color: var(--lime); }
.oc-wheel.is-bonus .oc-hub__sub, .oc-wheel.is-bonus .oc-hub__label { color: #E6FFE0; }

/* выигрыш: сумма в тёмной плашке цвета денег; свечение — фильтром на
   всей строке, иначе text-shadow обрезают окошки цифр одометра */
.oc-hub__val {
  padding: .1em .38em .12em .3em; border-radius: .2em;
  font-family: var(--f-cond); font-size: 4cqw; font-weight: 700; line-height: 1; color: var(--money);
  background: linear-gradient(180deg, rgba(10, 4, 30, .82), rgba(14, 22, 20, .82));
  box-shadow: inset 0 0 0 .05em rgba(109, 234, 93, .75), 0 0 .45em rgba(109, 234, 93, .3), 0 .12em .3em rgba(0, 0, 0, .5);
}
.oc-hub__val .oc-odo__n { filter: drop-shadow(0 0 .22em rgba(109, 234, 93, .55)); }
.oc-hub__val.is-long { font-size: 3.3cqw; }
.oc-hub__val.is-huge { font-size: 2.7cqw; }
.oc-hub__name {
  max-width: 27cqw; font-style: normal; font-size: max(10px, 1.2cqw); font-weight: 700; line-height: 1.2; color: #fff;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}

/* Купол меньше (ноутбук с невысоким окном, планшет): размеры граней в cqw,
   мелкий текст держит минимум в px. Запросы — к квадрату кольца (.oc-disc). */
@container (max-width: 900px) {
  .oc-hub__face { bottom: 6.5%; }
  .oc-hub__sub::before, .oc-hub__sub::after { display: none; }
  .oc-hub__sub { letter-spacing: .05em; }
}
@container (max-width: 720px) {
  .oc-hub__face { bottom: 8%; }
  .oc-hub__face--idle { top: 65.5%; }
}
@container (max-width: 640px) {
  .oc-hub__face { bottom: 9%; }
  .oc-hub__sub { font-size: 9.5px; letter-spacing: .03em; }
}

/* указатель: треугольник вниз на нижнем краю купола */
.oc-pointer {
  position: absolute; left: 50%; top: calc(var(--hub-y) - 1.3cqw); z-index: 4; width: 3.2cqw; height: 2.6cqw;
  transform: translateX(-50%);
  filter: drop-shadow(0 0 .9cqw rgba(215, 255, 0, .7)) drop-shadow(0 .3cqw .3cqw rgba(0, 0, 0, .6));
}
.oc-pointer i {
  display: block; width: 100%; height: 100%;
  background: linear-gradient(180deg, #FAFFC8 0%, #E9FF5C 30%, var(--lime) 60%, #A3CC00 100%);
  clip-path: polygon(0 0, 100% 0, 56% 92%, 50% 100%, 44% 92%);
}
[data-state="done"] .oc-pointer i { animation: oc-nod .5s ease-out; }

/* «Правила» квадратом над куполом — на планшете и телефоне */
.oc-wrules {
  position: absolute; left: 10px; top: 10px; z-index: 5; display: none; place-items: center;
  width: 40px; height: 40px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--oc-line2); background: rgba(44, 36, 82, .92); color: #D6D0F5;
  box-shadow: var(--oc-hl), 0 6px 16px rgba(0, 0, 0, .4);
}
.oc-wrules svg { width: 18px; height: 18px; }

/* ── под колесом: подпись, ставка, кнопка ── */
.oc-controls { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 440px; margin-top: 6px; }
.oc-caption { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 18px; }
.oc-caption__txt { flex: 1; text-align: center; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--oc-mute); }

.oc-inrow { display: flex; gap: 8px; min-width: 0; }
.oc-bet {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px;
  height: 50px; padding: 0 6px 0 14px; border-radius: 14px;
  border: 1px solid var(--oc-line); background: linear-gradient(180deg, var(--oc-deep) 0%, #1B1436 100%);
  box-shadow: inset 0 2px 6px rgba(6, 2, 20, .45), 0 1px 0 rgba(255, 255, 255, .05);
  transition: border-color .15s, box-shadow .15s;
}
.oc-bet:focus-within { border-color: rgba(215, 255, 0, .5); box-shadow: inset 0 2px 6px rgba(6, 2, 20, .45), 0 0 0 3px rgba(215, 255, 0, .1); }
/* знак валюты у поля — наша монета (.kz-cur из home.css), как у сумм по всему сайту */
.oc-bet__cur.kz-cur {
  display: block; flex: none; width: 22px; height: 22px; margin: 0; vertical-align: 0;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45));
}
.oc-bet input {
  flex: 1; width: 100%; min-width: 0; border: 0; background: none; outline: none;
  font: inherit; font-size: 17px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums;
}
.oc-bet input:disabled { color: var(--text-dim); }
.oc-chips { display: flex; gap: 4px; }
.oc-chips button {
  height: 36px; min-width: 40px; padding: 0 9px; border: 1px solid var(--oc-line); border-radius: 10px; cursor: pointer;
  background: linear-gradient(180deg, #3A3070 0%, #2C2452 100%); color: #CFC8F0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 2px 6px rgba(0, 0, 0, .3);
  font: inherit; font-size: 12px; font-weight: 800; letter-spacing: .03em;
  transition: background-color .14s, color .14s, border-color .14s, transform .14s;
}
.oc-chips button:active:not([disabled]) { transform: translateY(1px); }
.oc-chips button:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.oc-chips button[disabled] { opacity: .45; cursor: default; }
/* «Быстрая игра» и «Автопродажа» — квадратами в ряду ставки, высотой с поле */
.oc-tool--row { flex: none; width: 50px; height: 50px; border-radius: 14px; }
.oc-tool--row svg { width: 19px; height: 19px; }
@media (hover: hover) {
  .oc-tool:hover { color: var(--text); border-color: var(--oc-line2); }
  .oc-chips button:hover:not([disabled]) { color: var(--text); border-color: var(--oc-line2); background: linear-gradient(180deg, #44397F 0%, #342B60 100%); }
  .oc-wrules:hover { color: var(--text); }
}

/* главная кнопка — лаймовая, как акцент сайта */
.oc-cta {
  position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; height: 58px; border: 0; border-radius: 16px; cursor: pointer;
  background: linear-gradient(180deg, #EEFF7A 0%, var(--lime) 46%, #B4E200 100%); color: #10150A;
  box-shadow: 0 14px 32px -8px rgba(215, 255, 0, .5), 0 0 0 1px rgba(215, 255, 0, .55),
              inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -3px 0 rgba(70, 100, 0, .3);
  font: inherit; transition: filter .14s, transform .14s, box-shadow .14s;
}
.oc-cta::after {               /* блик, пробегающий при наведении */
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 34%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: translateX(-140%) skewX(-18deg); transition: transform .7s ease;
}
.oc-cta b { position: relative; font-family: var(--f-cond); font-size: 19px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.oc-cta:active:not([disabled]) { transform: translateY(1px) scale(.995); }
.oc-cta:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
@media (hover: hover) {
  .oc-cta:hover:not([disabled]) { filter: brightness(1.05); box-shadow: 0 16px 38px -8px rgba(215, 255, 0, .65), 0 0 0 1px rgba(215, 255, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -3px 0 rgba(70, 100, 0, .3); }
  .oc-cta:hover:not([disabled])::after { transform: translateX(400%) skewX(-18deg); }
}
.oc-cta[disabled] { cursor: default; filter: saturate(.45) brightness(.7); box-shadow: none; }
.oc-cta__spin { position: relative; display: none; width: 20px; height: 20px; border-radius: 50%; }
/* бонусная игра идёт — тёмно-зелёная кнопка с бегущим кольцом */
.oc-cta.is-bonus, .oc-cta.is-bonus[disabled] {
  filter: none; color: #D8FFD0;
  background: linear-gradient(180deg, #18853F 0%, #0F5A2A 100%);
  box-shadow: 0 12px 28px -8px rgba(109, 234, 93, .4), inset 0 0 0 1px rgba(109, 234, 93, .5), inset 0 1px 0 rgba(255, 255, 255, .2);
}
.oc-cta.is-bonus .oc-cta__spin {
  display: block;
  background: conic-gradient(from 0deg, transparent 0 25%, #B9FF9C 100%);
  -webkit-mask: radial-gradient(circle, transparent 6px, #000 7px); mask: radial-gradient(circle, transparent 6px, #000 7px);
  animation: oc-turn .9s linear infinite;
}

.oc-hint { margin: 0; font-size: 12.5px; line-height: 1.4; text-align: center; color: var(--text-dim); }
.oc-hint.is-bad { color: #FF9C8A; }

/* ── «Начать игру» и «Авто» в один ряд ── */
.oc-play { display: flex; gap: 8px; }
.oc-play .oc-cta { flex: 1; width: auto; min-width: 0; }
.oc-auto {
  flex: none; width: 84px; height: 58px; border-radius: 16px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  border: 1px solid var(--oc-line); background: var(--oc-glass); color: #CFC8F0;
  box-shadow: var(--oc-hl), 0 4px 12px rgba(8, 4, 24, .3);
  font: inherit; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  transition: color .14s, border-color .14s, background-color .14s, box-shadow .14s, transform .14s;
}
.oc-auto svg { width: 20px; height: 20px; }
.oc-auto:active:not([disabled]) { transform: translateY(1px); }
.oc-auto:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.oc-auto[disabled] { opacity: .5; cursor: default; }
.oc-auto[aria-pressed="true"] svg { animation: oc-turn 1.6s linear infinite; }

/* Включённые «Быстрая игра», «Автопродажа» и идущая автоигра: рамка и
   значок — градиент кислотного логотипа в его розовый, без движения.
   Середина через светлый тон: напрямую смесь этих двух выходит рыжей.
   Градиент значка — #oc-acid в oneclick.html. */
.oc-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.oc-inrow .oc-tool--row[aria-pressed="true"], .oc-play .oc-auto[aria-pressed="true"] {
  color: #F2FFB0;
  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);
}
.oc-tool--row[aria-pressed="true"] svg [fill="currentColor"] { fill: url(#oc-acid); }
.oc-tool--row[aria-pressed="true"] svg[stroke], .oc-auto[aria-pressed="true"] svg[stroke] { stroke: url(#oc-acid); }
.oc-play .oc-auto[aria-pressed="true"] span {
  background: linear-gradient(90deg, #D7FF00, #F0FFC8 45%, #FFD6F7 55%, #F535F0);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* автоигра идёт — главная кнопка становится «Стоп» со счётчиком */
.oc-cta.is-auto, .oc-cta.is-auto[disabled] {
  filter: none; color: var(--lime);
  background: linear-gradient(180deg, #2E2560 0%, #201A44 100%);
  box-shadow: 0 12px 28px -10px rgba(215, 255, 0, .35), inset 0 0 0 1px rgba(215, 255, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .1);
}
.oc-cta.is-auto .oc-cta__spin {
  display: block;
  background: conic-gradient(from 0deg, transparent 0 25%, var(--lime) 100%);
  -webkit-mask: radial-gradient(circle, transparent 6px, #000 7px); mask: radial-gradient(circle, transparent 6px, #000 7px);
  animation: oc-turn .9s linear infinite;
}
@media (hover: hover) {
  .oc-auto:not([aria-pressed="true"]):hover:not([disabled]) { color: var(--text); border-color: var(--oc-line2); }
  .oc-cta.is-auto:hover:not([disabled]) { box-shadow: 0 12px 28px -10px rgba(215, 255, 0, .45), inset 0 0 0 1px rgba(215, 255, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .1); }
}
@media (max-width: 639px) {
  .oc-auto { width: 66px; }
}

/* итог без автопродажи: скин в инвентаре + остаток на балансе */
.oc-result {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  padding: 7px 8px; border-radius: 14px; border: 1px solid var(--oc-line);
  background: linear-gradient(90deg, color-mix(in srgb, var(--rc, #6DEA5D) 20%, var(--oc-s1)), var(--oc-s1) 60%);
  box-shadow: var(--oc-hl);
  animation: oc-in .28s ease-out; scroll-margin: 84px 0 calc(72px + env(safe-area-inset-bottom, 0px));
}
.oc-result__skin {
  display: grid; place-items: center; width: 56px; height: 42px; border-radius: 9px;
  background: radial-gradient(60% 60% at 50% 55%, color-mix(in srgb, var(--c) 45%, transparent), transparent 75%);
}
.oc-result__skin img { max-width: 92%; max-height: 92%; object-fit: contain; }
.oc-result__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.oc-result__txt b { font-size: 12.5px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oc-result__txt i { font-style: normal; font-size: 11.5px; color: var(--text-dim); }
.oc-result__btn {
  height: 34px; padding: 0 12px; border: 0; border-radius: 10px; cursor: pointer; white-space: nowrap;
  background: linear-gradient(180deg, #A3F795, #4FC943); color: #0C2A09; font: inherit; font-size: 12px; font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 4px 12px rgba(109, 234, 93, .25);
}
.oc-result__btn[disabled] { opacity: .5; cursor: default; }
.oc-result > .kz-cfi { grid-column: 1 / -1; }
.oc-result__done { font-size: 12px; font-weight: 800; color: var(--money); white-space: nowrap; }

/* горизонтальная карточка бонуса (телефон, планшет) */
.oc-bcard {
  display: none; padding: 12px 14px 14px; border-radius: 16px; border: 1px solid rgba(109, 234, 93, .18);
  background:
    radial-gradient(55% 140% at 0% 50%, rgba(109, 234, 93, .16), transparent 70%),
    linear-gradient(180deg, #2C2452 0%, #241D45 100%);
  box-shadow: 0 10px 24px rgba(8, 4, 24, .35), inset 0 1px 0 rgba(255, 255, 255, .07);
  transition: border-color .3s, box-shadow .3s;
}
.oc-bcard.is-ready { border-color: rgba(109, 234, 93, .45); box-shadow: 0 10px 24px rgba(8, 4, 24, .35), 0 0 22px rgba(109, 234, 93, .18), inset 0 1px 0 rgba(255, 255, 255, .06); }
.oc-bcard__head { display: flex; align-items: center; gap: 10px; }
.oc-bcard__head b { flex: 1; min-width: 0; font-family: var(--f-cond); font-size: 15px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #F2FFEE; }
.oc-bcard__head > span { font-size: 13px; font-weight: 800; color: var(--oc-mute); white-space: nowrap; font-variant-numeric: tabular-nums; }
.oc-bcard__head > span > span { color: var(--text); }
.oc-bcard__head em { font-style: normal; color: var(--money); text-shadow: 0 0 10px rgba(109, 234, 93, .4); }
.oc-bcard__bar {
  position: relative; height: 10px; margin-top: 12px; border-radius: 6px; overflow: hidden;
  background: linear-gradient(180deg, #0F0A22, #1A1338);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), inset 0 2px 4px rgba(0, 0, 0, .6);
}
.oc-bcard__bar::after {        /* деления и стеклянный блик поверх заливки */
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .22) 0, rgba(255, 255, 255, 0) 55%),
    repeating-linear-gradient(90deg, transparent 0 calc(10% - 2px), rgba(20, 14, 42, .8) calc(10% - 2px) 10%);
}
.oc-bcard__bar i {
  position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, #138A3D 0%, #34C24C 50%, var(--money) 82%, #E6FFD8 100%);
  transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}
.oc-bcard__more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.oc-bcard__more > div { min-height: 0; overflow: hidden; }
.oc-bcard.is-ready .oc-bcard__more { grid-template-rows: 1fr; }
.oc-bcard__btn {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 46px; margin-top: 12px; border: 0; border-radius: 12px; cursor: pointer;
  background: linear-gradient(180deg, #A3F795, #3FB935); color: #0C2A09;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 6px 16px rgba(109, 234, 93, .3);
  font: inherit; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.oc-bcard__btn svg { width: 18px; height: 18px; }
.oc-bcard__btn .oc-count { top: 50%; right: 12px; margin-top: -10px; border-color: #3FB935; }
.oc-bcard__btn[disabled] { filter: saturate(.5) brightness(.8); cursor: default; }

/* честная игра */

/* ── одометр: цифра — окно в ленту 0…9 ── */
.oc-odo { display: inline-flex; align-items: center; white-space: nowrap; font-variant-numeric: tabular-nums; }
.oc-odo .kz-cur { margin-right: .22em; }
.oc-odo__n { display: inline-flex; }
.oc-odo__d { display: inline-block; height: 1.1em; line-height: 1.1em; overflow: hidden; }
.oc-odo__s { display: flex; flex-direction: column; transition: transform .9s cubic-bezier(.2, .85, .25, 1); }
.oc-odo__s span { display: block; height: 1.1em; text-align: center; }
.oc-odo__p { display: inline-block; line-height: 1.1em; }

/* ═══════════════ ЛЕНТЫ ═══════════════ */

.oc-lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; width: 100%; max-width: 940px; margin: 12px auto 0; min-width: 0; }
.oc-tabs { display: none; }
.oc-list { min-width: 0; }
.oc-list__title {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center; gap: 10px; height: 46px; margin: 0 0 10px;
  border-radius: 14px; border: 1px solid var(--oc-line);
  background: radial-gradient(50% 120% at 50% 0%, rgba(150, 100, 255, .2), transparent 70%), var(--oc-glass);
  box-shadow: var(--oc-hl), 0 8px 20px rgba(8, 4, 24, .28);
  font-family: var(--f-cond); font-size: 15px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text);
}
.oc-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 8px rgba(215, 255, 0, .7); animation: oc-ping 1.6s ease-out infinite; }
.js-laurel { display: inline-flex; color: #A99CF0; }
.oc-laurel1 { width: 18px; height: 18px; }
.oc-flip { transform: scaleX(-1); }
/* Карточка выигрыша — в духе карточек скинов сайта (drophub.skincard.css):
   ровная поверхность главной, справа под крупным скином мягкая заливка
   цветом редкости и фирменный узор-молнии; слева круглый аватар, над
   суммой — имя игрока мелким приглушённым шрифтом. Сумма — белая, крупная;
   множитель — компактная метка по величине: <×1 серый, ×1–10 лайм,
   ×10+ золото, ×100+ золотая плашка. Без неоновых полос и свечений. */
.oc-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.oc-row {
  position: relative; isolation: isolate; overflow: hidden; min-width: 0;
  display: grid; align-items: center; column-gap: 12px; row-gap: 1px;
  grid-template-columns: 38px minmax(0, 1fr) auto 108px;
  grid-template-areas: "av name x skin" "av val x skin";
  height: 66px; padding-left: 14px; border-radius: 14px;
  background: linear-gradient(90deg, #2A2250 0%, #261F49 60%, color-mix(in srgb, var(--c) 16%, #261F49) 100%);
  box-shadow: inset 0 0 0 1px rgba(167, 139, 250, .13), inset 0 1px 0 rgba(255, 255, 255, .05);
  transition: transform .18s ease, box-shadow .18s ease;
}
/* заливка редкости за скином */
.oc-row::before {
  content: ''; position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; width: 170px; pointer-events: none;
  background:
    radial-gradient(62% 78% at 74% 54%, color-mix(in srgb, var(--c) 52%, transparent), transparent 72%),
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--c) 18%, transparent));
}
/* узор-молнии, как на карточках скинов, тает влево */
.oc-row::after {
  content: ''; position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; width: 150px; pointer-events: none;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--c) 40%, #fff));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='%23000'%3E%3Cpath d='M11.5 2 5 12.2h4.3L7 20l7.2-10.8H9.8z'/%3E%3Cpath d='M31.5 22 25 32.2h4.3L27 40l7.2-10.8h-4.4z'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 34px 34px repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='%23000'%3E%3Cpath d='M11.5 2 5 12.2h4.3L7 20l7.2-10.8H9.8z'/%3E%3Cpath d='M31.5 22 25 32.2h4.3L27 40l7.2-10.8h-4.4z'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 34px 34px repeat;
  opacity: .16;
}
@media (hover: hover) {
  .oc-row:hover {
    transform: translateY(-1px);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, rgba(167, 139, 250, .2)), 0 8px 18px rgba(8, 4, 24, .35);
  }
  .oc-row:hover .oc-row__skin img { transform: scale(1.06); }
}
.oc-row.is-new { animation: oc-in .3s ease-out; }

.oc-row__av {
  grid-area: av; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; overflow: hidden;
  background: linear-gradient(140deg, #4A3E8C 0%, #33296A 100%);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .06);
  font-family: var(--f-cond); font-size: 16px; font-weight: 600; color: #DCD4FF;
}
.oc-row__av img { width: 100%; height: 100%; object-fit: cover; }
/* значок уровня вместо аватара (oneclick.view.js): ячейка — контейнер,
   значок заполняет её квадрат, так что 38/36/32/30 по ширинам экрана
   задают прежние правила ячейки; круг, фон и кольцо бонуса снимает
   is-lvl (drophub.level.js). Без единиц контейнера — умолчание значка. */
.oc-row__av.is-lvl { container-type: size; }
@supports (width: 1cqmin) { .oc-row__av.is-lvl > .kz-lvl { --s: 100cqmin; } }
/* круглое фото с висящим значком (krazeLevel.player): круг во всю ячейку */
@supports (width: 1cqmin) { .oc-row__av.is-lvl > .kz-ava { --a: 100cqmin; } }
.oc-row__name {
  grid-area: name; align-self: end; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 11.5px; font-weight: 600; line-height: 1.25; color: var(--oc-mute);
}
.oc-row__val {
  grid-area: val; align-self: start; justify-self: start; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  font-size: 16.5px; font-weight: 800; line-height: 1.25; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.oc-row__val .kz-cur { margin: 0 .18em 0 .1em; }
.oc-row__x {
  grid-area: x; justify-self: end; display: inline-grid; place-items: center; height: 24px; padding: 0 8px; border-radius: 7px;
  font-style: normal; white-space: nowrap; font-family: var(--f-cond); font-size: 13px; font-weight: 600; letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  color: #B9B2DC; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
}
.oc-row__x--mid { color: var(--lime); background: rgba(215, 255, 0, .09); box-shadow: inset 0 0 0 1px rgba(215, 255, 0, .24); }
.oc-row__x--hi { color: #FFCE4D; background: rgba(255, 201, 60, .12); box-shadow: inset 0 0 0 1px rgba(255, 201, 60, .34); }
.oc-row__x--max {
  color: #2B1B00; background: linear-gradient(135deg, #FFF0B8 0%, #FFD050 45%, #F0A51C 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 2px 10px rgba(255, 190, 50, .3);
}
.oc-row__x--bonus {
  color: #92EFB1; background: rgba(67, 217, 122, .12); box-shadow: inset 0 0 0 1px rgba(67, 217, 122, .3);
  font-family: var(--f-body); font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}
.oc-row__skin { grid-area: skin; display: grid; place-items: center; height: 100%; padding-right: 8px; }
.oc-row__skin img {
  max-width: 100%; max-height: 54px; object-fit: contain;
  filter: drop-shadow(0 4px 6px rgba(10, 4, 30, .5)); transition: transform .2s ease;
}
.oc-row__skin .oc-cell__coin { width: 30px; height: 30px; }
.oc-row__skin .oc-cell__ph { width: 34px; height: 18px; border-radius: 4px; }
/* бонус — спокойный зелёный акцент, а не залитая плашка */
.oc-row.is-bonus { --c: #43D97A; box-shadow: inset 0 0 0 1px rgba(67, 217, 122, .2), inset 3px 0 0 rgba(67, 217, 122, .55); }
.oc-row.is-bonus .oc-row__av { box-shadow: 0 0 0 2px rgba(67, 217, 122, .5); }

/* «Топ»: место — цифра Oswald; 1–3 на металлическом кружке */
.oc-row--top { grid-template-columns: 24px 38px minmax(0, 1fr) auto 108px; grid-template-areas: "rk av name x skin" "rk av val x skin"; padding-left: 12px; }
.oc-rank {
  grid-area: rk; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-style: normal;
}
.oc-rank b { font-family: var(--f-cond); font-size: 15px; font-weight: 600; line-height: 1; color: #7E76AE; font-variant-numeric: tabular-nums; }
.oc-rank--1, .oc-rank--2, .oc-rank--3 { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(0, 0, 0, .18), 0 2px 6px rgba(8, 4, 24, .35); }
.oc-rank--1 { background: linear-gradient(160deg, #FFE9A6 0%, #F6C23E 50%, #C98A12 100%); }
.oc-rank--2 { background: linear-gradient(160deg, #FFFFFF 0%, #D3DAE4 50%, #96A1B2 100%); }
.oc-rank--3 { background: linear-gradient(160deg, #FFD2AE 0%, #E59658 50%, #A65A24 100%); }
.oc-rank--1 b, .oc-rank--2 b, .oc-rank--3 b { font-size: 14px; font-weight: 700; color: #2A1C08; }
.oc-rank--2 b { color: #252B36; }
.oc-empty { margin: 0; padding: 22px 6px; font-size: 13px; text-align: center; color: var(--text-mute); }

/* ═══════════════ ПРАВИЛА ═══════════════ */

.oc-rules {
  width: min(640px, calc(100vw - 32px)); max-height: min(84vh, 780px); padding: 0; margin: auto;
  border: 1px solid var(--oc-line); border-radius: 18px; background: #1E1838; color: var(--text);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .7);
}
.oc-rules::backdrop { background: rgba(10, 6, 24, .76); }
.oc-rules__in { position: relative; max-height: inherit; overflow: auto; padding: 22px 24px 24px; font-size: 14px; line-height: 1.55; color: #D2D7E6; }
.oc-rules h2 { margin: 0 40px 12px 0; font-family: var(--f-cond); font-size: 24px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #fff; }
.oc-rules h3 { margin: 18px 0 6px; font-size: 15px; font-weight: 700; color: #fff; }
.oc-rules p, .oc-rules ul { margin: 0 0 8px; }
.oc-rules ul { padding-left: 20px; }
.oc-rules code { font-size: 12.5px; padding: 1px 5px; border-radius: 5px; background: rgba(255, 255, 255, .07); color: #E8F3B0; word-break: break-word; }
.oc-rules table { width: 100%; border-collapse: collapse; margin: 6px 0 10px; font-size: 13px; font-variant-numeric: tabular-nums; }
.oc-rules th, .oc-rules td { padding: 6px 8px; text-align: left; border-bottom: 1px solid rgba(180, 160, 255, .16); }
.oc-rules th { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-mute); }
.oc-rules__x {
  position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 9px; cursor: pointer;
  display: grid; place-items: center; border: 1px solid var(--oc-line); background: #2C2452; color: var(--text-dim);
}
.oc-rules__x:hover { color: var(--text); }
.oc-rules__x svg { width: 16px; height: 16px; }

/* ═══════════════ ОКНО АВТОИГРЫ ═══════════════
   Та же коробка, что у правил (.oc-rules), уже: число спинов плитками,
   три суммы остановки, итог «N спинов · ставка», кнопка «Запустить». */
.oc-autodlg { width: min(440px, calc(100vw - 32px)); }
.oc-autodlg .oc-autodlg__lab { margin: 16px 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--oc-mute); }
.oc-autodlg__counts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.oc-autodlg__n {
  height: 46px; border-radius: 12px; cursor: pointer; border: 1px solid var(--oc-line);
  background: linear-gradient(180deg, #3A3070 0%, #2C2452 100%); color: #CFC8F0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 2px 6px rgba(0, 0, 0, .3);
  font: inherit; font-family: var(--f-cond); font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums;
  transition: color .14s, border-color .14s, background-color .14s;
}
.oc-autodlg__n[aria-checked="true"] {
  color: var(--lime); border-color: rgba(215, 255, 0, .5);
  background: linear-gradient(180deg, rgba(215, 255, 0, .16), rgba(215, 255, 0, .05));
}
.oc-autodlg__n:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.oc-autodlg__row { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; font-size: 14px; line-height: 1.3; color: #D2D7E6; }
.oc-autodlg__row > span:first-child { flex: 1; min-width: 0; }
.oc-autodlg__in {
  flex: none; display: flex; align-items: center; gap: 6px; width: 150px; height: 44px; padding: 0 12px; border-radius: 12px;
  border: 1px solid var(--oc-line); background: linear-gradient(180deg, var(--oc-deep) 0%, #1B1436 100%);
  box-shadow: inset 0 2px 6px rgba(6, 2, 20, .45);
}
.oc-autodlg__in:focus-within { border-color: rgba(215, 255, 0, .5); }
.oc-autodlg__in .oc-bet__cur.kz-cur { width: 18px; height: 18px; }
.oc-autodlg__in input {
  flex: 1; width: 100%; min-width: 0; border: 0; background: none; outline: none;
  font: inherit; font-size: 15px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums;
}
.oc-autodlg__in input::placeholder { color: var(--text-mute); font-weight: 600; }
.oc-autodlg .oc-autodlg__sum { margin: 16px 0 12px; text-align: center; font-size: 13.5px; color: var(--text-dim); }
.oc-autodlg__sum b { color: var(--text); }
@media (hover: hover) {
  .oc-autodlg__n:hover:not([aria-checked="true"]) { color: var(--text); border-color: var(--oc-line2); }
}
@media (max-width: 420px) {
  .oc-autodlg__in { width: 124px; }
  .oc-autodlg__row { font-size: 13px; }
}

/* ═══════════════ АНИМАЦИИ ═══════════════ */

@keyframes oc-win { 0% { transform: scale(1); } 45% { transform: scale(1.07); } 100% { transform: scale(1.03); } }
@keyframes oc-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes oc-twinkle { from { opacity: .45; } to { opacity: 1; } }
@keyframes oc-turn { to { transform: rotate(360deg); } }
@keyframes oc-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes oc-nod { 30% { transform: translateY(18%); } }
@keyframes oc-mk-ping { 0% { opacity: .8; transform: scale(.82); } 70%, 100% { opacity: 0; transform: scale(1.1); } }
@keyframes oc-ping { 0% { box-shadow: 0 0 0 0 rgba(215, 255, 0, .55); } 100% { box-shadow: 0 0 0 8px rgba(215, 255, 0, 0); } }

/* ═══════════════ АДАПТИВ ═══════════════ */

/* 1024–1279: колесо уже, чтобы ряд «Правила» + тумблеры не заезжал на дугу */
@media (min-width: 1024px) and (max-width: 1279px) {
  .oc-wheel { width: min(100% - 400px, 960px); }
}
@media (min-width: 1700px) {
  .oc-wheel { width: min(100% - 260px, 1080px, (100vh - 290px) * 2.2); }
  .oc-lists { max-width: 1000px; }
}

/* планшет и телефон: без левой колонки — тумблеры в строке подписи,
   «Правила» над куполом, бонус — горизонтальной карточкой */
@media (max-width: 1023px) {
  .oc-game { padding: 14px 14px 20px; border-radius: 24px; }
  .oc-side { display: none; }
  .oc-wheel { width: min(100%, 820px); min-width: 0; }
  .oc-wrules { display: grid; }
  .oc-bcard { display: block; }
  .oc-row { column-gap: 10px; grid-template-columns: 36px minmax(0, 1fr) auto 92px; }
  .oc-row--top { grid-template-columns: 22px 36px minmax(0, 1fr) auto 92px; }
  .oc-row__av { width: 36px; height: 36px; }
  .oc-row::before { width: 140px; }
}

@media (max-width: 760px) {
  .oc-page { padding: 4px 12px 20px; gap: 10px; }
  .oc-title { font-size: 24px; gap: 12px; }
  .oc-lists { display: block; margin-top: 4px; }
  .oc-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 10px; padding: 4px; border-radius: 14px; border: 1px solid var(--oc-line); background: #1B1536; }
  .oc-tab {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 42px; border-radius: 10px; cursor: pointer; border: 1px solid transparent; background: transparent;
    color: var(--text-dim); font: inherit; font-family: var(--f-cond); font-size: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
    transition: color .14s, background-color .14s;
  }
  .oc-tab.is-on { color: var(--text); border-color: var(--oc-line2); background: var(--oc-glass); box-shadow: var(--oc-hl), 0 4px 12px rgba(8, 4, 24, .35); }
  .oc-tab .oc-laurel1 { width: 16px; height: 16px; }
  .oc-lists[data-tab="recent"] .oc-list--top,
  .oc-lists[data-tab="top"] .oc-list--recent { display: none; }
  .oc-list__title { display: none; }
}

/* телефон: коробка 1.27:1, кольцо 174% ширины — видно 3 клетки */
@media (max-width: 639px) {
  .oc-game { padding: 0 12px 14px; border-radius: 22px; }
  .oc-game::before { background-size: 34px 34px; }
  .oc-wheel { width: calc(100% + 24px); margin: 0 -12px; aspect-ratio: 1.27; }
  .oc-clip {
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 13%);
            mask-image: linear-gradient(180deg, transparent 0, #000 13%);
  }
  .oc-disc { left: -37cqw; top: -96cqw; width: 174cqw; }
  .oc-controls { margin-top: 2px; }
  /* у нижнего края купола хорда короче — подпись без боковых линий */
  .oc-hub__sub::before, .oc-hub__sub::after { display: none; }
  .oc-hub__face { bottom: 9%; }
  .oc-hub__sub { font-size: 9.5px; letter-spacing: .03em; }
  .oc-hub__name { max-width: 31cqw; }
  .oc-bcard__head b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* в ряду ставки ещё два квадрата — поле суммы держим не уже «10000» */
  .oc-inrow { gap: 6px; }
  .oc-tool--row { width: 44px; }
  .oc-bet { padding-left: 10px; gap: 6px; }
  .oc-bet__cur.kz-cur { width: 20px; height: 20px; }
  .oc-chips button { min-width: 32px; padding: 0 6px; }
  .oc-row { grid-template-columns: 36px minmax(0, 1fr) auto 100px; }
  .oc-row--top { grid-template-columns: 22px 36px minmax(0, 1fr) auto 100px; }
}
/* узкие телефоны: имя остаётся над суммой, ужимаются скин и аватар */
@media (max-width: 420px) {
  .oc-row { height: 62px; column-gap: 8px; padding-left: 10px; grid-template-columns: 32px minmax(0, 1fr) auto 80px; }
  .oc-row--top { grid-template-columns: 20px 32px minmax(0, 1fr) auto 80px; }
  .oc-row__av { width: 32px; height: 32px; font-size: 14px; }
  .oc-row__val { font-size: 15px; }
  .oc-row__x { height: 22px; padding: 0 6px; font-size: 12px; }
  .oc-row__skin { padding-right: 6px; }
  .oc-row__skin img { max-height: 46px; }
  .oc-row::before { width: 120px; }
  .oc-rank { width: 20px; height: 20px; }
  .oc-rank b { font-size: 13px; }
  .oc-rank--1 b, .oc-rank--2 b, .oc-rank--3 b { font-size: 12px; }
}
@media (max-width: 380px) {
  .oc-chips button { min-width: 30px; padding: 0 5px; }
  .oc-bet { padding-left: 10px; gap: 6px; }
  .oc-bet__cur.kz-cur { width: 20px; height: 20px; }
  .oc-bcard__head { gap: 8px; }
  .oc-bcard__head b { font-size: 13px; letter-spacing: .04em; }
  .oc-bcard__head > span { font-size: 12px; }
  .oc-bcard__ico { display: none; }
  .oc-row { grid-template-columns: 30px minmax(0, 1fr) auto 72px; }
  .oc-row--top { grid-template-columns: 20px 30px minmax(0, 1fr) auto 72px; }
  .oc-row__av { width: 30px; height: 30px; }
  .oc-row__val { font-size: 14px; }
}

/* меньше движения: без пульса, искр и переездов; колесо встаёт на место
   сразу и в покое не плывёт (oneclick.main.js), одометр — сразу итог */
@media (prefers-reduced-motion: reduce) {
  .oc-wheel.is-done .oc-cell.is-win .oc-cell__body, .oc-wheel.is-done .oc-cell.is-win .oc-cell__hl, .oc-dot, .oc-game::after,
  .oc-cta.is-bonus .oc-cta__spin, [data-state="done"] .oc-pointer i, .oc-mk__ping,
  .oc-cta.is-auto .oc-cta__spin, .oc-auto[aria-pressed="true"] svg { animation: none; }
  .oc-row.is-new, .oc-result { animation: none; }
  .oc-cell, .oc-hub__face, .oc-meter__fill, .oc-bcard__bar i, .oc-hub, .oc-odo__s, .oc-bcard__more,
  .oc-cta, .oc-cta::after, .oc-row, .oc-row__skin img { transition: none; }
  .oc-row:hover, .oc-row:hover .oc-row__skin img { transform: none; }
}