/* UPGIFT — «бархатная шкатулка»: сливовый бархат, атласное золото ленты,
   ореолы-паттерны как у коллекционных подарков Telegram. */

:root {
  --velvet-0: #0d0815;
  --velvet-1: #170f24;
  --velvet-2: #211631;
  --velvet-3: #2c1f40;
  --velvet-4: #3a2a53;
  --line: rgba(246, 230, 255, 0.08);
  --line-2: rgba(246, 230, 255, 0.14);
  --satin: #f6eefb;
  --satin-2: #c9b8dc;
  --satin-3: #8f7ea6;
  --ribbon: #ffc857;
  --ribbon-2: #ff9f2e;
  --ribbon-ink: #2a1703;
  --cta: #2f6bff;
  --cta-2: #3d8dff;
  --cta-soft: rgba(61, 141, 255, .16);
  --cta-line: rgba(90, 160, 255, .6);
  --cta-text: #bfdcff;
  --ton: #4fb0ff;
  --mint: #5be3a6;
  --danger: #ff5c7a;

  --r-common: #93a4c3;
  --r-uncommon: #52a7ff;
  --r-rare: #a06bff;
  --r-epic: #ff5fbf;
  --r-legendary: #ffb547;
  --r-mythic: #ff4d4d;

  --font-display: "Dela Gothic One", "Onest", system-ui, sans-serif;
  --font-ui: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --radius: 18px;
  --radius-sm: 12px;
  --tab-h: 64px;
  --safe-b: max(env(safe-area-inset-bottom), var(--tg-safe-area-inset-bottom, 0px));
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--velvet-1); color: var(--satin); }
body {
  /* Скроллится не body, а #app: иначе в вебвью iOS фиксированный низ прыгает при резиновом скролле. */
  position: fixed; inset: 0;
  font: 500 15px/1.4 var(--font-ui);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  font-variant-numeric: tabular-nums;
}
body::before {
  /* бархатный ворс: едва заметное зерно и тёплое пятно света сверху */
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(255, 200, 87, .10), transparent 60%),
    radial-gradient(80% 50% at 100% 100%, rgba(160, 107, 255, .10), transparent 70%);
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input { font: inherit; color: inherit; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
img { max-width: 100%; display: block; -webkit-user-drag: none; user-select: none; }
:focus-visible { outline: 2px solid var(--cta-2); outline-offset: 2px; }
.hidden { display: none !important; }

#app {
  position: relative; z-index: 1; height: 100%; overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain; scrollbar-width: none;
}
#app::-webkit-scrollbar { display: none; }
.top, .page { max-width: 560px; margin-left: auto; margin-right: auto; }

/* ───────── загрузка ───────── */
.boot { min-height: 100%; display: grid; place-content: center; gap: 18px; justify-items: center; }
.boot__mark { font: 28px var(--font-display); letter-spacing: .06em; color: var(--satin); }
.boot__bar { width: 120px; height: 3px; border-radius: 3px; background: var(--velvet-3); overflow: hidden; }
.boot__bar i { display: block; height: 100%; width: 40%; background: linear-gradient(90deg, var(--cta), var(--cta-2)); border-radius: 3px; animation: boot 1s ease-in-out infinite; }
@keyframes boot { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }

/* ───────── шапка ───────── */
.top {
  position: sticky; top: 0; z-index: 30;
  padding: 10px 16px 8px;
  background: linear-gradient(var(--velvet-1) 80%, rgba(23, 15, 36, 0));
}
.top__row { display: flex; align-items: center; gap: 10px; }
.logo { display: flex; align-items: center; gap: 9px; font: 19px var(--font-display); letter-spacing: .03em; }
.logo__mark { width: 30px; height: 30px; filter: drop-shadow(0 6px 14px rgba(61, 141, 255, .45)); }
.logo__word { display: inline-flex; }
.logo b {
  font-weight: 400;
  background: linear-gradient(90deg, #4fb0ff, #7cc8ff); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.top__spacer { flex: 1; }
.wallet {
  display: flex; align-items: center; gap: 0; height: 42px; padding: 3px; border-radius: 999px;
  background: var(--velvet-2); box-shadow: inset 0 0 0 1px var(--line-2);
}
.wallet__sum { display: flex; align-items: center; gap: 6px; padding: 0 10px 0 9px; font-weight: 700; font-size: 15px; }
/* «+»: глянцевая синяя кнопка внутри капсулы баланса — ободок-перелив, блик сверху, ореол и пробегающий отблеск */
.wallet__plus {
  position: relative; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; isolation: isolate; color: #fff;
  background: linear-gradient(180deg, #74b0ff 0%, #3a78ff 48%, #2556ea 100%);
  box-shadow:
    inset 0 0 0 1.5px rgba(190, 222, 255, .55), inset 0 -3px 6px rgba(12, 34, 140, .45),
    0 0 0 3px rgba(61, 141, 255, .16), 0 8px 18px -6px rgba(47, 107, 255, .95);
  transition: transform .15s var(--ease-out);
}
.wallet__plus::before {
  content: ""; position: absolute; left: 14%; right: 14%; top: 5%; height: 44%; z-index: -1; border-radius: 50% 50% 46% 46%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, .06));
}
.wallet__plus::after {
  content: ""; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 40%; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-20deg);
  animation: plusShine 4.5s ease-in-out infinite;   /* transform, а не left: анимация на видеокарте, без перерисовки страницы */
}
@keyframes plusShine { 0%, 70% { transform: translateX(0) skewX(-20deg); } 100% { transform: translateX(475%) skewX(-20deg); } }
.wallet__plus:active { transform: scale(.9); }
.wallet__plus svg { position: relative; z-index: 2; width: 17px; height: 17px; stroke-width: 3.2; filter: drop-shadow(0 1px 1.5px rgba(10, 30, 120, .55)); }
.avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--velvet-3); overflow: hidden; display: grid; place-items: center; font-weight: 700; color: var(--satin-2); flex: none; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.top .avatar { width: 42px; height: 42px; }

.ton-ico { width: 14px; height: 14px; color: var(--ton); flex: none; }

/* ───────── лента дропов ───────── */
.live { display: flex; align-items: center; gap: 8px; padding: 2px 16px 0; max-width: 560px; margin: 0 auto; }
.live__badge {
  flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  width: 52px; height: 58px; border-radius: 14px; background: var(--velvet-2); box-shadow: inset 0 0 0 1px var(--line);
  font-size: 10px; color: var(--satin-3); font-weight: 700; letter-spacing: .06em;
}
.live__badge i { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--mint); }
.live__badge i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(91, 227, 166, .6); animation: ringOut 1.8s infinite; }
@keyframes ringOut { 0% { transform: scale(1); opacity: 1; } 70%, 100% { transform: scale(3.3); opacity: 0; } }   /* scale+opacity — на видеокарте */
.live__badge b { color: var(--satin); font-size: 13px; }
@keyframes pulse { 70% { box-shadow: 0 0 0 8px rgba(91, 227, 166, 0); } 100% { box-shadow: 0 0 0 0 rgba(91, 227, 166, 0); } }
.live__track { flex: 1; overflow: hidden; mask-image: linear-gradient(90deg, #000 85%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); }
.live__rail { display: flex; gap: 6px; }
.drop {
  position: relative; flex: none; width: 58px; height: 58px; border-radius: 14px; overflow: hidden;
  animation: dropIn .6s var(--ease-out);
}
.drop img.drop__gift { position: absolute; inset: 7px; width: 44px; height: 44px; }
.drop__who { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 4px 2px; font-size: 9px; font-weight: 700; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: linear-gradient(transparent, rgba(0, 0, 0, .55)); }
@keyframes dropIn { from { transform: scale(.4) translateX(-20px); opacity: 0; } }

/* ───────── ореол (фирменный элемент) ───────── */
.halo {
  --c1: #6d5a8a; --c2: #2a1f3d;
  position: relative; isolation: isolate; overflow: hidden;
  background: radial-gradient(circle at 50% 44%, var(--c1) 0%, var(--c2) 78%);
}
.halo::before {
  content: ""; position: absolute; inset: -12%; z-index: -1;
  background: url("/img/pattern.svg") center 44% / cover no-repeat;
  opacity: .5; mix-blend-mode: soft-light;
}
.halo--spin::before { animation: haloSpin 60s linear infinite; }
@keyframes haloSpin { to { transform: rotate(360deg); } }

.r-common    { --c1: #7b8aa8; --c2: #262a3d; --rc: var(--r-common); }
.r-uncommon  { --c1: #3f86e0; --c2: #16264a; --rc: var(--r-uncommon); }
.r-rare      { --c1: #8a5ae8; --c2: #2a1650; --rc: var(--r-rare); }
.r-epic      { --c1: #e0509f; --c2: #4a1238; --rc: var(--r-epic); }
.r-legendary { --c1: #f0a33a; --c2: #4f2a08; --rc: var(--r-legendary); }
.r-mythic    { --c1: #f04444; --c2: #4a0a14; --rc: var(--r-mythic); }

/* --c1 — свет темы, --c2 — фон; цвета коробок на обложках — в server/covers3d/render.py */
.t-honey  { --c1: #f2b24a; --c2: #5c3009; }
.t-rose   { --c1: #ff6f9f; --c2: #5a1236; }
.t-candy  { --c1: #ff8fcf; --c2: #5d236a; }
.t-night  { --c1: #6c79ff; --c2: #15103f; }
.t-ice    { --c1: #7fd8ff; --c2: #103a60; }
.t-ember  { --c1: #ff7f36; --c2: #520f07; }
.t-autumn { --c1: #e8933a; --c2: #47200a; }
.t-lime   { --c1: #a9e64d; --c2: #1d4b12; }
.t-violet { --c1: #a574ff; --c2: #2b1260; }
.t-gold   { --c1: #ffd064; --c2: #5a3a07; }
.t-ocean  { --c1: #3fcfc0; --c2: #0a3a4a; }
.t-blood  { --c1: #ff4058; --c2: #470716; }
.t-sky    { --c1: #55b8ff; --c2: #0e3a78; }
.t-glam   { --c1: #ff7ad6; --c2: #561646; }
.t-noir   { --c1: #ffcf6b; --c2: #2c2335; }
.t-milano  { --c1: #d5dae4; --c2: #1b1c22; }
.t-firenze { --c1: #3fb57a; --c2: #0f2b1d; }
.t-paris   { --c1: #d9a066; --c2: #3b2413; }
.t-prada   { --c1: #f2f2f4; --c2: #151518; }

/* ───────── подарок-плитка ───────── */
.gift {
  position: relative; border-radius: 16px; aspect-ratio: 1 / 1.16; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
  transition: transform .2s var(--ease-out), box-shadow .2s;
}
.gift__img { position: absolute; left: 14%; right: 14%; top: 8%; width: 72%; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .35)); }
.gift__meta { position: relative; width: 100%; padding: 16px 8px 8px; text-align: center; background: linear-gradient(transparent, rgba(8, 4, 14, .72)); }
.gift__name { font-size: 11.5px; font-weight: 600; color: rgba(255, 255, 255, .86); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gift__value { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 800; }
.gift__value .ton-ico { width: 11px; height: 11px; color: #bfe3ff; }
.gift__tag { position: absolute; top: 6px; left: 6px; padding: 2px 6px; border-radius: 8px; font-size: 10px; font-weight: 800; background: rgba(8, 4, 14, .55); backdrop-filter: blur(6px); }
.gift__tag--chance { left: auto; right: 6px; color: var(--satin-2); }
.gift__check {
  position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(8, 4, 14, .5); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5); display: grid; place-items: center;
}
.gift.is-picked { box-shadow: inset 0 0 0 2px var(--ribbon), 0 0 0 1px var(--ribbon); transform: scale(.96); }
.gift.is-picked .gift__check { background: var(--ribbon); box-shadow: none; color: var(--ribbon-ink); }
.gift.is-off { filter: grayscale(.8) brightness(.6); }
.gift:active { transform: scale(.96); }

.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media (min-width: 440px) { .grid { grid-template-columns: repeat(4, 1fr); } }

/* ───────── кнопки и элементы ───────── */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 52px; padding: 0 22px; border-radius: 16px; font-weight: 800; font-size: 16px;
  transition: transform .15s var(--ease-out), filter .15s, opacity .15s;
  white-space: nowrap;
}
.btn:active { transform: scale(.97); }
.btn[disabled] { pointer-events: none; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--primary {
  /* сплошной синий, как у конкурентов: виден на любом фоне */
  color: #fff; text-transform: uppercase; letter-spacing: .03em; font-size: 15px;
  background-color: var(--cta);
  background-image: linear-gradient(90deg, var(--cta), var(--cta-2));
  box-shadow: 0 10px 26px -10px rgba(61, 141, 255, .9), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.btn--primary .ton-ico { color: #fff; }
.btn--primary .btn__sub { text-transform: none; letter-spacing: 0; opacity: .85; }
.btn--primary[disabled] {
  background: var(--velvet-3); color: var(--satin-3);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.btn--primary[disabled] .ton-ico { color: var(--satin-3); }
.btn--ghost { background: var(--velvet-3); box-shadow: inset 0 0 0 1px var(--line-2); }
.btn--ghost[disabled] { opacity: .5; }
.btn--mint { background: linear-gradient(180deg, #8ff5c7, var(--mint)); color: #06301d; }
.btn--mint[disabled] { opacity: .5; }
.btn--block { width: 100%; }
.btn--sm { height: 38px; padding: 0 14px; border-radius: 12px; font-size: 14px; }
.btn__sub { font-weight: 600; opacity: .7; }

.seg { display: flex; padding: 4px; gap: 4px; border-radius: 14px; background: var(--velvet-2); box-shadow: inset 0 0 0 1px var(--line); }
.seg button { flex: 1; height: 36px; border-radius: 10px; font-weight: 700; font-size: 14px; color: var(--satin-3); transition: background .2s, color .2s; }
.seg button.on { background: var(--velvet-4); color: var(--satin); box-shadow: 0 4px 12px -6px rgba(0, 0, 0, .6); }

.chip { height: 32px; padding: 0 12px; border-radius: 10px; background: var(--velvet-2); box-shadow: inset 0 0 0 1px var(--line); font-weight: 700; font-size: 13px; color: var(--satin-2); flex: none; }
.chip.on { background: var(--cta-soft); color: var(--cta-text); box-shadow: inset 0 0 0 1px var(--cta-line); }
.chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.chips::-webkit-scrollbar { display: none; }

.field { display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 14px; border-radius: 14px; background: var(--velvet-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.field input { flex: 1; min-width: 0; background: none; border: 0; outline: none; font-weight: 700; font-size: 16px; }
.field input::placeholder { color: var(--satin-3); font-weight: 500; }
.field__label { font-size: 12px; color: var(--satin-3); font-weight: 600; margin: 0 0 6px 2px; }

.card { border-radius: var(--radius); background: var(--velvet-2); box-shadow: inset 0 0 0 1px var(--line); }
.muted { color: var(--satin-3); }
.small { font-size: 13px; }

/* ───────── страница ───────── */
.page { padding: 4px 16px calc(var(--tab-h) + var(--safe-b) + 24px); animation: pageIn .35s var(--ease-out); }
@keyframes pageIn { from { opacity: 0; transform: translateY(8px); } }
.h-display { font: 26px/1.05 var(--font-display); letter-spacing: .01em; margin: 0; }
.h-section { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 26px 2px 12px; font: 17px var(--font-display); letter-spacing: .02em; }
.h-section span { font: 600 13px var(--font-ui); color: var(--satin-3); white-space: nowrap; }
.backline { display: flex; align-items: center; gap: 10px; margin: 6px 0 14px; }
.backline__btn { width: 38px; height: 38px; border-radius: 12px; background: var(--velvet-2); display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--line); }

/* ───────── нижний док ───────── */
.tabs {
  position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); z-index: 40;
  width: 100%; max-width: 560px; padding: 22px 12px calc(10px + var(--safe-b));
  background: linear-gradient(rgba(13, 8, 21, 0), var(--velvet-0) 55%); pointer-events: none;
}
.dockbar { display: flex; align-items: stretch; gap: 8px; pointer-events: auto; }
.dock {
  --n: 4; position: relative; flex: 1; display: grid; grid-template-columns: repeat(var(--n), 1fr); height: var(--tab-h); padding: 5px; border-radius: 34px;
  background: rgba(30, 25, 44, .74); backdrop-filter: blur(24px) saturate(1.6); -webkit-backdrop-filter: blur(24px) saturate(1.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px rgba(255, 255, 255, .07), 0 16px 34px -14px rgba(0, 0, 0, .85);
}
.dock::before {
  /* подложка активной вкладки — скользит между позициями */
  content: ""; position: absolute; top: 5px; bottom: 5px; border-radius: 29px;
  left: calc(5px + var(--i) * ((100% - 10px) / var(--n))); width: calc((100% - 10px) / var(--n));
  background: linear-gradient(180deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, .06));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), inset 0 1px 0 rgba(255, 255, 255, .2), 0 6px 14px -6px rgba(0, 0, 0, .55);
  transition: left .35s cubic-bezier(.34, 1.3, .64, 1), opacity .2s; opacity: var(--ind, 1);
}
.dock__tab {
  position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-size: 10.5px; font-weight: 700; color: #8f8aa3; transition: color .25s;
}
.dock__tab svg { width: 25px; height: 25px; transition: transform .25s var(--ease-out), color .25s, filter .25s; }
.dock__tab:active svg { transform: scale(.86); }
.dock__tab.on { color: #fff; }
.dock__tab.on svg { color: #4d9bff; filter: drop-shadow(0 0 8px rgba(77, 155, 255, .55)); }
.dock__badge { position: absolute; top: 3px; right: calc(50% - 24px); min-width: 17px; height: 17px; padding: 0 5px; border-radius: 9px; background: linear-gradient(135deg, #ff6b8b, #ff3d5e); color: #fff; font-size: 10px; font-weight: 800; display: grid; place-items: center; box-shadow: 0 0 0 2px rgba(30, 25, 44, .95); }
.dock__me {
  flex: none; width: var(--tab-h); height: var(--tab-h); padding: 5px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(30, 25, 44, .74); backdrop-filter: blur(24px) saturate(1.6); -webkit-backdrop-filter: blur(24px) saturate(1.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px rgba(255, 255, 255, .07), 0 16px 34px -14px rgba(0, 0, 0, .85); transition: box-shadow .25s;
}
.dock__me .avatar { width: 100%; height: 100%; font-size: 18px; }
.dock__me:active { transform: scale(.94); }
.dock__me.on { box-shadow: inset 0 0 0 2px #4d9bff, 0 0 18px -4px rgba(77, 155, 255, .75), 0 16px 34px -14px rgba(0, 0, 0, .85); }



/* ───────── главная: баннер-карусель ───────── */
.hero { position: relative; margin-top: 6px; border-radius: 24px; overflow: hidden; isolation: isolate; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 24px 40px -28px #000; }
.hero__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.hero__track::-webkit-scrollbar { display: none; }
.hero__slide { position: relative; flex: 0 0 100%; height: 184px; padding: 16px 18px; overflow: hidden; isolation: isolate; scroll-snap-align: start; text-align: left; background: var(--hbg); }
.hero__slide::before {
  /* узор как у коллекционных подарков Telegram */
  content: ""; position: absolute; inset: -12%; z-index: -1; background: url("/img/pattern.svg") 70% 50% / cover no-repeat; opacity: .32; mix-blend-mode: soft-light;
}
.hero__slide--rtp      { --hbg: radial-gradient(70% 100% at 84% 62%, rgba(95, 150, 255, .6), transparent 64%), linear-gradient(135deg, #1d2d78 0%, #2b1b62 55%, #1a1035 100%); }
.hero__slide--upgrade  { --hbg: radial-gradient(70% 100% at 84% 62%, rgba(255, 186, 70, .42), transparent 64%), linear-gradient(135deg, #3d2266 0%, #2b1749 55%, #190f2b 100%); }
.hero__slide--contract { --hbg: radial-gradient(70% 100% at 84% 62%, rgba(70, 205, 255, .45), transparent 64%), linear-gradient(135deg, #123e5f 0%, #1c2a52 55%, #120f26 100%); }
.hero__slide--ref      { --hbg: radial-gradient(70% 100% at 84% 62%, rgba(255, 95, 190, .5), transparent 64%), linear-gradient(135deg, #4c1849 0%, #2b1239 55%, #170c22 100%); }

.hero__rays {
  position: absolute; right: -50px; top: 50%; width: 280px; height: 280px; margin-top: -140px; z-index: -1; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .17) 0deg 6deg, transparent 6deg 20deg);
  mask-image: radial-gradient(circle, #000 8%, transparent 58%); -webkit-mask-image: radial-gradient(circle, #000 8%, transparent 58%);
  animation: haloSpin 32s linear infinite;
}
.hero__ring {
  /* мини-кольцо из сегментов — как у колеса апгрейда */
  position: absolute; right: 8px; top: 50%; width: 150px; height: 150px; margin-top: -75px; border-radius: 50%; z-index: -1; pointer-events: none;
  background: conic-gradient(from 0deg, #ffe28c 0deg, #ff7a2e 150deg, rgba(255, 255, 255, .14) 150deg 360deg);
  -webkit-mask: radial-gradient(closest-side, transparent 70%, #000 71%, #000 92%, transparent 93%), repeating-conic-gradient(#000 0deg 2.6deg, transparent 2.6deg 3.6deg);
  -webkit-mask-composite: source-in;
  mask: radial-gradient(closest-side, transparent 70%, #000 71%, #000 92%, transparent 93%), repeating-conic-gradient(#000 0deg 2.6deg, transparent 2.6deg 3.6deg);
  mask-composite: intersect;
  filter: drop-shadow(0 0 6px rgba(255, 170, 60, .55));
  animation: haloSpin 14s linear infinite;
}
.hero__spot { position: absolute; right: 18px; bottom: 6px; width: 130px; height: 22px; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .45), transparent); }
.hero__art { position: absolute; right: -4px; bottom: -6px; z-index: 0; width: 162px; height: 162px; object-fit: contain; filter: drop-shadow(0 16px 20px rgba(0, 0, 0, .55)); animation: float 5s ease-in-out infinite; }
.hero__art--ring { right: 33px; bottom: auto; top: 50%; width: 88px; height: 88px; margin-top: -48px; }

.hero__tag {
  position: relative; z-index: 1; display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 8px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #fff;
  background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}
.hero__ttl { position: relative; z-index: 1; max-width: 58%; margin-top: 9px; font: 20px/1.1 var(--font-display); text-shadow: 0 2px 14px rgba(0, 0, 0, .4); }
.hero__neon { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.hero__neon b {
  font: 44px/1 var(--font-display); font-weight: 400; color: #fff;
  text-shadow: 0 0 3px #fff, 0 0 10px #9ad4ff, 0 0 24px #3d8dff, 0 0 48px rgba(47, 107, 255, .7);
}
.hero__neon span { padding: 3px 8px; border-radius: 7px; font-size: 11px; font-weight: 800; letter-spacing: .14em; color: #fff; background: linear-gradient(90deg, var(--cta), var(--cta-2)); }
.hero__sub { position: relative; z-index: 1; max-width: 56%; margin-top: 6px; font-size: 12px; font-weight: 600; line-height: 1.32; color: rgba(255, 255, 255, .78);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hero__cta {
  position: absolute; left: 18px; bottom: 16px; z-index: 1; display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border-radius: 12px;
  font-size: 13px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: #1d1442;
  background: #fff; box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .6), inset 0 -2px 0 rgba(0, 0, 0, .08);
}
.hero__cta:active { transform: scale(.96); }
.hero__dots { position: absolute; right: 16px; bottom: 14px; z-index: 2; display: flex; gap: 5px; pointer-events: none; }
.hero__dots i { width: 6px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .35); transition: width .3s var(--ease-out), background .3s; }
.hero__dots i.on { width: 18px; background: #fff; }

/* ───────── главная: навигация по разделам ───────── */
.catnav {
  position: sticky; top: 56px; z-index: 25; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
  margin: 8px -16px 0; padding: 8px 16px 10px;
  background: linear-gradient(var(--velvet-1) 74%, rgba(23, 15, 36, 0));
}
.catnav::-webkit-scrollbar { display: none; }
.catnav button {
  flex: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 11px;
  font-size: 13px; font-weight: 800; color: var(--satin-2); background: var(--velvet-2); box-shadow: inset 0 0 0 1px var(--line);
  transition: background .2s, color .2s, box-shadow .2s;
}
.catnav button span { font-size: 11px; font-weight: 800; color: var(--satin-3); }
.catnav button.on { color: #fff; background: linear-gradient(90deg, var(--cta), var(--cta-2)); box-shadow: 0 8px 18px -10px rgba(61, 141, 255, .9); }
.catnav button.on span { color: rgba(255, 255, 255, .78); }
.cat { scroll-margin-top: 104px; }
.cat:first-of-type .cat-head { margin-top: 10px; }

@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* ───────── карточки кейсов ───────── */
.cat-head { display: flex; align-items: center; gap: 8px; margin: 24px 2px 12px; }
.cat-head h2 { margin: 0; font: 18px/1.1 var(--font-display); letter-spacing: .02em; }
.cat-head span {
  flex: none; min-width: 22px; height: 20px; padding: 0 7px; border-radius: 7px; display: grid; place-items: center;
  font-size: 11.5px; font-weight: 800; color: var(--satin-2); background: rgba(255, 255, 255, .07);
}
.cat-head i { flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-2), transparent); }

.cases { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.case {
  position: relative; display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; isolation: isolate; text-align: left;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(255, 255, 255, .06), transparent 62%),
    radial-gradient(95% 78% at 50% 34%, var(--c2, #2b1260), transparent 80%),
    linear-gradient(180deg, #221838 0%, #181026 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 16px 28px -22px #000;
  transition: transform .2s var(--ease-out);
}
.case::after {
  /* кромка света сверху — в цвете кейса */
  content: ""; position: absolute; left: 18%; right: 18%; top: 0; height: 1.5px; z-index: 2;
  background: linear-gradient(90deg, transparent, var(--c1, #a574ff), transparent); opacity: .85;
}
.case:active { transform: scale(.97); }

.case__stage { position: relative; aspect-ratio: 1 / .88; overflow: hidden; }
/* фон как у коллекционных подарков Telegram: градиент темы, кольца искр, верхний свет */
.case__bd {
  position: absolute; inset: 0; overflow: hidden;
  background:
    radial-gradient(70% 46% at 50% 0%, rgba(255, 255, 255, .12), transparent 72%),
    radial-gradient(124% 98% at 50% 44%, var(--c2, #2b1260) 0%, var(--c2, #2b1260) 34%, transparent 88%);
  -webkit-mask-image: linear-gradient(180deg, #000 68%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 68%, transparent 100%);
}
.case__bd::before {
  /* кольца искр вокруг подарка, медленно вращаются */
  content: ""; position: absolute; left: 50%; top: 46%; width: 168%; aspect-ratio: 1;
  background: url("/img/pattern.svg") center / contain no-repeat;
  opacity: .7; mix-blend-mode: overlay; transform: translate(-50%, -50%);
  animation: bdSpin 120s linear infinite;
}
.cases .case:nth-child(2n) .case__bd::before { animation-direction: reverse; }
@keyframes bdSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.case__glow {
  /* свечение цвета темы из открытой коробки */
  position: absolute; left: -10%; right: -10%; top: 40%; aspect-ratio: 1; transform: translateY(-54%); border-radius: 50%;
  background: radial-gradient(closest-side, var(--c1, #a574ff) 0%, var(--c1, #a574ff) 18%, transparent 74%); opacity: .45;
}

/* обложка: арт кейса со своим фоном (media/covers/<id>.webp) — на всю сцену, низ растворяется в карточке */
.case__cover {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
}
.case__stage:has(.case__cover) .case__bd, .case__stage:has(.case__cover) .case__glow { display: none; }
/* без обложки: главный приз крупно и парит, свечение темы за ним */
.case__gift {
  position: absolute; left: 9%; top: 4%; width: 82%; aspect-ratio: 1; object-fit: contain;
  filter: drop-shadow(0 14px 16px rgba(0, 0, 0, .5));
  animation: float 4.6s ease-in-out infinite;
}
.cases .case:nth-child(2n) .case__gift { animation-delay: -2.3s; }
.case__stage:has(.case__gift) .case__glow { top: 50%; opacity: .62; }

.case__body { position: relative; z-index: 1; margin-top: -4px; padding: 0 12px 12px; }
.case__title { font: 15px/1.15 var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.case__max { display: flex; align-items: center; gap: 3px; margin-top: 3px; overflow: hidden; font-size: 11.5px; font-weight: 700; color: var(--satin-3); white-space: nowrap; }
.case__max .ton-ico { width: 10px; height: 10px; color: var(--satin-3); }
/* цена — крупная кнопка на всю ширину карточки */
.case__price {
  display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 42px; margin-top: 10px; border-radius: 13px;
  font-weight: 800; font-size: 18px; color: #fff;
  background-color: var(--cta); background-image: linear-gradient(90deg, var(--cta), var(--cta-2));
  box-shadow: 0 10px 20px -10px rgba(61, 141, 255, .95), inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -2px 0 rgba(0, 20, 80, .22);
}
.case__price .ton-ico { width: 15px; height: 15px; color: #fff; }
.case.is-paused { filter: grayscale(.7); opacity: .65; }
/* последний кейс в разделе с нечётным числом — во всю ширину: коробка слева, текст справа */
.cases > .case:last-child:nth-child(odd) { grid-column: 1 / -1; flex-direction: row; align-items: center; }
.cases > .case:last-child:nth-child(odd) .case__stage { width: 54%; flex: none; overflow: visible; }
.cases > .case:last-child:nth-child(odd) .case__bd {
  right: -40%;
  -webkit-mask-image: linear-gradient(90deg, #000 45%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 45%, transparent 100%);
}
.cases > .case:last-child:nth-child(odd) .case__body { flex: 1; min-width: 0; margin: 0; padding: 12px 14px 12px 2px; }
.cases > .case:last-child:nth-child(odd) .case__title { font-size: 18px; }
.cases > .case:last-child:nth-child(odd) .case__cover {
  -webkit-mask-image: linear-gradient(90deg, #000 70%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 70%, transparent 100%);
}

.price {
  display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 12px; border-radius: 10px;
  background: rgba(255, 255, 255, .14); font-weight: 800; font-size: 14px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
}
.price .ton-ico { width: 12px; height: 12px; color: #cfe9ff; }
.price--cta { background-color: var(--cta); background-image: linear-gradient(90deg, var(--cta), var(--cta-2)); color: #fff; box-shadow: 0 8px 18px -8px rgba(61, 141, 255, .95), inset 0 1px 0 rgba(255, 255, 255, .22); }
.price--cta .ton-ico { color: #fff; }

/* ───────── экран кейса ───────── */
.casehead { position: relative; border-radius: 26px; overflow: hidden; padding: 16px; text-align: center; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.casehead__art { position: relative; width: 250px; aspect-ratio: 1 / .88; margin: -6px auto 0; }
/* без обложки — анимированный главный приз, как раньше */
.casehead__art:has(.lottie) { width: 170px; height: 150px; aspect-ratio: auto; margin-top: -4px; }
.casehead__art .lottie { position: absolute; inset: 0; }
.casehead__cover {
  position: absolute; inset: -4%; width: 108%; height: 108%; object-fit: cover;
  -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 72%, transparent 100%);
}
.casehead__title { font: 22px var(--font-display); margin: 4px 0 2px; }

.roulette { position: relative; margin: 14px -16px 0; padding: 12px 0; overflow: hidden; }
.roulette + .roulette { margin-top: -6px; }
.roulette__rail { display: flex; gap: 8px; will-change: transform; padding-left: 50%; }
.roulette__rail .gift { flex: none; width: 104px; }
.roulette--multi .roulette__rail .gift { width: 78px; }
.roulette--multi .gift__meta { padding: 10px 4px 5px; }
.roulette--multi .gift__name { display: none; }
.roulette::before, .roulette::after { content: ""; position: absolute; top: 0; bottom: 0; width: 70px; z-index: 2; pointer-events: none; }
.roulette::before { left: 0; background: linear-gradient(90deg, var(--velvet-1), transparent); }
.roulette::after { right: 0; background: linear-gradient(-90deg, var(--velvet-1), transparent); }
.roulette__needle { position: absolute; left: 50%; top: 0; bottom: 0; width: 0; z-index: 3; pointer-events: none; }
.roulette__needle::before, .roulette__needle::after {
  content: ""; position: absolute; left: -9px; border: 9px solid transparent;
}
.roulette__needle::before { top: 0; border-top: 12px solid var(--ribbon); filter: drop-shadow(0 2px 6px rgba(255, 200, 87, .8)); }
.roulette__needle::after { bottom: 0; border-bottom: 12px solid var(--ribbon); filter: drop-shadow(0 -2px 6px rgba(255, 200, 87, .8)); }
.roulette__line { position: absolute; left: 50%; top: 10px; bottom: 10px; width: 2px; margin-left: -1px; background: linear-gradient(transparent, rgba(255, 200, 87, .9), transparent); z-index: 3; }
.roulette .gift.is-hit { box-shadow: inset 0 0 0 2px var(--rc), 0 0 30px -4px var(--rc); transform: scale(1.06); z-index: 1; }

.openbar { display: grid; gap: 10px; margin-top: 14px; }
.openbar__row { display: flex; gap: 8px; align-items: center; }
.openbar__row .seg { flex: 1; }
.toggle { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; border-radius: 14px; background: var(--velvet-2); box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; font-weight: 700; color: var(--satin-2); flex: none; }
.toggle i { width: 34px; height: 20px; border-radius: 10px; background: var(--velvet-4); position: relative; transition: background .2s; }
.toggle i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--satin-2); transition: transform .2s var(--ease-out), background .2s; }
.toggle.on i { background: rgba(61, 141, 255, .45); }
.toggle.on i::after { transform: translateX(14px); background: #fff; }

/* ───────── окно выигрыша ───────── */
.reveal { position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 16px calc(24px + var(--safe-b)); background: rgba(10, 5, 16, .86); backdrop-filter: blur(10px); animation: fade .25s; }
@keyframes fade { from { opacity: 0; } }
.reveal__rays { position: absolute; left: 50%; top: 38%; width: 760px; height: 760px; margin: -380px 0 0 -380px; pointer-events: none; opacity: .55;
  background: repeating-conic-gradient(from 0deg, var(--rc, var(--ribbon)) 0deg 6deg, transparent 6deg 24deg);
  mask-image: radial-gradient(circle, #000 0%, transparent 62%); -webkit-mask-image: radial-gradient(circle, #000 0%, transparent 62%);
  animation: haloSpin 24s linear infinite; }
.reveal__label { position: relative; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--rc, var(--ribbon)); margin-bottom: 10px; }
.reveal__stage { position: relative; width: 236px; height: 236px; border-radius: 50%; animation: pop .7s var(--ease-out); box-shadow: 0 0 80px -10px var(--rc, var(--ribbon)); }
.reveal__stage .lottie, .reveal__stage img { position: absolute; inset: 22px; }
@keyframes pop { 0% { transform: scale(.2) rotate(-20deg); opacity: 0; } 60% { transform: scale(1.06); } }
.reveal__title { position: relative; font: 24px var(--font-display); margin: 18px 0 4px; text-align: center; }
.reveal__value { position: relative; display: flex; align-items: center; gap: 8px; font: 30px var(--font-display); }
.reveal__value .ton-ico { width: 22px; height: 22px; }
.reveal__actions { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; max-width: 420px; margin-top: 26px; }
.reveal__multi { position: relative; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 16px; max-width: 420px; }
.reveal__multi .gift { width: 74px; }
.reveal__multi .gift__name { display: none; }
.reveal--lose { background: radial-gradient(70% 45% at 50% 32%, rgba(255, 92, 122, .16), transparent 70%), rgba(10, 5, 16, .9); }
.reveal--lose .reveal__stage { box-shadow: 0 0 0 2px rgba(255, 92, 122, .35), 0 0 60px -20px rgba(255, 92, 122, .6); animation: pop .5s var(--ease-out), shake .45s .75s; }
.reveal--lose .reveal__stage > img {
  /* Голый img в absolute с inset не растягивается — задаём размер явно, иначе вылезает за круг. */
  position: absolute; left: 12%; top: 12%; width: 76%; height: 76%; object-fit: contain;
  animation: loseFade .6s .35s ease-out both;
}
@keyframes loseFade { from { filter: none; transform: scale(1); } to { filter: grayscale(.95) brightness(.5); transform: scale(.92); } }
.reveal--lose .reveal__label { color: var(--danger); }
.reveal__stamp {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-14deg);
  padding: 6px 18px; border: 3px solid var(--danger); border-radius: 12px; color: var(--danger);
  font: 28px var(--font-display); letter-spacing: .1em; text-transform: uppercase;
  background: rgba(13, 8, 21, .6); box-shadow: 0 0 28px rgba(255, 92, 122, .45), inset 0 0 0 1px rgba(255, 92, 122, .3);
  animation: stamp .42s .7s cubic-bezier(.2, 1.4, .4, 1) both;
}
@keyframes stamp { 0% { transform: translate(-50%, -50%) rotate(-24deg) scale(3); opacity: 0; } 40% { opacity: 1; } 100% { transform: translate(-50%, -50%) rotate(-14deg) scale(1); opacity: 1; } }
@keyframes shake { 0%, 100% { translate: 0; } 20% { translate: -6px; } 40% { translate: 5px; } 60% { translate: -3px; } 80% { translate: 2px; } }
.reveal__note { position: relative; margin-top: 6px; font-size: 13px; color: var(--satin-3); font-weight: 600; }
.reveal__lost { position: relative; display: flex; align-items: center; gap: 6px; font: 24px var(--font-display); color: var(--danger); }
.reveal__lost .ton-ico { width: 18px; height: 18px; color: var(--danger); }
.reveal__lost span { font: 600 13px var(--font-ui); color: var(--satin-3); margin-left: 4px; }

.rollbar { position: relative; width: 100%; max-width: 340px; margin-top: 18px; }
.rollbar__track { position: relative; height: 10px; border-radius: 5px; background: rgba(255, 255, 255, .12); }
.rollbar__win { position: absolute; top: 0; bottom: 0; border-radius: 5px; background: linear-gradient(90deg, #5be3a6, #8ff5c7); box-shadow: 0 0 14px rgba(91, 227, 166, .55); }
.rollbar__mark { position: absolute; top: -6px; width: 4px; height: 22px; margin-left: -2px; border-radius: 2px; background: #fff; box-shadow: 0 0 10px rgba(255, 255, 255, .9); animation: markIn .6s .2s var(--ease-out) both; }
.rollbar--lose .rollbar__mark { background: var(--danger); box-shadow: 0 0 10px rgba(255, 92, 122, .9); }
@keyframes markIn { from { transform: scaleY(0); opacity: 0; } }
.rollbar__legend { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; color: var(--satin-3); font-weight: 600; }
.rollbar__legend b { color: var(--satin); }

.slot__coin {
  width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: radial-gradient(circle at 35% 28%, #9ad4ff 0%, #3d8dff 45%, #1d47b8 100%);
  box-shadow: 0 12px 26px -8px rgba(61, 141, 255, .95), inset 0 -4px 8px rgba(0, 20, 80, .45), inset 0 3px 5px rgba(255, 255, 255, .55);
}
.slot__coin .ton-ico { width: 30px; height: 30px; color: #fff; filter: drop-shadow(0 2px 3px rgba(0, 30, 90, .5)); }
.slot__coin--mini { width: 34px; height: 34px; margin-left: -12px; align-self: flex-end; box-shadow: 0 6px 14px -4px rgba(61, 141, 255, .9), inset 0 -2px 4px rgba(0, 20, 80, .45), inset 0 2px 3px rgba(255, 255, 255, .55); }
.slot__coin--mini .ton-ico { width: 17px; height: 17px; }

/* ───────── апгрейд ───────── */
.wheel { position: relative; width: min(312px, 82vw); aspect-ratio: 1; margin: 6px auto 0; }
.wheel::before {
  /* тёмная полоса под сегментами; центр остаётся цветом страницы — никакого «шара» */
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, transparent 63%, rgba(8, 4, 14, .62) 69%, rgba(8, 4, 14, .62) 93%, transparent 99.5%);
}
.wheel__glow {
  /* мягкое свечение цвета редкости цели — без резкого края */
  position: absolute; left: 50%; top: 50%; width: 62%; height: 62%; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, var(--rc, #a06bff), transparent 72%); opacity: .3; filter: blur(14px); transition: opacity .4s;
}
.wheel__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.wheel__hair { fill: none; stroke: rgba(246, 230, 255, .1); stroke-width: 1.2; }
.wheel__hair--in { stroke: rgba(246, 230, 255, .06); }
.wheel__seg { stroke: rgba(246, 230, 255, .1); stroke-width: 5; stroke-linecap: round; transition: stroke .25s; }
.wheel__lit { filter: drop-shadow(0 0 4px rgba(255, 160, 60, .8)); }
.wheel.is-live .wheel__lit { animation: litPulse 2.4s ease-in-out infinite; }
@keyframes litPulse { 50% { opacity: .8; } }
.wheel__zone { fill: none; stroke: #ffc857; stroke-width: 2.5; filter: drop-shadow(0 0 3px rgba(255, 200, 87, .9)); transition: stroke-dasharray .45s var(--ease-out), transform .45s var(--ease-out); }
.wheel__mark { stroke: #fff; stroke-width: 2; stroke-linecap: round; filter: drop-shadow(0 0 3px rgba(255, 255, 255, .8)); }

/* световая волна по кольцу, пока ставка не собрана */
.wheel__sweep {
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(170, 125, 255, .5) 54deg, transparent 54deg);
  -webkit-mask: radial-gradient(closest-side, transparent 71%, #000 72%, #000 90%, transparent 91%);
  mask: radial-gradient(closest-side, transparent 71%, #000 72%, #000 90%, transparent 91%);
  animation: haloSpin 3.4s linear infinite;
}
.wheel.is-idle .wheel__sweep { opacity: 1; }

.wheel__center { position: absolute; inset: 22%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-align: center; }
.wheel__gift { width: 52%; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .55)); animation: float 4.4s ease-in-out infinite; transition: width .3s var(--ease-out), filter .4s; }
.wheel__gift--big { width: 74%; }
.wheel__ph { width: 46px; height: 46px; color: var(--ribbon); filter: drop-shadow(0 0 12px rgba(255, 200, 87, .55)); animation: float 4.4s ease-in-out infinite; }
.wheel__ph svg { width: 100%; height: 100%; }
.wheel__chance { margin-top: 2px; font: 34px/1 var(--font-display); text-shadow: 0 3px 18px rgba(0, 0, 0, .6); }
.wheel__mult { padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 800; white-space: nowrap; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.wheel__hint { margin-top: 6px; font-size: 12.5px; font-weight: 700; line-height: 1.3; color: var(--satin-2); }

/* курсор: яркая полоска поверх кольца + маленькое остриё снаружи */
.wheel__pointer { position: absolute; inset: 0; will-change: transform; pointer-events: none; }
.wheel__cursor {
  position: absolute; left: 50%; top: 3.6%; width: 8px; height: 11%; margin-left: -4px; border-radius: 4px;
  background: linear-gradient(180deg, #fff, #ffe9b8);
  box-shadow: 0 0 0 2px rgba(10, 6, 16, .9), 0 0 14px 3px rgba(255, 236, 190, .85);
  transition: background .3s, box-shadow .3s;
}
.wheel__tip {
  position: absolute; left: 50%; top: -3.4%; margin-left: -7px;
  border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 11px solid #fff;
  filter: drop-shadow(0 0 6px rgba(255, 236, 190, .9));
}
.wheel__trail {
  position: absolute; inset: 0; border-radius: 50%; opacity: 0; transition: opacity .4s;
  background: conic-gradient(from 290deg, transparent 0deg, rgba(255, 226, 160, .6) 70deg, transparent 70deg);
  -webkit-mask: radial-gradient(closest-side, transparent 71%, #000 72%, #000 90%, transparent 91%);
  mask: radial-gradient(closest-side, transparent 71%, #000 72%, #000 90%, transparent 91%);
}
.wheel.is-spin .wheel__trail { opacity: 1; }
.wheel.is-spin .wheel__glow { opacity: .45; }

.wheel.is-win .wheel__seg.is-on { stroke: var(--mint) !important; }
.wheel.is-win .wheel__lit { filter: drop-shadow(0 0 5px rgba(91, 227, 166, .9)); }
.wheel.is-win .wheel__zone { stroke: var(--mint); }
.wheel.is-win .wheel__cursor { background: linear-gradient(180deg, #fff, #b8ffdc); box-shadow: 0 0 0 2px rgba(10, 6, 16, .9), 0 0 18px 5px rgba(91, 227, 166, .9); }
.wheel.is-lose .wheel__cursor { background: linear-gradient(180deg, #fff, #ffc2cc); box-shadow: 0 0 0 2px rgba(10, 6, 16, .9), 0 0 18px 5px rgba(255, 92, 122, .9); }
.wheel.is-lose .wheel__gift { filter: grayscale(1) brightness(.5); }

.slots { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.slot { position: relative; border-radius: 20px; min-height: 132px; padding: 10px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; background: var(--velvet-2); box-shadow: inset 0 0 0 1px var(--line); text-align: left; }
.slot--empty { border: 1.5px dashed var(--line-2); box-shadow: none; align-items: center; justify-content: center; text-align: center; color: var(--satin-3); font-size: 13px; font-weight: 600; }
.slot__label { position: absolute; top: 9px; left: 11px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .7); z-index: 2; }
.slot__imgs { position: absolute; inset: 20px 10px 42px; display: flex; justify-content: center; align-items: center; }
.slot__imgs img { width: 62%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .45)); }
.slot__imgs img + img { margin-left: -30%; }
.slot__sum { position: relative; z-index: 2; display: flex; align-items: center; gap: 5px; font: 16px var(--font-display); }
.slot__sub { position: relative; z-index: 2; font-size: 11.5px; font-weight: 600; color: rgba(255, 255, 255, .7); }

.panel { margin-top: 14px; padding: 12px; border-radius: 20px; background: var(--velvet-2); box-shadow: inset 0 0 0 1px var(--line); }
.panel__head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.panel__head .seg { flex: 1; }
.range { width: 100%; accent-color: var(--cta-2); }

/* ───────── контракт («сейф») ───────── */
.ct-top { margin: 6px 0 10px; }
.ctm { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ctm__b {
  --mc: var(--mint); position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 10px 11px 9px; border-radius: 16px; text-align: left; line-height: 1.15;
  background: var(--velvet-2); box-shadow: inset 0 0 0 1px var(--line);
  transition: box-shadow .2s, background .2s, transform .15s var(--ease-out);
}
.ctm__b--medium { --mc: #5aa8ff; }
.ctm__b--hard { --mc: #ff5c7a; }
.ctm__b:active { transform: scale(.97); }
.ctm__b[disabled] { pointer-events: none; }
.ctm__risk { display: flex; gap: 3px; margin-bottom: 5px; }
.ctm__risk i { width: 13px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .1); }
.ctm__risk i.on { background: var(--mc); }
.ctm__b b { font-size: 13.5px; font-weight: 800; color: var(--satin-2); }
.ctm__b em { font: normal 15px var(--font-display); color: var(--satin-3); }
.ctm__b.on {
  background: radial-gradient(90% 90% at 0% 0%, rgba(255, 255, 255, .08), transparent 70%), var(--velvet-3);
  box-shadow: inset 0 0 0 1.5px var(--mc), 0 10px 22px -14px var(--mc);
}
.ctm__b.on .ctm__risk i.on { box-shadow: 0 0 8px -1px var(--mc); }
.ctm__b.on b { color: var(--satin); }
.ctm__b.on em { color: var(--mc); }

/* ── мусоровоз: корпус с петлями, лампы в обоймах, поручни, борт на верхних петлях, бампер, колёса ── */
.ct-hint {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 2px 4px 8px;
  font-size: 12px; font-weight: 600; color: var(--satin-3);
}
.ct-hint b { color: var(--satin); font-weight: 800; }

.truck { position: relative; padding: 12px 0 0; margin-bottom: 6px; }
.truck__hinges { position: absolute; left: 0; right: 0; top: 0; height: 18px; pointer-events: none; z-index: 1; }
.truck__hinges i {
  position: absolute; top: 0; width: 38px; height: 20px; border-radius: 7px 7px 2px 2px;
  background: linear-gradient(180deg, #58627a 0%, #343c4d 45%, #22283500 100%), #2a3140;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -1px 0 rgba(0, 0, 0, .4), 0 3px 5px rgba(0, 0, 0, .55);
}
.truck__hinges i::after {
  /* ось петли */
  content: ""; position: absolute; left: 9px; right: 9px; top: 5px; height: 5px; border-radius: 3px;
  background: linear-gradient(180deg, #9aa4b8, #4a5366); box-shadow: 0 1px 1px rgba(0, 0, 0, .6);
}
.truck__hinges i:first-child { left: 21%; } .truck__hinges i:last-child { right: 21%; }

.truck__body {
  position: relative; height: 258px; border-radius: 30px 30px 12px 12px; overflow: hidden; perspective: 760px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 7%),
    linear-gradient(90deg, #333c50 0%, #222937 12%, #1d2330 50%, #222937 88%, #333c50 100%);
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, .07), inset 0 -12px 22px rgba(0, 0, 0, .5),
    inset 0 2px 0 rgba(255, 255, 255, .12), 0 34px 54px -32px #000;
}
.truck__body::before {
  /* верхняя кромка кузова (рейка), на которую опирается борт */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 22px; z-index: 7; pointer-events: none;
  background: linear-gradient(180deg, #3c4559 0%, #2a3140 60%, rgba(30, 36, 48, 0) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
}

.truck__lamp {
  position: absolute; z-index: 6; width: 26px; height: 18px; border-radius: 6px;
  background: radial-gradient(circle at 40% 28%, #ffc6cd, #ff2b40 46%, #7a0b18 100%);
  box-shadow:
    0 0 0 3px #0a0c11, 0 0 0 4px rgba(255, 255, 255, .12),
    0 0 18px 4px rgba(255, 40, 60, .45), inset 0 -3px 4px rgba(0, 0, 0, .55), inset 0 2px 2px rgba(255, 255, 255, .35);
  transition: background .25s, box-shadow .25s;
}
.truck__lamp::after {
  /* блик на линзе */
  content: ""; position: absolute; left: 4px; top: 3px; width: 11px; height: 5px; border-radius: 50%;
  background: rgba(255, 255, 255, .35);
}
.truck__lamp--tl { left: 9px; top: 11px; } .truck__lamp--tr { right: 9px; top: 11px; }
.truck__lamp--bl { left: 9px; bottom: 11px; } .truck__lamp--br { right: 9px; bottom: 11px; }

.truck__grip {
  position: absolute; z-index: 6; top: 52px; bottom: 46px; width: 9px; border-radius: 6px;
  background: linear-gradient(90deg, #9aa4b8 0%, #4d5668 45%, #1c212c 100%);
  box-shadow: 0 4px 9px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -1px 0 rgba(0, 0, 0, .5);
}
.truck__grip::before, .truck__grip::after {
  /* кронштейны поручня */
  content: ""; position: absolute; left: -3px; width: 15px; height: 9px; border-radius: 3px;
  background: linear-gradient(180deg, #3b4355, #1f2430); box-shadow: 0 2px 3px rgba(0, 0, 0, .8);
}
.truck__grip::before { top: 8px; } .truck__grip::after { bottom: 8px; }
.truck__grip--l { left: 5px; } .truck__grip--r { right: 5px; }

.truck__bay {
  position: absolute; left: 20px; right: 20px; top: 24px; bottom: 16px; border-radius: 8px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(64% 46% at 50% 26%, #1b2030 0%, #0c0f16 62%, #06080c 100%);
  box-shadow: inset 0 0 40px 16px rgba(0, 0, 0, .9), 0 0 0 2px rgba(0, 0, 0, .7), 0 0 0 3px rgba(255, 255, 255, .05);
}
.truck__bay::before {
  /* пол кузова */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 24%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .04), transparent 70%);
}

.bay__spot {
  position: absolute; top: 12px; width: 46px; height: 8px; border-radius: 0 0 4px 4px; z-index: 1;
  background: linear-gradient(180deg, #fff7e0, #ffd489);
  box-shadow: 0 0 22px 8px rgba(255, 214, 140, .3), inset 0 1px 0 rgba(0, 0, 0, .3);
}
.bay__spot--l { left: 24%; } .bay__spot--r { right: 24%; }
.bay__spot::after {
  /* световой конус светит на заднюю стенку — под слотами (z-index ниже сетки) */
  content: ""; position: absolute; left: 50%; top: 100%; width: 132px; height: 190px; margin-left: -66px;
  background: linear-gradient(180deg, rgba(255, 226, 170, .16), transparent 74%);
  clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%);
  filter: blur(5px);
}
/* витрина: подарки на светящихся пьедесталах, пол в перспективе */
.bay__floor {
  position: absolute; left: -24%; right: -24%; bottom: -34px; height: 150px; pointer-events: none;
  transform-origin: 50% 100%; transform: perspective(320px) rotateX(58deg);
  background:
    repeating-linear-gradient(90deg, rgba(120, 160, 255, .2) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(0deg, rgba(120, 160, 255, .2) 0 1px, transparent 1px 30px),
    linear-gradient(180deg, transparent, rgba(80, 110, 200, .08));
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 55%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 55%, #000 100%);
}
.bay__slots { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px 6px; width: 100%; padding: 0 14px; }
.pod { position: relative; height: 76px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.pod__base {
  position: absolute; left: 50%; bottom: 3px; width: 48px; height: 15px; margin-left: -24px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03) 70%, transparent);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .13);
}
.pod b {
  position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); z-index: 1;
  font: 11px var(--font-display); color: rgba(255, 255, 255, .22); text-shadow: 0 1px 0 rgba(0, 0, 0, .8);
}
.pod.is-next .pod__base {
  box-shadow: inset 0 0 0 1.5px rgba(90, 160, 255, .75), 0 0 16px 2px rgba(61, 141, 255, .35);
  background: radial-gradient(closest-side, rgba(120, 180, 255, .55), rgba(61, 141, 255, .2) 60%, transparent 82%);
  animation: podPulse 1.8s ease-in-out infinite;
}
.pod.is-next b { bottom: 30px; font-size: 22px; color: rgba(160, 200, 255, .9); animation: podFloatX 2.4s ease-in-out infinite; }
@keyframes podFloatX { 0%, 100% { transform: translateX(-50%); } 50% { transform: translate(-50%, -4px); } }
@keyframes podPulse { 50% { box-shadow: inset 0 0 0 1.5px rgba(90, 160, 255, 1), 0 0 26px 6px rgba(61, 141, 255, .5); } }

.pod.is-filled { animation: podIn .45s var(--ease-out) backwards; animation-delay: var(--d); }
.pod.is-filled .pod__base {
  background: radial-gradient(closest-side, rgba(255, 255, 255, .6), var(--rc) 38%, transparent 80%);
  box-shadow: inset 0 0 0 1.5px var(--rc), 0 0 24px 6px var(--rc);
}
.pod__beam {
  position: absolute; left: 50%; bottom: 10px; width: 44px; height: 64px; margin-left: -22px; opacity: .45;
  background: linear-gradient(180deg, transparent, var(--rc)); clip-path: polygon(28% 0, 72% 0, 100% 100%, 0 100%);
  filter: blur(2px);
}
.pod.is-filled img {
  position: relative; z-index: 1; width: 50px; height: 50px; margin-bottom: 16px; object-fit: contain;
  filter: drop-shadow(0 5px 5px rgba(0, 0, 0, .35));
  animation: podFloat 3s ease-in-out infinite; animation-delay: var(--f);
}
@keyframes podFloat { 50% { transform: translateY(-4px); } }
@keyframes podIn { from { transform: translateY(18px) scale(.6); opacity: 0; } }

/* карточка выигрыша в кузове */
.bay__win { position: relative; display: flex; align-items: center; justify-content: center; }
.win__rays {
  position: absolute; left: 50%; top: 50%; width: 320px; height: 320px; margin: -160px 0 0 -160px; opacity: .22;
  background: repeating-conic-gradient(from 0deg, var(--rc) 0 4deg, transparent 4deg 19deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 14%, transparent 68%);
  mask-image: radial-gradient(closest-side, #000 14%, transparent 68%);
  animation: winSpin 18s linear infinite, fade .8s .5s backwards;
}
.win__pool {
  position: absolute; left: 50%; bottom: -16px; width: 186px; height: 28px; margin-left: -93px; border-radius: 50%;
  background: radial-gradient(closest-side, var(--rc), transparent 74%); opacity: .45; filter: blur(4px);
  animation: fade .8s .5s backwards;
}
@keyframes winSpin { to { transform: rotate(360deg); } }

.card3 {
  position: relative; width: 140px; height: 180px; border-radius: 16px; padding: 11px; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  background:
    radial-gradient(115% 66% at 50% 116%, var(--c1) 0%, transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, .12) 0%, transparent 22%),
    linear-gradient(180deg, #161226 0%, var(--c2) 105%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .22), inset 0 -26px 44px -22px var(--rc),
    0 24px 38px -14px rgba(0, 0, 0, .95), 0 0 50px -8px var(--rc);
  animation: card3In .5s .34s var(--ease-out) backwards, card3Float 4.5s 1.1s ease-in-out infinite;
}
.card3::before {
  /* мягкий ореол под подарком */
  content: ""; position: absolute; left: 50%; top: 40%; width: 136px; height: 136px; margin: -68px 0 0 -68px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .2), transparent 64%);
}
.card3__seal {
  position: absolute; right: 9px; top: 9px; width: 17px; height: 17px; border-radius: 50%;
  background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3);
}
.card3__seal::after {
  content: ""; position: absolute; left: 4px; top: 5px; width: 8px; height: 4px;
  border-left: 1.6px solid rgba(255, 255, 255, .85); border-bottom: 1.6px solid rgba(255, 255, 255, .85);
  transform: rotate(-45deg);
}
.card3 img {
  position: absolute; left: 50%; top: 39%; width: 104px; height: 104px; margin: -52px 0 0 -52px;
  object-fit: contain; filter: drop-shadow(0 12px 15px rgba(0, 0, 0, .55));
}
.card3__meta { position: relative; z-index: 1; }
.card3__meta span {
  display: block; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: rgba(255, 255, 255, .62); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.card3__meta b { display: flex; align-items: center; gap: 5px; margin-top: 2px; font: 19px var(--font-display); text-shadow: 0 2px 8px rgba(0, 0, 0, .5); }
.card3__meta .ton-ico { width: 14px; height: 14px; }
@keyframes card3In { from { transform: translateY(26px) scale(.82); opacity: 0; } }
@keyframes card3Float { 50% { transform: translateY(-5px); } }

/* задний борт на верхних петлях: по умолчанию поднят (кузов открыт) */
.truck__gate {
  position: absolute; left: 20px; right: 20px; top: 24px; bottom: 16px; z-index: 5; pointer-events: none;
  display: flex; justify-content: space-evenly; align-items: stretch; padding: 24px 5%;
  border-radius: 8px; transform-origin: 50% 0; transform: rotateX(126deg);
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(255, 255, 255, .08), transparent 60%),
    linear-gradient(180deg, #2f3749 0%, #232a3a 52%, #1a1f2b 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .1), inset 0 3px 0 rgba(255, 255, 255, .14),
    inset 0 -18px 30px rgba(0, 0, 0, .55), 0 10px 20px rgba(0, 0, 0, .6);
}
.truck__gate i {
  /* рёбра жёсткости борта */
  width: 11%; border-radius: 9px;
  background: linear-gradient(90deg, #171c26 0%, #2b3242 22%, #414a5e 50%, #2b3242 78%, #151a24 100%);
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, .12), inset -1px 0 0 rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 0, 0, .45), 0 3px 5px rgba(0, 0, 0, .5);
}

.truck__bumper {
  position: relative; z-index: 2; height: 30px; margin: -8px 4px 0; border-radius: 5px 5px 12px 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .16), transparent 24%, transparent 74%, rgba(0, 0, 0, .5)),
    repeating-linear-gradient(-52deg, #8c1f2c 0 17px, #b6bbc4 17px 34px);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .55), 0 16px 26px -12px #000;
  filter: saturate(.72) brightness(.84);
}
.truck__bumper::before {
  /* стальная кромка над бампером */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; border-radius: 5px 5px 0 0;
  background: linear-gradient(180deg, #5e6880, #2c3341); box-shadow: 0 1px 0 rgba(0, 0, 0, .6);
}
.truck__bumper::after {
  /* потёртости */
  content: ""; position: absolute; inset: 6px 0 0; opacity: .5;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .12) 0 2px, transparent 2px 6px), radial-gradient(40% 80% at 20% 60%, rgba(0, 0, 0, .3), transparent), radial-gradient(30% 80% at 75% 40%, rgba(0, 0, 0, .25), transparent);
}
.truck__wheels { position: relative; height: 18px; margin: 0 34px; }
.truck__wheels i {
  position: absolute; top: -4px; width: 78px; height: 22px; border-radius: 0 0 14px 14px;
  background: repeating-linear-gradient(90deg, #0b0d12 0 7px, #1c2028 7px 11px), #0f1218;
  box-shadow: inset 0 -5px 7px rgba(0, 0, 0, .85), 0 6px 10px -4px #000;
}
.truck__wheels i:first-child { left: 0; } .truck__wheels i:last-child { right: 0; }
.truck__shadow {
  position: absolute; left: 4%; right: 4%; bottom: -10px; height: 26px; border-radius: 50%; z-index: -1;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .8), transparent); filter: blur(5px);
}

.truck.is-locking .truck__lamp { animation: lampBlink .26s ease-in-out infinite; }
.truck.is-locking .truck__body { animation: contShake .6s .6s ease-in-out; }
.truck.is-locking .truck__gate { animation: gateClose .6s var(--ease-out) forwards; }
.truck.is-open .truck__gate { animation: gateOpen .75s .05s var(--ease-out) forwards; }
.truck.is-open .truck__lamp {
  background: radial-gradient(circle at 40% 28%, #d4ffe9, #2ed28c 46%, #0b5738 100%);
  box-shadow: 0 0 0 3px #0a0c11, 0 0 0 4px rgba(255, 255, 255, .12), 0 0 18px 4px rgba(46, 210, 140, .5), inset 0 -3px 4px rgba(0, 0, 0, .5), inset 0 2px 2px rgba(255, 255, 255, .35);
}
@keyframes lampBlink { 50% { box-shadow: 0 0 0 3px #0a0c11, 0 0 0 4px rgba(255, 255, 255, .12), 0 0 28px 10px rgba(255, 45, 70, .95), inset 0 -3px 4px rgba(0, 0, 0, .55); filter: brightness(1.8); } }
@keyframes gateClose { from { transform: rotateX(126deg); } to { transform: rotateX(0deg); } }
@keyframes gateOpen { from { transform: rotateX(0deg); } to { transform: rotateX(126deg); } }
@keyframes contShake { 0%, 100% { translate: 0; } 14% { translate: -7px 0; } 34% { translate: 7px 0; } 54% { translate: -5px 0; } 76% { translate: 3px 0; } }

.ct-panel--won { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ct-panel--won .btn { height: 48px; }


.ct-panel { margin-top: 12px; padding: 12px; border-radius: 20px; background: var(--velvet-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.ct-panel__row { display: flex; align-items: center; gap: 10px; }
.ct-panel__sum { flex: 1; min-width: 0; }
.ct-panel__sum span { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--satin-3); }
.ct-panel__sum b { display: flex; align-items: center; gap: 7px; margin-top: 3px; font: 26px var(--font-display); }
.ct-panel__sum .ton-ico { width: 18px; height: 18px; }
.ct-go { flex: none; height: 48px; padding: 0 18px; font-size: 14px; }
.ct-panel__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 11px; }
.ct-stat { padding: 8px 10px; border-radius: 12px; background: rgba(0, 0, 0, .26); box-shadow: inset 0 0 0 1px var(--line); }
.ct-stat span { display: block; font-size: 9.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--satin-3); }
.ct-stat b { display: block; margin-top: 3px; font: 14px var(--font-display); white-space: nowrap; }
.ct-stat--up b { color: var(--mint); }
.ct-top5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 10px; }
.ct-top5__i { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px 6px; border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.ct-top5__i img { width: 36px; height: 36px; object-fit: contain; filter: drop-shadow(0 5px 8px rgba(0, 0, 0, .5)); }
.ct-top5__i b { font-size: 11px; font-weight: 800; }
.ct-top5__i span { font-size: 10px; font-weight: 700; color: rgba(255, 255, 255, .7); }
.ct-inv { margin-top: 18px; }
.ct-inv__head { display: flex; align-items: center; justify-content: space-between; }

/* ───────── инвентарь ───────── */
.invsum { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px; border-radius: 20px; margin: 6px 0 12px; }
.invsum b { font: 22px var(--font-display); display: flex; align-items: center; gap: 6px; }
.actionbar { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--tab-h) + var(--safe-b) + 22px); width: calc(100% - 20px); max-width: 540px; z-index: 35; display: flex; gap: 8px; padding: 8px; border-radius: 20px; background: rgba(44, 31, 64, .95); backdrop-filter: blur(16px); box-shadow: 0 20px 40px -10px #000, inset 0 0 0 1px var(--line-2); animation: rise .3s var(--ease-out); }
.actionbar .btn { flex: 1; height: 46px; padding: 0 10px; font-size: 14px; }
@keyframes rise { from { transform: translate(-50%, 30px); opacity: 0; } }
.wd-status { position: absolute; left: 6px; right: 6px; top: 6px; padding: 3px 6px; border-radius: 8px; font-size: 10px; font-weight: 800; text-align: center; background: rgba(8, 4, 14, .7); color: var(--cta-text); }

.list { display: grid; gap: 8px; }
.row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; background: var(--velvet-2); box-shadow: inset 0 0 0 1px var(--line); }
.row__ico { width: 44px; height: 44px; border-radius: 12px; flex: none; overflow: hidden; display: grid; place-items: center; }
.row__ico img { width: 80%; }
.row__main { flex: 1; min-width: 0; }
.row__title { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row__sub { font-size: 12.5px; color: var(--satin-3); }
.row__end { text-align: right; font-weight: 800; white-space: nowrap; }
.plus { color: var(--mint); }
.minus { color: var(--satin-3); }
.status { display: inline-block; padding: 2px 8px; border-radius: 8px; font-size: 11px; font-weight: 800; background: var(--velvet-4); color: var(--satin-2); }
.status--sent { background: rgba(91, 227, 166, .15); color: var(--mint); }
.status--manual, .status--queued, .status--processing { background: var(--cta-soft); color: var(--cta-text); }
.status--refunded { background: rgba(255, 92, 122, .14); color: var(--danger); }

/* ───────── профиль ───────── */
.ph {
  position: relative; overflow: hidden; margin-top: 6px; padding: 16px; border-radius: 24px;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(61, 141, 255, .26), transparent 55%),
    radial-gradient(90% 80% at 100% 0%, rgba(160, 107, 255, .22), transparent 60%),
    linear-gradient(160deg, #1e1a3a 0%, #171229 60%, #130e22 100%);
  box-shadow: inset 0 0 0 1px rgba(140, 170, 255, .18), 0 24px 40px -30px #000;
}
.ph__glow {
  position: absolute; right: -60px; top: -80px; width: 220px; height: 220px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(61, 141, 255, .32), transparent 65%);
}
.ph__top { position: relative; display: flex; align-items: center; gap: 14px; }
.ph__ava {
  flex: none; width: 76px; height: 76px; border-radius: 50%; padding: 3px;
  background: conic-gradient(from 200deg, #3d8dff, #a06bff, #ff6ab3, #ffc857, #3d8dff);
  box-shadow: 0 10px 24px -10px rgba(61, 141, 255, .9);
}
.ph__ava .avatar { width: 100%; height: 100%; font-size: 26px; box-shadow: 0 0 0 3px #171229; }
.ph__id { min-width: 0; }
.ph__name { font: 21px var(--font-display); line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph__handle { margin-top: 3px; font-size: 13px; font-weight: 600; color: var(--satin-2); }
.ph__meta { display: block; margin-top: 6px; padding: 0; text-align: left; font-size: 11.5px; font-weight: 600; color: var(--satin-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ph__bal {
  position: relative; display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 12px 12px 12px 14px; border-radius: 18px;
  background: rgba(8, 5, 16, .45); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.ph__sum { flex: 1; min-width: 0; }
.ph__sum span { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--satin-3); }
.ph__sum b { display: flex; align-items: center; gap: 7px; margin-top: 2px; font: 24px var(--font-display); white-space: nowrap; overflow: hidden; }
.ph__sum .ton-ico { width: 17px; height: 17px; }
.ph__plus {
  flex: none; width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(180deg, var(--cta-2), var(--cta));
  box-shadow: 0 10px 22px -10px var(--cta), inset 0 1px 0 rgba(255, 255, 255, .35);
  transition: transform .15s var(--ease-out);
}
.ph__plus:active { transform: scale(.94); }
.ph__plus svg { width: 22px; height: 22px; }

.pwd {
  display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 12px 14px 12px 12px; border-radius: 18px;
  background: linear-gradient(110deg, rgba(91, 227, 166, .1), transparent 55%), var(--velvet-2); box-shadow: inset 0 0 0 1px var(--line);
}
.pwd__ico { flex: none; width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; color: var(--mint); background: rgba(91, 227, 166, .14); }
.pwd__ico svg { width: 21px; height: 21px; }
.pwd__txt { flex: 1; min-width: 0; }
.pwd__txt b { display: block; font-size: 15px; font-weight: 800; }
.pwd__txt small { display: block; margin-top: 1px; font-size: 12px; font-weight: 600; color: var(--satin-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pwd__sum { flex: none; display: flex; align-items: center; gap: 6px; font: 20px var(--font-display); white-space: nowrap; }
.pwd__sum .ton-ico { width: 15px; height: 15px; }

.pmenu { margin-top: 12px; border-radius: 20px; overflow: hidden; background: var(--velvet-2); box-shadow: inset 0 0 0 1px var(--line); }
.pmenu__row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 12px 12px 14px; text-align: left; }
.pmenu__row + .pmenu__row { box-shadow: inset 0 1px 0 var(--line); }
.pmenu__row:active { background: rgba(255, 255, 255, .04); }
.pmenu__ico { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; }
.pmenu__ico svg { width: 20px; height: 20px; }
.pmenu__ico--blue { background: rgba(61, 141, 255, .16); color: #8cc0ff; }
.pmenu__ico--mint { background: rgba(91, 227, 166, .14); color: var(--mint); }
.pmenu__ico--violet { background: rgba(160, 107, 255, .16); color: #c7a8ff; }
.pmenu__ico--gold { background: rgba(255, 200, 87, .14); color: var(--ribbon); }
.pmenu__txt { flex: 1; min-width: 0; }
.pmenu__txt b { display: block; font-size: 15px; font-weight: 700; }
.pmenu__txt small { display: block; margin-top: 1px; font-size: 12px; font-weight: 600; color: var(--satin-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pmenu__chev { flex: none; color: var(--satin-3); display: grid; }
.pmenu__chev svg { width: 18px; height: 18px; }

/* промо партнёрки в профиле */
.rpromo {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 108px;
  margin-top: 12px; padding: 14px 12px 14px 14px; border-radius: 22px; text-align: left;
  background: radial-gradient(80% 120% at 100% 50%, rgba(61, 141, 255, .45), transparent 62%), linear-gradient(115deg, #171a38 0%, #1b2352 55%, #2340a0 100%);
  box-shadow: inset 0 0 0 1px rgba(120, 170, 255, .25), 0 20px 36px -26px #000;
}
.rpromo:active { transform: scale(.985); }
.rpromo__txt { position: relative; z-index: 2; flex: 1; min-width: 0; max-width: 64%; }
.rpromo__tag {
  display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 7px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #cfe2ff; background: rgba(61, 141, 255, .25);
}
.rpromo__tag svg { width: 13px; height: 13px; }
.rpromo__ttl { margin-top: 8px; font: 18px var(--font-display); line-height: 1.1; white-space: nowrap; }
.rpromo__sub { margin-top: 4px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: rgba(220, 232, 255, .78); }
.rpromo__sub b { display: inline-flex; align-items: center; gap: 3px; color: #fff; }
.rpromo__sub .ton-ico { width: 12px; height: 12px; }
.rpromo__pics { position: absolute; right: 28px; top: 50%; width: 124px; height: 100px; margin-top: -50px; z-index: 1; pointer-events: none; }
.rpromo__g { position: absolute; object-fit: contain; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .55)); }
.rpromo__g--0 { width: 66px; height: 66px; right: 20px; top: 16px; z-index: 2; animation: podFloat 3.2s ease-in-out infinite; }
.rpromo__g--1 { width: 38px; height: 38px; right: 70px; top: 0; transform: rotate(-12deg); opacity: .92; }
.rpromo__g--2 { width: 40px; height: 40px; right: 0; top: 56px; transform: rotate(10deg); opacity: .92; }
.rpromo__chev { position: relative; z-index: 2; flex: none; margin-left: auto; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: rgba(255, 255, 255, .1); }
.rpromo__chev svg { width: 16px; height: 16px; }

/* ───────── партнёрка ───────── */
.rhero {
  position: relative; overflow: hidden; min-height: 176px; padding: 18px 16px; border-radius: 24px;
  background:
    radial-gradient(90% 90% at 100% 20%, rgba(61, 141, 255, .5), transparent 60%),
    radial-gradient(70% 70% at 0% 100%, rgba(160, 107, 255, .3), transparent 60%),
    linear-gradient(150deg, #161a3a, #1a1f4d 50%, #233a93);
  box-shadow: inset 0 0 0 1px rgba(120, 170, 255, .25), 0 24px 40px -28px #000;
}
.rhero__tag {
  position: relative; z-index: 2; display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 8px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #cfe2ff; background: rgba(61, 141, 255, .28);
}
.rhero__ttl { position: relative; z-index: 2; max-width: 60%; margin: 12px 0 0; font: 23px/1.1 var(--font-display); }
.rhero__sub { position: relative; z-index: 2; max-width: 62%; margin: 8px 0 0; font-size: 12.5px; font-weight: 600; line-height: 1.4; color: rgba(220, 232, 255, .8); }
.rhero__sub b { color: #fff; }
.rhero__pics { position: absolute; right: -6px; top: 0; bottom: 0; width: 44%; z-index: 1; pointer-events: none; }
.rhero__g { position: absolute; object-fit: contain; filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .55)); }
.rhero__g--0 { width: 100px; height: 100px; right: 22px; top: 42px; z-index: 2; animation: podFloat 3.4s ease-in-out infinite; }
.rhero__g--1 { width: 60px; height: 60px; right: 96px; top: 14px; transform: rotate(-14deg); }
.rhero__g--2 { width: 54px; height: 54px; right: 4px; bottom: 10px; transform: rotate(12deg); }

.rlink { margin-top: 10px; padding: 13px; border-radius: 20px; background: var(--velvet-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.rlink__k { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--satin-3); }
.rlink__v {
  margin-top: 7px; padding: 11px 12px; border-radius: 12px; font: 600 13px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: #bfdcff; background: rgba(0, 0, 0, .28); box-shadow: inset 0 0 0 1px rgba(90, 160, 255, .25);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rlink__acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.rlink__acts .btn { height: 44px; padding: 0 10px; font-size: 13.5px; gap: 7px; border-radius: 13px; }
.rlink__acts .btn svg { width: 17px; height: 17px; }

.rearn {
  display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 12px 12px 12px 14px; border-radius: 18px;
  background: linear-gradient(110deg, rgba(91, 227, 166, .13), transparent 55%), var(--velvet-2); box-shadow: inset 0 0 0 1px rgba(91, 227, 166, .24);
}
.rearn__l { flex: 1; min-width: 0; }
.rearn__l span { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--satin-3); }
.rearn__l b { display: flex; align-items: center; gap: 6px; margin-top: 2px; font: 22px var(--font-display); }
.rearn__l .ton-ico { width: 16px; height: 16px; }
.rearn__btn {
  flex: none; height: 44px; padding: 0 22px; font-size: 14px; border-radius: 13px; color: #06301f;
  background: linear-gradient(180deg, #9dffd4, var(--mint)); box-shadow: 0 10px 22px -12px rgba(91, 227, 166, .9), inset 0 1px 0 rgba(255, 255, 255, .6);
}
.rearn__btn[disabled] { color: var(--satin-3); background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px var(--line); }

.rstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.rstats > div { padding: 11px 8px; border-radius: 16px; text-align: center; background: var(--velvet-2); box-shadow: inset 0 0 0 1px var(--line); }
.rstats b { display: flex; align-items: center; justify-content: center; gap: 4px; font: 19px var(--font-display); }
.rstats .ton-ico { width: 13px; height: 13px; }
.rstats span { display: block; margin-top: 2px; font-size: 11px; font-weight: 700; color: var(--satin-3); }

.rtier {
  margin-top: 10px; padding: 14px; border-radius: 20px;
  background: linear-gradient(135deg, var(--tbg), transparent 62%), var(--velvet-2); box-shadow: inset 0 0 0 1px var(--tline);
}
.rtier--bronze { --tc: #e2a06a; --tbg: rgba(226, 160, 106, .16); --tline: rgba(226, 160, 106, .3); }
.rtier--silver { --tc: #d4dbe6; --tbg: rgba(212, 219, 230, .13); --tline: rgba(212, 219, 230, .28); }
.rtier--gold { --tc: #ffc857; --tbg: rgba(255, 200, 87, .16); --tline: rgba(255, 200, 87, .32); }
.rtier--diamond { --tc: #7fd4ff; --tbg: rgba(127, 212, 255, .16); --tline: rgba(127, 212, 255, .32); }
.rtier__head { display: flex; align-items: center; gap: 12px; }
.rtier__medal { flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 26px; background: rgba(0, 0, 0, .25); box-shadow: inset 0 0 0 1px var(--tline); }
.rtier__now b { display: block; font: 17px var(--font-display); color: var(--tc); }
.rtier__now small { display: block; margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--satin-3); }
.rtier__bar { height: 8px; margin-top: 13px; border-radius: 6px; overflow: hidden; background: rgba(255, 255, 255, .07); }
.rtier__bar i { display: block; height: 100%; min-width: 8px; border-radius: 6px; background: linear-gradient(90deg, var(--tc), #fff); box-shadow: 0 0 12px var(--tc); transition: width .6s var(--ease-out); }
.rtier__hint { margin-top: 7px; font-size: 12px; font-weight: 600; color: var(--satin-2); }
.rtier__hint b { color: var(--satin); }
.rtier__ladder { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 12px; }
.rtier__step { padding: 8px 4px 7px; border-radius: 12px; text-align: center; background: rgba(0, 0, 0, .2); box-shadow: inset 0 0 0 1px var(--line); opacity: .5; }
.rtier__step i { display: block; font-style: normal; font-size: 17px; }
.rtier__step b { display: block; margin-top: 2px; font: 13px var(--font-display); }
.rtier__step span { display: block; font-size: 10px; font-weight: 700; color: var(--satin-3); }
.rtier__step.is-on { opacity: 1; }
.rtier__step.is-cur { background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1.5px var(--tc), 0 0 16px -6px var(--tc); }
.rtier__note { margin-top: 10px; font-size: 11px; font-weight: 600; color: var(--satin-3); }

.rby {
  display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 11px 14px; border-radius: 16px;
  font-size: 13px; font-weight: 600; color: var(--satin-2); background: rgba(160, 107, 255, .1); box-shadow: inset 0 0 0 1px rgba(160, 107, 255, .25);
}
.rby svg { flex: none; width: 18px; height: 18px; color: #c7a8ff; }
.rby b { color: var(--satin); }
.rsteps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: rs; }
.rsteps li { counter-increment: rs; position: relative; padding: 12px 14px 12px 52px; border-radius: 16px; background: var(--velvet-2); box-shadow: inset 0 0 0 1px var(--line); }
.rsteps li::before {
  content: counter(rs); position: absolute; left: 12px; top: 50%; width: 28px; height: 28px; margin-top: -14px; border-radius: 9px;
  display: grid; place-items: center; font: 14px var(--font-display); color: #fff;
  background: linear-gradient(180deg, var(--cta-2), var(--cta)); box-shadow: 0 6px 14px -6px var(--cta);
}
.rsteps b { display: block; font-size: 14px; }
.rsteps span { display: block; margin-top: 2px; font-size: 12px; font-weight: 600; line-height: 1.35; color: var(--satin-3); }
.rref--on { color: var(--mint); font-weight: 700; }
.rempty { padding: 22px 18px; border-radius: 18px; text-align: center; font-size: 12.5px; font-weight: 600; line-height: 1.45; color: var(--satin-3); background: var(--velvet-2); box-shadow: inset 0 0 0 1px var(--line); }
.rempty b { display: block; margin-bottom: 4px; font: 16px var(--font-display); color: var(--satin); }

/* бонус приглашённому в окне пополнения */
.dep-bonus {
  display: flex; align-items: center; gap: 10px; margin: 2px 0 12px; padding: 10px 12px; border-radius: 14px;
  background: linear-gradient(110deg, rgba(91, 227, 166, .16), rgba(91, 227, 166, .04)); box-shadow: inset 0 0 0 1px rgba(91, 227, 166, .3);
}
.dep-bonus > b { flex: none; font: 16px var(--font-display); color: var(--mint); }
.dep-bonus span { font-size: 12px; font-weight: 600; line-height: 1.35; color: var(--satin-2); }
.dep-bonus span b { color: var(--mint); }

/* ── рейкбек: карта с фишками ── */
.rake {
  position: relative; overflow: hidden; margin-top: 12px; padding: 16px; border-radius: 22px; min-height: 164px;
  background:
    radial-gradient(90% 110% at 104% 26%, rgba(255, 92, 170, .55) 0%, rgba(190, 26, 105, .42) 26%, transparent 62%),
    linear-gradient(118deg, #1b1026 0%, #2a1236 46%, #4a1444 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 120, 180, .2), 0 22px 38px -28px #000;
}
.rake::after {
  /* мягкая виньетка слева, чтобы текст читался поверх свечения */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, rgba(12, 5, 16, .72) 0%, rgba(12, 5, 16, .3) 42%, transparent 70%);
}
.rake__ttl {
  position: relative; z-index: 2; font: 22px var(--font-display); letter-spacing: .01em; text-transform: uppercase;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .6);
}
.rake__ttl i { font-style: normal; color: rgba(255, 255, 255, .5); }
.rake__sub {
  position: relative; z-index: 2; max-width: 63%; margin-top: 6px;
  font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, .6);
}

/* стопка фишек справа */
.rake__chips { position: absolute; right: 2px; top: 50%; width: 130px; height: 136px; margin-top: -84px; z-index: 1; }
.chip3 { position: absolute; display: grid; place-items: center; }
.chip3--face {
  left: 17px; top: 4px; width: 96px; height: 96px; border-radius: 50%;
  background:
    repeating-conic-gradient(from 7deg, rgba(255, 228, 242, .9) 0 6deg, transparent 6deg 30deg),
    radial-gradient(circle at 36% 28%, #ff95c7, #e01f75 52%, #7e0839 100%);
  box-shadow: 0 16px 32px -12px rgba(224, 31, 117, .85), inset 0 -8px 16px rgba(60, 0, 26, .5);
  transform: rotate(-9deg);
}
.chip3--face::after {
  content: ""; position: absolute; inset: 13px; border-radius: 50%;
  background: radial-gradient(circle at 38% 30%, #ff9ccb, #c41764 74%);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .26), inset 0 -4px 10px rgba(80, 0, 36, .5);
}
.chip3--face b {
  position: relative; z-index: 2; font: 21px var(--font-display); color: #fff;
  text-shadow: 0 2px 8px rgba(110, 0, 48, .9), 0 0 16px rgba(255, 150, 200, .5);
}
.chip3--s1, .chip3--s2, .chip3--s3 {
  left: 24px; width: 82px; height: 19px; border-radius: 50%;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .22) 0 4px, transparent 4px 13px),
    linear-gradient(180deg, #ff77b2 0%, #c41764 42%, #5c052b 100%);
  box-shadow: 0 6px 12px -6px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .3);
}
.chip3--s1 { bottom: 30px; }
.chip3--s2 { bottom: 17px; opacity: .9; }
.chip3--s3 { bottom: 4px; opacity: .78; }

/* нижняя плашка: сумма + кнопка */
.rake__bar {
  position: relative; z-index: 3; display: flex; align-items: center; gap: 10px; width: 100%;
  margin-top: 18px; padding: 9px 9px 9px 13px; border-radius: 15px;
  background: rgba(14, 5, 18, .62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
}
.rake__bar-l { flex: 1; min-width: 0; }
.rake__bar-l span { display: block; font-size: 10.5px; font-weight: 700; color: rgba(255, 255, 255, .58); }
.rake__bar-l b { display: flex; align-items: center; gap: 6px; margin-top: 2px; font: 19px var(--font-display); }
.rake__bar-l .ton-ico { width: 14px; height: 14px; }
.rake__btn {
  flex: none; height: 40px; padding: 0 17px; border-radius: 12px; font-size: 13px; color: rgba(255, 255, 255, .45);
  background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
}
.rake.is-ready .rake__btn {
  color: #47061f; background: linear-gradient(180deg, #ffc4de, #ff5ca6 52%, #e01f75);
  box-shadow: 0 10px 22px -10px rgba(255, 92, 166, .95), inset 0 1px 0 rgba(255, 255, 255, .6);
}
.rake.is-ready .rake__bar-l b { color: #ff9ccb; text-shadow: 0 0 20px rgba(255, 92, 166, .5); }
.rake.is-ready .chip3--face { animation: chipBob 3.6s ease-in-out infinite; }
@keyframes chipBob { 50% { transform: rotate(-9deg) translateY(-6px); } }

/* ── утешительный кейс ── */
.fcr__tag {
  position: relative; padding: 5px 13px; border-radius: 999px; color: #06301f;
  font: 800 10px var(--font-ui); letter-spacing: .16em; text-transform: uppercase;
  background: linear-gradient(90deg, #9dffd4, var(--mint)); box-shadow: 0 8px 22px -8px rgba(91, 227, 166, .9);
}
.fcr__ttl { position: relative; margin-top: 12px; font: 26px var(--font-display); text-align: center; }
.fcr__sub { position: relative; margin-top: 5px; font-size: 12.5px; font-weight: 600; color: var(--satin-3); text-align: center; }
.fcr__reel {
  position: relative; width: 100%; max-width: 420px; margin-top: 20px; border-radius: 22px; overflow: hidden;
  background: linear-gradient(180deg, #120c1f, #0b0714);
  box-shadow: inset 0 0 0 1px rgba(91, 227, 166, .3), 0 24px 44px -24px #000;
}
.fcr__reel .roulette { margin: 0; padding: 16px 0; }
.fcr__reel .roulette::before { background: linear-gradient(90deg, #100a1c, transparent); }
.fcr__reel .roulette::after { background: linear-gradient(-90deg, #100a1c, transparent); }
.fcr__reel .roulette__needle::before { border-top-color: var(--mint); filter: drop-shadow(0 2px 6px rgba(91, 227, 166, .8)); }
.fcr__reel .roulette__needle::after { border-bottom-color: var(--mint); filter: drop-shadow(0 -2px 6px rgba(91, 227, 166, .8)); }
.fcr__reel .roulette__line { background: linear-gradient(transparent, rgba(91, 227, 166, .9), transparent); }
.fcr__reel .gift.is-hit { box-shadow: inset 0 0 0 2px var(--mint), 0 0 30px -4px rgba(91, 227, 166, .9); }
.fcr__wait {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: 18px;
  font: 800 11px var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--mint);
}
.fcr__wait i { width: 5px; height: 5px; border-radius: 50%; background: var(--mint); animation: fcDot 1s infinite; }
.fcr__wait i:nth-child(2) { animation-delay: .15s; }
.fcr__wait i:nth-child(3) { animation-delay: .3s; margin-right: 5px; }
@keyframes fcDot { 0%, 60%, 100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; word-break: break-all; color: var(--satin-2); }

/* ───────── нижний лист ───────── */
.sheet-wrap { position: fixed; inset: 0; z-index: 70; display: flex; align-items: flex-end; justify-content: center; background: rgba(8, 4, 14, .6); backdrop-filter: blur(4px); animation: fade .2s; }
.sheet { width: 100%; max-width: 560px; max-height: 92vh; overflow-y: auto; padding: 8px 16px calc(20px + var(--safe-b)); border-radius: 28px 28px 0 0; background: var(--velvet-1); box-shadow: inset 0 1px 0 var(--line-2), 0 -30px 60px -20px #000; animation: sheetUp .35s var(--ease-out); }
@keyframes sheetUp { from { transform: translateY(100%); } }
.sheet__grab { width: 40px; height: 4px; border-radius: 2px; background: var(--velvet-4); margin: 4px auto 12px; }
.sheet__title { font: 20px var(--font-display); margin: 0 0 14px; }

.amounts { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 10px 0; }
.amounts button { height: 40px; border-radius: 12px; background: var(--velvet-2); box-shadow: inset 0 0 0 1px var(--line); font-weight: 800; }
.amounts button.on { background: var(--cta-soft); box-shadow: inset 0 0 0 1px var(--cta-line); color: var(--cta-text); }
.steps { counter-reset: s; display: grid; gap: 10px; margin: 6px 0 14px; }
.steps li { list-style: none; counter-increment: s; display: flex; gap: 12px; align-items: flex-start; }
.steps li::before { content: counter(s); flex: none; width: 26px; height: 26px; border-radius: 9px; display: grid; place-items: center; background: var(--cta-soft); color: var(--cta-text); font-weight: 800; font-size: 13px; }
.steps { padding: 0; }

/* ───────── уведомления ───────── */
.toasts { position: fixed; left: 50%; top: calc(10px + env(safe-area-inset-top)); transform: translateX(-50%); z-index: 100; display: grid; gap: 8px; width: calc(100% - 32px); max-width: 420px; pointer-events: none; }
/* уведомление = карточка как в боте: цветная плашка-иконка, заголовок, серое пояснение, сумма справа */
.toast { pointer-events: auto; display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 11px 14px 11px 11px; border-radius: 18px;
  background: rgba(38, 38, 43, .97); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .9), inset 0 0 0 1px rgba(255, 255, 255, .07);
  color: #fff; font-size: 14px; font-weight: 600; animation: toastIn .4s var(--ease-out); }
@keyframes toastIn { from { transform: translateY(-16px) scale(.97); opacity: 0; } }
.toast__ico { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; color: #fff; overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); }
.toast__ico svg { width: 21px; height: 21px; }
.toast__ico--ok { background: #30c15a; }
.toast__ico--error { background: #ff453a; }
.toast__ico--info { background: #2f8cff; }
.toast__ico--ton { border-radius: 50%;
  background: radial-gradient(110% 80% at 30% 16%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 38%),
    radial-gradient(circle, #3cb2ff 0, #0f86ea 50%, #0a62c8 62%, transparent 64%),
    conic-gradient(from 210deg, #c3e6ff, #1c5fd2 18%, #8fd0ff 36%, #0c3c9e 56%, #a5dbff 78%, #c3e6ff); }
.toast__ico--stars { background: linear-gradient(180deg, #ffd65a, #f59a0c); }
.toast__ico--gift { background: #8b5cf6; }
.toast--rich .toast__ico { width: 40px; height: 40px; border-radius: 12px; }
.toast--rich .toast__ico--ton { border-radius: 50%; }
.toast--rich .toast__ico svg { width: 21px; height: 21px; }
.toast__ico img { width: 86%; height: 86%; object-fit: contain; }
.toast__body { flex: 1; min-width: 0; }
.toast__title { font-size: 15px; font-weight: 700; line-height: 1.25; }
.toast__text { margin-top: 2px; font-size: 13px; font-weight: 500; line-height: 1.3; color: #8e8e98; }
.toast__amount { flex: none; font-size: 16px; font-weight: 800; color: #3ddc84; white-space: nowrap; }

.empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 34px 20px 30px; color: var(--satin-3); }
.empty__art {
  position: relative; width: 84px; height: 84px; margin-bottom: 18px; border-radius: 26px; display: grid; place-items: center; color: #8cc0ff;
  background: radial-gradient(circle at 50% 32%, rgba(61, 141, 255, .3), rgba(61, 141, 255, .06) 72%);
  box-shadow: inset 0 0 0 1px rgba(90, 160, 255, .32), 0 18px 36px -18px rgba(61, 141, 255, .85);
  animation: podFloat 3.2s ease-in-out infinite;
}
.empty__art svg { width: 38px; height: 38px; }
.empty b { display: block; color: var(--satin); font: 19px var(--font-display); margin-bottom: 6px; }
.empty p { margin: 0; max-width: 270px; font-size: 13px; font-weight: 600; line-height: 1.45; }
.empty .btn { margin-top: 20px; min-width: 200px; }
.spinner { width: 22px; height: 22px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .15); border-top-color: var(--ribbon); animation: haloSpin .8s linear infinite; }
.center { display: grid; place-items: center; padding: 40px; }

/* ───────── админка ───────── */
.adm-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.adm-card { padding: 12px; border-radius: 14px; background: var(--velvet-2); box-shadow: inset 0 0 0 1px var(--line); }
.adm-card b { display: block; font-size: 17px; font-weight: 800; }
.adm-card span { font-size: 12px; color: var(--satin-3); font-weight: 600; }
.adm-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.adm-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.adm-table td { padding: 8px 4px; border-bottom: 1px solid var(--line); vertical-align: top; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* узкие экраны (десктопный Telegram, маленькие телефоны): ничего не наезжает */
@media (max-width: 360px) {
  .rake__ttl i { display: none; }                 /* 30% и так на фишке */
  .rake__chips { right: -16px; transform: scale(.86); transform-origin: 100% 50%; }
  .rake__sub { max-width: 58%; }
  .rpromo__g--1, .rpromo__g--2 { display: none; }
  .rpromo__pics { right: 6px; }
  .rpromo__chev { display: none; }         /* карточка нажимается целиком */
  .rpromo__g--0 { right: 0; width: 58px; height: 58px; top: 20px; }
  .rpromo__ttl { font-size: 16px; }
  .rhero__ttl { font-size: 20px; }
  .rhero__g--1 { display: none; }
}

/* карточки кейсов на узких экранах */
@media (max-width: 360px) {
  .case__title { font-size: 13.5px; }
  .case__body { padding: 2px 10px 10px; }
  .case__price { height: 40px; font-size: 17px; }
  .case__max { font-size: 11px; }
}

/* баннер на узких экранах */
@media (max-width: 360px) {
  .hero__slide { padding: 14px 14px; }
  .hero__ttl { font-size: 17.5px; max-width: 60%; }
  .hero__neon b { font-size: 37px; }
  .hero__neon span { padding: 2px 6px; font-size: 10px; }
  .hero__sub { max-width: 58%; font-size: 11.5px; }
  .hero__art { width: 132px; height: 132px; right: -10px; bottom: 4px; }
  .hero__art--ring { right: 25px; width: 72px; height: 72px; margin-top: -40px; }
  .hero__ring { width: 122px; height: 122px; margin-top: -61px; right: 0; }
  .hero__cta { left: 14px; bottom: 14px; height: 36px; padding: 0 14px; font-size: 12.5px; }
  .catnav button { padding: 0 10px; font-size: 12.5px; }
}

/* ───────── режим «Дерби» ───────── */
.dr-promo {
  display: flex; align-items: center; gap: 12px; width: 100%; margin: 12px 0 0; padding: 12px 14px;
  border-radius: 18px; text-align: left; color: #fff;
  background: radial-gradient(120% 140% at 0% 0%, rgba(255, 201, 74, .2), transparent 55%), linear-gradient(120deg, #1f2a5c, #2a1a4f);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 14px 26px -18px #000;
}
.dr-promo__track {
  position: relative; flex: none; width: 76px; height: 46px; border-radius: 10px; overflow: hidden;
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .07) 0 14px, transparent 14px 16px);
}
.dr-promo__track::after {
  content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 6px; opacity: .6;
  background: conic-gradient(#f4f0ff 25%, #2a2140 0 50%, #f4f0ff 0 75%, #2a2140 0) 0 0 / 6px 6px;
}
.dr-promo__track img { position: absolute; left: 0; width: 17px; height: 17px; object-fit: contain; animation: drPromo 2.4s ease-in infinite; }
.dr-promo__track img:nth-child(1) { top: 0; }
.dr-promo__track img:nth-child(2) { top: 15px; animation-duration: 2.7s; }
.dr-promo__track img:nth-child(3) { top: 30px; animation-duration: 2.1s; }
@keyframes drPromo { 0% { transform: translateX(-16px); } 100% { transform: translateX(76px); } }
.dr-promo__txt { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.dr-promo__txt b { font: 16px var(--font-display); white-space: nowrap; }
.dr-promo__txt span { font-size: 12px; font-weight: 700; color: var(--satin-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dr-promo__go { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background-color: var(--cta); background-image: linear-gradient(90deg, var(--cta), var(--cta-2)); box-shadow: 0 8px 18px -8px var(--cta); }
.dr-promo__go svg { width: 18px; height: 18px; }

.dr-board {
  margin-top: 4px; padding: 12px; border-radius: 22px;
  background: radial-gradient(120% 60% at 50% 0%, rgba(61, 123, 255, .16), transparent 70%), var(--velvet-1);
  box-shadow: inset 0 0 0 1px var(--line);
}
.dr-head { display: flex; justify-content: space-between; align-items: center; min-height: 26px; font-weight: 800; font-size: 14px; color: var(--satin-2); }
.dr-head b { font: 18px var(--font-display); color: var(--satin); }
.dr-head .dr-live { padding: 4px 8px; border-radius: 8px; background: #ff3d6e; color: #fff; font: 800 11px var(--font-ui); letter-spacing: .08em; animation: drBlink 1s ease-in-out infinite; }
@keyframes drBlink { 50% { opacity: .55; } }
.dr-bar { height: 4px; margin: 10px 0 12px; border-radius: 4px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.dr-bar i { display: block; height: 100%; transform-origin: left; transition: transform .25s linear; background: linear-gradient(90deg, var(--cta), var(--cta-2)); }
.is-race .dr-bar i { background: linear-gradient(90deg, #ffb340, #ff5f6d); }
.is-done .dr-bar i { background: linear-gradient(90deg, #ffe08a, #e8961a); }

.dr-lanes { display: flex; flex-direction: column; gap: 6px; }
.dr-lane {
  display: flex; align-items: stretch; gap: 8px; width: 100%; height: 50px; padding: 0; text-align: left; border-radius: 14px;
  background: var(--velvet-2); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .2s, background .2s, opacity .4s, filter .4s;
}
.dr-lane__info { flex: none; width: 74px; display: flex; flex-direction: column; justify-content: center; padding-left: 10px; }
.dr-lane__info b { font: 16px/1.15 var(--font-display); }
.dr-lane__info span { display: flex; align-items: center; gap: 2px; font-size: 11px; font-weight: 700; color: var(--satin-3); white-space: nowrap; }
.dr-lane__info .ton-ico { width: 9px; height: 9px; }
.dr-lane--blue .dr-lane__info b { color: #8fc2ff; }
.dr-lane--violet .dr-lane__info b { color: #c9a2ff; }
.dr-lane--gold .dr-lane__info b { color: #ffd36b; }
.dr-lane__track {
  position: relative; flex: 1; min-width: 0; margin: 4px 4px 4px 0; border-radius: 10px; overflow: hidden;
  background: linear-gradient(90deg, rgba(255, 255, 255, .02), rgba(255, 255, 255, .06)),
    repeating-linear-gradient(90deg, transparent 0 22px, rgba(255, 255, 255, .05) 22px 24px);
}
.dr-lane__track::after {
  content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 8px; opacity: .55;
  background: conic-gradient(#f4f0ff 25%, #2a2140 0 50%, #f4f0ff 0 75%, #2a2140 0) 0 0 / 8px 8px;
}
.dr-runner { position: absolute; left: 0; top: 0; bottom: 0; z-index: 1; width: 42px; display: grid; place-items: center; will-change: transform; }
.dr-runner img { width: 36px; height: 36px; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .5)); }
.is-race:not(.is-done) .dr-runner img { animation: drHop .3s ease-in-out infinite alternate; animation-delay: var(--d); }
@keyframes drHop { from { transform: translateY(2px) rotate(-5deg); } to { transform: translateY(-3px) rotate(5deg); } }
.is-race:not(.is-done) .dr-runner::before {
  content: ""; position: absolute; right: 72%; top: 50%; width: 34px; height: 10px; border-radius: 6px; transform: translateY(-50%);
  background: linear-gradient(90deg, transparent, rgba(143, 194, 255, .35));
}
.dr-lane.is-sel { background: linear-gradient(90deg, rgba(61, 123, 255, .2), var(--velvet-2)); box-shadow: inset 0 0 0 1.5px var(--cta), 0 0 18px -6px var(--cta); }
.dr-lane.is-win { background: linear-gradient(90deg, rgba(255, 201, 74, .22), var(--velvet-2)); box-shadow: inset 0 0 0 1.5px rgba(255, 201, 74, .8), 0 0 24px -6px rgba(255, 201, 74, .6); }
.dr-lane.is-lose { opacity: .42; filter: grayscale(.7); }
.dr-crown {
  position: absolute; left: 8px; top: 50%; z-index: 2; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%;
  display: grid; place-items: center; color: #3a2404; background: linear-gradient(135deg, #ffe7a0, #e8961a); animation: drPop .4s var(--ease-out);
}
.dr-crown svg { width: 15px; height: 15px; }
@keyframes drPop { from { transform: scale(.5); opacity: 0; } }

.dr-fin {
  position: relative; display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 12px 14px 12px 12px; border-radius: 18px; overflow: hidden;
  background: linear-gradient(180deg, var(--velvet-2), var(--velvet-1)); box-shadow: inset 0 0 0 1px var(--line-2), 0 14px 28px -18px #000;
  animation: drFin .45s var(--ease-out);
}
@keyframes drFin { from { transform: translateY(14px) scale(.96); opacity: 0; } }
.dr-fin--win {
  background: radial-gradient(120% 160% at 0% 50%, rgba(255, 201, 74, .26), transparent 60%), linear-gradient(90deg, rgba(91, 227, 166, .12), rgba(91, 227, 166, .02)), var(--velvet-1);
  box-shadow: inset 0 0 0 1px rgba(91, 227, 166, .5), 0 0 30px -10px rgba(91, 227, 166, .65);
}
.dr-fin--win::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-100%);
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .14) 50%, transparent 65%); animation: drShine 1.4s .25s ease-out forwards;
}
@keyframes drShine { to { transform: translateX(100%); } }
.dr-fin__medal {
  position: relative; flex: none; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 40%, rgba(255, 214, 107, .38), rgba(255, 201, 74, .08) 62%, transparent 72%); box-shadow: inset 0 0 0 2px rgba(255, 201, 74, .6);
}
.dr-fin__medal img { width: 42px; height: 42px; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .5)); animation: drPop .5s var(--ease-out); }
.dr-fin__medal i {
  position: absolute; right: -3px; bottom: -3px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  color: #3a2404; background: linear-gradient(135deg, #ffe7a0, #e8961a); box-shadow: 0 0 0 3px var(--velvet-1);
}
.dr-fin__medal i svg { width: 13px; height: 13px; }
.dr-fin__body { flex: 1; min-width: 0; }
.dr-fin__tag { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--satin-3); }
.dr-fin--win .dr-fin__tag { color: var(--mint); }
.dr-fin__name { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
.dr-fin__name span { min-width: 0; font: 16px var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dr-fin__name b { flex: none; padding: 2px 7px; border-radius: 8px; font: 800 12px var(--font-ui); color: #3a2404; background: linear-gradient(135deg, #ffe7a0, #e8961a); }
.dr-fin__sub { margin-top: 3px; font-size: 12px; font-weight: 600; color: var(--satin-2); }
.dr-fin__sum { flex: none; display: flex; align-items: center; gap: 3px; font: 22px var(--font-display); }
.dr-fin__sum .ton-ico { width: 15px; height: 15px; }
.dr-fin--win .dr-fin__sum { color: var(--mint); text-shadow: 0 0 18px rgba(91, 227, 166, .5); }
.dr-fin--lose .dr-fin__sum { font-size: 18px; color: var(--satin-3); }

.dr-bet { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.dr-bet .field .chip { height: 30px; }
.dr-chips .chip { flex: 1; }
.dr-mine { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--satin-3); }
.dr-mine span { display: inline-flex; align-items: center; gap: 3px; padding: 3px 8px 3px 4px; border-radius: 9px; background: var(--velvet-2); color: var(--satin); }
.dr-mine img { width: 18px; height: 18px; object-fit: contain; }
.dr-mine .ton-ico { width: 9px; height: 9px; }

.dr-sec { margin-top: 18px; }
.dr-sec__title { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font: 15px var(--font-display); }
.dr-sec__title span { padding: 3px 7px; border-radius: 7px; background: var(--velvet-3); color: var(--satin-2); font: 700 12px var(--font-ui); }
.dr-hist { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.dr-hist::-webkit-scrollbar { display: none; }
.dr-hist__i { flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 50px; padding: 6px 0 5px; border-radius: 12px; background: var(--velvet-2); box-shadow: inset 0 0 0 1px var(--line); }
.dr-hist__i img { width: 28px; height: 28px; object-fit: contain; }
.dr-hist__i b { font-size: 11px; font-weight: 800; }
.dr-hist__i--blue b { color: #8fc2ff; }
.dr-hist__i--violet b { color: #c9a2ff; }
.dr-hist__i--gold { box-shadow: inset 0 0 0 1px rgba(255, 201, 74, .45); }
.dr-hist__i--gold b { color: #ffd36b; }
.dr-empty { padding: 14px; border-radius: 14px; text-align: center; font-size: 13px; font-weight: 700; color: var(--satin-3); background: var(--velvet-1); box-shadow: inset 0 0 0 1px var(--line); }
.dr-bets { display: flex; flex-direction: column; gap: 4px; }
.dr-bets__row { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 10px 0 6px; border-radius: 12px; background: var(--velvet-1); box-shadow: inset 0 0 0 1px var(--line); }
.dr-bets__row.is-me { background: linear-gradient(90deg, var(--cta-soft), var(--velvet-1)); box-shadow: inset 0 0 0 1px var(--cta-line); }
.avatar--xs { width: 28px; height: 28px; font-size: 12px; }
.dr-bets__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; font-size: 13px; }
.dr-bets__row > img { width: 24px; height: 24px; object-fit: contain; }
.dr-bets__amt { display: flex; align-items: center; justify-content: flex-end; gap: 3px; min-width: 62px; font-weight: 800; font-size: 13px; }
.dr-bets__amt .ton-ico { width: 10px; height: 10px; }
.dr-fair { margin-top: 18px; font-size: 11px; font-weight: 600; line-height: 1.6; text-align: center; color: var(--satin-3); word-break: break-all; }
.dr-fair code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--satin-2); }
.dr-fair .link { margin-top: 4px; font-size: 12px; font-weight: 700; color: var(--cta-text); }

/* ───────── режим «Боулинг» ───────── */
.bw-promo { margin-top: 8px; }
.bw-promo__art { position: relative; flex: none; width: 76px; height: 46px; border-radius: 10px; overflow: hidden; background: linear-gradient(180deg, #6b4526, #c98d55); }
.bw-promo__art i { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: #f4f0ff; box-shadow: 0 2px 2px rgba(0, 0, 0, .35); }
.bw-promo__art i:nth-child(1) { left: 26%; top: 18%; } .bw-promo__art i:nth-child(2) { left: 42%; top: 18%; }
.bw-promo__art i:nth-child(3) { left: 58%; top: 18%; } .bw-promo__art i:nth-child(4) { left: 74%; top: 18%; }
.bw-promo__art i:nth-child(5) { left: 34%; top: 36%; } .bw-promo__art i:nth-child(6) { left: 50%; top: 36%; }
.bw-promo__art i:nth-child(7) { left: 66%; top: 36%; } .bw-promo__art i:nth-child(8) { left: 42%; top: 54%; }
.bw-promo__art i:nth-child(9) { left: 58%; top: 54%; } .bw-promo__art i:nth-child(10) { left: 50%; top: 72%; }
.bw-promo__art i.k { width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; background: radial-gradient(circle at 35% 30%, #ffe7a0, #e8961a); box-shadow: 0 0 8px rgba(255, 201, 74, .9); }
.bw-promo__art b { position: absolute; left: 50%; bottom: -7px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #9ad4ff, #3d6dff 45%, #1b2a8a 80%); animation: bwPromoBall 2.4s ease-in infinite; }
@keyframes bwPromoBall { 0% { transform: translateY(0) scale(1); opacity: 0; } 15% { opacity: 1; } 70% { transform: translateY(-34px) scale(.6); opacity: 1; } 100% { transform: translateY(-40px) scale(.5); opacity: 0; } }

.bw-lanes { margin: 4px 0 0; }
.bw-lanes button { display: flex; align-items: center; justify-content: center; gap: 4px; }
.bw-lanes .ton-ico { width: 12px; height: 12px; }

.bw-alley {
  position: relative; height: 380px; margin-top: 10px; border-radius: 22px; overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 45% at 50% 0%, rgba(61, 123, 255, .22), transparent 70%), linear-gradient(180deg, #0c0918, #191230);
  box-shadow: inset 0 0 0 1px var(--line), 0 18px 34px -24px #000;
}
.bw-lane { position: absolute; inset: 0; width: 100%; height: 100%; }

.bw-pin { position: absolute; width: var(--s); height: var(--s); transform: translate(-50%, -82%); }
.bw-pin__spot { position: absolute; left: 6%; right: 6%; bottom: -8%; height: 26%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .5), transparent); }
.bw-pin__body { position: absolute; inset: 0; display: grid; place-items: center; transform-origin: 50% 90%; }
.bw-pin__body img { position: relative; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .45)); }
.bw-pin__ton { position: relative; width: 74%; height: 74%; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #9ad4ff, #3d8dff 50%, #1d47b8); box-shadow: inset 0 2px 3px rgba(255, 255, 255, .45), 0 5px 9px -3px rgba(0, 0, 0, .6); }
.bw-pin__ton .ton-ico { width: 52%; height: 52%; color: #fff; }
.bw-pin--king .bw-pin__body::before { content: ""; position: absolute; inset: -22%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 201, 74, .6), rgba(255, 201, 74, .12) 60%, transparent); animation: bwGlow 1.6s ease-in-out infinite alternate; }
@keyframes bwGlow { from { opacity: .55; transform: scale(.92); } to { opacity: 1; transform: scale(1.06); } }
.bw-pin__crown { position: absolute; right: -10%; bottom: -2%; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; color: #3a2404; background: linear-gradient(135deg, #ffe7a0, #e8961a); box-shadow: 0 0 0 2px rgba(12, 8, 24, .8); }
.bw-pin__crown svg { width: 12px; height: 12px; }

.bw-ball { position: absolute; left: 50%; top: 90%; z-index: 9; width: 46px; height: 46px; border-radius: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(circle at 34% 28%, #b9e2ff, #3d7bff 42%, #1a2a8a 78%, #0f1650);
  box-shadow: 0 12px 18px -6px rgba(0, 0, 0, .65), inset -5px -7px 12px rgba(0, 0, 0, .35); }
.bw-ball i { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #0a0f3a; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .8); }
.bw-ball i:nth-child(1) { left: 40%; top: 22%; } .bw-ball i:nth-child(2) { left: 58%; top: 30%; } .bw-ball i:nth-child(3) { left: 46%; top: 44%; }

.bw-strike {
  position: absolute; left: 50%; top: 46%; z-index: 12; transform: translate(-50%, -50%); white-space: nowrap; pointer-events: none;
  font: 44px var(--font-display); letter-spacing: .02em; color: #ffe08a;
  text-shadow: 0 0 24px rgba(255, 201, 74, .8), 0 4px 0 #a8590e; animation: bwStrike 1.9s var(--ease-out) forwards;
}
@keyframes bwStrike { 0% { transform: translate(-50%, -50%) scale(.3); opacity: 0; } 18% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; } 30% { transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; } 100% { transform: translate(-50%, -60%) scale(1); opacity: 0; } }
.bw-alley.is-strike { box-shadow: inset 0 0 0 1.5px rgba(255, 201, 74, .7), 0 0 34px -8px rgba(255, 201, 74, .6); }

.bw-king, .bw-res { margin-top: 10px; padding: 12px 14px; border-radius: 18px; background: linear-gradient(180deg, var(--velvet-2), var(--velvet-1)); box-shadow: inset 0 0 0 1px var(--line-2); }
.bw-king { display: flex; align-items: center; gap: 12px; background: radial-gradient(120% 160% at 0% 50%, rgba(255, 201, 74, .18), transparent 60%), var(--velvet-1); box-shadow: inset 0 0 0 1px rgba(255, 201, 74, .3); }
.bw-king img { flex: none; width: 44px; height: 44px; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .5)); }
.bw-king div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bw-king span { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #ffd36b; }
.bw-king b { margin-top: 2px; font: 16px var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bw-king strong { flex: none; display: flex; align-items: center; gap: 3px; font: 18px var(--font-display); }
.bw-king strong .ton-ico, .bw-res .ton-ico { width: 13px; height: 13px; }

.bw-res { animation: drFin .45s var(--ease-out); }
.bw-res.is-win { box-shadow: inset 0 0 0 1px rgba(91, 227, 166, .45); background: linear-gradient(90deg, rgba(91, 227, 166, .1), rgba(91, 227, 166, .02)), var(--velvet-1); }
.bw-res.is-strike { box-shadow: inset 0 0 0 1.5px rgba(255, 201, 74, .7), 0 0 30px -10px rgba(255, 201, 74, .7); background: radial-gradient(120% 160% at 0% 0%, rgba(255, 201, 74, .25), transparent 60%), var(--velvet-1); }
.bw-res__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bw-res__tag { font: 17px var(--font-display); }
.is-strike .bw-res__tag { color: #ffd36b; }
.bw-res__sum { display: flex; align-items: center; gap: 3px; font: 22px var(--font-display); color: var(--satin-3); }
.is-win .bw-res__sum, .is-strike .bw-res__sum { color: var(--mint); }
.bw-res__loot { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.bw-res__loot span { display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px 4px 5px; border-radius: 10px; background: rgba(255, 255, 255, .06); font-size: 12px; font-weight: 800; }
.bw-res__loot span.is-king { background: linear-gradient(135deg, rgba(255, 231, 160, .25), rgba(232, 150, 26, .2)); box-shadow: inset 0 0 0 1px rgba(255, 201, 74, .5); }
.bw-res__loot img { width: 22px; height: 22px; object-fit: contain; }
.bw-res__loot .ton-ico { width: 11px; height: 11px; }
.bw-res__sell { margin-top: 10px; height: 40px; }
.bw-meta { margin-top: 8px; display: flex; align-items: center; justify-content: center; gap: 3px; font-size: 12px; font-weight: 700; color: var(--satin-3); }
.bw-meta .ton-ico { width: 10px; height: 10px; }
.bw-throw { margin-top: 12px; }
.bw-fair { margin-top: 12px; font-size: 11px; font-weight: 600; line-height: 1.5; text-align: center; color: var(--satin-3); }
.bw-fair .link { margin-left: 4px; font-size: 11px; font-weight: 700; color: var(--cta-text); }

/* ───────── режим «Заточка» ───────── */
.lv-blue { --lvc: #3d8dff; --lvg: rgba(61, 141, 255, .75); --lvt: #a8d2ff; }
.lv-violet { --lvc: #a35bff; --lvg: rgba(163, 91, 255, .75); --lvt: #dcb8ff; }
.lv-gold { --lvc: #e8a21a; --lvg: rgba(255, 201, 74, .85); --lvt: #ffd96b; }
.lv-red { --lvc: #ff3d5e; --lvg: rgba(255, 61, 94, .85); --lvt: #ff9aab; }
.lv-rainbow { --lvc: linear-gradient(90deg, #ff3d5e, #ffb340, #5be3a6, #3d8dff, #a35bff); --lvg: rgba(255, 255, 255, .75); --lvt: #fff; }
.gift__lvl { position: absolute; top: 6px; right: 6px; z-index: 2; padding: 2px 7px; border-radius: 8px; font: 12px var(--font-display); color: #fff; background: var(--lvc); box-shadow: 0 0 10px var(--lvg); }
.gift.has-lv { box-shadow: inset 0 0 0 1.5px var(--lvg), 0 0 16px -6px var(--lvg); }
.gift.has-lv.lv-rainbow { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .6), 0 0 18px -4px rgba(255, 179, 64, .7); }

.en-stage {
  position: relative; height: 400px; margin-top: 4px; border-radius: 22px; overflow: hidden; isolation: isolate;
  background: radial-gradient(70% 45% at 50% 100%, rgba(255, 120, 40, .32), transparent 70%), radial-gradient(90% 60% at 50% 0%, rgba(61, 123, 255, .16), transparent 70%), linear-gradient(180deg, #0f0b1d, #1c1222);
  box-shadow: inset 0 0 0 1px var(--line), 0 18px 34px -24px #000;
}
.en-anvil-img { position: absolute; left: 50%; bottom: -2%; z-index: 2; width: 76%; transform: translateX(-50%); object-fit: contain; pointer-events: none; }
.en-glow { position: absolute; left: 50%; bottom: 14%; z-index: 1; width: 80%; height: 34%; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(255, 140, 50, .38), transparent); filter: blur(8px); animation: enFlicker 2.4s ease-in-out infinite; }
@keyframes enFlicker { 50% { opacity: .65; } }
.en-anvil { position: absolute; left: 50%; bottom: 7%; z-index: 2; width: 62%; height: 24%; transform: translateX(-50%); filter: drop-shadow(0 14px 16px rgba(0, 0, 0, .6)); }
.en-anvil::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 38%; background: linear-gradient(180deg, #8790ad, #3a4058 55%, #262a3b); clip-path: polygon(0 34%, 20% 0, 100% 0, 93% 100%, 12% 100%); }
.en-anvil i { position: absolute; left: 28%; right: 28%; top: 37%; bottom: 0; background: linear-gradient(180deg, #2f3447, #14161f); clip-path: polygon(14% 0, 86% 0, 70% 52%, 100% 100%, 0 100%, 30% 52%); }
.has-art .en-anvil { display: none; }

.en-item { position: absolute; left: 50%; bottom: 40%; z-index: 3; width: 150px; height: 150px; transform: translateX(-50%); }
.en-item .en-gift { position: absolute; inset: 0; animation: enFloat 3s ease-in-out infinite; }
@keyframes enFloat { 50% { transform: translateY(-8px); } }
.en-aura { position: absolute; inset: -32%; border-radius: 50%; background: radial-gradient(closest-side, var(--lvg), transparent 72%); animation: enAura 1.8s ease-in-out infinite alternate; }
.lv-none .en-aura { display: none; }
.lv-gold .en-aura, .lv-red .en-aura { inset: -42%; }
.lv-rainbow .en-aura { inset: -46%; background: conic-gradient(from 0deg, #ff3d5e, #ffb340, #5be3a6, #3d8dff, #a35bff, #ff3d5e); filter: blur(22px); opacity: .8; animation: enSpin 4s linear infinite; -webkit-mask: radial-gradient(closest-side, #000 40%, transparent 72%); mask: radial-gradient(closest-side, #000 40%, transparent 72%); }
@keyframes enAura { from { opacity: .55; transform: scale(.9); } to { opacity: 1; transform: scale(1.08); } }
@keyframes enSpin { to { transform: rotate(360deg); } }
.en-lvl { position: absolute; left: 50%; top: -26px; z-index: 2; transform: translateX(-50%); font: 30px var(--font-display); color: var(--lvt); text-shadow: 0 0 16px var(--lvg), 0 3px 0 rgba(0, 0, 0, .45); }
.en-empty { position: absolute; left: 0; right: 0; top: 24%; z-index: 3; text-align: center; font: 18px/1.3 var(--font-display); color: var(--satin-2); }

.en-hammer { position: absolute; right: 1%; bottom: 52%; z-index: 4; width: 110px; height: 117px; transform-origin: 50% 97%; transform: rotate(-5deg); pointer-events: none; }
.en-hammer img, .en-hammer svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .55)); }
.en-sparks { position: absolute; left: 61%; bottom: 59%; z-index: 5; width: 0; height: 0; }
.en-sparks i { position: absolute; width: 5px; height: 5px; margin: -2.5px; border-radius: 50%; background: #ffe08a; box-shadow: 0 0 8px #ffb340, 0 0 2px #fff; }

.en-pop { position: absolute; left: 50%; top: 20%; z-index: 6; transform: translate(-50%, -50%); font: 56px var(--font-display); color: var(--lvt); text-shadow: 0 0 26px var(--lvg), 0 4px 0 rgba(0, 0, 0, .4); animation: enPop 1.2s var(--ease-out) forwards; pointer-events: none; }
@keyframes enPop { 0% { transform: translate(-50%, -50%) scale(.3); opacity: 0; } 25% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; } 40% { transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; } 100% { transform: translate(-50%, -80%); opacity: 0; } }
.is-ok .en-aura { animation: enBurst .7s ease-out, enAura 1.8s .7s ease-in-out infinite alternate; }
@keyframes enBurst { from { transform: scale(1.8); opacity: 1; } }
.en-burn { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: radial-gradient(closest-side, rgba(30, 6, 10, .25), rgba(10, 4, 8, .78)); animation: enFade .4s; }
@keyframes enFade { from { opacity: 0; } }
.en-burn b { font: 46px var(--font-display); color: #ff5f6d; text-shadow: 0 0 24px rgba(255, 61, 94, .75); animation: enShake .5s; }
.en-burn span { font-weight: 800; color: var(--satin-3); text-decoration: line-through; }
@keyframes enShake { 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
.is-burn .en-item { animation: enCrumble 1s ease-in forwards; }
@keyframes enCrumble { 30% { filter: grayscale(1) brightness(.6); transform: translateX(-50%) scale(1); } 100% { filter: grayscale(1) brightness(.3) blur(3px); transform: translateX(-50%) translateY(30px) scale(.6); opacity: 0; } }

.en-info { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 12px 14px; border-radius: 16px; background: var(--velvet-1); box-shadow: inset 0 0 0 1px var(--line-2); }
.en-info div { display: flex; flex-direction: column; }
.en-info span { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--satin-3); }
.en-info b { display: flex; align-items: center; gap: 3px; margin-top: 2px; font: 17px var(--font-display); }
.en-info b .ton-ico { width: 12px; height: 12px; }
.en-info b.up { color: var(--mint); }
.en-info > i { color: var(--satin-3); } .en-info > i svg { width: 16px; height: 16px; }
.en-info .en-chance { margin-left: auto; align-items: flex-end; }
.en-chance b { color: #ffd96b; }
.en-max { margin-left: auto; font: 15px var(--font-display); color: #ffd96b; }
.en-ladder { display: flex; gap: 3px; margin-top: 10px; }
.en-ladder i { flex: 1; height: 8px; border-radius: 3px; background: rgba(255, 255, 255, .07); }
.en-ladder i:nth-child(3n):not(:last-child) { margin-right: 5px; }
.en-ladder i.on { background: var(--lvc); box-shadow: 0 0 8px var(--lvg); }
.en-ladder i.next { box-shadow: inset 0 0 0 1.5px var(--lvg); animation: drBlink 1s ease-in-out infinite; }
.en-actions { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; margin-top: 12px; }
.en-again { margin-top: 12px; }
.en-pick { margin-top: 14px; }
.en-pick__title { margin-bottom: 10px; font: 15px var(--font-display); }
.en-promo { margin-top: 8px; }
.en-promo__art { flex: none; width: 76px; height: 46px; border-radius: 10px; display: grid; place-items: center; background: radial-gradient(closest-side, rgba(255, 140, 50, .55), transparent), linear-gradient(180deg, #2a1c3c, #1a1226); }
.en-promo__art b { font: 20px var(--font-display); color: #ffd96b; text-shadow: 0 0 12px rgba(255, 201, 74, .9); }
.en-note { position: absolute; left: 0; right: 0; top: 31%; z-index: 6; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; pointer-events: none; animation: enNote 1.8s var(--ease-out) forwards; }
.en-note b { font: 17px var(--font-display); color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, .6); }
.en-note span { font-size: 13px; font-weight: 800; color: var(--mint); text-shadow: 0 2px 8px rgba(0, 0, 0, .6); }
@keyframes enNote { 0% { opacity: 0; transform: translateY(8px); } 15% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; } }
.en-next { width: 20px; height: 20px; margin-right: 2px; object-fit: contain; }
.is-ok .en-item { animation: enSwap .5s var(--ease-out); }
@keyframes enSwap { 0% { filter: brightness(3) saturate(0); transform: translateX(-50%) scale(.8); } 100% { filter: none; transform: translateX(-50%) scale(1); } }
.en-split { margin-top: 6px; font-size: 12px; font-weight: 700; text-align: center; color: var(--satin-3); }

/* ───────── режим «Стеклянный мост» ───────── */
.br-scene {
  position: relative; margin-top: 4px; border-radius: 22px; overflow: hidden; isolation: isolate;
  background: radial-gradient(70% 40% at 50% 55%, #1f1640, transparent 75%), linear-gradient(180deg, #08060f, #110c24 45%, #07050d);
  box-shadow: inset 0 0 0 1px var(--line), 0 18px 34px -24px #000;
}
.br-scene::before {   /* огоньки далеко внизу пропасти */
  content: ""; position: absolute; inset: 0; z-index: 0; opacity: .55; pointer-events: none;
  background-image:
    radial-gradient(1.6px 1.6px at 14% 22%, #ffcf8a, transparent), radial-gradient(1.4px 1.4px at 82% 31%, #ffb35a, transparent),
    radial-gradient(1.8px 1.8px at 26% 64%, #ffd59a, transparent), radial-gradient(1.2px 1.2px at 71% 72%, #9fc7ff, transparent),
    radial-gradient(1.5px 1.5px at 9% 84%, #ffb35a, transparent), radial-gradient(1.6px 1.6px at 90% 88%, #ffcf8a, transparent),
    radial-gradient(1.3px 1.3px at 40% 12%, #9fc7ff, transparent), radial-gradient(1.5px 1.5px at 62% 46%, #ffcf8a, transparent);
}
.br-bg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.br-fog {
  position: absolute; inset: -10%; z-index: 1; pointer-events: none;
  background: radial-gradient(40% 18% at 22% 68%, rgba(150, 120, 255, .14), transparent 70%), radial-gradient(36% 16% at 78% 36%, rgba(110, 160, 255, .12), transparent 70%), radial-gradient(50% 20% at 50% 95%, rgba(255, 140, 70, .10), transparent 70%);
  animation: brFog 16s ease-in-out infinite alternate;
}
@keyframes brFog { to { transform: translateX(-5%) translateY(2%); } }
.br-track { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; transition: transform .6s cubic-bezier(.3, .8, .3, 1); }

.br-beam {
  position: absolute; top: 66px; bottom: 66px; width: 9px; border-radius: 4px;
  background: repeating-linear-gradient(180deg, transparent 0 22px, rgba(20, 22, 34, .7) 22px 25px, transparent 25px 66px), linear-gradient(90deg, #2f3447, #a3acc8 45%, #4a5068);
  box-shadow: 0 0 14px rgba(0, 0, 0, .7);
}
.br-beam--l { left: calc(50% - 98px - 15px); }
.br-beam--r { left: calc(50% + 98px + 6px); }
.br-plat {
  /* площадки по краям моста: тёмная плита с фаской; у старта — пунктир линии старта, у финиша — шахматная лента */
  position: absolute; left: calc(50% - 124px); width: 248px; display: grid; place-items: center; border-radius: 18px;
  background: linear-gradient(180deg, #2c2c36 0%, #1e1e26 100%);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px rgba(255, 255, 255, .07), inset 0 -4px 0 rgba(0, 0, 0, .3), 0 14px 24px -10px #000;
}
.br-plat--start { border-radius: 18px 18px 22px 22px; }
.br-plat--finish { border-radius: 22px 22px 18px 18px; box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .14), inset 0 0 0 1.5px rgba(255, 201, 74, .45), inset 0 -4px 0 rgba(0, 0, 0, .3), 0 0 30px -8px rgba(255, 201, 74, .55); }
.br-plat__line { position: absolute; left: 16px; right: 16px; top: 7px; height: 3px; border-radius: 2px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .55) 0 14px, transparent 14px 24px); }
.br-plat__check { position: absolute; left: 0; right: 0; bottom: 0; height: 12px; border-radius: 0 0 18px 18px; opacity: .9;
  background: conic-gradient(#fff 25%, #1b1b22 0 50%, #fff 0 75%, #1b1b22 0) 0 0 / 12px 12px; }
.br-plat__tag {
  display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 11px; border-radius: 99px;
  font: 800 11px var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--satin-2);
  background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.br-plat--start .br-plat__tag { position: absolute; left: 14px; bottom: 12px; }
.br-plat--finish .br-plat__tag { margin-top: -10px; color: #3a2404; background: linear-gradient(180deg, #ffe39a, #f0a523); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 4px 12px -4px rgba(255, 180, 50, .8); }
.br-plat__tag svg { width: 13px; height: 13px; }

.br-row { position: absolute; left: 0; right: 0; }
.br-tiles { position: absolute; left: 50%; top: 7px; bottom: 7px; display: flex; gap: 10px; transform: translateX(-50%); }
.br-tile {
  position: relative; flex: 1; padding: 0; border-radius: 11px; transition: transform .15s, box-shadow .25s, background .25s;
  background: linear-gradient(135deg, rgba(190, 225, 255, .32), rgba(120, 170, 255, .1) 45%, rgba(210, 240, 255, .26));
  box-shadow: inset 0 0 0 1.5px rgba(200, 230, 255, .5), inset 0 6px 12px rgba(255, 255, 255, .14), 0 12px 18px -10px rgba(0, 0, 0, .85);
}
.br-tile i { position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, transparent 22%, rgba(255, 255, 255, .42) 30%, transparent 38%, transparent 58%, rgba(255, 255, 255, .16) 64%, transparent 70%); }
.br-row.is-next .br-tile { cursor: pointer; animation: brPulse 1.2s ease-in-out infinite; box-shadow: inset 0 0 0 1.5px rgba(120, 220, 255, .95), 0 0 18px -2px rgba(90, 200, 255, .75); }
.br-row.is-next .br-tile:active { transform: scale(.94); }
@keyframes brPulse { 50% { box-shadow: inset 0 0 0 1.5px rgba(120, 220, 255, .45), 0 0 6px -2px rgba(90, 200, 255, .35); } }
.br-tile.is-picked { background: linear-gradient(135deg, rgba(91, 227, 166, .38), rgba(91, 227, 166, .1)); box-shadow: inset 0 0 0 1.5px rgba(91, 227, 166, .8), 0 0 16px -4px rgba(91, 227, 166, .6); }
.br-tile.is-safe:not(.is-picked) { box-shadow: inset 0 0 0 1.5px rgba(91, 227, 166, .55), 0 12px 18px -10px rgba(0, 0, 0, .85); }
.br-tile.is-broken {
  background: linear-gradient(135deg, rgba(255, 95, 109, .3), rgba(255, 95, 109, .08)); box-shadow: inset 0 0 0 1.5px rgba(255, 95, 109, .65);
}
.br-tile.is-broken i { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60' preserveAspectRatio='none'%3E%3Cpath d='M48 30 L20 4 M48 30 L8 40 M48 30 L30 58 M48 30 L70 6 M48 30 L95 22 M48 30 L66 58 M48 30 L88 50' stroke='%23ffd0d6' stroke-width='1.6' fill='none' opacity='.85'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.br-tile.is-smashed { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(255, 95, 109, .35); }
.br-tile.is-smashed i { display: none; }
.br-shard { position: absolute; inset: 0; border-radius: 11px; background: linear-gradient(135deg, rgba(200, 230, 255, .55), rgba(120, 170, 255, .18)); box-shadow: inset 0 0 0 1px rgba(230, 245, 255, .8); }
.br-row.is-off { opacity: .35; }

.br-mult { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); padding: 3px 7px; border-radius: 8px; background: rgba(255, 255, 255, .06); font-size: 12px; font-weight: 800; color: var(--satin-2); }
.br-row.is-done .br-mult { color: var(--mint); background: rgba(91, 227, 166, .12); }
.br-row.is-next .br-mult { color: #9fdcff; background: rgba(90, 200, 255, .14); }
.br-prize { position: absolute; right: 4px; top: 50%; width: 60px; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 1px; }
.br-prize img { width: 32px; height: 32px; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .5)); }
.br-prize b { font-size: 11px; font-weight: 800; color: var(--satin-2); }
.br-row.is-next .br-prize img { animation: enFloat 2s ease-in-out infinite; }

.br-hero { position: absolute; z-index: 5; width: 56px; height: 56px; transform: translate(-50%, 50%); transition: left .45s cubic-bezier(.3, .7, .3, 1), bottom .45s cubic-bezier(.3, .7, .3, 1); pointer-events: none; }
.br-hero img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 10px 8px rgba(0, 0, 0, .6)); }
.br-hero__probe { display: none; }
.br-hero.is-hop img { animation: brHop .48s ease-out; }
@keyframes brHop { 45% { transform: scale(1.35) translateY(-6px); } }
.br-hero.is-fall img { animation: brFall .95s ease-in forwards; }
@keyframes brFall { to { transform: scale(.12) rotate(280deg); opacity: 0; filter: blur(2px); } }

.br-win, .br-lose {
  position: absolute; left: 50%; top: 16%; z-index: 8; min-width: 190px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 14px 18px; border-radius: 18px; text-align: center; background: rgba(12, 8, 24, .78); backdrop-filter: blur(8px); animation: drPop .45s var(--ease-out);
}
.br-win { box-shadow: inset 0 0 0 1px rgba(91, 227, 166, .55), 0 0 34px -8px rgba(91, 227, 166, .65); }
.br-win img { width: 86px; height: 86px; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .5)); }
.br-win__ton { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #9ad4ff, #3d8dff 50%, #1d47b8); }
.br-win__ton .ton-ico { width: 30px; height: 30px; color: #fff; }
.br-win b, .br-lose b { font: 18px var(--font-display); }
.br-win span { font-size: 12px; font-weight: 800; color: var(--mint); }
.br-lose { box-shadow: inset 0 0 0 1px rgba(255, 95, 109, .55), 0 0 30px -8px rgba(255, 95, 109, .6); }
.br-lose b { color: #ff7d8a; }
.br-lose span { font-size: 12px; font-weight: 700; color: var(--satin-3); }

.br-modes { margin-top: 12px; }
.br-modes button { display: flex; flex-direction: column; align-items: center; justify-content: center; height: auto; padding: 6px 0; line-height: 1.15; }
.br-modes b { font-size: 11px; font-weight: 700; opacity: .7; }
.br-bet { margin-top: 8px; gap: 6px; padding-right: 8px; }
.br-bet .chip { height: 30px; padding: 0 9px; }
.br-go, .br-cash { margin-top: 10px; }
.br-cash img { width: 22px; height: 22px; margin: 0 3px 0 6px; object-fit: contain; vertical-align: middle; }
.br-hint { margin-top: 8px; text-align: center; font-size: 12px; font-weight: 700; color: var(--satin-3); }
.br-fair { margin-top: 12px; text-align: center; font-size: 11px; font-weight: 600; line-height: 1.5; color: var(--satin-3); }
.br-fair .link { margin-left: 4px; font-size: 11px; font-weight: 700; color: var(--cta-text); }
.br-promo { margin-top: 8px; }
.br-promo__art { flex: none; width: 76px; height: 46px; padding: 5px 12px; border-radius: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: linear-gradient(180deg, #0b0818, #1f1640); }
.br-promo__art i { border-radius: 3px; background: linear-gradient(135deg, rgba(190, 225, 255, .45), rgba(120, 170, 255, .15)); box-shadow: inset 0 0 0 1px rgba(200, 230, 255, .6); }
.br-promo__art i.x { background: linear-gradient(135deg, rgba(255, 95, 109, .4), rgba(255, 95, 109, .1)); box-shadow: inset 0 0 0 1px rgba(255, 95, 109, .7); }
.br-coin { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #9ad4ff, #3d8dff 50%, #1d47b8); box-shadow: inset 0 2px 3px rgba(255, 255, 255, .45), 0 4px 8px -2px rgba(0, 0, 0, .6); }
.br-coin .ton-ico { width: 14px; height: 14px; color: #fff; }

/* ───────── главная: баннер Play UP ───────── */
.pb {
  position: relative; display: block; width: 100%; height: 108px; margin-top: 14px; padding: 0; border-radius: 20px; overflow: hidden; isolation: isolate; text-align: left;
  background: radial-gradient(70% 130% at 88% 40%, rgba(255, 120, 255, .38), transparent 62%), linear-gradient(112deg, #34127e 0%, #5f1fcf 52%, #8a3cf2 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 0 0 1px rgba(255, 255, 255, .08), 0 18px 32px -20px rgba(106, 34, 214, .95);
  transition: transform .2s var(--ease-out);
}
.pb:active { transform: scale(.98); }
.pb::before { content: ""; position: absolute; inset: 0; z-index: 0; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .05) 0 18px, transparent 18px 44px); -webkit-mask: linear-gradient(90deg, #000, transparent 70%); mask: linear-gradient(90deg, #000, transparent 70%); }
.pb__new { position: absolute; top: 12px; left: 14px; z-index: 2; display: flex; align-items: center; gap: 5px; padding: 4px 9px 4px 7px; border-radius: 8px; background: #fff; color: #129b4c; font: 900 12px var(--font-ui); letter-spacing: .05em; box-shadow: 0 6px 12px -6px rgba(0, 0, 0, .5); }
.pb__new i { width: 9px; height: 9px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 2px rgba(34, 197, 94, .25); }
.pb__title { position: absolute; left: 14px; bottom: 14px; z-index: 2; display: flex; align-items: center; gap: 7px; font: 20px var(--font-display); color: #fff; text-shadow: 0 2px 0 rgba(40, 0, 90, .55); }
.pb__title svg { width: 26px; height: 26px; filter: drop-shadow(0 2px 0 rgba(40, 0, 90, .5)); }
.pb__cards { position: absolute; right: -6px; top: 0; bottom: 0; z-index: 1; width: 170px; }

/* ───────── Play UP: карточки игр ─────────
   Как витрины гифт-казино: яркий градиент, глянец сверху, едва заметный узор из иконок режима,
   композиция из настоящих подарков. Композиция рисуется в квадратной зоне и меряется в cqw,
   поэтому одна и та же разметка живёт и в большой карточке, и в мини-карточке баннера. */
.gx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 2px; }
.gx, .pb__card {
  --g1: #7cf26e; --g2: #3fd34c; --g3: #1fae3e; --gs: rgba(40, 190, 70, .55);
  background:
    radial-gradient(80% 70% at 74% 42%, rgba(255, 255, 255, .24), transparent 62%),
    linear-gradient(165deg, var(--g1) 0%, var(--g2) 52%, var(--g3) 100%);
}
.gx {
  position: relative; overflow: hidden; isolation: isolate; padding: 0; border-radius: 26px; text-align: left; color: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .22), inset 0 2px 0 rgba(255, 255, 255, .38), 0 18px 30px -18px var(--gs);
  transition: transform .2s var(--ease-out);
}
.gx:active { transform: scale(.97); }
.gx--wide { grid-column: 1 / -1; aspect-ratio: 2.3 / 1; }
.gx--sq { display: flex; flex-direction: column; padding: 12px 14px 14px; }
.gx::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 46%; z-index: 3; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, .17), transparent); }
.gx--upgrade { --g1: #7cf26e; --g2: #3fd34c; --g3: #1ca53b; --gs: rgba(40, 190, 70, .6); }
.gx--derby { --g1: #ff7cf6; --g2: #dc3fe2; --g3: #9b25cb; --gs: rgba(200, 50, 220, .6); }
.gx--bridge { --g1: #2fd0ff; --g2: #1f8bff; --g3: #2d52ef; --gs: rgba(40, 110, 255, .6); }
.gx--contract { --g1: #ff3f3f; --g2: #ff5a2b; --g3: #ff8d1e; --gs: rgba(255, 90, 40, .6); }

.gx-pat { position: absolute; inset: 0; z-index: 0; pointer-events: none; color: rgba(255, 255, 255, .16); }
.gx-pat__i { position: absolute; width: 26px; height: 26px; }
.gx-pat__i svg { width: 100%; height: 100%; }
.gx-pat__i--0 { left: 5%; top: 9%; transform: rotate(-18deg); }
.gx-pat__i--1 { left: 38%; top: 5%; width: 18px; height: 18px; transform: rotate(14deg); }
.gx-pat__i--2 { right: 4%; top: 12%; transform: rotate(24deg); }
.gx-pat__i--3 { left: 28%; top: 44%; width: 16px; height: 16px; transform: rotate(-8deg); }
.gx-pat__i--4 { right: 6%; bottom: 7%; transform: rotate(-22deg); }
.gx-pat__i--5 { left: 50%; bottom: 5%; width: 20px; height: 20px; transform: rotate(18deg); }

.gx-art { position: absolute; z-index: 1; aspect-ratio: 1; }
.gx--wide .gx-art { right: 5%; top: 50%; height: 94%; transform: translateY(-50%); }
.gx--sq .gx-art { position: relative; width: 74%; margin: 0 auto; }
.gx--sq .gx-meta { position: relative; left: auto; right: auto; bottom: auto; margin-top: 10px; }
.gx-cover { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.gx.has-cover .gx-cover { opacity: 1; }
.gx.has-cover .gx-art, .gx.has-cover .gx-pat { display: none; }

.gx-meta { position: absolute; left: 16px; right: 12px; bottom: 14px; z-index: 4; display: flex; flex-direction: column; gap: 2px; pointer-events: none; }
.gx--wide .gx-meta { right: 48%; }
.gx-title { display: flex; align-items: center; gap: 7px; }
.gx-title b { font: 800 27px/1.05 var(--font-ui); letter-spacing: -.015em; text-shadow: 0 2px 12px rgba(0, 0, 0, .16); }
.gx--sq .gx-title b { font-size: 22px; }
.gx-meta > span { font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, .8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.gx-badge { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px 0 8px; border-radius: 9px; background: #fff; font: 900 12.5px var(--font-ui); letter-spacing: .03em; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .45); }
.gx--wide > .gx-badge { position: absolute; left: 14px; top: 14px; z-index: 4; }
.gx-title .gx-badge { height: 22px; padding: 0 7px 0 5px; border-radius: 7px; font-size: 11px; }
.gx-badge--hit { color: #ff6a1a; }
.gx-badge--hit svg { width: 15px; height: 15px; }
.gx-badge--new { color: #18a34a; }
.gx-badge--new i { width: 14px; height: 14px; border-radius: 5px; display: grid; place-items: center; background: #18a34a; color: #fff; font: 900 10px var(--font-ui); font-style: normal; }
.gx-badge--live { color: #d81b60; }
.gx-badge--live i { width: 8px; height: 8px; border-radius: 50%; background: #ff2d55; box-shadow: 0 0 0 3px rgba(255, 45, 85, .22); animation: drBlink 1.1s ease-in-out infinite; }

/* ── композиции ── */
.ga { position: absolute; inset: 0; container-type: size; }
.ga img { object-fit: contain; pointer-events: none; }
@keyframes gaFloat { 50% { transform: translate(-50%, -54%); } }

.ga--up::before { content: ""; position: absolute; inset: -14%; border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 9cqw, rgba(255, 255, 255, .08) 9cqw 9.6cqw); }
.ga-up__ring {
  position: absolute; inset: 7%; border-radius: 50%;
  background: conic-gradient(from 8deg, #fff 0 23%, rgba(255, 255, 255, .3) 23% 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent 82%, #000 83%); mask: radial-gradient(farthest-side, transparent 82%, #000 83%);
}
.ga--up::after { content: ""; position: absolute; inset: 15%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .2), rgba(255, 255, 255, .05) 70%); }
/* вспышка выигрышной дуги в момент, когда стрелка садится */
.ga-up__win {
  position: absolute; inset: 2%; z-index: 1; border-radius: 50%; opacity: 0;
  background: conic-gradient(from 8deg, rgba(255, 255, 255, .95) 0 23%, transparent 23%); filter: blur(2.4cqw);
  -webkit-mask: radial-gradient(farthest-side, transparent 66%, #000 76%); mask: radial-gradient(farthest-side, transparent 66%, #000 76%);
  animation: upWin 4.2s ease-out infinite;
}
.ga-up__spin { position: absolute; inset: 7%; z-index: 3; animation: upSpin 4.2s infinite; }
.ga-up__arrow { position: absolute; left: 50%; top: -7%; width: 18%; height: 18%; transform: translateX(-50%); overflow: visible; filter: drop-shadow(0 1cqw 1.6cqw rgba(110, 40, 0, .45)); }
.ga-up__gift { position: absolute; left: 50%; top: 50%; z-index: 2; width: 46%; height: 46%; transform: translate(-50%, -50%); filter: drop-shadow(0 2.5cqw 3cqw rgba(0, 60, 10, .35)); animation: gaFloat 3.2s ease-in-out infinite; }
.ga-up__pct { position: absolute; left: 50%; bottom: 3%; z-index: 4; padding: 1.2cqw 3.6cqw; border-radius: 3.5cqw; background: #fff; color: #1fa33a; font: 900 12cqw/1 var(--font-ui); letter-spacing: -.02em; transform: translateX(-50%) rotate(-4deg); box-shadow: 0 1.5cqw 3cqw rgba(0, 60, 10, .3); animation: upPct 4.2s ease-out infinite; }
/* стрелка стоит в выигрышной зоне (52°), три оборота с торможением и снова 52° — цикл без скачка */
@keyframes upSpin {
  0%, 14% { transform: rotate(52deg); animation-timing-function: cubic-bezier(.3, .05, .12, 1); }
  64%, 100% { transform: rotate(1132deg); }
}
@keyframes upWin { 0%, 61% { opacity: 0; } 66% { opacity: 1; } 84% { opacity: .75; } 96%, 100% { opacity: 0; } }
@keyframes upPct {
  0%, 63% { transform: translateX(-50%) rotate(-4deg) scale(1); }
  69% { transform: translateX(-50%) rotate(-9deg) scale(1.28); }
  77%, 100% { transform: translateX(-50%) rotate(-4deg) scale(1); }
}

.ga--bridge { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 6%; padding: 5%; }
.ga-tile {
  position: relative; border-radius: 26%;
  background: linear-gradient(180deg, #ffffff 0%, #d9e7ff 100%);
  box-shadow: inset 0 -2.4cqw 0 rgba(40, 80, 200, .16), inset 0 .8cqw 0 #fff, 0 2cqw 4cqw -1.5cqw rgba(0, 20, 110, .5);
}
.ga-tile__fx {
  position: absolute; inset: 0; border-radius: inherit; opacity: 0;
  background: linear-gradient(180deg, #7af7a4 0%, #22c55e 100%);
  box-shadow: inset 0 -2.4cqw 0 rgba(0, 90, 30, .28), inset 0 .8cqw 0 rgba(255, 255, 255, .6);
}
.ga-tile--s3 .ga-tile__fx { background: linear-gradient(180deg, #ff7a7a 0%, #e5303c 100%); box-shadow: inset 0 -2.4cqw 0 rgba(120, 0, 10, .3), inset 0 .8cqw 0 rgba(255, 255, 255, .45); }
.ga-tile--s3 .ga-tile__fx::after { content: ""; position: absolute; inset: 14%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 48 L22 10 M50 48 L6 58 M50 48 L34 94 M50 48 L80 8 M50 48 L96 44 M50 48 L70 96 M36 30 L20 34 M66 26 L74 38 M28 70 L14 72' stroke='%23fff' stroke-width='5' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center / contain no-repeat; opacity: .9; }
.ga-tile__fx img { position: absolute; inset: 11%; width: 78%; height: 78%; transform: scale(0); }
.ga-tile::after { content: ""; position: absolute; inset: -6%; border-radius: 30%; box-shadow: 0 0 0 1cqw rgba(255, 255, 255, .9); opacity: 0; pointer-events: none; }
.ga-tile__tag { position: absolute; left: -26%; top: -24%; z-index: 2; padding: 1cqw 2.4cqw; border-radius: 2cqw; background: #fff; color: #e5303c; font: 900 6.4cqw/1.1 var(--font-ui); white-space: nowrap; transform: rotate(-12deg) scale(.4); opacity: 0; box-shadow: 0 1cqw 2cqw rgba(0, 0, 0, .25); }
/* нажатия по шагам цикла 5 с: s1 на 14%, s2 на 36%, s3 (треск) на 58% */
.ga-tile--s1 { animation: brPress1 5s ease-out infinite; }
.ga-tile--s1 .ga-tile__fx { animation: brFx1 5s ease-out infinite; }
.ga-tile--s1::after { animation: brRing1 5s ease-out infinite; }
.ga-tile--s1 img { animation: brImg1 5s ease-out infinite; }
@keyframes brPress1 { 0%, 11% { transform: none; } 14% { transform: scale(.8) translateY(1.2cqw); } 19% { transform: scale(1.07); } 23%, 100% { transform: none; } }
@keyframes brFx1 { 0%, 14% { opacity: 0; } 16%, 88% { opacity: 1; } 95%, 100% { opacity: 0; } }
@keyframes brRing1 { 0%, 13% { opacity: 0; transform: scale(.7); } 15% { opacity: .9; transform: scale(.9); } 24% { opacity: 0; transform: scale(1.35); } 100% { opacity: 0; } }
@keyframes brImg1 { 0%, 15% { transform: scale(0); } 21% { transform: scale(1.18); } 25%, 88% { transform: scale(1); } 95%, 100% { transform: scale(0); } }
.ga-tile--s2 { animation: brPress2 5s ease-out infinite; }
.ga-tile--s2 .ga-tile__fx { animation: brFx2 5s ease-out infinite; }
.ga-tile--s2::after { animation: brRing2 5s ease-out infinite; }
.ga-tile--s2 img { animation: brImg2 5s ease-out infinite; }
@keyframes brPress2 { 0%, 33% { transform: none; } 36% { transform: scale(.8) translateY(1.2cqw); } 41% { transform: scale(1.07); } 45%, 100% { transform: none; } }
@keyframes brFx2 { 0%, 36% { opacity: 0; } 38%, 88% { opacity: 1; } 95%, 100% { opacity: 0; } }
@keyframes brRing2 { 0%, 35% { opacity: 0; transform: scale(.7); } 37% { opacity: .9; transform: scale(.9); } 46% { opacity: 0; transform: scale(1.35); } 100% { opacity: 0; } }
@keyframes brImg2 { 0%, 37% { transform: scale(0); } 43% { transform: scale(1.18); } 47%, 88% { transform: scale(1); } 95%, 100% { transform: scale(0); } }
.ga-tile--s3 { animation: brPress3 5s ease-out infinite; }
.ga-tile--s3 .ga-tile__fx { animation: brFx3 5s ease-out infinite; }
.ga-tile--s3::after { animation: brRing3 5s ease-out infinite; }
.ga-tile--s3 .ga-tile__tag { animation: brTag 5s ease-out infinite; }
@keyframes brPress3 { 0%, 55% { transform: none; } 58% { transform: scale(.8) translateY(1.2cqw); } 63% { transform: scale(1.07); } 66% { transform: rotate(-6deg); } 69% { transform: rotate(5deg); } 72% { transform: rotate(-2deg); } 75%, 100% { transform: none; } }
@keyframes brFx3 { 0%, 58% { opacity: 0; } 60%, 88% { opacity: 1; } 95%, 100% { opacity: 0; } }
@keyframes brRing3 { 0%, 57% { opacity: 0; transform: scale(.7); } 59% { opacity: .9; transform: scale(.9); } 68% { opacity: 0; transform: scale(1.35); } 100% { opacity: 0; } }
@keyframes brTag { 0%, 60% { opacity: 0; transform: rotate(-12deg) scale(.4); } 66% { opacity: 1; transform: rotate(-12deg) scale(1.18); } 70%, 88% { opacity: 1; transform: rotate(-12deg) scale(1); } 95%, 100% { opacity: 0; transform: rotate(-12deg) scale(.4); } }

.ga--race { overflow: visible; }
.ga-race__rays { position: absolute; inset: -38%; background: repeating-conic-gradient(rgba(255, 255, 255, .15) 0 8deg, transparent 8deg 22deg); -webkit-mask: radial-gradient(closest-side, #000 18%, transparent 72%); mask: radial-gradient(closest-side, #000 18%, transparent 72%); animation: haloSpin 50s linear infinite; }
.ga-lane { position: absolute; left: 0; right: 10%; height: 21%; border-radius: 99px; background: rgba(255, 255, 255, .18); box-shadow: inset 0 0 0 .5cqw rgba(255, 255, 255, .32); }
.ga-lane--0 { top: 12%; animation: laneWin 4.4s ease-out infinite; } .ga-lane--1 { top: 40%; } .ga-lane--2 { top: 68%; }
.ga-lane__run { position: absolute; top: 50%; left: 9%; width: 0; height: 0; }
.ga-lane__run img { position: absolute; left: 0; top: 0; max-width: none; width: 34cqh; height: 34cqh; transform: translate(-50%, -50%); filter: drop-shadow(0 1.5cqw 2cqw rgba(60, 0, 80, .4)); animation: raceHop .34s ease-in-out infinite alternate; }
.ga-lane--0 .ga-lane__run img { width: 38cqh; height: 38cqh; }
.ga-lane__trail { position: absolute; left: 3%; top: 32%; height: 36%; width: 0; border-radius: 99px; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .85)); }
.ga-lane--0 .ga-lane__run { animation: run0 4.4s linear infinite; } .ga-lane--0 .ga-lane__trail { animation: trail0 4.4s linear infinite; }
.ga-lane--1 .ga-lane__run { animation: run1 4.4s linear infinite; } .ga-lane--1 .ga-lane__trail { animation: trail1 4.4s linear infinite; }
.ga-lane--2 .ga-lane__run { animation: run2 4.4s linear infinite; } .ga-lane--2 .ga-lane__trail { animation: trail2 4.4s linear infinite; }
/* старт → середина (лидирует шапка) → финиш (Пепе обгоняет) → пауза → исчезли и заново */
@keyframes run0 { 0% { left: 9%; opacity: 0; } 5% { opacity: 1; } 36% { left: 40%; } 68% { left: 86%; } 86% { left: 86%; opacity: 1; } 94%, 100% { left: 86%; opacity: 0; } }
@keyframes run1 { 0% { left: 9%; opacity: 0; } 5% { opacity: 1; } 36% { left: 52%; } 68% { left: 70%; } 86% { left: 70%; opacity: 1; } 94%, 100% { left: 70%; opacity: 0; } }
@keyframes run2 { 0% { left: 9%; opacity: 0; } 5% { opacity: 1; } 36% { left: 33%; } 68% { left: 55%; } 86% { left: 55%; opacity: 1; } 94%, 100% { left: 55%; opacity: 0; } }
@keyframes trail0 { 0% { width: 0; opacity: 0; } 5% { opacity: 1; } 36% { width: 29%; } 68% { width: 74%; opacity: .9; } 80% { width: 74%; opacity: 0; } 100% { width: 0; opacity: 0; } }
@keyframes trail1 { 0% { width: 0; opacity: 0; } 5% { opacity: 1; } 36% { width: 41%; } 68% { width: 58%; opacity: .9; } 80% { width: 58%; opacity: 0; } 100% { width: 0; opacity: 0; } }
@keyframes trail2 { 0% { width: 0; opacity: 0; } 5% { opacity: 1; } 36% { width: 22%; } 68% { width: 43%; opacity: .9; } 80% { width: 43%; opacity: 0; } 100% { width: 0; opacity: 0; } }
@keyframes raceHop { from { transform: translate(-50%, -46%) rotate(-4deg); } to { transform: translate(-50%, -58%) rotate(4deg); } }
@keyframes laneWin { 0%, 66% { box-shadow: inset 0 0 0 .5cqw rgba(255, 255, 255, .32); } 70%, 84% { box-shadow: inset 0 0 0 .7cqw #fff, 0 0 5cqw rgba(255, 255, 255, .8); } 92%, 100% { box-shadow: inset 0 0 0 .5cqw rgba(255, 255, 255, .32); } }
.ga-race__flag { position: absolute; right: 2%; top: 8%; bottom: 8%; width: 7%; border-radius: 1cqw; background: conic-gradient(#fff 25%, #2a0b3a 0 50%, #fff 0 75%, #2a0b3a 0) 0 0 / 3.5cqw 3.5cqw; box-shadow: 0 1cqw 2cqw rgba(60, 0, 80, .35); }

.ga-ct {
  position: absolute; width: 40%; aspect-ratio: 1; border-radius: 26%;
  background: linear-gradient(145deg, rgba(255, 255, 255, .62), rgba(255, 225, 215, .3));
  box-shadow: inset 0 0 0 .6cqw rgba(255, 255, 255, .75), inset 0 -2cqw 0 rgba(170, 40, 0, .14), 0 3cqw 6cqw -2cqw rgba(130, 20, 0, .55);
}
.ga-ct img { position: absolute; inset: 12%; width: 76%; height: 76%; filter: drop-shadow(0 1.5cqw 2cqw rgba(100, 20, 0, .35)); }
.ga-ct--0 { left: 0; top: 50%; transform: rotate(-10deg); }
.ga-ct--1 { left: 30%; top: 8%; transform: rotate(6deg); }
.ga-ct--2 { left: 60%; top: 44%; transform: rotate(-6deg); }
.ga-plus { position: absolute; z-index: 1; width: 13%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .7); color: #ff4a3d; font: 900 10cqw/1 var(--font-ui); box-shadow: 0 1cqw 2cqw rgba(130, 20, 0, .35); }
.ga-plus--0 { left: 22%; top: 38%; } .ga-plus--1 { left: 64%; top: 28%; }

/* ── баннер Play UP на главной: веер мини-карточек тех же игр ── */
.pb__card {
  position: absolute; top: 12px; width: 70px; height: 96px; border-radius: 15px; overflow: hidden; isolation: isolate;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35), inset 0 2px 0 rgba(255, 255, 255, .5), 0 12px 20px -8px rgba(20, 0, 50, .75);
}
.pb__art { position: absolute; left: 7%; right: 7%; top: 6%; aspect-ratio: 1; }
.pb__art .ga-up__pct { display: none; }   /* на мини-карточке наклейка не помещается и выглядит белой полосой */
.pb__card b { position: absolute; left: 0; right: 0; bottom: 6px; z-index: 2; text-align: center; font: 800 10.5px var(--font-ui); color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, .3); }
.pb__card.gx--upgrade { left: 0; transform: rotate(-11deg); }
.pb__card.gx--bridge { left: 52px; top: 7px; z-index: 1; transform: rotate(-2deg); }
.pb__card.gx--derby { left: 104px; top: 12px; z-index: 2; transform: rotate(9deg); }

/* ───────── монета TON: металлический ободок, выпуклая середина, блик ───────── */
.slot__coin, .toast__ico--ton, .br-coin, .br-win__ton {
  border-radius: 50%;
  background:
    radial-gradient(110% 80% at 30% 16%, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 36%),
    radial-gradient(circle at 50% 50%, #3cb2ff 0, #0f86ea 48%, #0a62c8 60%, #0a55b4 61.5%, transparent 62.6%),
    conic-gradient(from 210deg, #c3e6ff, #1c5fd2 18%, #8fd0ff 36%, #0c3c9e 56%, #a5dbff 78%, #c3e6ff);
  box-shadow: 0 10px 22px -8px rgba(0, 120, 255, .85), inset 0 -3px 6px rgba(0, 25, 90, .45), inset 0 2px 3px rgba(255, 255, 255, .65);
}
.slot__coin .ton-ico, .toast__ico--ton .ton-ico, .br-coin .ton-ico, .br-win__ton .ton-ico, .toast__ico--ton svg {
  color: #fff; filter: drop-shadow(0 1.5px 1.5px rgba(0, 35, 110, .55));
}
.slot__coin .ton-ico { width: 28px; height: 28px; }
.slot__coin--mini .ton-ico { width: 16px; height: 16px; }

/* ───────── партнёрка v2: яркий герой как у карточек игр, компактные блоки, дорожка уровней ───────── */
.rf-hero {
  position: relative; overflow: hidden; isolation: isolate; height: 196px; margin-top: 4px; padding: 16px; border-radius: 26px; color: #fff;
  background: radial-gradient(80% 90% at 80% 45%, rgba(255, 255, 255, .26), transparent 60%), linear-gradient(160deg, #c46bff 0%, #8b3cf2 50%, #5a22d0 100%);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .22), inset 0 2px 0 rgba(255, 255, 255, .38), 0 18px 30px -18px rgba(120, 50, 230, .7);
}
.rf-hero::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 46%; z-index: 3; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, .16), transparent); }
.rf-hero__pat { position: absolute; inset: 0; z-index: 0; color: rgba(255, 255, 255, .15); pointer-events: none; }
.rf-pat { position: absolute; width: 24px; height: 24px; }
.rf-pat svg { width: 100%; height: 100%; }
.rf-pat--0 { left: 46%; top: 8%; transform: rotate(-14deg); } .rf-pat--1 { right: 4%; top: 6%; transform: rotate(18deg); width: 20px; height: 20px; }
.rf-pat--2 { left: 40%; bottom: 10%; transform: rotate(10deg); width: 18px; height: 18px; } .rf-pat--3 { right: 6%; bottom: 8%; transform: rotate(-20deg); }
.rf-pat--4 { left: 4%; bottom: 36%; transform: rotate(12deg); width: 16px; height: 16px; opacity: .7; }
.rf-hero__tag { position: relative; z-index: 4; display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px 0 8px; border-radius: 9px; background: #fff; color: #7a2df0; font: 900 11.5px var(--font-ui); letter-spacing: .05em; text-transform: uppercase; box-shadow: 0 6px 14px -6px rgba(40, 0, 90, .5); }
.rf-hero__tag svg { width: 15px; height: 15px; }
.rf-hero__ttl { position: relative; z-index: 4; margin: 14px 0 0; font: 800 28px/1.02 var(--font-ui); letter-spacing: -.02em; text-shadow: 0 2px 12px rgba(40, 0, 90, .25); }
.rf-hero__sub { position: relative; z-index: 4; width: 54%; margin: 8px 0 0; font-size: 12.5px; font-weight: 700; line-height: 1.3; color: rgba(255, 255, 255, .82); }

.rf-hero__art { position: absolute; right: 2%; top: 50%; z-index: 1; width: 48%; aspect-ratio: 1; transform: translateY(-50%); container-type: size; }
.rf-hero__glow { position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .34), transparent 68%); }
.rf-hero__gift { position: absolute; left: 50%; top: 48%; width: 66%; height: 66%; object-fit: contain; transform: translate(-50%, -50%); filter: drop-shadow(0 4cqw 4cqw rgba(40, 0, 90, .4)); animation: gaFloat 3.4s ease-in-out infinite; }
.rf-hero__pct { position: absolute; left: 50%; bottom: 4%; z-index: 2; padding: 1.6cqw 4.2cqw; border-radius: 4cqw; background: #fff; color: #7a2df0; font: 900 10.5cqw/1 var(--font-ui); white-space: nowrap; transform: translateX(-50%) rotate(-5deg); box-shadow: 0 2cqw 4cqw rgba(40, 0, 90, .35); }
.rf-coin {
  position: absolute; z-index: 1; width: 22%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  background:
    radial-gradient(110% 80% at 30% 16%, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 36%),
    radial-gradient(circle at 50% 50%, #3cb2ff 0, #0f86ea 48%, #0a62c8 60%, #0a55b4 61.5%, transparent 62.6%),
    conic-gradient(from 210deg, #c3e6ff, #1c5fd2 18%, #8fd0ff 36%, #0c3c9e 56%, #a5dbff 78%, #c3e6ff);
  box-shadow: 0 3cqw 6cqw -2cqw rgba(0, 60, 180, .8), inset 0 -1cqw 2cqw rgba(0, 25, 90, .45);
  animation: rfCoin 3s ease-in-out infinite;
}
.rf-coin .ton-ico { width: 52%; height: 52%; color: #fff; filter: drop-shadow(0 .5cqw .5cqw rgba(0, 35, 110, .55)); }
.rf-coin--0 { left: 2%; top: 14%; transform: rotate(-14deg); }
.rf-coin--1 { right: 0; top: 30%; width: 18%; transform: rotate(12deg); animation-delay: -1s; }
.rf-coin--2 { left: 8%; bottom: 20%; width: 15%; transform: rotate(8deg); animation-delay: -2s; }
@keyframes rfCoin { 50% { translate: 0 -4cqw; } }

.rf-card { margin-top: 12px; padding: 14px; border-radius: 22px; background: linear-gradient(180deg, var(--velvet-2), var(--velvet-1)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), inset 0 0 0 1px var(--line); }
.rf-link { display: flex; flex-direction: column; gap: 12px; }
.rf-link__row { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 5px 0 14px; border-radius: 14px; background: rgba(0, 0, 0, .28); box-shadow: inset 0 0 0 1px var(--line); }
.rf-link__v { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 13.5px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--satin-2); cursor: pointer; }
.rf-link__copy { flex: none; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; color: var(--satin); background: linear-gradient(180deg, #2f2f39, #26262e); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 3px 0 #141419; }
.rf-link__copy:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 0 #141419; }
.rf-link__copy svg { width: 17px; height: 17px; }
.rf-link .btn svg { width: 18px; height: 18px; }

.rf-earn.is-on { background: radial-gradient(90% 120% at 0% 0%, rgba(91, 227, 166, .14), transparent 60%), linear-gradient(180deg, var(--velvet-2), var(--velvet-1)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), inset 0 0 0 1px rgba(91, 227, 166, .3); }
.rf-earn__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rf-earn__sum span { display: block; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--satin-3); }
.rf-earn__sum b { display: flex; align-items: center; gap: 5px; margin-top: 3px; font: 800 28px/1 var(--font-ui); letter-spacing: -.02em; }
.rf-earn__sum b .ton-ico { width: 20px; height: 20px; }
.rf-earn__btn { height: 44px; padding: 0 20px; border-radius: 14px; color: #fff; font-size: 15px; background: linear-gradient(180deg, #4fe39a, #1fb96a); box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .45), 0 4px 0 #128a4c, 0 14px 22px -12px rgba(31, 185, 106, .8); }
.rf-earn__btn:active { transform: translateY(3px); box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .45), 0 1px 0 #128a4c; }
.rf-earn__btn[disabled] { color: var(--satin-3); background: linear-gradient(180deg, #2b2b34, #24242c); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 4px 0 #141419; }
.rf-earn__stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.rf-earn__stats div { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.rf-earn__stats div + div { border-left: 1px solid var(--line); }
.rf-earn__stats b { display: flex; align-items: center; gap: 3px; font: 800 18px/1.1 var(--font-ui); }
.rf-earn__stats b .ton-ico { width: 12px; height: 12px; }
.rf-earn__stats span { font-size: 11.5px; font-weight: 700; color: var(--satin-3); }

/* медали уровней: металл, внутри процент */
.rf-m--bronze { --m1: #ffd2a6; --m2: #c47a3e; --m3: #8a4a1e; --mt: #f0b27a; }
.rf-m--silver { --m1: #ffffff; --m2: #b9c2d3; --m3: #7d879c; --mt: #d8deea; }
.rf-m--gold { --m1: #fff1b0; --m2: #f2b52c; --m3: #b8730c; --mt: #ffd36b; }
.rf-m--diamond { --m1: #c9f6ff; --m2: #5fb4ff; --m3: #3156e0; --mt: #8fd0ff; }
.rf-lvl__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rf-lvl__k { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--satin-3); }
.rf-lvl__now { font: 800 16px var(--font-ui); color: var(--mt); }
.rf-track { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); margin: 16px 0 4px; }
.rf-track__line, .rf-track__fill { position: absolute; left: 12.5%; top: 21px; height: 4px; border-radius: 4px; }
.rf-track__line { right: 12.5%; background: rgba(255, 255, 255, .08); }
.rf-track__fill { width: calc(75% * var(--fill)); background: linear-gradient(90deg, #f0b27a, #ffd36b); box-shadow: 0 0 10px rgba(255, 201, 74, .5); }
.rf-node { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.rf-medal {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font: 900 12.5px var(--font-ui); color: #fff;
  background: radial-gradient(circle at 34% 26%, var(--m1) 0%, var(--m2) 46%, var(--m3) 100%);
  box-shadow: inset 0 0 0 2.5px rgba(255, 255, 255, .35), inset 0 -3px 5px rgba(0, 0, 0, .25), 0 6px 14px -6px rgba(0, 0, 0, .7);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .45); filter: grayscale(.85) brightness(.55); transition: filter .3s;
}
.rf-node.is-on .rf-medal { filter: none; }
.rf-node.is-cur .rf-medal { width: 52px; height: 52px; margin-top: -3px; font-size: 14px; box-shadow: inset 0 0 0 2.5px rgba(255, 255, 255, .45), inset 0 -3px 5px rgba(0, 0, 0, .25), 0 0 0 4px rgba(255, 255, 255, .08), 0 0 24px -4px var(--mt); }
.rf-node small { font-size: 11px; font-weight: 700; color: var(--satin-3); white-space: nowrap; }
.rf-node.is-cur small { color: var(--satin); }
.rf-lvl__hint { margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .04); font-size: 13px; font-weight: 600; color: var(--satin-2); text-align: center; }
.rf-lvl__hint b { color: var(--satin); }
.rf-lvl__note { margin-top: 8px; font-size: 11px; font-weight: 600; line-height: 1.4; color: var(--satin-3); text-align: center; }

.rf-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.rf-step { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 14px 6px 12px; border-radius: 18px; text-align: center; background: linear-gradient(180deg, var(--velvet-2), var(--velvet-1)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), inset 0 0 0 1px var(--line); }
.rf-step__ico { width: 40px; height: 40px; margin-bottom: 5px; border-radius: 13px; display: grid; place-items: center; color: #fff; box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .4), 0 8px 16px -8px rgba(0, 0, 0, .7); }
.rf-step__ico svg { width: 20px; height: 20px; }
.rf-step__ico .ton-ico { color: #fff; }
.rf-step__ico--a { background: linear-gradient(160deg, #5c9dff, #2f6bff); }
.rf-step__ico--b { background: linear-gradient(160deg, #ff7cf6, #b23ce0); }
.rf-step__ico--c { background: linear-gradient(160deg, #7cf26e, #1ca53b); }
.rf-step b { font-size: 13px; font-weight: 800; line-height: 1.2; }
.rf-step span { font-size: 11px; font-weight: 600; line-height: 1.25; color: var(--satin-3); }
.rf-empty { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 18px; border-radius: 18px; font-size: 13px; font-weight: 600; color: var(--satin-3); background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px var(--line); }
.rf-empty svg { width: 18px; height: 18px; }

/* партнёрка v2: холд/долг, кнопки у реферала, лист реферала */
.rf-earn__notes { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.rf-note { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 11px; font-size: 12px; font-weight: 600; color: var(--satin-2); background: rgba(255, 255, 255, .04); }
.rf-note svg { flex: none; width: 15px; height: 15px; color: #ffd36b; }
.rf-note b { color: var(--satin); }
.rf-note--debt { color: #ffb0bb; background: rgba(255, 92, 122, .08); }
.rf-row__btns { display: flex; gap: 6px; margin-right: 8px; }
.rf-row__btns button { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; color: var(--satin-2); background: linear-gradient(180deg, #2f2f39, #26262e); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 3px 0 #141419; }
.rf-row__btns button:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 0 #141419; }
.rf-row__btns svg { width: 17px; height: 17px; }
.rf-sheet__head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.rf-sheet__head .avatar { width: 46px; height: 46px; }
.rf-sheet__head b { display: block; font: 800 18px var(--font-ui); }
.rf-sheet__head span { font-size: 12px; font-weight: 600; color: var(--satin-3); }
.rf-sheet__seg { margin-bottom: 12px; }
.rf-sheet__stats, .rf-sheet__bring { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.rf-sheet__stats div, .rf-sheet__bring div { display: flex; flex-direction: column; gap: 3px; padding: 12px; border-radius: 16px; background: linear-gradient(180deg, var(--velvet-2), var(--velvet-1)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), inset 0 0 0 1px var(--line); }
.rf-sheet__stats span, .rf-sheet__bring span { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--satin-3); }
.rf-sheet__stats b, .rf-sheet__bring b { display: flex; align-items: center; gap: 2px; font: 800 17px var(--font-ui); white-space: nowrap; }
.rf-sheet__stats b .ton-ico, .rf-sheet__bring b .ton-ico { width: 12px; height: 12px; }
.rf-sheet__stats .is-win b { color: var(--mint); }
.rf-sheet__stats .is-lose b { color: #ff7d8a; }
.rf-sheet__bring b.plus { color: var(--mint); }
.rf-sheet__now { padding: 12px 14px; border-radius: 16px; font-size: 13px; font-weight: 600; color: var(--satin-2); background: rgba(255, 255, 255, .04); }
.rf-sheet__now b { display: inline-flex; align-items: center; gap: 3px; color: var(--satin); }
.rf-sheet__now b .ton-ico { width: 12px; height: 12px; }
.rf-sheet__now small { display: block; margin-top: 4px; font-size: 11px; color: var(--satin-3); }
.rref--off { color: #ff7d8a; font-weight: 700; }
.rref--wait { color: #ffd36b; font-weight: 700; }

/* ───────── вывод: выбор модели NFT со склада банка ───────── */
.nftpick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-height: 46vh; overflow-y: auto; padding: 2px; margin: 0 -2px; }
.nftc { display: flex; flex-direction: column; gap: 3px; padding: 5px 5px 8px; border: 0; border-radius: 16px; background: var(--velvet-2); color: inherit; font: inherit; text-align: left; box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; transition: box-shadow .15s, transform .15s; }
.nftc:active { transform: scale(.97); }
.nftc.on { box-shadow: inset 0 0 0 2px var(--cta), 0 0 0 3px var(--cta-soft); }
.nftc__img { position: relative; display: block; aspect-ratio: 1; border-radius: 12px; overflow: hidden; }
.nftc__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nftc__img img.nftc__fallback { width: 70%; height: 70%; margin: 15%; object-fit: contain; }
.nftc__num { position: absolute; left: 5px; bottom: 5px; padding: 2px 6px; border-radius: 7px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 10px; font-weight: 700; line-height: 1.3; font-style: normal; backdrop-filter: blur(4px); }
.nftc.on .nftc__img::after { content: "✓"; position: absolute; right: 5px; top: 5px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--cta); color: #fff; font-size: 12px; font-weight: 800; box-shadow: 0 2px 6px rgba(0, 0, 0, .4); }
.nftc__tg { position: absolute; left: 5px; top: 5px; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; background: rgba(40, 40, 46, .38); color: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); cursor: pointer; }
.nftc__tg svg { width: 11px; height: 11px; margin-left: -1px; }
.nftc__tg:active { transform: scale(.9); }
.nftc__model { padding: 0 3px; font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nftc__rare { padding: 0 3px; font-size: 11px; color: var(--satin-3); }

/* ───────── карточка подарка из инвентаря: большая картинка, имя, цена, кнопки ───────── */
.isheet__hero { position: relative; height: 196px; margin: 2px -16px 4px; display: grid; place-items: center; overflow: hidden; pointer-events: none; }
.isheet__glow { position: absolute; left: 50%; top: 50%; width: 230px; height: 230px; margin: -115px 0 0 -115px; border-radius: 50%;
  background: radial-gradient(circle, var(--c1) 0%, color-mix(in srgb, var(--c1) 35%, transparent) 38%, transparent 70%); opacity: .55; filter: blur(6px); }
.isheet__rays { position: absolute; left: 50%; top: 50%; width: 420px; height: 420px; margin: -210px 0 0 -210px; opacity: .22;
  background: repeating-conic-gradient(from 0deg, var(--c1) 0deg 5deg, transparent 5deg 22deg);
  -webkit-mask-image: radial-gradient(circle, #000 0%, transparent 58%); mask-image: radial-gradient(circle, #000 0%, transparent 58%);
  animation: haloSpin 40s linear infinite; }
.isheet__anim { position: relative; width: 168px; height: 168px; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .45)); animation: isheetFloat 4s ease-in-out infinite; }
@keyframes isheetFloat { 50% { transform: translateY(-6px); } }
.isheet__name { text-align: center; font: 22px var(--font-display); line-height: 1.15; }
.isheet__val { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 6px; font-size: 20px; font-weight: 800; }
.isheet__val .ton-ico { width: 16px; height: 16px; color: #bfe3ff; }
.isheet__sub { margin: 4px 0 16px; text-align: center; font-size: 12.5px; font-weight: 600; color: var(--satin-3); }
.gift { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
@media (prefers-reduced-motion: reduce) { .isheet__rays, .isheet__anim { animation: none; } }

/* ───────── пополнение звёздами: тёплая карточка «звёзды › TON», пресеты, белая кнопка ───────── */
.sdep__hero { position: relative; height: 172px; margin: 0 0 12px; border-radius: 22px; overflow: hidden; display: grid; place-items: center;
  background: radial-gradient(120% 90% at 50% 0%, #ffd36a 0%, #ffad2e 46%, #f08a12 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 18px 40px -22px rgba(255, 150, 20, .7); }
.sdep__hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 50% at 50% 100%, rgba(255, 255, 255, .25), transparent 70%); pointer-events: none; }
.sdep__spark { position: absolute; width: 18px; height: 18px; background: #fff; opacity: .85;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); animation: sdepTwinkle 3.2s ease-in-out infinite; }
.sdep__spark--s { width: 12px; height: 12px; opacity: .6; animation-delay: -1.2s; }
.sdep__spark--xs { width: 8px; height: 8px; opacity: .5; animation-delay: -2.1s; }
@keyframes sdepTwinkle { 50% { transform: scale(.6) rotate(20deg); opacity: .3; } }
.sdep__pair { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; padding: 14px 18px 12px; border-radius: 20px;
  background: #fff; color: #17171c; box-shadow: 0 12px 30px -12px rgba(120, 60, 0, .55); animation: sdepPop .35s var(--ease-out); }
@keyframes sdepPop { from { transform: scale(.94); } }
.sdep__side { display: flex; flex-direction: column; align-items: center; min-width: 92px; }
.sdep__side b { margin-top: 6px; font-size: 19px; font-weight: 800; line-height: 1.1; }
.sdep__side small { font-size: 11.5px; font-weight: 600; color: #7d7d88; }
.sdep__coin { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .4), 0 6px 14px -6px rgba(0, 0, 0, .35); }
.sdep__coin--star { background: linear-gradient(180deg, #ffd65a, #f59a0c); }
.sdep__coin--star svg { width: 30px; height: 30px; }
.sdep__coin--star svg path { fill: #fff; }
.sdep__coin--ton { color: #fff;   /* наша монета, как на странице партнёрки: глянцевый центр и металлический ободок */
  background: radial-gradient(110% 80% at 30% 16%, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 36%),
    radial-gradient(circle at 50% 50%, #3cb2ff 0, #0f86ea 48%, #0a62c8 60%, #0a55b4 61.5%, transparent 62.6%),
    conic-gradient(from 210deg, #c3e6ff, #1c5fd2 18%, #8fd0ff 36%, #0c3c9e 56%, #a5dbff 78%, #c3e6ff);
  box-shadow: 0 6px 14px -6px rgba(0, 60, 180, .8), inset 0 -2px 4px rgba(0, 25, 90, .45); }
.sdep__coin--ton .ton-ico { width: 24px; height: 24px; color: #fff; filter: drop-shadow(0 1px 1.5px rgba(0, 35, 110, .7)); }
.sdep__arrow { font-size: 26px; font-weight: 700; color: #c4c4cc; margin-top: -26px; }
.sdep__amounts { display: grid; grid-template-columns: repeat(4, 1fr) 48px; gap: 8px; margin-bottom: 12px; }
.sdep__amounts button.sdep__edit { color: var(--satin-2); }
.sdep__edit svg { width: 19px; height: 19px; }
.sdep__custom { display: flex; align-items: center; gap: 8px; height: 50px; margin: -4px 0 12px; padding: 0 14px; border-radius: 14px;
  background: var(--velvet-2); box-shadow: inset 0 0 0 2px #ffb02e; animation: sdepPop .25s var(--ease-out); }
.sdep__custom input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--satin); font-size: 17px; font-weight: 800; }
.sdep__custom input::placeholder { color: var(--satin-3); font-weight: 600; }
.sdep__custom small { flex: none; font-size: 11.5px; font-weight: 600; color: var(--satin-3); }
.sdep__custom.is-bad { box-shadow: inset 0 0 0 2px #ff5a6a; }
.sdep__custom.is-bad small { color: #ff7d8a; }

.sdep__amounts button { height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; border-radius: 14px;
  font-size: 15px; font-weight: 800; color: var(--satin); background: var(--velvet-2); box-shadow: inset 0 0 0 1px var(--line-2); transition: transform .15s, box-shadow .2s, background .2s; }
.sdep__amounts button:active { transform: scale(.96); }
.sdep__amounts button.on { background: rgba(255, 176, 46, .14); box-shadow: inset 0 0 0 2px #ffb02e, 0 0 18px -8px #ffb02e; }
.sdep__mini { display: inline-flex; width: 16px; height: 16px; }
.sdep__mini svg { width: 100%; height: 100%; }
.sdep__pay { width: 100%; height: 54px; display: flex; align-items: center; justify-content: center; gap: 6px; border-radius: 999px;
  background: #fff; color: #111116; font-size: 16px; font-weight: 800; box-shadow: 0 10px 26px -12px rgba(255, 255, 255, .5); transition: transform .15s, opacity .2s; }
.sdep__pay:active { transform: scale(.98); }
.sdep__pay[disabled] { opacity: .55; }
.sdep__pay .sdep__mini { width: 18px; height: 18px; }
@media (prefers-reduced-motion: reduce) { .sdep__spark, .sdep__pair { animation: none; } }
@media (max-width: 360px) { .sdep__amounts { grid-template-columns: repeat(4, 1fr) 42px; gap: 6px; } .sdep__amounts button { font-size: 13px; gap: 3px; } .sdep__amounts .sdep__mini { width: 13px; height: 13px; } }

/* ───────── холд со звёзд: замочек на плитке, пояснение в карточке, строка во вкладке звёзд ───────── */
.hold-tag { position: absolute; left: 6px; top: 6px; z-index: 2; display: inline-flex; align-items: center; gap: 3px; padding: 2px 6px 2px 4px;
  border-radius: 8px; background: rgba(10, 10, 14, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: #ffd36a; font-size: 10px; font-weight: 800; }
.hold-tag svg { width: 11px; height: 11px; }
.hold-note { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 12px; padding: 11px 12px; border-radius: 16px;
  background: rgba(255, 196, 70, .1); box-shadow: inset 0 0 0 1px rgba(255, 196, 70, .28); }
.hold-note > svg { flex: none; width: 20px; height: 20px; margin-top: 1px; color: #ffcf5c; }
.hold-note b { display: block; font-size: 14px; font-weight: 800; color: #ffe08a; }
.hold-note span { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.35; color: var(--satin-2); }
.sdep__hold { margin-top: 10px; text-align: center; font-size: 12px; font-weight: 600; color: var(--satin-3); }

/* ───────── PvP «Джекпот» ───────── */
.gx--jackpot { --g1: #ffd84a; --g2: #ffb21f; --g3: #f08a0c; --gs: rgba(255, 170, 30, .6); }
.ga--jack { position: absolute; inset: 6%; display: block; }
.ga-jack__ring { position: absolute; inset: 0; border-radius: 50%; animation: haloSpin 14s linear infinite;
  background: conic-gradient(#3d8dff 0 28%, #ff4f8b 0 47%, #30d17a 0 63%, #a46bff 0 79%, #fff 0 88%, #2fd3e0 0);
  box-shadow: 0 6cqw 14cqw -4cqw rgba(120, 60, 0, .55); }
.ga-jack__hole { position: absolute; inset: 17%; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #3a2a10, #1a1206); box-shadow: inset 0 0 0 2cqw rgba(255, 255, 255, .15); }
.ga-jack__ptr { position: absolute; left: 50%; top: -4%; width: 12%; height: 14%; transform: translateX(-50%); background: #fff; clip-path: polygon(0 0, 100% 0, 50% 100%); filter: drop-shadow(0 1cqw 1cqw rgba(0, 0, 0, .4)); }
.ga-jack__gift { position: absolute; left: 50%; top: 50%; width: 58%; height: 58%; object-fit: contain; transform: translate(-50%, -50%); animation: gaFloat 3.4s ease-in-out infinite; }

.jp .backline { gap: 10px; }
.jp-fee { margin-left: auto; padding: 4px 10px; border-radius: 99px; background: var(--velvet-2); box-shadow: inset 0 0 0 1px var(--line); font-size: 11.5px; font-weight: 700; color: var(--satin-2); }
.jp-stage { position: relative; width: min(300px, 82vw); aspect-ratio: 1; margin: 6px auto 16px; }
.jp-wheel { position: absolute; inset: 0; }
.jp-wheel__glow { position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 190, 70, .22), transparent 68%); filter: blur(10px); }
.jp-wheel__rot { position: absolute; inset: 0; will-change: transform; }
.jp-wheel__rot svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .55)); }
.jp-wheel__ptr { position: absolute; left: 50%; top: -6px; z-index: 2; width: 26px; height: 30px; transform: translateX(-50%);
  background: linear-gradient(#fff, #d8dce6); clip-path: polygon(0 0, 100% 0, 50% 100%); filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .5)); }
.jp-center { position: absolute; inset: 23%; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-align: center;
  background: radial-gradient(circle at 50% 35%, #1d1d24, #0e0e12 70%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 0 30px rgba(0, 0, 0, .6); }
.jp-center small { font-size: 11.5px; font-weight: 600; color: var(--satin-3); }
.jp-center__sum { display: inline-flex; align-items: center; gap: 5px; font-size: 26px; font-weight: 900; line-height: 1; }
.jp-center__sum .ton-ico { width: 18px; height: 18px; color: #bfe3ff; }
.jp-center__st { font-size: 12.5px; font-weight: 700; color: var(--satin-2); max-width: 80%; }
.jp-center__st.is-count { font-size: 22px; font-weight: 900; color: #ffcf5c; font-variant-numeric: tabular-nums; }
.jp-center__ava { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: var(--velvet-3); font-weight: 800; box-shadow: 0 0 0 3px #ffcf5c, 0 0 24px rgba(255, 207, 92, .55); animation: sdepPop .4s var(--ease-out); }
.jp-center__ava img, .jp-pl__ava img, .jp-h__ava img { width: 100%; height: 100%; object-fit: cover; }
.jp-center__name { font-size: 14px; font-weight: 800; max-width: 86%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jp-players { display: grid; gap: 6px; margin-bottom: 14px; }
.jp-pl__main .ton-ico, .jp-pl__ch .ton-ico, .jp-picked .ton-ico, .jp-h .ton-ico, .jp-join__head .ton-ico { width: 10px; height: 10px; }
.jp-join { padding: 14px; border-radius: 20px; background: var(--velvet-1); box-shadow: inset 0 0 0 1px var(--line); margin-bottom: 16px; }
.jp-join__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.jp-join__head b { font-size: 15px; }
.jp-join__head span { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: var(--satin-3); }
.jp-amt { display: flex; gap: 8px; }
.jp-amt .field { flex: 1; }
.jp-gifts { flex: none; width: 56px; height: 48px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 3px;
  background: var(--velvet-2); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--satin); font-weight: 800; font-size: 16px; }
.jp-gifts svg { width: 18px; height: 18px; }
.jp-gifts.on { background: rgba(255, 176, 46, .14); box-shadow: inset 0 0 0 2px #ffb02e; color: #ffd36a; }
.jp-chips { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 8px 0 10px; }
.jp-chips button { height: 36px; border-radius: 11px; background: var(--velvet-2); box-shadow: inset 0 0 0 1px var(--line); font-weight: 800; font-size: 14px; color: var(--satin-2); }
.jp-chips button.on { color: #fff; box-shadow: inset 0 0 0 2px var(--cta); background: var(--cta-soft); }
.jp-picked { display: flex; align-items: center; gap: 2px; margin: -2px 0 10px; flex-wrap: wrap; }
.jp-picked img { width: 30px; height: 30px; object-fit: contain; }
.jp-picked span { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; font-size: 12.5px; font-weight: 700; color: #ffd36a; }
.jp-join__ch { margin-left: 8px; padding: 2px 8px; border-radius: 99px; background: rgba(255, 255, 255, .18); font-size: 12px; font-weight: 800; }
.jp-rules { margin-top: 10px; font-size: 11.5px; line-height: 1.4; color: var(--satin-3); text-align: center; }
.jp-hist { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 14px; scrollbar-width: none; }
.jp-h { flex: none; width: 76px; padding: 10px 6px 8px; border-radius: 16px; background: var(--velvet-2); box-shadow: inset 0 0 0 1px var(--line); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.jp-h.is-me { box-shadow: inset 0 0 0 1.5px #ffcf5c; }
.jp-h__ava { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: var(--velvet-3); font-weight: 800; }
.jp-h b { display: inline-flex; align-items: center; gap: 2px; font-size: 12.5px; font-weight: 800; }
.jp-h span { font-size: 11px; color: var(--satin-3); }
.jp-fair { font-size: 10.5px; line-height: 1.5; color: var(--satin-3); text-align: center; word-break: break-all; padding-bottom: 8px; }
.jp-pick { max-height: 52vh; overflow-y: auto; grid-auto-rows: max-content; align-content: start; }   /* ряды по карточке: иначе в листе с ограниченной высотой они сжимаются и карточки налезают */

/* ───────── PvP «Арена» (по записи арены Portals): поле, шайба, игроки, ставки, экран победы ───────── */
.page.ar { padding-bottom: calc(var(--tab-h) + var(--safe-b) + 150px); }
.ar-panel { margin: 2px 0 18px; padding: 0 7px 7px; border-radius: 24px; background: #17171c; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05), 0 18px 36px -20px #000; }
.ar-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 9px 11px; font-size: 14px; font-weight: 600; color: var(--satin-3); }
.ar-top b { display: inline-flex; align-items: center; gap: 3px; margin-left: 5px; color: #3d9bff; font-weight: 800; font-size: 15px; }
.ar-top b .ar-gem { width: 16px; height: 16px; margin-left: 2px; }
.ar-top__st { color: var(--satin-2); font-weight: 700; font-variant-numeric: tabular-nums; }
.ar-live { display: inline-flex; align-items: center; gap: 7px; color: #3ddc84; font-weight: 800; letter-spacing: .02em; }
.ar-live i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #3ddc84; }
.ar-live i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(61, 220, 132, .45); animation: ringOut 1.2s ease-out infinite; }

/* лоток: тёмная рамка с фактурой, внутри квадратное поле; камера наезжает на всё вместе */
.ar-board { position: relative; aspect-ratio: 1; border-radius: 18px; overflow: hidden; container-type: inline-size; will-change: transform;   /* свой слой; сама доска не масштабируется — мыла нет */
  background: radial-gradient(120% 90% at 20% 10%, #2e2e33, #222226 60%, #1c1c20);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), inset 0 0 0 1px rgba(255, 255, 255, .04), inset 0 -10px 22px -12px rgba(0, 0, 0, .7); }
.ar-cam { position: absolute; inset: 0; transform-origin: 0 0; }   /* без will-change: иначе Safari растягивает растр и мылит при зуме */
.ar-field { position: absolute; inset: 3.4%; background: #121216; box-shadow: 0 0 0 1px rgba(0, 0, 0, .35), 0 1.6cqw 3cqw -1cqw rgba(0, 0, 0, .55); }
.ar-field.is-empty { border-radius: 2.5cqw; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04);
  background: radial-gradient(60% 45% at 28% 22%, rgba(255, 255, 255, .055), transparent 70%), radial-gradient(45% 40% at 78% 74%, rgba(255, 255, 255, .035), transparent 70%),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, .014) 0 2px, transparent 2px 9px), repeating-linear-gradient(28deg, rgba(0, 0, 0, .12) 0 1px, transparent 1px 13px),
    linear-gradient(160deg, #29292e, #17171b); }
.ar-field svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ar-empty { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.ar-empty span { font-size: 19px; font-weight: 600; letter-spacing: .01em; color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(90deg, #2b8582 0%, #6fd6c8 25%, #5aa2ff 50%, #2b8582 75%, #6fd6c8 100%); background-size: 200% 100%; animation: arShimmer 2.6s linear infinite; }
@keyframes arShimmer { to { background-position: -200% 0; } }
.ar-ava-pos { position: absolute; aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; }
.ar-ava { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; color: #fff;
  box-shadow: 0 .8cqw 2.2cqw rgba(0, 0, 0, .22), inset 0 -.8cqw 1.6cqw rgba(0, 0, 0, .12), inset 0 .8cqw 1.4cqw rgba(255, 255, 255, .3); }
.ar-ava b { font-weight: 800; line-height: 1; text-shadow: 0 .2cqw .5cqw rgba(0, 0, 0, .18); }
.ar-ava img { width: 100%; height: 100%; object-fit: cover; }
.ar-ava-pos .ar-ava b { font-size: 1em; }
/* шайба, прицел и ник — над полем, каждый в своём слое (will-change): летают и крутятся без перерисовки поля.
   Нарисованы в размере максимального зума камеры и уменьшаются scale-ом — при наезде остаются чёткими. 1em = диаметр шайбы. */
.ar-over { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.ar-mark, .ar-aim { position: absolute; left: 0; top: 0; width: 1em; aspect-ratio: 1; font-size: 13.57cqw; will-change: transform; }   /* 13,57 = 5,2% × 0,932 (поле в лотке) × 2,8 (макс. зум) */
.ar-mark { visibility: hidden; }
.ar-mark i { position: absolute; inset: 0; border-radius: 50%; animation: arPop .34s cubic-bezier(.34, 1.56, .64, 1) both;
  background: radial-gradient(circle, rgba(16, 16, 24, .3) 0 45%, #fff 47%, #f3f4f8 62%, #c9cdd8 86%, #aab0bd 100%);
  box-shadow: 0 .14em .33em rgba(0, 0, 0, .45), inset 0 .06em .08em rgba(255, 255, 255, .9), 0 0 0 .05em rgba(255, 255, 255, .35); }
@keyframes arPop { from { transform: scale(0); } }
.ar-mark i::before, .ar-mark i::after { content: ""; position: absolute; left: 50%; top: 27%; bottom: 27%; width: .058em; margin-left: -.029em; background: #15151c; border-radius: 1em; }
.ar-mark i::after { transform: rotate(90deg); }
.ar-mark__name { position: absolute; left: 50%; bottom: 135%; transform: translateX(-50%); white-space: nowrap; font-style: normal;
  font-size: .5em; font-weight: 600; color: #fff; text-shadow: 0 .06em .24em rgba(0, 0, 0, .6), 0 0 .08em rgba(0, 0, 0, .45); }
.ar-aim { opacity: 0; }
.ar-aim i { position: absolute; left: 112%; top: 50%; width: 96%; aspect-ratio: 1; transform: translateY(-50%); }
.ar-aim svg { display: block; width: 100%; height: 100%; overflow: visible; }

.ar-head { display: flex; align-items: baseline; gap: 6px; margin: 0 2px 10px; }
.ar-head b { font: 22px var(--font-display); }
.ar-head span { font-size: 18px; font-weight: 800; color: var(--satin-3); }
.ar-head em { margin-left: auto; font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--satin-3); }
.jp-h__ava { flex: none; width: 34px; height: 34px; font-size: 15px; }
.jp-h__ava .ar-ava { box-shadow: none; }

/* карточка игрока: аватар, ник, точка цвета его области + шанс, сумма; снизу плитки ставки */
.ar-players { display: grid; gap: 8px; margin-bottom: 12px; }
.ar-pl { border-radius: 20px; background: #1b1b20; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); overflow: hidden; }
.ar-pl.is-me { box-shadow: inset 0 0 0 1.5px rgba(47, 140, 255, .7); }
.ar-pl.is-win { box-shadow: inset 0 0 0 2px #ffcf5c, 0 0 24px -8px #ffcf5c; }
.ar-pl__top { display: flex; align-items: center; gap: 10px; padding: 11px 14px 10px; }
.ar-pl__ava { flex: none; width: 38px; height: 38px; font-size: 16px; }
.ar-pl__ava .ar-ava { box-shadow: none; }
.ar-pl__main { flex: 1; min-width: 0; }
.ar-pl__main b { display: block; font-size: 15px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ar-pl__main span { display: inline-flex; align-items: center; gap: 5px; margin-top: 1px; font-size: 12px; font-weight: 700; color: var(--satin-3); }
.ar-pl__main span i { width: 7px; height: 7px; border-radius: 50%; }
.ar-pl__sum { display: inline-flex; align-items: center; gap: 4px; font-size: 17px; font-weight: 900; }
.ar-pl__sum .ar-gem { width: 17px; height: 17px; }
.ar-pl__bets { display: flex; flex-wrap: wrap; gap: 6px; padding: 9px 14px 11px; background: rgba(255, 255, 255, .025); border-top: 1px solid rgba(255, 255, 255, .04); }
.ar-tile { position: relative; flex: none; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, .38), transparent 70%), var(--c, #555); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); }
.ar-tile img { width: 82%; height: 82%; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .3)); }
.ar-tile em { position: absolute; left: 0; right: 0; bottom: 2px; display: flex; align-items: center; justify-content: center; gap: 1px;
  font-style: normal; font-size: 9px; font-weight: 800; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .45); white-space: nowrap; }
.ar-tile em .ar-gem { width: 10px; height: 10px; color: #d6eaff; }
.ar-tile--ton { background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, .3), transparent 70%), linear-gradient(160deg, #5cb6ff, #2f6bff); }
.ar-tile--ton .ar-gem--tile { width: 56%; height: 56%; margin-top: -24%; color: #fff; filter: drop-shadow(0 3px 6px rgba(0, 40, 140, .35)); }
.ar-tile--more { background: rgba(255, 255, 255, .08); font-size: 12px; font-weight: 800; color: var(--satin-2); }
.ar-hash { display: flex; align-items: center; justify-content: center; gap: 5px; margin: 6px auto 2px; font-size: 13px; font-weight: 700; color: var(--satin-3); }
.ar-hash b { color: var(--satin-2); font-weight: 800; }
.ar-hash svg { width: 14px; height: 14px; }

/* ставки — над доком: режим «подарки / TON», фишки в один тап, ва-банк с подтверждением, повтор прошлой ставки */
.ar-bet { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--tab-h) + var(--safe-b) + 12px); z-index: 36;
  width: 100%; max-width: 560px; display: grid; gap: 9px; padding: 26px 12px 8px; background: linear-gradient(rgba(11, 11, 15, 0), rgba(11, 11, 15, .94) 32%); }
.ar-bet__row1 { display: flex; align-items: center; }
.ar-seg { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: #1a1a1f; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), 0 6px 16px -8px #000; }
.ar-seg button { width: 50px; height: 34px; border-radius: 999px; display: grid; place-items: center; color: #8d8d97; transition: background .2s, color .2s, box-shadow .2s; }
.ar-seg button svg { width: 18px; height: 18px; }
.ar-seg button .ar-gem { width: 20px; height: 20px; }
.ar-seg button.on { color: #fff; background: linear-gradient(180deg, #44a2ff, #1f7cf2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 6px 14px -6px rgba(47, 140, 255, .9); }
.ar-bet__row2 { display: flex; gap: 7px; }
.ar-circ { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: #2a2a31; color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); transition: transform .12s, opacity .2s; }
.ar-circ svg { width: 20px; height: 20px; }
.ar-chip { flex: 1; min-width: 0; height: 46px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  background: #2a2a31; color: #fff; font-size: 16px; font-weight: 800; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); transition: transform .12s, opacity .2s, background .2s; }
.ar-chip .ar-gem { width: 16px; height: 16px; }
.ar-chip--all { flex: 1.55; font-size: 14.5px; white-space: nowrap; }
.ar-chip--all.is-armed { background: #e5484d; }
.ar-chip:active, .ar-circ:active, .ar-add:active { transform: scale(.95); }
.ar-chip[disabled], .ar-circ[disabled] { opacity: .4; }
.ar-bet__row2--gifts .ar-white { flex: 1; height: 50px; }
.ar-add { flex: 1; height: 50px; border-radius: 999px; display: flex; align-items: center; justify-content: center; gap: 10px;
  background: #2a2a31; color: #fff; font-size: 15px; font-weight: 800; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); transition: transform .12s, opacity .2s; }
.ar-add span { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }
.ar-add small { font-size: 11px; font-weight: 700; color: var(--satin-3); }
.ar-add__stack { display: flex; padding-left: 8px; }
.ar-add__stack img { width: 26px; height: 26px; margin-left: -9px; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5)); }
.ar-add__stack svg { width: 22px; height: 22px; color: var(--satin-3); }
.ar-add[disabled] { opacity: .45; }
.ar-white { width: 100%; height: 52px; border-radius: 999px; background: #fff; color: #111116; font-size: 16px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; gap: 5px; box-shadow: 0 10px 24px -12px rgba(255, 255, 255, .45); transition: transform .15s, opacity .2s; }
.ar-white:active { transform: scale(.98); }
.ar-white[disabled] { opacity: .45; }
.ar-white .ton-ico { width: 14px; height: 14px; color: #0a84e8; }

/* значок валюты — кристалл (svg .ar-gem); размер задаёт место */
.ar-gem { display: inline-block; flex: none; width: 1.15em; height: 1.15em; vertical-align: -.2em; }
.ar-win__sum b { display: inline-flex; align-items: center; gap: 6px; }
.ar-win__sum b .ar-gem { width: 24px; height: 24px; filter: drop-shadow(0 2px 4px rgba(0, 40, 140, .4)); }
.jp-h b .ar-gem { width: 13px; height: 13px; margin-right: 1px; }
.ar-white .ar-gem { width: 17px; height: 17px; margin-left: 4px; }
.ar-add small { display: inline-flex; align-items: center; gap: 3px; }
.ar-add small .ar-gem { width: 12px; height: 12px; }
/* маленькая TON-плитка в карточке игрока: монета + сумма; длинные суммы — 12,4K, плитка шире квадрата при нужде */
.ar-pl__bets .ar-tile--ton { width: auto; min-width: 32px; padding: 0 3px; }
.ar-pl__bets .ar-tile--ton .ar-gem--tile { width: 19px; height: 19px; margin-top: -9px; }
.ar-pl__bets .ar-tile--ton em { font-size: 8.5px; bottom: 1px; letter-spacing: -.02em; }

/* «Настроить кнопки» (карандаш): какая фишка — сумма — «Ва-банк» */
.ar-cfg__tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 3px; border-radius: 999px; background: #232329; }
.ar-cfg__tabs button { height: 36px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  color: #7c7c86; font-size: 15px; font-weight: 800; transition: background .2s, color .2s; }
.ar-cfg__tabs button .ar-gem { width: 14px; height: 14px; }
.ar-cfg__tabs button.on { background: #fff; color: #111116; }
.ar-cfg__val { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin: 26px 0 6px; font-size: 46px; font-weight: 900; }
.ar-cfg__val input { min-width: .8em; max-width: 6em; padding: 0; border: 0; outline: 0; background: none; color: #fff; font: inherit; text-align: right; caret-color: #2f8cff; }
.ar-cfg__val span { font-size: 32px; font-weight: 800; color: #6e6e78; }
.ar-cfg__del { align-self: center; width: 34px; height: 34px; display: grid; place-items: center; color: #fff; }
.ar-cfg__del svg { width: 26px; height: 26px; }
.ar-cfg__hint { text-align: center; font-size: 12.5px; font-weight: 700; color: #ff6b6b; }
.ar-cfg__row { display: flex; align-items: center; justify-content: space-between; margin: 26px 2px 22px; font-size: 15px; font-weight: 700; color: #fff; }
.ar-switch { position: relative; flex: none; width: 52px; height: 32px; border-radius: 999px; background: #3a3a42; transition: background .2s; }
.ar-switch i { position: absolute; left: 3px; top: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .35); transition: transform .22s cubic-bezier(.3, 1.3, .6, 1); }
.ar-switch.on { background: #2f8cff; }
.ar-switch.on i { transform: translateX(20px); }
.ar-cfg__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ar-cfg__reset, .ar-cfg__save { height: 52px; border-radius: 999px; font-size: 16px; font-weight: 800; color: #fff; transition: transform .12s, opacity .2s; }
.ar-cfg__reset { background: #2c2c33; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07); }
.ar-cfg__save { background: linear-gradient(180deg, #44a2ff, #1f7cf2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 10px 22px -12px rgba(47, 140, 255, .9); }
.ar-cfg__reset:active, .ar-cfg__save:active { transform: scale(.97); }
.ar-cfg__save[disabled] { opacity: .45; }

/* итог: экран размыт, хлопушка снизу, конфетти сыпется, снизу выезжает зелёная шторка с выигрышем */
.ar-win { position: fixed; inset: 0; z-index: 85; display: flex; align-items: flex-end; justify-content: center; background: rgba(6, 6, 9, .3);
  -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1); animation: fade .25s; }
.ar-win__conf { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.ar-win__conf i { position: absolute; top: -4%; width: 7px; height: 11px; border-radius: 2px; opacity: .9; animation: arConf 3.2s linear infinite; }
@keyframes arConf { to { transform: translateY(110vh) rotate(540deg); } }
.ar-win__pop { position: absolute; left: 50%; bottom: 0; width: 0; height: 0; z-index: 2; pointer-events: none; }
.ar-win__pop i { position: absolute; left: -4px; top: -6px; width: 8px; height: 12px; border-radius: 2px; opacity: 0; animation: arPopC 1.7s cubic-bezier(.12, .7, .3, 1) forwards; }
@keyframes arPopC { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 45% { opacity: 1; transform: translate(var(--dx), var(--dy)) rotate(var(--r)); }
  100% { opacity: 0; transform: translate(calc(var(--dx) * 1.2), calc(var(--dy) + 40vh)) rotate(calc(var(--r) * 2)); } }
.ar-win__card { position: relative; z-index: 1; width: 100%; max-width: 560px; padding: 22px 14px calc(16px + var(--safe-b)); border-radius: 30px 30px 0 0; text-align: center;
  background: radial-gradient(110% 60% at 50% 0%, #2b5e3a 0%, #1f4a2c 45%, #183a23 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 -30px 60px -20px #000;
  animation: arSheet .45s cubic-bezier(.2, .9, .25, 1); }
@keyframes arSheet { from { transform: translateY(100%); } }
.ar-win__x { position: absolute; right: 14px; top: 14px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .35); color: #fff; font-size: 14px; font-weight: 800; }
.ar-win__card h2 { margin: 0 40px 2px; font: 25px/1.15 var(--font-display); color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, .35); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-win__st { position: relative; z-index: 1; display: block; width: 210px; height: 210px; margin: -4px auto -22px; object-fit: contain;
  filter: drop-shadow(0 16px 22px rgba(0, 0, 0, .45)); animation: isheetFloat 3.6s ease-in-out infinite; }
/* под стикером — тёмная плашка с суммой и плитками выигрыша */
.ar-win__box { padding: 30px 14px 16px; border-radius: 24px; background: rgba(0, 0, 0, .26); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.ar-win__sum { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 16px; }
.ar-win__sum b { font-size: 22px; font-weight: 900; color: #fff; letter-spacing: -.01em; }
.ar-win__sum span { padding: 4px 10px; border-radius: 10px; background: #2f8cff; color: #fff; font-size: 15px; font-weight: 800; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); }
.ar-win__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.ar-win__grid.is-few { display: flex; justify-content: center; gap: 12px; }
.ar-win__grid.is-few .ar-tile { width: 128px; }
.ar-win__grid .ar-tile { width: auto; height: auto; aspect-ratio: 1; border-radius: 20px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 10px 22px -12px rgba(0, 0, 0, .6); }
.ar-win__grid .ar-tile img { width: 66%; height: 66%; margin-top: -16%; }
/* подпись цены — тёмная пилюля внизу плитки */
.ar-win__grid .ar-tile em { left: 50%; right: auto; bottom: 8%; transform: translateX(-50%); gap: 3px; padding: 3px 9px; border-radius: 999px;
  background: rgba(10, 14, 30, .38); font-size: 11.5px; text-shadow: none; }
.ar-win__grid .ar-tile em .ar-gem { width: 12px; height: 12px; }
.ar-win__grid .ar-tile--ton em { background: none; padding: 0; font-size: 13px; }   /* у TON-плитки — просто подпись, как у Portals */
.ar-win__grid.is-few .ar-tile em { font-size: 13px; padding: 4px 11px; }
.ar-win__grid .ar-tile--more { font-size: 20px; }
@media (prefers-reduced-motion: reduce) { .ar-win__conf i, .ar-win__pop i, .ar-win__st, .ar-live i::after, .ar-empty span, .ar-mark i, .ar-win__card { animation: none; } }

.ga--arena { position: absolute; inset: 8%; display: block; border-radius: 12%; overflow: hidden; transform: rotate(-6deg);
  box-shadow: 0 0 0 1.4cqw rgba(255, 255, 255, .85), 0 6cqw 14cqw -4cqw rgba(120, 60, 0, .6); }
.ga-ar__p { position: absolute; inset: 0; }
.ga-ar__p1 { background: linear-gradient(135deg, #a8ff78, #3fd8b0); }
.ga-ar__p2 { background: linear-gradient(135deg, #f953c6, #b91d73); clip-path: polygon(0 0, 62% 0, 30% 58%, 0 46%); }
.ga-ar__p3 { background: linear-gradient(135deg, #4facfe, #00c6fb); clip-path: polygon(0 46%, 30% 58%, 46% 100%, 0 100%); }
.ga-ar__p4 { background: linear-gradient(135deg, #ffe259, #ffa751); clip-path: polygon(62% 0, 100% 0, 100% 52%, 58% 40%); }
.ga-ar__a { position: absolute; width: 22%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 900; font-size: 8cqw; transform: rotate(6deg);
  box-shadow: inset 0 -1cqw 2cqw rgba(0, 0, 0, .2), inset 0 1cqw 1.6cqw rgba(255, 255, 255, .35); }
.ga-ar__a1 { left: 9%; top: 12%; background: #ff9f43; }
.ga-ar__a2 { left: 8%; top: 64%; width: 17%; font-size: 6cqw; background: #8e7cff; }
.ga-ar__a3 { left: 70%; top: 10%; width: 18%; font-size: 6.5cqw; background: #ff5e8a; }
.ga-ar__a4 { left: 52%; top: 56%; width: 30%; font-size: 11cqw; background: #3fa9ff; }
.ga-ar__mk { position: absolute; left: 40%; top: 36%; width: 15%; aspect-ratio: 1; border-radius: 50%; background: #fff; animation: gaArMk 3.2s ease-in-out infinite;
  box-shadow: 0 1cqw 2cqw rgba(0, 0, 0, .35), inset 0 0 0 1.6cqw #fff, inset 0 0 0 2.4cqw #c9cdd6; }
.ga-ar__mk::before, .ga-ar__mk::after { content: ""; position: absolute; left: 50%; top: 20%; bottom: 20%; width: 1cqw; margin-left: -.5cqw; border-radius: 1cqw; background: #2a2a33; }
.ga-ar__mk::after { transform: rotate(90deg); }
@keyframes gaArMk { 0%, 100% { transform: translate(0, 0); } 30% { transform: translate(120%, -60%); } 60% { transform: translate(-80%, 90%); } }