/* Frozen overlay renderer: straimer-roulette-widget 0.2.0, 2026-10-16. */
    /* ---------- Колесо ---------- */
    :root, .stage { --wheel-scale: var(--w-wheel-size, 100); }
    .stage {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: calc(var(--wheel) * 0.04);
    }
    body.overlay-mode .stage {
      width: 100vw;
      height: 100vh;
      padding: var(--w-inset-y, 0px) var(--w-inset-x, 0px);
      box-sizing: border-box;
    }
    /* flex-shrink: 0 — сжиматься должна плашка, а не круг: иначе длинное имя
       лота превращает колесо в овал. */
    /* Радиус в пикселях, а не 50%: по нему эффект по контуру обводит колесо
       кругом. Движок читает `borderTopLeftRadius` числом, и «50%» он принял бы
       за 50 px. Коробка не вращается (крутится `.wheel` внутри), поэтому контур
       эффекта стоит на месте.
       Запас сверху под стрелку (выступает над кругом на 1,5% диаметра) и свечение
       эффекта: при нулевых отступах колесо вставало вплотную к верху источника,
       и стрелка срезалась на 12 px из 77 (замер 15.10.2026 на 1920 × 1080, решение
       разработчика того же дня). Место берётся у плашки (`reserveResultHeight`). */
    .wheel-box { position: relative; width: var(--wheel); height: var(--wheel); flex-shrink: 0; border-radius: calc(var(--wheel) / 2); margin-top: calc(var(--wheel) * 0.03); }
    .wheel-box::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background: var(--w-ring-bg, conic-gradient(from 210deg, hsl(258, 45%, 28%), hsl(258, 70%, 62%) 12%, hsl(255, 25%, 88%) 22%, hsl(258, 60%, 45%) 34%, hsl(255, 30%, 14%) 50%, hsl(258, 55%, 40%) 66%, hsl(255, 22%, 80%) 76%, hsl(258, 65%, 55%) 86%, hsl(258, 45%, 28%)));
      box-shadow: var(--w-ring-glow, 0 10px 35px rgba(0, 0, 0, 0.8), 0 0 44px rgba(139, 92, 246, 0.35));
    }
    .wheel {
      position: absolute;
      inset: calc(var(--wheel) * var(--w-ring-width, 2.7) / 100);
      border-radius: 50%;
      overflow: hidden;
      box-shadow: 0 0 0 3px hsl(255, 30%, 8%);
      /* Кривая замедления та же, что `SPIN_EASE` в roulette-logic.js: по ней
         считаются моменты тиканья. Длительность ставит код на каждый прокрут. */
      transition: transform 6s cubic-bezier(0.08, 0.72, 0.06, 1);
      -webkit-mask-image: radial-gradient(circle closest-side at 50% 50%, #000 calc(100% - 1px), transparent 100%);
      mask-image: radial-gradient(circle closest-side at 50% 50%, #000 calc(100% - 1px), transparent 100%);
      will-change: transform;
    }
    .wheel::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background:
        radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.08) 26%, transparent 52%),
        radial-gradient(circle at 50% 50%, transparent 46%, rgba(0, 0, 0, 0.18) 78%, rgba(0, 0, 0, 0.55) 100%);
    }
    .wheel::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 50%;
      box-shadow: inset 0 0 26px rgba(0, 0, 0, 0.55), inset 0 3px 10px rgba(255, 255, 255, 0.14);
    }
    .labels { position: absolute; inset: 0; z-index: 3; }
    /* Подпись лежит по радиусу и читается от обода к центру, как у аукциона. */
    .label {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 47%;
      height: calc(var(--wheel) * var(--w-label-size, 2.9) / 100 * 1.45);
      margin-top: calc(var(--wheel) * var(--w-label-size, 2.9) / 100 * 1.45 / -2);
      transform-origin: 0 50%;
      transform: rotate(calc(var(--angle) + 90deg)) translateX(-100%);
      display: flex;
      align-items: center;
      justify-content: flex-start;
      padding-left: calc(var(--wheel) * 0.019);
      font-family: var(--w-label-font, inherit);
      font-size: calc(var(--wheel) * var(--w-label-size, 2.9) / 100);
      font-weight: var(--w-label-weight, 800);
      letter-spacing: 0.02em;
      color: var(--w-label-color, #ffffff);
      text-shadow: var(--w-label-shadow, 0 1px 2px rgba(0, 0, 0, 0.95), 0 0 6px rgba(0, 0, 0, 0.7));
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .pointer {
      position: absolute;
      z-index: 5;
      left: 50%;
      top: calc(var(--wheel) * -0.015);
      transform: translateX(-50%);
      width: calc(var(--wheel) * var(--w-pointer-size, 7.7) / 100);
      height: calc(var(--wheel) * var(--w-pointer-size, 7.7) / 100 * 1.25);
      clip-path: polygon(50% 100%, 0 0, 100% 0);
      background: var(--w-pointer-bg, linear-gradient(175deg, hsl(45, 100%, 78%), hsl(38, 95%, 50%) 45%, hsl(28, 90%, 42%)));
      filter: drop-shadow(0 4px 7px rgba(0, 0, 0, 0.85));
    }
    .hub {
      position: absolute;
      z-index: 4;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: calc(var(--wheel) * var(--w-hub-size, 17.7) / 100);
      height: calc(var(--wheel) * var(--w-hub-size, 17.7) / 100);
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: var(--w-hub-bg, radial-gradient(circle at 34% 28%, hsl(258, 40%, 26%), hsl(255, 30%, 6%) 68%));
      /* Толщина и цвет границы это два поля, а не одна строка CSS: толщина считается
         от диаметра, и такую строку редактор показывал стримеру сырым кодом
         (замечание разработчика 15.10.2026). */
      border: calc(var(--wheel) * var(--w-hub-border-width, 1.15) / 100) solid var(--w-hub-border-color, rgba(139, 92, 246, 0.45));
      color: var(--w-hub-color, #cfc8dd);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), inset 0 2px 8px rgba(255, 255, 255, 0.16);
    }
    /* Знак в центре — доля ступицы, а не пиксели: ступица настраивается. */
    .hub-mark {
      width: 42%;
      height: 42%;
      fill: currentColor;
      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
    }
    /* ---------- Лента ---------- */
    /* Вид выбирается у экземпляра (`format`): фигура другого вида спрятана атрибутом. */
    .wheel-box[hidden], .ribbon-box[hidden] { display: none; }
    /* Числа ленты читает скрипт (`ribbonLayout`): переменные с запасным значением
       здесь, чтобы умолчание жило в одном месте со схемой, как `--wheel-scale`. */
    :root, .stage {
      --ribbon-visible: var(--w-ribbon-visible, 5);
      --ribbon-ratio: var(--w-ribbon-ratio, 75);
      --ribbon-gap: var(--w-ribbon-gap, 6);
    }
    /* Размер карточки (`--card-w`, `--card-h`, `--card-gap`) ставит скрипт по месту.
       Указатели сверху и снизу стоят в полях коробки и заходят на подложку
       половиной роста. */
    .ribbon-box {
      --marker-w: calc(var(--card-h, 200px) * var(--w-marker-size, 18) / 100);
      --marker-h: calc(var(--marker-w) * 1.1);
      position: relative;
      width: 100%;
      flex-shrink: 0;
      padding: calc(var(--marker-h) * 0.5) 0;
      box-sizing: border-box;
    }
    .ribbon-rail {
      position: relative;
      background: var(--w-ribbon-bg, rgba(10, 8, 20, 0.55));
      border-radius: calc(var(--card-h, 200px) * var(--w-ribbon-radius, 14) / 100);
    }
    /* Затухание к краям рисует маска на окне ленты, а не на подложке: подложка
       остаётся целой, и эффект по контуру обводит её ровно. Окно режет всё за
       своими краями (и маска тоже), поэтому поле сверху и снизу внутри него: в
       14% высоты карточки помещаются увеличение выпавшей и её свечение по
       умолчанию (6% и 12%). */
    .ribbon-window {
      padding: calc(var(--card-h, 200px) * 0.14) 0;
      overflow: hidden;
      -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 calc(var(--w-ribbon-fade, 12) * 1%), #000 calc(100% - var(--w-ribbon-fade, 12) * 1%), transparent 100%);
      mask-image: linear-gradient(90deg, transparent 0, #000 calc(var(--w-ribbon-fade, 12) * 1%), #000 calc(100% - var(--w-ribbon-fade, 12) * 1%), transparent 100%);
    }
    /* Кривая та же, что у колеса (`SPIN_EASE`): по ней считаются щелчки на стыках карточек. */
    .ribbon-track {
      position: relative;
      display: flex;
      gap: var(--card-gap, 12px);
      transition: transform 6s cubic-bezier(0.08, 0.72, 0.06, 1);
      will-change: transform;
    }
    .r-card {
      flex: 0 0 var(--card-w, 160px);
      height: var(--card-h, 200px);
      box-sizing: border-box;
      display: grid;
      place-items: center;
      padding: 0 6%;
      overflow: hidden;
      border-radius: calc(var(--card-h, 200px) * var(--w-card-radius, 10) / 100);
      border: var(--w-card-border, 2px solid rgba(255, 255, 255, 0.18));
      background: linear-gradient(160deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, 0.28)), var(--card-color, #8b5cf6);
      box-shadow: var(--w-card-shadow, 0 6px 18px rgba(0, 0, 0, 0.45));
      transition: filter 400ms ease, transform 400ms ease, box-shadow 400ms ease;
    }
    .r-card span {
      font-family: var(--w-card-font, inherit);
      font-size: calc(var(--card-h, 200px) * var(--w-card-text-size, 16) / 100);
      font-weight: var(--w-card-weight, 800);
      color: var(--w-card-color, #ffffff);
      text-shadow: var(--w-card-text-shadow, 0 2px 6px rgba(0, 0, 0, 0.75));
      text-align: center;
      line-height: 1.1;
      overflow-wrap: anywhere;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    /* Карточка с картинкой: картинка во всю карточку («поверх», «без подписи») или над
       полосой с названием («под»). Как картинка ложится, решает «Картинка» в оформлении
       карточек: заполнить с обрезкой или вписать целиком на цвете лота. */
    .r-card.has-image { position: relative; padding: 0; display: flex; flex-direction: column; place-items: stretch; }
    .r-card-img { display: block; width: 100%; min-height: 0; flex: 1 1 auto; object-fit: var(--w-card-fit, cover); }
    .r-card.label-over .r-card-img, .r-card.label-none .r-card-img { position: absolute; inset: 0; height: 100%; }
    .r-card.label-over span {
      position: absolute; left: 0; right: 0; bottom: 0;
      padding: 14% 6% 6%;
      background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.7));
      -webkit-line-clamp: 2;
    }
    .r-card.label-under span { flex: 0 0 auto; padding: 4% 6%; -webkit-line-clamp: 2; }
    .ribbon-track.is-settled .r-card:not(.is-winner),
    .reel-track.is-settled .r-card:not(.is-winner) { filter: brightness(calc(var(--w-winner-dim, 55) * 1%)); }
    .r-card.is-winner {
      position: relative;
      z-index: 1;
      transform: scale(calc(1 + var(--w-winner-grow, 6) / 100));
      box-shadow: 0 0 calc(var(--card-h, 200px) * var(--w-winner-glow, 12) / 100) var(--card-color, #8b5cf6), var(--w-card-shadow, 0 6px 18px rgba(0, 0, 0, 0.45));
    }
    .ribbon-marker {
      position: absolute;
      z-index: 3;
      left: 50%;
      width: var(--marker-w);
      height: var(--marker-h);
      transform: translateX(-50%);
      background: var(--w-marker-bg, linear-gradient(175deg, hsl(45, 100%, 78%), hsl(38, 95%, 50%) 45%, hsl(28, 90%, 42%)));
      filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.8));
    }
    .ribbon-marker.top { top: 0; clip-path: polygon(50% 100%, 0 0, 100% 0); }
    .ribbon-marker.bottom { bottom: 0; clip-path: polygon(50% 0, 0 100%, 100% 100%); }

    /* ---------- Слоты ---------- */
    .slots-box[hidden] { display: none; }
    /* Числа машины читает скрипт (`slotsLayout`), как числа ленты. */
    :root, .stage {
      --slots-size: var(--w-slots-size, 80);
      --slots-ratio: var(--w-slots-ratio, 80);
      --slots-gap: var(--w-slots-gap, 8);
    }
    /* Карточки барабанов те же `.r-card`, что у ленты: размер `--card-w`,
       `--card-h`, `--card-gap` ставит скрипт. Поля барабана 10% и корпуса 8%
       ширины карточки совпадают с `SLOTS_REEL_PAD` и `SLOTS_MACHINE_PAD`. */
    .slots-box {
      --marker-w: calc(var(--card-h, 160px) * var(--w-marker-size, 18) / 100);
      --marker-h: calc(var(--marker-w) * 1.1);
      position: relative;
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    /* Названия над барабанами (свои лоты у каждого барабана). Строка вне корпуса:
       указатели ряда выигрыша меряются от корпуса и не съезжают. Высота строки 1.2
       и отступ 0.4 кегля совпадают с `REEL_HEAD_LINES` раскладки; ширина названия
       это ширина окна барабана, поля и зазоры те же, что у корпуса. */
    :root, .stage { --reelhead-size: var(--w-reelhead-size, 22); }
    .reel-heads {
      display: flex;
      gap: var(--card-gap, 12px);
      padding: 0 calc(var(--card-w, 160px) * 0.08);
      margin-bottom: 0.4em;
      font-family: var(--w-reelhead-font, inherit);
      font-size: calc(var(--card-h, 160px) * var(--reelhead-size) / 100);
      font-weight: var(--w-reelhead-weight, 800);
      line-height: 1.2;
      color: var(--w-reelhead-color, #ffffff);
      text-shadow: var(--w-reelhead-text-shadow, 0 2px 6px rgba(0, 0, 0, 0.75));
    }
    .reel-heads[hidden] { display: none; }
    .reel-head {
      width: calc(var(--card-w, 160px) * 1.2);
      height: 1.2em;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .slots-machine {
      position: relative;
      display: flex;
      gap: var(--card-gap, 12px);
      padding: calc(var(--card-w, 160px) * 0.08);
      background: var(--w-slots-bg, rgba(10, 8, 20, 0.7));
      border-radius: calc(var(--card-h, 160px) * var(--w-slots-radius, 12) / 100);
    }
    /* Все барабаны совпали: корпус пульсирует цветом лота. */
    .slots-machine.is-jackpot { animation: slots-jackpot 0.9s ease-in-out infinite alternate; }
    @keyframes slots-jackpot {
      from { box-shadow: 0 0 calc(var(--card-h, 160px) * 0.08) var(--jackpot-color, #a855f7); }
      to { box-shadow: 0 0 calc(var(--card-h, 160px) * 0.35) var(--jackpot-color, #a855f7); }
    }
    .reel-window {
      padding: 0 calc(var(--card-w, 160px) * 0.1);
      height: calc(var(--card-h, 160px) * 3 + var(--card-gap, 12px) * 2);
      overflow: hidden;
      background: var(--w-slots-reel-bg, rgba(0, 0, 0, 0.35));
      border-radius: calc(var(--card-h, 160px) * var(--w-slots-radius, 12) / 200);
      -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 82%, transparent 100%);
      mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 82%, transparent 100%);
    }
    /* Сдвиг барабана ставит скрипт каждый кадр (`renderReel`): перехода у него нет. */
    .reel-track {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: var(--card-gap, 12px);
      will-change: transform;
    }
    .reel-track .r-card.is-blank { visibility: hidden; }
    .reel-track .r-card { flex: 0 0 var(--card-h, 160px); width: var(--card-w, 160px); }
    /* Указатели ряда выигрыша слева и справа, половиной за краем корпуса. */
    .slots-marker {
      position: absolute;
      z-index: 3;
      top: 50%;
      width: var(--marker-h);
      height: var(--marker-w);
      transform: translateY(-50%);
      background: var(--w-marker-bg, linear-gradient(175deg, hsl(45, 100%, 78%), hsl(38, 95%, 50%) 45%, hsl(28, 90%, 42%)));
      filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.8));
    }
    .slots-marker.left { left: calc(var(--marker-h) * -0.5); clip-path: polygon(100% 50%, 0 0, 0 100%); }
    .slots-marker.right { right: calc(var(--marker-h) * -0.5); clip-path: polygon(0 50%, 100% 0, 100% 100%); }

    /* Плашка уступает место при нехватке высоты: колесо круглое всегда. */
    .result { min-height: calc(var(--wheel) * 0.18); text-align: center; padding: calc(var(--wheel) * 0.035) 3%; flex-shrink: 1; max-width: 100%; }
    .result .plaque {
      display: inline-block;
      max-width: 100%;
      padding: calc(var(--wheel) * var(--w-plaque-padding, 2) / 100) calc(var(--wheel) * var(--w-plaque-padding, 2) / 100 * 1.8);
      border-radius: calc(var(--wheel) * var(--w-plaque-radius, 2.4) / 100);
      border: var(--w-plaque-border, 2px solid var(--lot-color, #a855f7));
      background: var(--w-plaque-bg, linear-gradient(160deg, rgba(18,14,38,0.92), rgba(10,8,20,0.88)));
      box-shadow: var(--w-plaque-glow, 0 0 34px color-mix(in srgb, var(--lot-color, #a855f7) 45%, transparent));
      animation: plaque-pop 420ms cubic-bezier(0.175, 0.885, 0.32, 1.275), plaque-glow 1.5s ease-in-out 420ms infinite alternate;
    }
    @keyframes plaque-pop { from { transform: scale(0.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }
    @keyframes plaque-glow {
      from { box-shadow: var(--w-plaque-glow, 0 0 34px color-mix(in srgb, var(--lot-color, #a855f7) 45%, transparent)); }
      to { box-shadow: var(--w-plaque-pulse, 0 0 calc(var(--wheel) * 0.09) color-mix(in srgb, var(--lot-color, #a855f7) 80%, transparent)); }
    }
    /* «Меньше движения» про экран стримера; зрители его не выбирали. */
    @media (prefers-reduced-motion: reduce) {
      body:not(.overlay-mode) .result .plaque { animation: none; }
    }
    .result .label-line { font-family: var(--w-caption-font, inherit); font-size: calc(var(--wheel) * var(--w-caption-size, 2.5) / 100); letter-spacing: 0.08em; text-transform: uppercase; color: var(--w-caption-color, var(--lot-color, #a855f7)); font-weight: var(--w-caption-weight, 800); text-shadow: var(--w-caption-shadow, none); }
    /* Имя лота — максимум две строки, длинное обрезается многоточием. */
    .result .name { font-family: var(--w-result-font, inherit); font-size: calc(var(--wheel) * var(--w-result-size, 8.1) / 100); font-weight: var(--w-result-weight, 900); line-height: 1.1; margin-top: 2px; color: var(--w-result-color, #ffffff); text-shadow: var(--w-result-shadow, 0 2px 12px rgba(0, 0, 0, 0.9)); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .ae-stage-inner.se-source-frame { padding: var(--w-inset-y, 0px) var(--w-inset-x, 0px); box-sizing: border-box; }