/* ==========================================================================
   DropHub «Апгрейд-батл» — лобби (поверх bt-* из battles.css) и страница
   батла (ub-*). battles.css не трогаем: лобби — те же строки, фильтры и
   окно, что у кейс-баттлов; здесь только своё, с префиксом ub-.

   Цвета сторон: создатель — лайм сайта, соперник — фиолетовый сайта
   (--lime, --violet из home.css). Шрифты — Oswald в заголовках и суммах.
   ========================================================================== */

.ub-body { --ub-a: #D7FF00; --ub-b: #A62CFF; }
/* Кнопки, чипы и окно (bt-*) берут цвета из переменных страницы батлов
   (battles.css задаёт их на .bt-page). Окно выбора скинов вставляется в
   body — вне .bt-page, и без этих переменных глянцевые «Создать за …» и
   выбранный чип сортировки становились прозрачными. Значения — те же. */
.ub-body {
  --cs-panel: rgba(34, 27, 62, .92); --cs-btn: #2C2452; --cs-btn-dim: #221B3E; --cs-btn-hi: #372E62;
  --cs-text-dim: var(--btx-mute, #A69FCF); --cs-green: #2E9E3F; --lime-tile: #D7FF00;
  --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%);
}

/* ═══════════════ ЛОББИ ═══════════════ */

.ub-how { margin: -4px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-dim); }
.ub-how b { color: var(--text); }

.ub-cases { align-items: center; }
.ub-tile {
  --r: #4b69ff;
  overflow: hidden; align-content: center; gap: 2px;
  background:
    radial-gradient(90% 70% at 50% 0%, color-mix(in srgb, var(--r) 45%, transparent), transparent 72%),
    linear-gradient(180deg, #2A2250 0%, #1F1840 100%);
  box-shadow: inset 0 -2px 0 var(--r), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.ub-tile img { width: 76px; height: 57px; mix-blend-mode: normal; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .45)); }
.ub-tile em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.ub-tile--1 { border-color: color-mix(in srgb, var(--ub-b) 35%, transparent); }
.ub-tilevs {
  flex: none; display: grid; place-items: center; width: 34px; height: 90px;
  font-family: var(--f-cond); font-weight: 700; font-size: 15px; letter-spacing: .04em;
  background: linear-gradient(90deg, var(--ub-a) 0%, var(--ub-a) 47%, #B65CFF 53%, #B65CFF 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ub-stat--range b { color: var(--accent); }
.ub-row .bt-row__unboxed .ba-nm { color: var(--text); font-weight: 700; }
.ub-row .bt-row__unboxed.ub-done { color: var(--text-dim); }
/* места в строке — цветами сторон, как в комнате */
.ub-sa--0 { --c: var(--ub-a); }
.ub-sa--1 { --c: #B65CFF; }
.ub-row .bt-ava.ub-sa {
  font-family: var(--f-cond); font-weight: 700; color: var(--c);
  background: radial-gradient(70% 70% at 50% 28%, color-mix(in srgb, var(--c) 30%, #221B3E) 0%, #150F2B 100%);
  box-shadow: 0 0 0 2px #1B1436, 0 0 0 3px color-mix(in srgb, var(--c) 40%, transparent);
}
.ub-row .bt-ava--empty { border-color: color-mix(in srgb, var(--c, #fff) 35%, transparent); background: rgba(21, 15, 43, .6); }
.ub-row .bt-ava.ub-ava-win { box-shadow: 0 0 0 2px #1B1436, 0 0 0 4px var(--c), 0 0 14px color-mix(in srgb, var(--c) 55%, transparent); }
.bt-ava.ub-ava-lose { opacity: .45; filter: grayscale(.6); }
/* значок уровня вместо аватара (.bt-ava.is-lvl, battles.view.js): круг и
   кольцо стороны снимает is-lvl — победитель светится цветом своей
   стороны по форме шестиугольника, проигравший гаснет (правило выше) */
.ub-row .bt-ava.is-lvl.ub-ava-win { filter: drop-shadow(0 0 5px color-mix(in srgb, var(--c) 75%, transparent)); }
.bt-empty a { color: var(--lime); }

.ub-rulesbox { gap: 10px; }
.ub-rules__list { margin: 0; padding: 0 0 0 16px; display: flex; flex-direction: column; gap: 7px; font-size: 12px; line-height: 1.45; color: var(--text-dim); }
.ub-rules__list b { color: var(--text); }

/* ═══════════════ ОКНО ВЫБОРА СКИНОВ ═══════════════ */

/* окно выше нижней полосы вкладок телефона (mobile.css, z-index 120): иначе
   она закрывала кнопку «Создать за …» */
.bt-modal.ub-modal { z-index: 130; }
.ub-sheet { width: min(880px, 100%); max-height: calc(100dvh - 48px); }
.ub-hint.is-err { color: #FF7A7A; }
.ub-rules { display: flex; flex-wrap: wrap; gap: 6px; }
.ub-rules span {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 8px;
  background: #2C2452; box-shadow: inset 0 0 0 1px #3A3166; font-size: 12px; font-weight: 600; color: var(--text);
}
.ub-rules span b { font-weight: 600; color: var(--text-mute); margin-right: 2px; }
.ub-rules .kz-coin-img { width: 12px; height: 12px; }
.ub-pick { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
.ub-pick__msg { grid-column: 1 / -1; padding: 30px 0; }
.ub-pk {
  position: relative; display: block; padding: 0; border: 1px solid transparent; border-radius: 12px;
  background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
  transition: border-color .14s, transform .12s;
}
.ub-pk:hover { border-color: #5A4C96; }
.ub-pk.is-on { border-color: var(--lime); box-shadow: 0 0 0 1px var(--lime), 0 8px 22px -12px var(--lime); }
.ub-pk .ub-it { width: 100%; }
.ub-pk__mark {
  position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; display: grid; place-items: center;
  border-radius: 50%; background: var(--lime); color: #0E1102; opacity: 0; transform: scale(.7); transition: opacity .14s, transform .14s;
}
.ub-pk__mark svg { width: 14px; height: 14px; }
.ub-pk.is-on .ub-pk__mark { opacity: 1; transform: none; }

/* гость: вход через Steam вместо сетки (в духе окна пополнения) */
.ub-sheet.is-guest .ub-sort, .ub-sheet.is-guest .bt-sheet__foot, .ub-sheet.is-guest .bt-lbl { display: none; }
.ub-guest {
  grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 26px 16px 22px; text-align: center;
  border-radius: 14px; background: radial-gradient(60% 90% at 50% 0%, rgba(166, 44, 255, .16), transparent 70%), rgba(255, 255, 255, .025);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
}
.ub-guest__ico {
  width: 72px; height: 72px; display: grid; place-items: center; margin-bottom: 4px; border-radius: 50%; color: var(--lime);
  background: radial-gradient(circle at 50% 40%, rgba(166, 44, 255, .5), rgba(138, 61, 255, .12) 62%, transparent 72%);
  box-shadow: inset 0 0 0 1px rgba(166, 44, 255, .45);
}
.ub-guest__ico svg { width: 38px; height: 38px; filter: drop-shadow(0 0 12px rgba(215, 255, 0, .45)); }
.ub-guest b { font-family: var(--f-cond); font-size: 20px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #fff; }
.ub-guest p { max-width: 420px; margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-dim); }
.ub-guest__go {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 50px; margin-top: 6px; padding: 0 26px; border-radius: 13px;
  background: var(--lime); color: #0A0C0E; font-family: var(--f-cond); font-size: 16px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  box-shadow: 0 16px 34px -16px rgba(215, 255, 0, .75), inset 0 1px 0 rgba(255, 255, 255, .5);
}
.ub-guest__go:hover { background: var(--lime); color: #0A0C0E; filter: brightness(1.06); }
.ub-guest__go svg { width: 20px; height: 20px; }

/* ─── вход: вкладки «Авто-подбор» / «Мои скины» ─── */
.ub-sheet [hidden] { display: none !important; }
.ub-sheet.is-guest .ub-tabs { display: none; }
.ub-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ub-tab {
  display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px 14px; border: 0; border-radius: 12px; cursor: pointer; text-align: left;
  background: linear-gradient(180deg, #2C2452 0%, #241D45 100%); box-shadow: inset 0 0 0 1px #3A3166, inset 0 1px 0 rgba(255, 255, 255, .07);
  color: #BDB7DE; font: inherit; transition: box-shadow .15s, color .15s, filter .15s;
}
.ub-tab:hover { filter: brightness(1.08); color: #fff; }
.ub-tab > svg {
  flex: none; width: 38px; height: 38px; padding: 9px; border-radius: 10px; box-sizing: border-box;
  background: rgba(21, 15, 43, .7); box-shadow: inset 0 0 0 1px #3A3166; color: #A69FCF;
}
.ub-tab span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ub-tab b { font-family: var(--f-cond); font-size: 16px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: #fff; white-space: nowrap; }
.ub-tab i { font-style: normal; font-size: 12px; font-weight: 500; color: #A69FCF; white-space: nowrap; }
.ub-tab.is-on { box-shadow: inset 0 0 0 1.5px var(--lime), 0 0 16px rgba(215, 255, 0, .14), inset 0 1px 0 rgba(255, 255, 255, .07); }
.ub-tab.is-on > svg { color: #0E1102; background: var(--lime); box-shadow: 0 0 14px rgba(215, 255, 0, .4); }

/* ─── авто-подбор: скин около ставки соперника ─── */
.ub-auto, .ub-auto__body { display: flex; flex-direction: column; gap: 10px; }
.ub-auto__body > .bt-lbl { margin: 4px 0 0; }
.ub-auto__box { display: grid; grid-template-columns: minmax(0, 1fr) 176px; gap: 10px; align-items: stretch; }
.ub-auto__card {
  --r: #4b69ff;
  position: relative; display: flex; align-items: center; gap: 16px; min-width: 0; height: 100%; min-height: 112px; padding: 12px 18px 12px 14px;
  border-radius: 14px; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(70% 130% at 0% 50%, color-mix(in srgb, var(--r) 36%, transparent), transparent 70%),
    linear-gradient(180deg, #2A2250 0%, #211A44 100%);
  border: 1px solid color-mix(in srgb, var(--r) 60%, #3A3166);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 12px 26px -18px rgba(5, 2, 18, .9);
  transition: opacity .2s;
}
.ub-auto__card::after {
  content: ''; position: absolute; left: 0; top: 20%; bottom: 20%; width: 3px; border-radius: 0 3px 3px 0; background: var(--r); box-shadow: 0 0 10px var(--r);
}
.ub-auto__card img { flex: none; width: 128px; height: 96px; object-fit: contain; display: block; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .5)); animation: ub-in .35s cubic-bezier(.2, .8, .2, 1) both; }
.ub-auto__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ub-auto__txt u, .ub-auto__txt b, .ub-auto__txt i { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ub-auto__txt u { text-decoration: none; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #A69FCF; }
.ub-auto__txt b { font-size: 17px; font-weight: 700; color: #fff; }
.ub-auto__txt i { font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: color-mix(in srgb, var(--r) 65%, #fff); }
.ub-auto__card > em {
  flex: none; display: inline-flex; align-items: center; gap: 6px; font-style: normal; font-family: var(--f-cond); font-size: 24px; font-weight: 600;
  color: #fff; font-variant-numeric: tabular-nums;
}
.ub-auto__card > em .kz-coin-img { width: 18px; height: 18px; }
.ub-auto__card.is-empty { justify-content: center; border-color: #3A3166; }
.ub-auto__card.is-empty::after { display: none; }
.ub-auto__card.is-empty .ub-auto__txt { align-items: center; text-align: center; }
.ub-auto__card.is-empty .ub-auto__txt b { font-size: 14px; font-weight: 600; color: #BDB7DE; white-space: normal; }
.ub-auto__card.is-loading { opacity: .6; }
.ub-auto__card.is-loading::before {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .08) 50%, transparent 70%) 0 0 / 200% 100%;
  animation: ub-shine 1s linear infinite;
}
@keyframes ub-shine { from { background-position: 150% 0; } to { background-position: -50% 0; } }

.ub-auto__side { display: flex; flex-direction: column; gap: 8px; }
.ub-auto__chance {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 8px; border-radius: 12px;
  background: rgba(21, 15, 43, .6); box-shadow: inset 0 0 0 1px #3A3166;
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #A69FCF;
}
.ub-auto__chance b { font-family: var(--f-cond); font-size: 26px; font-weight: 700; letter-spacing: .01em; color: #B65CFF; text-shadow: 0 0 14px rgba(182, 92, 255, .45); font-variant-numeric: tabular-nums; }
.ub-auto__reroll {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 12px; border: 0; border-radius: 10px; cursor: pointer;
  background: linear-gradient(180deg, #2C2452 0%, #241D45 100%); box-shadow: inset 0 0 0 1px #4C4182, inset 0 1px 0 rgba(255, 255, 255, .07);
  color: #fff; font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; transition: filter .15s, opacity .15s;
}
.ub-auto__reroll svg { width: 17px; height: 17px; flex: none; color: var(--lime); transition: transform .4s; }
.ub-auto__reroll:hover:not(:disabled) { filter: brightness(1.15); }
.ub-auto__reroll:hover:not(:disabled) svg { transform: rotate(180deg); }
.ub-auto__reroll:disabled { opacity: .45; cursor: default; }
.ub-auto__note { margin: 0; font-size: 12px; line-height: 1.5; color: #A69FCF; }
.ub-auto__dep {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 14px; border-radius: 12px;
  background: rgba(255, 92, 92, .08); box-shadow: inset 0 0 0 1px rgba(255, 92, 92, .3);
  font-size: 13px; font-weight: 500; color: #FFB4B4;
}
.ub-auto__depbtn {
  flex: none; height: 36px; padding: 0 16px; border-radius: 9px; font-family: var(--f-cond); font-size: 14px; letter-spacing: .06em; text-transform: uppercase;
  color: #0A0C0E; background: #6DEA5D;
}
.ub-auto__depbtn:hover { background: #6DEA5D; color: #0A0C0E; filter: brightness(1.06); }

/* ═══════════════ КАРТОЧКА СКИНА ═══════════════ */

.ub-it {
  --r: #4b69ff;
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0;
  padding: 10px 10px 9px; border-radius: 11px; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(90% 70% at 50% 0%, color-mix(in srgb, var(--r) 60%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--r) 30%, #2A2250) 0%, #1D163A 72%);
  box-shadow: inset 0 2px 0 var(--r), inset 0 0 0 1px rgba(255, 255, 255, .04);
}
.ub-it > img { width: 96px; height: 72px; object-fit: contain; display: block; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .5)); }
.ub-it__txt { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; max-width: 100%; text-align: center; }
.ub-it__txt u, .ub-it__txt b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ub-it__txt u { text-decoration: none; font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-dim); }
.ub-it__txt b { font-size: 12px; font-weight: 700; color: var(--text); }
.ub-it__txt em { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; font-style: normal; font-size: 12px; font-weight: 800; color: var(--money); font-variant-numeric: tabular-nums; }
.ub-it .kz-coin-img { width: 12px; height: 12px; }

/* ═══════════════ СТРАНИЦА БАТЛА ═══════════════
   Пропорции — с референса (1440): колонка контента 1160px (77.5rem минус
   поля 40px), шапка 88px, три равные колонки без зазора, у средней поля
   по 20px — кольцо 346px; карточка игрока 348px, под ней через 24px
   строки скинов с зазором 8px; полоса «Сумма битвы» 48px, до 320px. */

.ub-roompage { --ub-a: #D7FF00; --ub-a2: #9CCB00; --ub-b: #A62CFF; --ub-b2: #6E1FE0; --ub-card: linear-gradient(180deg, #2A2250 0%, #211A44 100%); --ub-foot: linear-gradient(180deg, #1B1436 0%, #150F2B 100%);
  --ub-line: #3A3166; --ub-line2: #4C4182; --ub-hl: inset 0 1px 0 rgba(255, 255, 255, .07); --ub-mute: #A69FCF; --ub-dim: #BDB7DE; }

.ub-room {
  max-width: 1240px; margin: 0 auto; padding: 0 40px 56px;
  display: flex; flex-direction: column; gap: 24px;
}

/* ─── шапка ─── */
.ub-bar { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 88px; margin-bottom: -24px; }
.ub-back {
  display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px 0 9px; border-radius: 10px;
  background: linear-gradient(180deg, #2C2452 0%, #241D45 100%); box-shadow: inset 0 0 0 1px var(--ub-line), var(--ub-hl);
  color: var(--ub-dim); text-decoration: none;
  font-size: 15px; font-weight: 500; transition: color .14s, filter .14s, box-shadow .14s;
}
.ub-back:hover { color: #fff; filter: brightness(1.12); box-shadow: inset 0 0 0 1px var(--ub-line2), var(--ub-hl); }
.ub-back i { width: 20px; height: 20px; display: block; }
.ub-back i svg { width: 100%; height: 100%; display: block; }

/* заголовок — как логотип сайта: слово лаймом и слово в фиолетовой
   неоновой рамке */
.ub-logo {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 10px; text-decoration: none; white-space: nowrap; user-select: none;
}
.ub-logo img { width: 36px; height: 32px; object-fit: contain; display: block; filter: drop-shadow(0 4px 10px rgba(166, 44, 255, .35)); }
.ub-logo b, .ub-logo em {
  font-family: var(--f-cond); font-size: 26px; font-weight: 700; line-height: 1; letter-spacing: .03em; text-transform: uppercase; font-style: normal;
}
.ub-logo b { color: var(--ub-a); text-shadow: 0 0 18px rgba(215, 255, 0, .28); }
.ub-logo em {
  margin-left: -2px; padding: 3px 9px 4px; border-radius: 8px; color: #C77DFF;
  border: 2px solid var(--ub-b); background: rgba(166, 44, 255, .12);
  box-shadow: 0 0 14px rgba(166, 44, 255, .45), inset 0 0 10px rgba(166, 44, 255, .25);
  text-shadow: 0 0 10px rgba(166, 44, 255, .6);
}
.ub-bar__tools { display: flex; align-items: center; gap: 8px; }
.ub-tool {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 40px; min-width: 40px; padding: 0;
  border: 0; border-radius: 10px; background: linear-gradient(180deg, #2C2452 0%, #241D45 100%); color: var(--ub-dim); cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--ub-line), var(--ub-hl);
  font: inherit; font-size: 15px; font-weight: 500; transition: color .14s, filter .14s, box-shadow .14s;
}
.ub-tool:hover { filter: brightness(1.12); box-shadow: inset 0 0 0 1px var(--ub-line2), var(--ub-hl); color: #fff; }
.ub-tool svg { width: 20px; height: 20px; display: block; }
#ub-snd { color: var(--accent); }
#ub-snd.is-off { color: var(--text-mute); }
.ub-share { padding: 0 14px 0 12px; }
.ub-share i { width: 20px; height: 20px; display: block; }
.ub-share.is-ok { color: var(--money); }

/* ─── арена: три колонки ─── */
.ub-arena { position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "a mid b"; align-items: start; }
/* за кольцом — мягкий свет двух сторон: лайм слева, фиолетовый справа */
.ub-arena::before {
  content: ''; position: absolute; left: 50%; top: -40px; z-index: -1; width: min(760px, 100%); height: 480px; transform: translateX(-50%); pointer-events: none;
  background:
    radial-gradient(38% 46% at 34% 46%, rgba(215, 255, 0, .09), transparent 70%),
    radial-gradient(38% 46% at 66% 46%, rgba(166, 44, 255, .2), transparent 70%);
  filter: blur(8px);
}
.ub-side--0 { grid-area: a; }
.ub-side--1 { grid-area: b; }
.ub-mid { grid-area: mid; display: flex; flex-direction: column; align-items: center; gap: 24px; min-width: 0; padding: 0 20px; }
.ub-side { position: relative; display: flex; flex-direction: column; gap: 24px; min-width: 0; transition: opacity .5s, filter .5s; }

/* ─── карточка игрока ─── */
.ub-card {
  --c: var(--ub-a); --glow: rgba(215, 255, 0, .2); --glow2: rgba(150, 200, 0, .05);
  position: relative; display: flex; flex-direction: column; height: 348px; border-radius: 12px; overflow: hidden; isolation: isolate;
  background: var(--ub-card);
  box-shadow: inset 0 0 0 1px var(--ub-line), var(--ub-hl), 0 22px 44px -26px rgba(5, 2, 18, .9);
  transition: box-shadow .4s;
}
.ub-card--1 { --c: var(--ub-b); --glow: rgba(166, 44, 255, .45); --glow2: rgba(92, 24, 168, .22); }
/* свечение сверху — эллипс во всю высоту верхней части, как у референса */
.ub-card::before {
  content: ''; position: absolute; inset: 0 0 45px; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, transparent 8%, color-mix(in srgb, var(--c) 70%, transparent) 50%, transparent 92%) top / 100% 2px no-repeat,
    radial-gradient(73% 100% at 50% 0%, var(--glow) 0%, var(--glow2) 50%, transparent 100%);
  transition: opacity .4s;
}
.ub-card::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 0 0 1.5px var(--c); opacity: 0; transition: opacity .4s;
}
.ub-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 10px 12px 0; min-width: 0; }
.ub-card__name { min-width: 0; display: inline-flex; align-items: center; gap: 6px; padding-top: 4px; font-size: 16px; font-weight: 600; color: #fff; }
.ub-card__name .ba-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ub-card__name .bt-bot { margin-left: 0; }
.ub-card__name.is-mute { color: var(--ub-mute); }
.ub-you {
  flex: none; padding: 1px 6px; border-radius: 5px; background: color-mix(in srgb, var(--c) 16%, transparent);
  color: var(--c); font-size: 10px; font-weight: 700; font-style: normal; letter-spacing: .04em; text-transform: uppercase; line-height: 1.5;
}
.ub-chance {
  flex: none; display: inline-flex; align-items: center; gap: 5px; margin-left: auto; padding: 4px 8px; border-radius: 6px;
  background: color-mix(in srgb, var(--c) 12%, rgba(21, 15, 43, .7)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 30%, transparent);
  font-size: 14px; font-weight: 500; color: #fff; line-height: 24px;
}
.ub-chance b { font-family: var(--f-cond); font-size: 17px; font-weight: 600; color: var(--c); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.ub-card__body {
  position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 0 12px 16px;
}
.ub-card__ring {
  display: grid; place-items: center; padding: 6px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(21, 15, 43, .85) 86%, color-mix(in srgb, var(--c) 30%, transparent) 100%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 22%, transparent), 0 0 34px -10px color-mix(in srgb, var(--c) 45%, transparent);
}
.ub-card .bt-ava.ub-ava {
  width: 180px; height: 180px; font-family: var(--f-cond); font-size: 76px; font-weight: 700;
  color: var(--c); box-shadow: none;
  background:
    radial-gradient(70% 70% at 50% 28%, color-mix(in srgb, var(--c) 26%, #221B3E) 0%, #130E27 100%);
}
.ub-card .bt-ava.ub-ava > .bt-bot { bottom: 4px; padding: 1px 8px; font-size: 11px; }
/* аватар-картинка (Steam) — во весь круг */
.bt-ava.ub-ava > img, .bt-ava.ub-rava > img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
/* значок уровня (is-hex, upbattle.room.js): шестиугольник 120 (100 и 72 на
   узких) вместо круга 180, без круглой подложки; под ним — «Уровень N»,
   число цветом ступени (--lc) */
.ub-card__ring.is-hex { padding: 0; border-radius: 0; background: none; box-shadow: none; }
.ub-card .bt-ava.ub-ava.is-lvl { width: 120px; height: 120px; }
/* круглое фото с висящим значком (krazeLevel.player, has-pl): значок
   уходит под круг — подписи «Уровень N» место ниже; «бот» — над кругом */
.ub-card .bt-ava.ub-ava.has-pl { margin-bottom: 14px; }
.ub-card .bt-ava.ub-ava.has-pl > .bt-bot { top: -6px; bottom: auto; }
/* в центре кольца в итоге — фото победителя во весь тёмный круг и ровно по
   центру: без висящего значка уровня (он есть на карточке) и без подъёма
   круга под значок; ободок даёт кольцо цвета стороны (.ub-w__halo) */
.ub-w__win.is-hex .bt-ava.ub-wava.is-lvl.has-pl { width: 100%; height: 100%; margin: 0; padding: 0; background: none; box-shadow: none; }
.ub-w__win .bt-ava.ub-wava.has-pl .kz-ava { top: 0; }
.ub-w__win .bt-ava.ub-wava.has-pl .kz-ava::before,
.ub-w__win .bt-ava.ub-wava.has-pl .kz-ava__b { display: none; }
.ub-w__win .bt-ava.ub-wava.has-pl .kz-ava__c { box-shadow: 0 0 9cqw color-mix(in srgb, var(--c) 35%, transparent); }
.ub-card__lvl {
  font-family: var(--f-cond); font-size: 13px; font-weight: 600; line-height: 1; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ub-mute); white-space: nowrap;
}
.ub-card__lvl b { font-weight: 700; letter-spacing: .04em; color: color-mix(in srgb, var(--lc, #fff) 72%, #fff); }
.ub-card__foot {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 45px; padding: 0 12px;
  background: var(--ub-foot); box-shadow: inset 0 1px 0 var(--ub-line); line-height: 21px;
}
.ub-card__foot span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 500; color: var(--ub-mute); }
.ub-card__foot b {
  flex: none; display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-cond); font-size: 17px; font-weight: 600; color: #fff;
  font-variant-numeric: tabular-nums;
}
.ub-card__foot .kz-coin-img { width: 16px; height: 16px; vertical-align: 0; }
.ub-dash { font-style: normal; color: var(--text-mute); margin: 0 2px; }
/* значок «Победитель» — сосед карточки в .ub-side, стоит на её верхней
   кромке поверх рамки; поток карточки не меняет */
.ub-side--0 { --c: var(--ub-a); }
.ub-side--1 { --c: var(--ub-b); }
.ub-card__win {
  position: absolute; left: 50%; top: 0; z-index: 3; transform: translate(-50%, calc(-50% - 8px)); opacity: 0;
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 8px;
  background: var(--c); color: #0B0C0E; font-family: var(--f-cond); font-size: 13px; font-weight: 700; font-style: normal;
  letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; pointer-events: none;
  box-shadow: 0 8px 24px -8px var(--c), 0 0 0 3px #1B1436, inset 0 1px 0 rgba(255, 255, 255, .45); transition: opacity .35s .15s, transform .35s .15s;
}
.ub-side--1 .ub-card__win { color: #fff; background: linear-gradient(180deg, #B65CFF, #8A3DFF); }
.ub-side--0 .ub-card__win { background: linear-gradient(180deg, #E9FF5C, #C2EC00); }
.ub-card__win svg { width: 15px; height: 15px; }

/* свободное место */
.ub-card.is-empty::before { opacity: .45; }
.ub-card__ring.is-empty { padding: 0; background: none; box-shadow: none; }
.ub-ghost {
  width: 128px; height: 128px; display: grid; place-items: center; border-radius: 50%;
  border: 2px dashed color-mix(in srgb, var(--c) 40%, rgba(255, 255, 255, .12)); color: color-mix(in srgb, var(--c) 70%, #fff);
  background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--c) 14%, transparent), transparent 70%);
}
.ub-ghost svg { width: 42px; height: 42px; display: block; opacity: .85; }
.ub-wait { display: inline-flex; align-items: baseline; gap: 2px; font-family: var(--f-cond); font-size: 17px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: #fff; }
.ub-dots { display: inline-flex; gap: 3px; margin-left: 4px; }
.ub-dots i { width: 4px; height: 4px; border-radius: 50%; background: var(--c); animation: ub-dot 1.2s ease-in-out infinite; }
.ub-dots i:nth-child(2) { animation-delay: .15s; }
.ub-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes ub-dot { 0%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.ub-wait__btns { display: flex; gap: 8px; width: 100%; max-width: 320px; margin-top: 2px; }
.ub-wait__btns .bt-btn { flex: 1; min-width: 0; height: 44px; padding: 0 12px; }
.ub-btn { font-family: var(--f-cond); font-size: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; border-radius: 10px; }
.ub-btn--bot {
  flex: 1.5 !important; color: #fff;
  background: var(--gloss), linear-gradient(180deg, #A954FF, #7424E8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 -1px 0 rgba(0, 0, 0, .3), 0 10px 24px -12px var(--ub-b);
}
.ub-btn--bot:hover { filter: brightness(1.1); background: var(--gloss), linear-gradient(180deg, #A954FF, #7424E8); }
.ub-btn--ghost { background: linear-gradient(180deg, #2C2452 0%, #241D45 100%); box-shadow: inset 0 0 0 1px var(--ub-line), var(--ub-hl); color: var(--ub-dim); }
.ub-btn--ghost:hover { background: rgba(255, 92, 92, .14); color: #FF8A8A; }

/* ─── строки скинов ставки ─── */
.ub-stake { display: flex; flex-direction: column; gap: 8px; }
.ub-stk {
  --r: #4b69ff;
  position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px; border-radius: 12px; overflow: hidden; isolation: isolate;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--r) 14%, transparent) 0%, transparent 46%),
    linear-gradient(180deg, #2A2250 0%, #211A44 100%);
  border: 1px solid color-mix(in srgb, var(--r) 55%, #3A3166);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 10px 22px -16px rgba(5, 2, 18, .9);
  transition: border-color .2s, transform .2s;
}
.ub-stk::after {
  content: ''; position: absolute; left: 0; top: 18%; bottom: 18%; width: 3px; border-radius: 0 3px 3px 0; pointer-events: none;
  background: var(--r); box-shadow: 0 0 10px var(--r);
}
.ub-stk:hover { border-color: color-mix(in srgb, var(--r) 85%, #3A3166); transform: translateY(-1px); }
.ub-stk::before {
  content: ''; position: absolute; top: 50%; left: -83px; z-index: -1; width: 163px; height: 163px; transform: translateY(-50%); pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--r) 40%, transparent) 0%, color-mix(in srgb, var(--r) 20%, transparent) 30%, color-mix(in srgb, var(--r) 10%, transparent) 45%, transparent 70%);
}
.ub-stk > img { flex: none; width: 81px; height: 59px; object-fit: contain; display: block; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .45)); }
.ub-stk__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ub-stk__txt u, .ub-stk__txt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ub-stk__txt u { text-decoration: none; font-size: 10px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--ub-mute, #A69FCF); }
.ub-stk__txt b { font-size: 14px; font-weight: 700; color: #FCFDFB; }
.ub-stk__end { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; max-width: 45%; }
.ub-stk__end i {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-style: normal; font-size: 10px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
  color: color-mix(in srgb, var(--r) 65%, #fff);
}
.ub-stk__end em { display: inline-flex; align-items: center; gap: 5px; font-style: normal; font-family: var(--f-cond); font-size: 14px; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; }
.ub-stk .kz-coin-img { width: 13px; height: 13px; vertical-align: 0; }

/* ─── кольцо ───
   Слои — как у референса (viewBox 348): обод с рисками (r 162–173), дуги
   шансов до r 162, тёмный зазор 145–160 — снаружи от него остаётся тонкая
   линия цвета дуги, толстая дуга 113–145 с процентом посередине (r 129),
   серое кольцо 100–113, тёмный центр r 100 и тонкий круг r 96, по которому
   во время отсчёта и вращения бегут две светлые дуги. В центре — цифра
   отсчёта, затем стрелки апгрейда, в конце — аватар победителя во весь
   центр. Указатель — стрелка снизу, поверх толстой дуги. */
.ub-wheel { position: relative; width: 100%; max-width: 360px; aspect-ratio: 1; container-type: inline-size; }
.ub-wheel svg { width: 100%; height: 100%; display: block; overflow: visible; }
.ub-wheel svg { filter: drop-shadow(0 0 26px rgba(120, 60, 230, .28)); }
.ub-w__rim { fill: none; stroke: #2A2250; stroke-width: 11; }
.ub-w__ticks line { stroke: #54478E; stroke-width: 1; }
.ub-w__track { fill: none; stroke: #18112F; stroke-width: 44; }
.ub-w__sec { transition: opacity .5s, filter .5s; }
.ub-w__sec--0 { fill: url(#ub-g0); }
.ub-w__sec--1 { fill: url(#ub-g1); }
.ub-w__gap { fill: none; stroke: #120C26; stroke-width: 15; }
.ub-w__inner { fill: none; stroke: #2A2250; stroke-width: 13; }
.ub-w__cut { stroke: #120C26; stroke-width: 3; }
/* центр кольца — тёмное индиго (стопы градиента #ub-gc из разметки) */
#ub-gc stop:first-child { stop-color: #241C45; }
#ub-gc stop:last-child { stop-color: #150F2B; }
.ub-wheel.is-wait .ub-w__cut { display: none; }
.ub-w__core { fill: url(#ub-gc); }
.ub-w__halo { fill: none; stroke: rgba(190, 170, 255, .12); stroke-width: 4.35; transition: stroke .5s; }
.ub-w__run { opacity: 0; transform-origin: 174px 174px; transition: opacity .4s; }
.ub-w__run circle { fill: none; stroke: #fff; stroke-width: 4.35; stroke-linecap: round; }
.ub-wheel.is-count .ub-w__run, .ub-wheel.is-roll .ub-w__run { opacity: .5; animation: ub-orbit 1.8s linear infinite; }
.ub-wheel.is-roll .ub-w__run { animation-duration: .9s; }
/* проценты — тёмные полупрозрачные, «выбитые» в дуге, как у референса */
.ub-w__pct { font-family: var(--f-body); font-size: 22px; font-weight: 700; letter-spacing: .01em; }
.ub-w__pct0 { fill: rgba(0, 0, 0, .5); }
.ub-w__pct1 { fill: rgba(20, 0, 46, .6); }
/* дуга проигравшего — серо-тёмная, а не грязно-оливковая от прозрачности */
.ub-wheel.is-over .ub-w__sec.is-lose { opacity: .5; filter: grayscale(.85) brightness(.45); }
.ub-wheel.is-w0 .ub-w__sec.is-win { filter: drop-shadow(0 0 10px rgba(215, 255, 0, .5)); }
.ub-wheel.is-w1 .ub-w__sec.is-win { filter: drop-shadow(0 0 12px rgba(166, 44, 255, .65)); }
.ub-wheel.is-over .ub-w__pct text { transition: opacity .5s; }
.ub-wheel.is-w0 .ub-w__pct1, .ub-wheel.is-w1 .ub-w__pct0 { opacity: .4; }
/* подписи некуда уйти из-под указателя (дуга короче подписи) — гаснет */
.ub-wheel .ub-w__pct text.is-dim { opacity: .22; }
.ub-wheel.is-w0 .ub-w__halo { stroke: var(--ub-a); }
.ub-wheel.is-w1 .ub-w__halo { stroke: #B65CFF; }

/* поиск соперника: по пустой толстой дорожке бежит лаймово-фиолетовый хвост */
.ub-wheel.is-wait::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  /* голова хвоста гаснет за 8° и чуть размыта — без рваной ступеньки на краю */
  background: conic-gradient(from 180deg, rgba(166, 44, 255, 0) 0deg, rgba(166, 44, 255, 0) 200deg, rgba(166, 44, 255, .55) 290deg, rgba(215, 255, 0, .9) 350deg, rgba(215, 255, 0, 0) 360deg);
  filter: blur(1px);
  -webkit-mask: radial-gradient(closest-side, transparent 64.6%, #000 65%, #000 83.2%, transparent 83.6%);
          mask: radial-gradient(closest-side, transparent 64.6%, #000 65%, #000 83.2%, transparent 83.6%);
  animation: ub-orbit 2.6s linear infinite;
}

/* центр: квадрат во весь тёмный круг (200 из 348) */
.ub-w__face { position: absolute; inset: 21.26%; display: grid; place-items: center; border-radius: 50%; pointer-events: none; text-align: center; }
.ub-w__face > * { grid-area: 1 / 1; }
.ub-count {
  font-family: var(--f-cond); font-size: 58px; font-size: 16.6cqw; font-weight: 700; line-height: 1;
  background: linear-gradient(180deg, #fff 64%, rgba(255, 255, 255, .2) 156%); -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: ub-pop .85s cubic-bezier(.18, .9, .22, 1) both;
}
@keyframes ub-pop { 0% { transform: scale(3); opacity: 0; } 45% { transform: scale(.94); opacity: 1; } 100% { transform: none; opacity: 1; } }
.ub-vs { display: flex; flex-direction: column; align-items: center; }
.ub-vs b {
  font-family: var(--f-cond); font-size: 58px; font-size: 17cqw; font-weight: 700; line-height: 1; letter-spacing: .02em;
  background: linear-gradient(90deg, var(--ub-a) 0%, var(--ub-a) 46%, #B65CFF 54%, #B65CFF 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* стрелки апгрейда: влетают снизу после «1», пока крутится указатель */
.ub-w__chev { width: 100%; height: 100%; overflow: visible; }
.ub-w__chev path { animation: ub-fly .6s cubic-bezier(.2, .9, .25, 1) both, ub-glow 1.4s ease-in-out .7s infinite; }
.ub-w__chev .c1 { fill: url(#ub-cl); animation-delay: .12s, .82s; }
.ub-w__chev .c2 { fill: url(#ub-cv); }
@keyframes ub-fly { from { opacity: 0; transform: translateY(60%); } to { opacity: 1; transform: none; } }
@keyframes ub-glow { 0%, 100% { opacity: 1; } 50% { opacity: .78; } }
/* итог: аватар победителя во весь центр (как у референса), плашка с ником —
   на его нижней кромке поверх тонкого кольца, а не на самом аватаре: у
   буквенного аватара (боты, аккаунты без Steam-аватара) она закрывала
   ножки буквы. Буква — по центру, в размер цифры отсчёта. */
.ub-w__win { position: relative; width: 92%; height: 92%; display: grid; place-items: center; animation: ub-in .5s cubic-bezier(.2, .8, .2, 1) both; }
.ub-wheel.is-w0 .ub-w__win { --c: var(--ub-a); --ink: #0E1102; }
.ub-wheel.is-w1 .ub-w__win { --c: #B65CFF; --ink: #fff; }
.ub-w__win .bt-ava.ub-wava {
  width: 100%; height: 100%; overflow: hidden; font-family: var(--f-cond); font-size: 21cqw; font-weight: 700; color: var(--c);
  background: radial-gradient(75% 75% at 50% 25%, color-mix(in srgb, var(--c) 32%, #221B3E) 0%, #120D26 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), 0 0 9cqw color-mix(in srgb, var(--c) 35%, transparent);
}
.ub-w__win .bt-ava.ub-wava > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ub-w__win .bt-ava.ub-wava > .bt-bot { display: none; }
.ub-w__win:not(.has-img) .bt-ava.ub-wava { padding-bottom: 5%; text-shadow: 0 0 6cqw color-mix(in srgb, var(--c) 45%, transparent); }
/* значок уровня (is-hex): шестиугольник на 70 % тёмного круга (.ub-w__win —
   92 % круга, значок — 76 % от неё), чуть выше центра, чтобы под ним
   встала плашка с ником; позади — мягкое свечение цветом стороны */
.ub-w__win.is-hex::before {
  content: ''; position: absolute; inset: 2%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 30%, transparent) 0%, transparent 100%);
}
.ub-w__win.is-hex .bt-ava.ub-wava.is-lvl { width: 76%; height: 76%; margin-bottom: 6%; padding: 0; }
.ub-w__tag {
  position: absolute; left: 50%; bottom: -5.5%; z-index: 1; transform: translateX(-50%);
  outline: .9cqw solid #150F2B;
  display: inline-flex; align-items: center; gap: 1.4cqw; max-width: 88%; height: 7.6cqw; padding: 0 2.8cqw; border-radius: 2.2cqw;
  background: var(--c); color: var(--ink); white-space: nowrap;
  font-family: var(--f-cond); font-size: 3.6cqw; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1;
  box-shadow: 0 1.6cqw 4.6cqw -1.4cqw var(--c);
}
.ub-w__tag svg { flex: none; width: 3.8cqw; height: 3.8cqw; }
.ub-w__tag span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@keyframes ub-in { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }

/* указатель: как у референса — снизу кольца, остриём к тонкому ободу.
   Игла needle.svg нарисована в единицах кольца (24 × 64 из 348): верх на
   r 100 (кромка тёмного центра) → top 78.74%, ширина 6.9%. Шарнир лежит на
   сером внутреннем кольце, древко — через толстую дугу, жёлтый наконечник —
   в тёмном зазоре. Обходит кольцо поворотом всей рамки вокруг центра. */
.ub-w__ptr { position: absolute; inset: 0; z-index: 2; pointer-events: none; transform: rotate(0deg); will-change: transform; }
.ub-w__ptr img {
  position: absolute; left: 50%; top: 78.74%; width: 6.9%; height: auto; transform: translateX(-50%); display: block;
  filter: drop-shadow(0 0 5px rgba(237, 224, 15, .4)) drop-shadow(0 2px 4px rgba(0, 0, 0, .65));
}
/* тёмная подложка под иглой в итоге: на любой дуге игла стоит на
   «прорези» и не теряется (жёлтое на лайме само по себе слабое) */
.ub-w__ptr::before {
  content: ''; position: absolute; left: 50%; top: 79.6%; width: 7.4%; height: 16.6%; transform: translateX(-50%);
  border-radius: 999px; opacity: 0; transition: opacity .45s .1s;
  background: radial-gradient(50% 50% at 50% 50%, rgba(10, 6, 24, .72) 0%, rgba(10, 6, 24, .55) 55%, rgba(10, 6, 24, 0) 100%);
}
.ub-wheel.is-over .ub-w__ptr::before { opacity: 1; }
/* шлейф за иглой, пока она крутится: светлый клин позади (указатель идёт
   по часовой), только по толстой дуге и зазору — r 113…160 */
.ub-w__ptr::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%; opacity: 0; transition: opacity .35s;
  background: conic-gradient(rgba(255, 251, 224, 0) 0deg 128deg, rgba(255, 251, 224, .05) 140deg, rgba(255, 251, 224, .34) 178deg, rgba(255, 251, 224, 0) 180deg 360deg);
  -webkit-mask: radial-gradient(closest-side, transparent 64.6%, #000 65%, #000 91.6%, transparent 92%);
          mask: radial-gradient(closest-side, transparent 64.6%, #000 65%, #000 91.6%, transparent 92%);
}
.ub-wheel.is-spin .ub-w__ptr::after, .ub-w__ptr.is-orbit::after { opacity: 1; }
.ub-w__ptr.is-orbit { animation: ub-orbit 1.1s linear infinite; }
.ub-wheel.is-wait .ub-w__ptr { opacity: .5; }
@keyframes ub-orbit { to { transform: rotate(360deg); } }

/* полоса суммы под кольцом */
.ub-sum {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; max-width: 320px; height: 48px; padding: 0 16px;
  border-radius: 12px; background: linear-gradient(180deg, #2C2452 0%, #241D45 100%);
  box-shadow: inset 0 0 0 1px var(--ub-line), var(--ub-hl), 0 12px 26px -18px rgba(5, 2, 18, .9);
}
.ub-sum span { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ub-mute); white-space: nowrap; }
.ub-sum b { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-cond); font-size: 18px; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ub-sum .kz-coin-img { width: 16px; height: 16px; vertical-align: 0; }

/* ─── победитель / проигравший ─── */
.ub-side.is-win .ub-card { box-shadow: 0 0 0 1px var(--c), var(--ub-hl), 0 24px 60px -28px var(--c); }
.ub-side.is-win .ub-card::before {
  background:
    linear-gradient(90deg, transparent 4%, var(--c) 50%, transparent 96%) top / 100% 2px no-repeat,
    radial-gradient(100% 110% at 50% 0%, var(--glow) 0%, var(--glow2) 55%, transparent 100%);
}
.ub-side.is-win .ub-card::after { opacity: 1; }
.ub-side.is-win .ub-card__win { opacity: 1; transform: translate(-50%, -50%); }
/* как у референса: победитель выделен только свечением, рамкой и кольцом
   вокруг аватара — размеры и места те же, что у соседа */
.ub-side.is-win .ub-card__ring { box-shadow: 0 0 0 2px var(--c), 0 0 40px -6px var(--c); }
/* со значком уровня круглого кольца нет — свечение по форме шестиугольника */
.ub-side.is-win .ub-card__ring.is-hex { box-shadow: none; filter: drop-shadow(0 0 18px color-mix(in srgb, var(--c) 55%, transparent)); }
.ub-side.is-lose { opacity: .5; filter: grayscale(.6); }

/* ─── скины проигравшего перелетают победителю (upbattle.room.js moveStakes) ───
   колонка победителя на время полёта — над кольцом, строка в полёте
   светится цветом стороны, при посадке — вспышка */
.ub-side.is-taking { z-index: 4; }
.ub-stk.is-fly {
  z-index: 6; will-change: transform, opacity, filter;
  border-color: color-mix(in srgb, var(--c) 70%, #3A3166);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent), 0 18px 40px -14px color-mix(in srgb, var(--c) 55%, transparent);
}
.ub-stk.is-landed { animation: ub-land .9s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes ub-land {
  0% { border-color: var(--c); box-shadow: 0 0 0 2px var(--c), 0 0 28px color-mix(in srgb, var(--c) 70%, transparent), inset 0 0 22px color-mix(in srgb, var(--c) 30%, transparent); }
  100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 10px 22px -16px rgba(5, 2, 18, .9); }
}
.ub-stake__gone {
  display: grid; place-items: center; min-height: 60px; margin: 0; padding: 10px 14px; border-radius: 12px; text-align: center;
  border: 1px dashed #3A3166; color: var(--ub-mute, #A69FCF); font-size: 13px; font-weight: 600;
  animation: ub-rise .5s cubic-bezier(.2, .8, .2, 1) 1.2s both;
}
.ub-card__foot b { transition: color .3s; }
.ub-side.is-taking .ub-card__foot b { color: var(--c); }

/* ─── итог ─── */
.ub-result {
  --c: var(--ub-a);
  position: relative; display: flex; flex-direction: column; gap: 16px; padding: 20px; border-radius: 14px; overflow: hidden; isolation: isolate;
  background: var(--ub-card); box-shadow: inset 0 0 0 1px var(--ub-line), var(--ub-hl), 0 22px 44px -26px rgba(5, 2, 18, .9);
  animation: ub-rise .5s cubic-bezier(.2, .8, .2, 1) both;
}
.ub-result::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 160px; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, transparent 10%, color-mix(in srgb, var(--c) 75%, transparent) 50%, transparent 90%) top / 100% 2px no-repeat,
    radial-gradient(60% 100% at 50% 0%, color-mix(in srgb, var(--c) 22%, transparent), transparent 100%);
}
.ub-result.is-down { --c: #FF5C5C; }
.ub-result.is-watch { --c: #9C8FE0; }
@keyframes ub-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.ub-result__head { display: flex; align-items: center; gap: 14px; min-width: 0; }
.ub-result--w0 { --wc: var(--ub-a); }
.ub-result--w1 { --wc: #B65CFF; }
.ub-result__ava .bt-ava.ub-rava {
  width: 52px; height: 52px; font-family: var(--f-cond); font-size: 24px; font-weight: 700; color: var(--wc);
  background: radial-gradient(70% 70% at 50% 28%, color-mix(in srgb, var(--wc) 26%, #221B3E) 0%, #130E27 100%);
  box-shadow: 0 0 0 2px #1B1436, 0 0 0 4px var(--wc), 0 0 18px -2px color-mix(in srgb, var(--wc) 60%, transparent);
}
.ub-result__ava .bt-ava.ub-rava > .bt-bot { display: none; }
.ub-result__ava .bt-ava.ub-rava.is-lvl { filter: drop-shadow(0 0 7px color-mix(in srgb, var(--wc) 55%, transparent)); }
.ub-result__t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ub-result__t b { font-family: var(--f-cond); font-size: 26px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--c); line-height: 1.1; }
.ub-result.is-watch .ub-result__t b { color: var(--ub-dim); font-size: 15px; letter-spacing: .08em; }
.ub-result__t > span { display: flex; align-items: center; gap: 5px; min-width: 0; font-size: 15px; font-weight: 600; color: #fff; }
.ub-result__t > span > i { flex: none; font-style: normal; }
.ub-result__t > span .bt-bot { flex: none; margin-left: 1px; }
.ub-result__t > span .ba-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ub-result__pot { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; }
.ub-result__pot i { font-style: normal; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ub-mute); }
.ub-result__pot b { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-cond); font-size: 24px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.ub-result.is-up .ub-result__pot b { color: var(--money); }
.ub-result__pot .kz-coin-img { width: 18px; height: 18px; vertical-align: 0; }
.ub-result__lbl { margin: 0; font-size: 13px; font-weight: 500; color: var(--ub-mute); }
.ub-result__items { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; }
.ub-result__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ub-chip {
  display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; min-height: 34px; padding: 6px 12px; border-radius: 9px;
  background: rgba(21, 15, 43, .6); box-shadow: inset 0 0 0 1px var(--ub-line); font-size: 13px;
}
.ub-chip i { flex: none; font-style: normal; font-weight: 500; color: var(--ub-mute); }
.ub-chip b { display: inline-flex; align-items: center; gap: 5px; min-width: 0; font-weight: 600; color: #fff; overflow-wrap: anywhere; }
.ub-chip .kz-coin-img { width: 13px; height: 13px; vertical-align: 0; }
.ub-chip.is-gift { background: rgba(215, 255, 0, .08); box-shadow: inset 0 0 0 1px rgba(215, 255, 0, .3); color: var(--accent); }
.ub-chip.is-gift svg { width: 16px; height: 16px; flex: none; }
.ub-chip.is-gift b { color: var(--accent); }
.ub-result__btns { display: flex; flex-wrap: wrap; gap: 10px; }
.ub-result__btns .bt-btn { min-width: 200px; height: 48px; }

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

/* ═══════════════ СРЕДНИЕ ЭКРАНЫ ═══════════════ */

@media (max-width: 1100px) {
  .ub-room { padding: 0 24px 48px; }
  .ub-mid { padding: 0 14px; }
  .ub-card { height: 320px; }
  .ub-card .bt-ava.ub-ava { width: 140px; height: 140px; font-size: 60px; }
  .ub-card .bt-ava.ub-ava.is-lvl { width: 100px; height: 100px; }
  .ub-stk { gap: 10px; padding: 10px; }
  .ub-stk > img { width: 64px; height: 47px; }
  .ub-stk__end i { display: none; }
}
@media (max-width: 920px) and (min-width: 761px) {
  .ub-card.is-empty .ub-card__foot { justify-content: center; }
  .ub-card.is-empty .ub-card__foot span { display: none; }
  .ub-card.is-empty .ub-card__foot b { font-size: 15px; }
  .ub-card__head { flex-direction: column; align-items: flex-start; gap: 4px; }
  .ub-chance { margin-left: 0; }
  .ub-logo b, .ub-logo em { font-size: 22px; }
}

/* ═══════════════ ТЕЛЕФОН ═══════════════
   Кольцо — сверху на всю ширину, под ним два игрока колонками (как у
   референса на узком экране), скины ставки — компактными строками. */
@media (max-width: 760px) {
  /* ── страница батла ── */
  .ub-room { padding: 0 16px 32px; gap: 16px; }
  .ub-bar { height: 62px; margin-bottom: -8px; gap: 8px; }
  .ub-back { width: 38px; height: 38px; padding: 0; justify-content: center; }
  .ub-back span { display: none; }
  .ub-logo { gap: 6px; }
  .ub-logo img { width: 26px; height: 24px; }
  .ub-logo b, .ub-logo em { font-size: 19px; }
  .ub-logo em { padding: 2px 6px 3px; border-radius: 6px; border-width: 1.5px; }
  .ub-bar__tools { gap: 6px; }
  .ub-tool { height: 38px; min-width: 38px; }
  .ub-share { width: 38px; padding: 0; }
  .ub-share span { display: none; }

  .ub-arena { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "mid mid" "a b"; gap: 18px 10px; }
  .ub-mid { padding: 0; gap: 12px; }
  .ub-wheel { max-width: 284px; transition: max-width .45s cubic-bezier(.2, .8, .2, 1); }
  .ub-sum { max-width: 284px; height: 44px; padding: 0 14px; }
  .ub-sum b { font-size: 17px; }
  /* ожидание: кольцо ещё пустое — меньше, чтобы «Позвать бота» и
     «Отменить» хозяина были на первом экране и над нижней панелью */
  .ub-arena.is-waiting .ub-wheel { max-width: 212px; }
  .ub-arena.is-waiting .ub-sum { max-width: 248px; height: 40px; }
  .ub-side { gap: 10px; }

  .ub-card { height: auto; min-height: 238px; }
  .ub-card::before { bottom: 52px; }
  .ub-card__head { flex-direction: column; align-items: center; gap: 6px; padding: 10px 8px 0; }
  .ub-card__name { max-width: 100%; justify-content: center; padding-top: 0; font-size: 14px; }
  .ub-chance { margin-left: 0; padding: 2px 8px; font-size: 12px; line-height: 20px; }
  .ub-chance b { font-size: 15px; }
  .ub-card__body { padding: 12px 8px 14px; gap: 8px; }
  .ub-card__ring { padding: 4px; }
  .ub-card .bt-ava.ub-ava { width: 84px; height: 84px; font-size: 36px; }
  .ub-card .bt-ava.ub-ava.is-lvl { width: 72px; height: 72px; }
  .ub-card__lvl { font-size: 11px; letter-spacing: .08em; }
  .ub-card .bt-ava.ub-ava > .bt-bot { bottom: -2px; font-size: 9px; padding: 0 5px; }
  .ub-card__foot { flex-direction: column; justify-content: center; gap: 0; height: 52px; padding: 0 8px; }
  .ub-card__foot span { font-size: 11px; line-height: 16px; }
  .ub-card__foot b { font-size: 16px; gap: 5px; }
  .ub-card__foot .kz-coin-img { width: 14px; height: 14px; }
  .ub-card.is-empty .ub-card__foot b { flex-wrap: wrap; justify-content: center; font-size: 13px; gap: 3px; }
  .ub-card.is-empty .ub-card__foot .kz-coin-img { width: 11px; height: 11px; }
  .ub-ghost { width: 72px; height: 72px; }
  .ub-ghost svg { width: 26px; height: 26px; }
  .ub-wait { flex-wrap: wrap; justify-content: center; font-size: 12px; letter-spacing: .04em; text-align: center; }
  .ub-dots { margin-left: 2px; }
  .ub-wait__btns { flex-direction: column; gap: 6px; }
  .ub-wait__btns .bt-btn { flex: none !important; width: 100%; height: 38px; padding: 0 8px; font-size: 12px; gap: 6px; }
  .ub-wait__btns .bt-btn svg { width: 14px; height: 14px; }

  .ub-card__win { height: 24px; padding: 0 9px; font-size: 11px; gap: 4px; }
  /* значок «Победитель» висит на кромке — ник под ним опускаем, чтобы не
     наезжал; у соседа тоже, чтобы карточки остались одной высоты */
  .ub-side.is-win .ub-card__head, .ub-arena:has(.ub-side.is-win) .ub-card__head { padding-top: 18px; }
  .ub-card__win svg { width: 13px; height: 13px; }

  /* строки ставки в узкой колонке: картинка слева, справа оружие,
     название и цена столбиком */
  .ub-stake .ub-stk {
    display: grid; grid-template-columns: 46px minmax(0, 1fr); grid-template-areas: "img txt" "img end";
    align-items: center; gap: 1px 8px; padding: 8px; border-radius: 10px;
  }
  .ub-stake .ub-stk::before { left: -60px; width: 120px; height: 120px; }
  .ub-stake .ub-stk > img { grid-area: img; width: 46px; height: 34px; }
  .ub-stake .ub-stk__txt { grid-area: txt; gap: 0; }
  .ub-stake .ub-stk__txt u { font-size: 9px; }
  .ub-stake .ub-stk__txt b { font-size: 12px; }
  .ub-stake .ub-stk__end { grid-area: end; align-items: flex-start; max-width: none; }
  .ub-stake .ub-stk__end i { display: none; }
  .ub-stake .ub-stk__end em { font-size: 13px; gap: 4px; }
  .ub-stake .ub-stk .kz-coin-img { width: 11px; height: 11px; }

  .ub-result { padding: 16px 14px; gap: 14px; }
  .ub-result__head { flex-wrap: wrap; gap: 12px; }
  /* .ub-rava в селекторе — иначе базовое правило (52 px) специфичнее и этот размер не применялся */
  .ub-result__ava .bt-ava.ub-rava { width: 44px; height: 44px; font-size: 19px; }
  .ub-result__t b { font-size: 22px; }
  .ub-result__pot { width: 100%; margin-left: 0; flex-direction: row; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: 10px; background: rgba(21, 15, 43, .6); box-shadow: inset 0 0 0 1px var(--ub-line); }
  .ub-result__pot b { font-size: 20px; }
  .ub-result__items { grid-template-columns: minmax(0, 1fr); }
  .ub-result__items .ub-stk { padding: 10px; gap: 10px; }
  .ub-result__items .ub-stk > img { width: 60px; height: 44px; }
  .ub-result__btns { flex-direction: column; }
  .ub-result__btns .bt-btn { width: 100%; min-width: 0; }

  /* ── окно выбора и лобби ── */
  .ub-tab { gap: 9px; padding: 8px 10px; }
  .ub-tab > svg { width: 32px; height: 32px; padding: 7px; }
  .ub-tab b { font-size: 14px; }
  .ub-tab i { font-size: 11px; }
  .ub-auto__box { grid-template-columns: minmax(0, 1fr); }
  .ub-auto__side { flex-direction: row; }
  .ub-auto__chance { flex-direction: row; justify-content: space-between; padding: 0 12px; }
  .ub-auto__chance b { font-size: 20px; }
  .ub-auto__reroll { flex: none; }
  .ub-auto__card { gap: 10px; min-height: 88px; padding: 10px 12px 10px 10px; }
  .ub-auto__card img { width: 84px; height: 63px; }
  .ub-auto__txt b { font-size: 14px; }
  .ub-auto__card > em { font-size: 18px; }
  .ub-auto__dep { flex-wrap: wrap; }
  .ub-pick .ub-it { flex-direction: column; text-align: center; }
  .ub-pick .ub-it > img { width: 72px; height: 54px; }
  .ub-pick .ub-it__txt { align-items: center; text-align: center; }
  .ub-pick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ub-sheet .bt-sheet__foot .bt-btn--create { min-width: 0; padding: 0 16px; }
  .bt-modal.ub-modal { padding: 12px; }
  .ub-sheet { max-height: calc(100dvh - 24px); }
  .ub-sheet .bt-sheet__head { padding-left: 16px; }
  .ub-sheet .bt-sheet__body { padding: 12px 14px 14px; }
  .ub-sheet .bt-sheet__foot { padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px)); }
  /* шапка строки в одну линию: коридор входа есть на кнопке «Войти от …» и на странице батла */
  .ub-row .ub-stat--range { display: none; }
  .ub-row .bt-row__head { padding: 0 12px; }
  .ub-row .bt-row__wait, .ub-row .bt-row__unboxed { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .ub-tile, .ub-tilevs { height: 76px; }
  .ub-tile { width: 76px; }
  .ub-tile img { width: 62px; height: 46px; }
}
/* низкие телефоны (iPhone SE и т. п.): в ожидании ещё компактнее, чтобы
   кнопки хозяина не уходили под нижнюю панель */
@media (max-width: 760px) and (max-height: 700px) {
  .ub-arena.is-waiting .ub-wheel { max-width: 164px; }
  .ub-arena.is-waiting .ub-sum { height: 38px; }
  .ub-arena.is-waiting .ub-ghost { width: 56px; height: 56px; }
}
@media (max-width: 370px) {
  .ub-logo img { display: none; }
  .ub-arena { gap: 16px 8px; }
  .ub-card__name { font-size: 13px; }
  .ub-card__foot b { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .ub-stk.is-landed, .ub-stake__gone,
  .ub-count, .ub-w__win, .ub-result, .ub-w__chev path, .ub-dots i, .ub-w__ptr.is-orbit, .ub-wheel.is-wait::before,
  .ub-wheel.is-count .ub-w__run, .ub-wheel.is-roll .ub-w__run { animation: none; }
}

/* ═══ ВЫБРАННОЕ И ВКЛЮЧЁННОЕ — ГРАДИЕНТ ЛОГОТИПА ═══
   Статичный градиент кислотный → розовый через светлый тон (напрямую
   смесь рыжеет), как ⚡/🛒 в «1 Клике» (oneclick.css). Стоит в конце
   файла: те же селекторы выше рисовали лаймовую рамку. */
/* рамка у всех вкладок (прозрачная) — чтобы выбранная не сдвигалась */
.ub-tab { border: 1.5px solid transparent; }
.ub-tab.is-on {
  color: #F4FFD6;
  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);
}
.ub-tab.is-on > svg { color: #0E1102; background: linear-gradient(135deg, #D7FF00 0%, #F0FFC8 45%, #FFD6F7 55%, #F535F0 100%); box-shadow: 0 0 12px rgba(245, 53, 240, .28); }
#ub-snd:not(.is-off) {
  color: #F4FFD6;
  border: 1.5px solid transparent;
  background: linear-gradient(180deg, #2A2158 0%, #1C1540 100%) padding-box, linear-gradient(135deg, #D7FF00 0%, #F0FFC8 45%, #FFD6F7 55%, #F535F0 100%) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), -4px -4px 14px rgba(215, 255, 0, .16), 4px 4px 14px rgba(245, 53, 240, .2);
}
/* звук включён — значок градиентом (#dh-acid в upbattle-room.html) */
#ub-snd:not(.is-off) svg { stroke: url(#dh-acid); }