@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&family=Nunito:wght@900&family=Roboto+Mono:wght@500;700&display=swap");
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Классы ниже задают display, а он перебивает атрибут hidden — возвращаем ему силу */
[hidden] { display: none !important; }

:root {
  /* радужный градиент как на логотипе — фирменная фишка интерфейса */
  --rainbow: conic-gradient(from 205deg,
    #ffd60a 0deg, #ff8a00 42deg, #ff2d6f 96deg, #a855f7 150deg,
    #3b82f6 205deg, #22d3ee 254deg, #34d399 300deg, #ffd60a 360deg);
  --tg-blue-1: #2aabee;
  --tg-blue-2: #229ed9;
  --gold: #ffc93c;
  --spin: #ff5c7a;
  --green: #2fd98f;
  --red: #ff5d6c;

  --r-sm: 14px;
  --r-md: 20px;
  --r-lg: 26px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  /* Боковой отступ: 16px на телефоне, а на широком экране растёт,
     удерживая контент колонкой 480px по центру */
  --gutter: max(16px, calc((100% - 480px) / 2));

  --bg: #000005;
  --card: #101014;
  --card-2: #16161c;
  --border: rgba(255, 255, 255, .07);
  --text: #ffffff;
  --dim: #8b8b98;
  --dim-2: #5f5f6c;
  --nav: rgba(8, 8, 12, .82);
  --track: rgba(255, 255, 255, .1);
}

[data-theme="light"] {
  --bg: #f2f2f6;
  --card: #ffffff;
  --card-2: #f7f7fa;
  --border: rgba(12, 12, 30, .08);
  --text: #0d0d14;
  --dim: #71717f;
  --dim-2: #9a9aa8;
  --nav: rgba(255, 255, 255, .84);
  --track: rgba(12, 12, 30, .09);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  min-height: 100vh;
  padding-bottom: calc(94px + env(safe-area-inset-bottom));
  overflow-x: hidden;
}

.ic { width: 1em; height: 1em; display: block; flex: none; }

.glow { position: fixed; border-radius: 50%; filter: blur(90px); pointer-events: none; z-index: 0; }
.glow-a { top: -140px; right: -110px; width: 300px; height: 300px; background: #2f6bff; opacity: .28; }
.glow-b { bottom: 10%; left: -130px; width: 260px; height: 260px; background: #b03cff; opacity: .18; }
[data-theme="light"] .glow { opacity: .14; }

/* ---------- Шапка ---------- */
.topbar {
  position: sticky; top: 0; z-index: 25;
  display: flex; align-items: center; gap: 10px;
  /* На планшетах и в вебе Telegram окно широкое — держим колонку 480px по центру */
  padding: calc(10px + env(safe-area-inset-top)) var(--gutter) 10px;
  background: linear-gradient(var(--bg) 62%, transparent);
  backdrop-filter: blur(16px);
}
.avatar {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  font-weight: 700; font-size: 15px; color: #fff;
  background: var(--rainbow);
  position: relative;
}
.avatar::after {
  content: ""; position: absolute; inset: 2.5px; border-radius: 50%;
  background: rgba(0, 0, 0, .55);
}
.avatar span { position: relative; z-index: 1; }
[data-theme="light"] .avatar::after { background: rgba(0, 0, 0, .38); }

.profile {
  display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0;
  cursor: pointer; border-radius: 14px; padding: 4px; margin: -4px;
  transition: background .25s var(--ease);
}
.profile:active { background: var(--card-2); }
.chip[role="button"] { cursor: pointer; transition: transform .25s var(--ease); }
.chip[role="button"]:active { transform: scale(.94); }
.greet { flex: 1; min-width: 0; line-height: 1.25; }
/* Длинное имя и «128 заданий выполнено» обрезаем, иначе шапка расползается */
.greet b, .greet span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.greet b { font-size: 15px; font-weight: 650; }
.greet span { font-size: 12.5px; color: var(--dim); }

.chips { display: flex; gap: 7px; flex: none; }
.chip {
  display: flex; align-items: center; gap: 5px;
  padding: 7px 11px; border-radius: 999px;
  font-size: 13.5px; font-weight: 700; white-space: nowrap;
  font-variant-numeric: tabular-nums;
  background: var(--card-2); border: 1px solid var(--border);
}
.chip .ic { font-size: 15px; }
@media (max-width: 360px) {
  .chip { padding: 6px 9px; font-size: 12.5px; }
  .chip .ic { font-size: 14px; }
}
.chip.stars { color: var(--gold); }
.chip.spins { color: var(--spin); }

main { position: relative; z-index: 1; padding: 2px var(--gutter) 0; }

h2.section {
  font-size: 12.5px; font-weight: 650; text-transform: uppercase;
  letter-spacing: .08em; color: var(--dim-2); margin: 24px 4px 12px;
}

/* ---------- Профиль в шапке ---------- */
.ava {
  width: 42px; height: 42px; border-radius: 50%; flex: none; position: relative;
  display: grid; place-items: center; overflow: hidden;
  font-size: 16px; font-weight: 700; color: #fff;
  background: linear-gradient(140deg, #2f3b52, #1a2130);
  border: 1px solid var(--border);
}
.ava img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Лента призов ---------- */
.spin-screen {
  font-family: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, sans-serif;
}
.spin-screen .section, .spin-screen b { letter-spacing: -.01em; }

.reel-stage {
  position: relative; margin: 2px 0 16px;
  padding: 18px 0 18px; border-radius: 26px;
  background: radial-gradient(120% 100% at 50% 0%, #191531 0%, #100e22 60%, #0b0918 100%);
  border: 1px solid rgba(255, 255, 255, .07);
  box-shadow: 0 20px 44px -20px rgba(0, 0, 0, .9);
}
[data-theme="light"] .reel-stage {
  background: radial-gradient(120% 100% at 50% 0%, #ffffff 0%, #f4f4fa 100%);
  border-color: rgba(10, 10, 30, .08);
}

.reel-frame {
  position: relative; height: 142px; overflow: hidden;
  border-radius: 20px; margin: 0 12px;
  border: 1px solid rgba(255, 255, 255, .06);
  background: rgba(255, 255, 255, .02);
  /* края уводим в прозрачность — лента будто уходит за экран */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 13%, #000 87%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 13%, #000 87%, transparent);
}
[data-theme="light"] .reel-frame {
  border-color: rgba(10, 10, 30, .07); background: rgba(10, 10, 30, .02);
}

.reel-track {
  position: absolute; top: 15px; left: 0;
  display: flex; gap: 10px;
  will-change: transform; backface-visibility: hidden;
}
/* размытие только по горизонтали: вертикаль остаётся резкой, и лента
   выглядит быстрой, а не расфокусированной */
.reel-track.fast { filter: url(#reelBlur); }
.reel-track.mid  { filter: url(#reelBlurSoft); }

.rcard {
  flex: none; width: 94px; height: 114px; border-radius: 18px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(165deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02));
  border: 1px solid rgba(255, 255, 255, .08);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
[data-theme="light"] .rcard {
  background: #fff; border-color: rgba(10, 10, 30, .08);
  box-shadow: 0 2px 8px rgba(10, 10, 40, .06);
}
.rstar { width: 26px; height: 26px; fill: var(--c); filter: drop-shadow(0 0 9px var(--c)); }
.rnum {
  font-size: 27px; font-weight: 900; letter-spacing: -.03em; color: #fff;
  font-variant-numeric: tabular-nums;
}
[data-theme="light"] .rnum { color: #14142a; }
.rbar { width: 52px; height: 4px; border-radius: 999px; background: var(--c); }
.rgift { width: 54px; height: 54px; background: center/contain no-repeat; }

/* карточка, на которой лента остановилась */
.rcard.hit {
  transform: scale(1.09);
  border-color: var(--c);
  box-shadow: 0 0 0 2px var(--c), 0 0 34px -4px var(--c);
}
.rcard.hit .rnum { text-shadow: 0 0 18px var(--c); }

/* Маркер: жёлтая нить с клиньями сверху и снизу */
.reel-mark {
  position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; margin-left: -1.5px;
  z-index: 3; border-radius: 3px; pointer-events: none;
  background: linear-gradient(180deg, #ffd45c, #ffb020);
  box-shadow: 0 0 14px rgba(255, 200, 70, .75);
}
.reel-mark::before, .reel-mark::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  border: 7px solid transparent;
}
.reel-mark::before { top: -1px; border-top-color: #ffd45c; border-bottom: none; }
.reel-mark::after { bottom: -1px; border-bottom-color: #ffd45c; border-top: none; }
.reel-mark.flash { animation: markFlash .55s ease-out 2; }
@keyframes markFlash {
  0%, 100% { box-shadow: 0 0 14px rgba(255, 200, 70, .75); }
  45%      { box-shadow: 0 0 30px 6px rgba(255, 216, 110, 1); }
}

@media (prefers-reduced-motion: reduce) {
  .reel-track { transition: none !important; filter: none !important; }
  .rcard, .reel-mark { animation: none !important; }
}


.spin-meta {
  display: flex; gap: 10px; margin-top: 18px;
}
.spin-meta > div {
  flex: 1; text-align: center; padding: 13px 10px; border-radius: var(--r-md);
  background: var(--card); border: 1px solid var(--border);
}
.spin-meta b {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 19px; font-weight: 780; font-variant-numeric: tabular-nums;
}
.spin-meta b .ic { font-size: 18px; }
.spin-meta span { display: block; font-size: 11.5px; color: var(--dim); margin-top: 3px; }

/* Плашка «пригласить друга» — на месте бывшего счётчика бесплатного прокрута */
.spin-meta .invite {
  cursor: pointer;
  border-color: rgba(42, 171, 238, .35);
  background: linear-gradient(160deg, rgba(42, 171, 238, .16), rgba(42, 171, 238, .05));
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.spin-meta .invite:active { transform: scale(.96); }
.spin-meta .invite b { color: var(--tg-blue-1); }
.spin-meta .invite span { color: var(--tg-blue-1); opacity: .8; }

/* Крутить нечем — кнопка становится таймером до бесплатного прокрута */
.btn.countdown { font-variant-numeric: tabular-nums; letter-spacing: .01em; }

.chance-list { display: grid; gap: 8px; }
.chance {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 14px; border-radius: var(--r-sm);
  background: var(--card); border: 1px solid var(--border);
}
.chance-dot { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.chance-name { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 620; }
.chance-val {
  font-size: 13px; font-weight: 700; color: var(--dim);
  font-variant-numeric: tabular-nums;
}

/* ---------- Подарки ---------- */
.gift-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.gift {
  position: relative;
  border-radius: var(--r-md); padding: 14px 8px 12px; text-align: center;
  background: var(--card); border: 1px solid var(--border);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  cursor: pointer; transition: transform .25s var(--ease), border-color .25s;
}
.gift:active { transform: scale(.96); }
.gift .ic { font-size: 62px; }
.gift-price {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px 5px 9px; border-radius: 999px;
  font-size: 14px; font-weight: 800; color: var(--gold);
  font-variant-numeric: tabular-nums;
  background: rgba(255, 190, 70, .13);
  border: 1px solid rgba(255, 190, 70, .28);
}
.gift-price .ic { font-size: 15px; }
.gift.locked { opacity: .5; }

/* Исчерпанный подарок: один на человека. Гасим сильнее, картинку уводим в
   серый и вместо цены пишем «Закончились» — человек должен понять, что дело
   не в нехватке звёзд, а в том, что своё он уже получил. */
.gift.gone { opacity: .42; }
.gift.gone .tg-gift, .gift.gone .pack-art img { filter: grayscale(1) brightness(.8); }
.gift-gone {
  margin-top: 6px; padding: 5px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 700; white-space: nowrap;
  color: var(--dim); background: rgba(255, 255, 255, .05);
  border: 1px solid var(--border);
}

/* ---------- Лента выигрышей ---------- */
.drop-list { display: grid; gap: 8px; }
.drop {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 13px; border-radius: var(--r-sm);
  background: var(--card); border: 1px solid var(--border);
  animation: fadeUp .45s var(--ease) both;
}
.drop-ava {
  width: 34px; height: 34px; border-radius: 50%; flex: none; position: relative;
  display: grid; place-items: center; font-size: 13px; font-weight: 700; color: #fff;
  background: linear-gradient(140deg, #3b475e, #232b3a);
  overflow: hidden;
}
.drop-who { flex: 1; min-width: 0; }
.drop-who b {
  display: block; font-size: 14px; font-weight: 650;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.drop-who span { font-size: 11.5px; color: var(--dim-2); }
.drop-prize {
  display: flex; align-items: center; gap: 5px; flex: none;
  font-size: 14px; font-weight: 800; color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.drop-prize .ic { font-size: 16px; }
.drop-prize.gift { color: var(--spin); }
.drop-prize.gift .ic { font-size: 30px; }

/* ---------- Лимит выплат ---------- */
.limit-card {
  border-radius: var(--r-md); padding: 15px 16px;
  background: var(--card); border: 1px solid var(--border);
}
.limit-top {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-size: 13.5px; color: var(--dim);
}
.limit-top b {
  font-size: 17px; font-weight: 780; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.limit-bar {
  height: 6px; border-radius: 999px; margin: 11px 0 9px;
  background: var(--track); overflow: hidden;
}
.limit-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--gold), #ff9f2e);
  transition: width .6s var(--ease);
}
.limit-hint { font-size: 12.5px; color: var(--dim); line-height: 1.45; }
.limit-hint b { color: var(--gold); font-weight: 700; }

/* ---------- Карточка партнёра ----------

   Оформление один в один с образцом, который прислал владелец: чёрное поле
   без всякой обводки по контуру, а радужное свечение бьёт из-под двух
   ПРОТИВОПОЛОЖНЫХ углов — верхнего левого и нижнего правого. Остальные два
   угла и весь центр чёрные.

   Как это сделано: одна радужная полоса под 122°, видимость которой ограничена
   маской из двух эллипсов, приколоченных к нужным углам. Полоса симметрична
   относительно середины, поэтому от каждого угла наружу читается один и тот же
   порядок — синий, циан, зелёный, жёлтый в чёрное, — и второй угол получается
   зеркальным сам, без второго набора правил.

   Радужной рамки здесь больше нет специально: она читалась как подсветка
   контура, а в образце контура не видно вообще. */
.partner {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: 34px; background: #000;
  margin-bottom: 16px;
  transition: transform .4s var(--ease);
  cursor: pointer;
}
.partner::before {
  content: ""; position: absolute; inset: -14px; z-index: 0;
  pointer-events: none;
  filter: blur(16px) saturate(1.12);
  background: linear-gradient(122deg,
    #3f7ffb 0%, #4f8cf7 7%, #22d3ee 15%, #34d399 22%,
    #ffd60a 31%, #ffd60a 34%, rgba(255, 214, 10, 0) 44%,
    rgba(255, 214, 10, 0) 56%, #ffd60a 66%, #ffd60a 69%,
    #34d399 78%, #22d3ee 85%, #4f8cf7 93%, #3f7ffb 100%);
  -webkit-mask-image:
    radial-gradient(ellipse 57% 19% at 0% 0%,
      #000 0%, rgba(0, 0, 0, .95) 34%, rgba(0, 0, 0, .6) 62%, rgba(0, 0, 0, 0) 100%),
    radial-gradient(ellipse 57% 19% at 100% 100%,
      #000 0%, rgba(0, 0, 0, .95) 34%, rgba(0, 0, 0, .6) 62%, rgba(0, 0, 0, 0) 100%);
  mask-image:
    radial-gradient(ellipse 57% 19% at 0% 0%,
      #000 0%, rgba(0, 0, 0, .95) 34%, rgba(0, 0, 0, .6) 62%, rgba(0, 0, 0, 0) 100%),
    radial-gradient(ellipse 57% 19% at 100% 100%,
      #000 0%, rgba(0, 0, 0, .95) 34%, rgba(0, 0, 0, .6) 62%, rgba(0, 0, 0, 0) 100%);
  -webkit-mask-composite: source-over;
  mask-composite: add;
}
.partner:active { transform: scale(.975); }
.partner-inner {
  position: relative; z-index: 1;
  padding: 30px 22px 24px;
  background: none;
  text-align: center;
}
[data-theme="light"] .partner { background: #fff; }
[data-theme="light"] .partner::before { opacity: .5; }

/* Аватарка: тёмный круг в градиентном кольце. Кольцо не насыщенная радуга, а
   мягкий переход — сверху почти белый, справа синий, а слева внизу тёплое
   персиковое пятно. Ровно как в образце. */
.logo {
  width: 71px; height: 71px; border-radius: 50%; margin: 0 auto 14px;
  position: relative; display: grid; place-items: center;
  background: conic-gradient(from 0deg at 50% 50%,
    #efeaff 0deg, #d8ddff 22deg, #8cc4ff 52deg, #5aa2fa 74deg,
    #3b82f6 90deg, #2a5fce 112deg, #1e3a8a 140deg, #101c4a 164deg,
    #0a1024 182deg, #3a2440 198deg, #a5623f 208deg, #ff9a6b 222deg,
    #f08d68 240deg, #b184e8 274deg, #c7a2ee 300deg, #dcd0fa 330deg,
    #efeaff 360deg);
  filter: saturate(.94);
}
.logo::after {
  content: ""; position: absolute; inset: 10px; border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #0b0b12, #05050a);
}
.logo b {
  position: relative; z-index: 1;
  font-size: 26px; font-weight: 800; letter-spacing: -.01em; color: #fff;
}
.logo.sm { width: 54px; height: 54px; margin: 0; }
.logo.sm::after { inset: 7px; }
.logo.sm b { font-size: 19px; }

/* Логотип в фирменных цветах партнёра, без радуги.
   .logo.photo — когда загружена настоящая картинка логотипа. */
.logo.brand { background: linear-gradient(140deg, var(--brand-1), var(--brand-2)); }
.logo.brand::after {
  inset: 3px;
  background: linear-gradient(140deg, var(--brand-1), var(--brand-2));
  box-shadow: inset 0 2px 14px rgba(255, 255, 255, .28), inset 0 -6px 14px rgba(0, 0, 0, .35);
}
.logo.photo { background: #fff; padding: 0; overflow: hidden; }
.logo.photo::after { display: none; }
.logo.photo img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }

.partner-name { font-size: 22px; font-weight: 750; letter-spacing: -.02em; }
.partner-country {
  font-size: 16px; color: #8b8b96; margin-top: 4px;
  display: inline-flex; align-items: center; gap: 5px; justify-content: center;
}
.partner-country .ic { font-size: 14px; opacity: .7; }

.pills { display: flex; gap: 12px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }
.pill {
  display: flex; align-items: center; gap: 7px;
  padding: 12px 20px; border-radius: 999px;
  font-size: 17px; font-weight: 750; color: #fff;
  background: #1c1c20;
  border: 1px solid transparent;
}
[data-theme="light"] .pill { background: rgba(10, 10, 30, .04); border-color: rgba(10, 10, 30, .07); }
.pill .ic { font-size: 18px; }
.pill.stars { color: var(--gold); }
.pill.spins { color: var(--spin); }
/* На карточке партнёра цифры белые, как в образце: цветными остаются только
   иконки. Цветной текст там перетягивал внимание с самой награды. */
.partner .pill.stars, .partner .pill.spins { color: #fff; }
.pill.sm { padding: 6px 11px; font-size: 13.5px; }
.pill.sm .ic { font-size: 15px; }

.progress { margin-top: 18px; }
.progress-track {
  height: 5px; border-radius: 999px; overflow: hidden;
  background: rgba(255, 255, 255, .08);
}
.progress-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--tg-blue-1), #a855f7, #ff2d6f);
  transition: width .6s var(--ease);
}
.progress-text { font-size: 12px; color: var(--dim); margin-top: 8px; }

/* ---------- Экран оффера ---------- */
.offer-head { display: flex; align-items: flex-start; gap: 13px; padding: 4px 0 2px; }
.offer-head .logo.sm { flex: none; }
.offer-title { flex: 1; min-width: 0; padding-top: 3px; }
.offer-title h1 { font-size: 24px; font-weight: 780; letter-spacing: -.025em; line-height: 1.15; }
.offer-title p { font-size: 14px; color: var(--dim); margin-top: 4px; line-height: 1.35; }

.round-btn {
  width: 38px; height: 38px; border-radius: 50%; flex: none; border: none;
  display: grid; place-items: center; font-size: 18px;
  background: var(--card-2); border: 1px solid var(--border);
  color: var(--text); cursor: pointer;
  transition: transform .25s var(--ease);
}
.round-btn:active { transform: scale(.9); }

.stat-row { display: flex; gap: 12px; margin-top: 18px; }
.stat {
  flex: 1; padding: 15px 16px; border-radius: var(--r-md);
  background: var(--card); border: 1px solid var(--border);
}
.stat span { font-size: 13px; color: var(--dim); }
.stat b {
  display: flex; align-items: center; gap: 7px;
  font-size: 25px; font-weight: 800; letter-spacing: -.02em; margin-top: 5px;
}
.stat b .ic { font-size: 24px; }
.stat.stars b { color: var(--gold); }
.stat.spins b { color: var(--spin); }

/* ---------- Этап / задание ---------- */
.step {
  border-radius: 24px; padding: 17px;
  background: var(--card); border: 1px solid var(--border);
  margin-bottom: 12px;
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.step.locked { opacity: .48; }
.step.done { border-color: rgba(47, 217, 143, .25); }
.step-top { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.step-title {
  flex: 1 1 auto; min-width: 0;
  font-size: 16.5px; font-weight: 700; letter-spacing: -.01em; line-height: 1.28;
  text-wrap: balance;
}
.step-rewards { display: flex; gap: 6px; flex: 0 0 auto; }
/* На узких экранах заголовку нужна вся ширина — награды переносим на свою строку */
@media (max-width: 380px) {
  .step-title { flex-basis: 100%; }
}
.step-desc { font-size: 13.5px; color: var(--dim); line-height: 1.45; margin-top: 8px; }

.tag {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 10px; padding: 5px 10px; border-radius: 9px;
  font-size: 12px; font-weight: 600; color: var(--dim);
  background: var(--card-2); border: 1px solid var(--border);
}
.tag .ic { font-size: 13px; }

/* ---------- Кнопки ---------- */
.btn {
  width: 100%; border: none; border-radius: 15px; padding: 14px;
  font-family: inherit; font-size: 15.5px; font-weight: 700;
  color: #fff; cursor: pointer; margin-top: 13px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(135deg, var(--accent, var(--tg-blue-1)), var(--accent-2, var(--tg-blue-2)));
  box-shadow: 0 10px 24px -6px var(--accent-shadow, rgba(42, 171, 238, .6));
  transition: transform .25s var(--ease), filter .25s;
}
.btn:active { transform: scale(.975); }
.btn .ic { font-size: 17px; }
.btn.tg { --accent: var(--tg-blue-1); --accent-2: var(--tg-blue-2); }
.btn.gold {
  --accent: #ffd45c; --accent-2: #ff9f2e; --accent-shadow: rgba(255, 159, 46, .5);
  color: #3d2500;
}
.btn.muted {
  background: var(--card-2); color: var(--dim);
  border: 1px solid var(--border); box-shadow: none;
}
.btn.ghost {
  background: transparent; color: var(--text);
  border: 1px solid var(--border); box-shadow: none;
}
.btn.success {
  background: rgba(47, 217, 143, .12); color: var(--green);
  border: 1px solid rgba(47, 217, 143, .25); box-shadow: none;
}
.btn:disabled { cursor: default; }
.btn.pending { position: relative; overflow: hidden; }
.btn.pending::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .07), transparent);
  animation: sweep 1.8s infinite;
}
@keyframes sweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* ---------- Списки ---------- */
.card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 6px 16px;
}
.row { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.row + .row { border-top: 1px solid var(--border); }
.row-main { flex: 1; min-width: 0; }
.row-main b { font-size: 14.5px; font-weight: 650; display: block; }
.row-main span { font-size: 12.5px; color: var(--dim); }
.row-amount { font-size: 14.5px; font-weight: 750; white-space: nowrap; display: flex; align-items: center; gap: 4px; }
.row-amount .ic { font-size: 15px; }
.plus { color: var(--green); }
.minus { color: var(--red); }

.mini-avatar {
  width: 38px; height: 38px; border-radius: 50%; flex: none; position: relative;
  display: grid; place-items: center; font-size: 14px; font-weight: 700; color: #fff;
  background: var(--rainbow);
}
.mini-avatar::after { content: ""; position: absolute; inset: 2.5px; border-radius: 50%; background: #0a0a10; }
.mini-avatar span { position: relative; z-index: 1; }
[data-theme="light"] .mini-avatar::after { background: #2a2a35; }

.kind-icon {
  width: 36px; height: 36px; border-radius: 12px; flex: none;
  display: grid; place-items: center; font-size: 17px; color: var(--dim);
  background: var(--card-2); border: 1px solid var(--border);
}

/* ---------- Герой (баланс/друзья) ---------- */
.hero {
  position: relative; overflow: hidden; border-radius: var(--r-lg);
  padding: 26px 22px; color: #fff;
  background: linear-gradient(145deg, #2aabee, #6d5efc 52%, #c026d3);
  box-shadow: 0 20px 44px -14px rgba(70, 90, 255, .65);
}
.hero::after {
  content: ""; position: absolute; top: -80px; right: -60px;
  width: 210px; height: 210px; border-radius: 50%;
  background: rgba(255, 255, 255, .16); filter: blur(6px);
}
.hero > * { position: relative; z-index: 1; }
.hero-label { font-size: 13.5px; opacity: .85; }
.hero-value {
  display: flex; align-items: center; gap: 9px;
  font-size: 44px; font-weight: 820; letter-spacing: -.03em; line-height: 1.05; margin: 5px 0 3px;
}
.hero-value .ic { font-size: 38px; }
.hero-sub { font-size: 13.5px; opacity: .8; }
.hero-split {
  display: flex; gap: 10px; margin-top: 20px; padding-top: 17px;
  border-top: 1px solid rgba(255, 255, 255, .24);
}
.hero-split div { flex: 1; }
.hero-split b { display: block; font-size: 19px; font-weight: 750; }
.hero-split span { font-size: 11.5px; opacity: .82; }

.percent-row { display: flex; gap: 12px; }
.percent {
  flex: 1; text-align: center; padding: 16px 8px;
  border-radius: var(--r-md); background: var(--card); border: 1px solid var(--border);
}
.percent b {
  display: block; font-size: 30px; font-weight: 820; letter-spacing: -.03em;
  background: linear-gradient(135deg, #2aabee, #a855f7, #ff2d6f);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.percent span { display: block; font-size: 12px; color: var(--dim); line-height: 1.35; margin-top: 4px; }

.link-box {
  display: flex; align-items: center; gap: 10px; margin-top: 12px;
  padding: 13px 15px; border-radius: var(--r-sm);
  background: var(--card); border: 1px dashed var(--border);
}
.link-box code {
  flex: 1; min-width: 0; font-size: 12.5px; color: var(--dim); word-break: break-all;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.icon-btn {
  flex: none; width: 36px; height: 36px; border-radius: 12px; border: none;
  display: grid; place-items: center; font-size: 16px; color: #fff; cursor: pointer;
  background: linear-gradient(135deg, var(--tg-blue-1), var(--tg-blue-2));
  transition: transform .25s var(--ease);
}
.icon-btn:active { transform: scale(.9); }

/* ---------- Статусы ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 650; padding: 5px 10px; border-radius: 9px;
}
.badge .ic { font-size: 13px; }
.badge.pending { background: rgba(255, 201, 60, .13); color: var(--gold); }
.badge.approved { background: rgba(47, 217, 143, .13); color: var(--green); }
.badge.rejected { background: rgba(255, 93, 108, .13); color: var(--red); }

/* ---------- Пустые состояния и скелетоны ---------- */
.empty { text-align: center; padding: 44px 22px; }
.empty .ic { font-size: 62px; margin: 0 auto 12px; color: var(--dim-2); }
.empty b { display: block; font-size: 16px; font-weight: 700; }
.empty span { display: block; font-size: 13.5px; color: var(--dim); line-height: 1.5; margin-top: 5px; }

.skel {
  border-radius: var(--r-md);
  background: linear-gradient(90deg, rgba(255,255,255,.05) 25%, rgba(255,255,255,.11) 50%, rgba(255,255,255,.05) 75%);
  background-size: 300% 100%; animation: shimmer 1.4s infinite linear;
}
[data-theme="light"] .skel {
  background: linear-gradient(90deg, rgba(10,10,30,.05) 25%, rgba(10,10,30,.1) 50%, rgba(10,10,30,.05) 75%);
  background-size: 300% 100%;
}
.skel-partner { height: 250px; border-radius: 30px; margin-bottom: 16px; }
.skel-hero { height: 180px; border-radius: var(--r-lg); }
.skel-step { height: 130px; border-radius: 24px; margin-bottom: 12px; }
@keyframes shimmer { from { background-position: 150% 0; } to { background-position: -150% 0; } }

/* Окно «не хватает на вывод». Раньше в шапке стояла сумма 2000 ₽ и слова
   «Как забрать» — человек не понимал ни откуда число, ни почему окно вылезло.
   Теперь шапка отвечает ровно на его вопрос: сколько есть, сколько нужно и
   чего не хватает. Числа крупнее слов: их и читают. */
.gate-short { text-align: center; padding: 2px 4px 14px; }
.gs-ic {
  width: 54px; height: 54px; margin: 0 auto 12px; border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,196,84,.12); border: 1px solid rgba(255,196,84,.28);
  color: #FFC454;
}
.gs-ic svg { width: 24px; height: 24px; }
.gs-t { font-size: 21px; font-weight: 800; color: #fff; letter-spacing: -.01em; }
.gs-s { font-size: 13.5px; line-height: 1.55; color: #9AA4B6; margin: 7px 14px 0; }
.gs-s b { color: #EEF2FB; font-weight: 800; }
/* Заголовок над путями: без него две карточки читаются как реклама, а с ним —
   как ответ на «что мне сделать». */
.gs-h {
  margin: 18px 0 -4px; font-size: 12px; font-weight: 700; color: #7d86a4;
  text-transform: uppercase; letter-spacing: .04em;
}
/* Приписка под наградой: что ещё случится, кроме денег. Мелко нарочно —
   главное в карточке это сумма. */
.way-plus {
  margin-top: 7px; font-size: 12px; line-height: 1.45; color: #7d86a4;
}

/* Короткий ответ на «а как основной-то пополнить». Стоит прямо под списком
   балансов: человек только что прочитал, что часть денег заперта, и следующий
   его вопрос ровно этот. Логотип партнёра — чтобы блок читался как путь, а не
   как ещё один абзац правил. */
.pf-earn {
  margin: 6px 0 14px; padding: 13px 14px 9px; border-radius: 16px;
  background: rgba(255,196,84,.06); border: 1px solid rgba(255,196,84,.18);
}
.pf-earn-h {
  font-size: 11.5px; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: #FFC454; margin-bottom: 10px;
}
/* Строка = кто, за что, сколько. Сумма прижата вправо и набрана крупно:
   человек читает столбик сумм, а подписи — только если сумма зацепила. */
.pf-earn-row {
  display: flex; align-items: center; gap: 11px; padding: 7px 0;
  border-top: 1px solid rgba(255,196,84,.12);
}
.pf-earn-row:first-of-type { border-top: 0; }
.pf-earn-l, .pf-earn-ic {
  width: 32px; height: 32px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.pf-earn-ic { background: rgba(148,163,255,.14); color: #a8b8ff; }
.pf-earn-ic svg { width: 17px; height: 17px; }
.pf-earn-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pf-earn-note { display: flex; gap: 8px; align-items: center; margin-top: 10px; padding: 9px 11px; background: rgba(255,255,255,.04); border-radius: 12px; font-size: 13px; color: #c2c9d6; line-height: 1.35; }
.pf-earn-note .ic { color: #f2c14e; flex: 0 0 auto; }
.pf-earn-note b { color: #fff; font-weight: 600; }
.pf-earn-t b { font-size: 13.5px; font-weight: 700; color: #fff; }
.pf-earn-t span { font-size: 11.5px; line-height: 1.4; color: var(--dim); }
.pf-earn-v {
  flex-shrink: 0; font-size: 16px; font-weight: 800; color: #FFC454;
  font-variant-numeric: tabular-nums;
}
/* Кнопка приглашения в окне «не хватает»: словами звать мало, нужна кнопка. */
.big-inv { margin-top: 9px; }

/* Пояснение в окне стейкинга: почему нельзя отправить всё. Отвечаем ДО
   нажатия — отказ после него человек читает как поломку. */
.stk-rule {
  margin: 2px 0 14px; padding: 11px 13px; border-radius: 14px;
  background: rgba(148,163,255,.08); border: 1px solid rgba(148,163,255,.18);
  font-size: 12.5px; line-height: 1.5; color: var(--dim); text-align: left;
}
.stk-rule b { color: #c9d1ee; }

/* СГЛАЖЕННЫЕ ПЕРЕХОДЫ.
   Раньше содержимое прилетало снизу на 12 px за полсекунды. На переключении
   разделов это читается не как плавность, а как рывок: глаз ловит движение
   там, где ничего не двигалось. Оставляем чистое проявление и вдвое короче —
   переход перестаёт замечаться, а это и есть цель. */
.fade-in { animation: fadeSoft .22s ease both; }
@keyframes fadeSoft { from { opacity: 0; } to { opacity: 1; } }
/* Старое имя оставлено: на него ссылаются отдельные экраны. */
@keyframes fadeUp { from { opacity: 0; } to { opacity: 1; } }

/* Высота держится, пока раздел грузится. Без неё короткий скелет схлопывал
   страницу, и ссылки «Условия · Конфиденциальность» подпрыгивали вверх, а
   через секунду падали обратно. */
#content { min-height: 66vh; }
.legal { transition: opacity .2s ease; }

/* Уважаем системную настройку «уменьшить движение» */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Видимый фокус для клавиатуры и озвучки */
.btn:focus-visible, .round-btn:focus-visible, .icon-btn:focus-visible,
.nav button:focus-visible, .partner:focus-visible {
  outline: 2px solid var(--tg-blue-1);
  outline-offset: 3px;
}

/* ---------- Нижняя навигация ---------- */
.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; gap: 6px;
  padding: 7px var(--gutter) calc(7px + env(safe-area-inset-bottom));
  background: var(--nav); backdrop-filter: blur(24px);
  border-top: 1px solid var(--border);
}
.nav button {
  flex: 1; border: none; background: none; font-family: inherit; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 0 6px; border-radius: 15px;
  color: var(--dim-2); font-size: 11px; font-weight: 650;
  transition: color .25s var(--ease), background .25s var(--ease);
}
.nav button .ic { font-size: 23px; }
.nav button.active { color: var(--tg-blue-1); background: rgba(42, 171, 238, .12); }

/* ---------- Тост и салют ---------- */
.toast {
  position: fixed; left: 50%; top: calc(14px + env(safe-area-inset-top));
  transform: translate(-50%, -180%); z-index: 100;
  max-width: calc(100% - 32px); padding: 13px 18px; border-radius: var(--r-sm);
  font-size: 14px; font-weight: 600; text-align: center;
  color: var(--text); background: var(--card-2);
  border: 1px solid var(--border); box-shadow: 0 14px 34px rgba(0, 0, 0, .5);
  transition: transform .5s var(--ease);
}
.toast.show { transform: translate(-50%, 0); }

/* ---------- Награда ---------- */
/* без backdrop-filter: он гасит SVG-градиенты внутри слоя */
.burst {
  position: fixed; inset: 0; z-index: 70; display: grid; place-items: center;
  padding: var(--gutter);
  background: radial-gradient(circle at 50% 44%, rgba(20, 14, 40, .82), rgba(2, 2, 8, .94) 66%);
  animation: burstIn .28s var(--ease);
}
@keyframes burstIn { from { opacity: 0; } to { opacity: 1; } }

.burst-card {
  position: relative; width: 100%; max-width: 300px;
  padding: 30px 22px 26px; border-radius: 30px; text-align: center;
  background: linear-gradient(165deg, #1b1826 0%, #121019 58%, #0c0a12 100%);
  border: 1px solid color-mix(in srgb, var(--c) 42%, transparent);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .04),
    0 26px 60px -18px rgba(0, 0, 0, .9),
    0 0 70px -14px color-mix(in srgb, var(--c) 55%, transparent);
  animation: cardIn .62s cubic-bezier(.2, 1.5, .45, 1);
}
@keyframes cardIn {
  0%   { transform: scale(.82) translateY(22px); opacity: 0; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

/* лучи за звездой — медленно вращаются, награда «светится» */
/* Ореол лучей строго вокруг звезды: центр совпадает с центром .burst-halo
   (30px верхнего паддинга + половина от 116px). Крупнее — лучи наползают
   на сумму и карточка превращается в кашу. */
.burst-rays {
  position: absolute; top: -6px; left: 50%; width: 188px; height: 188px;
  margin-left: -94px; pointer-events: none; opacity: .26;
  background: conic-gradient(from 0deg,
    var(--c) 0deg 7deg, transparent 7deg 30deg,
    var(--c) 30deg 37deg, transparent 37deg 60deg,
    var(--c) 60deg 67deg, transparent 67deg 90deg,
    var(--c) 90deg 97deg, transparent 97deg 120deg,
    var(--c) 120deg 127deg, transparent 127deg 150deg,
    var(--c) 150deg 157deg, transparent 157deg 180deg,
    var(--c) 180deg 187deg, transparent 187deg 210deg,
    var(--c) 210deg 217deg, transparent 217deg 240deg,
    var(--c) 240deg 247deg, transparent 247deg 270deg,
    var(--c) 270deg 277deg, transparent 277deg 300deg,
    var(--c) 300deg 307deg, transparent 307deg 330deg,
    var(--c) 330deg 337deg, transparent 337deg 360deg);
  -webkit-mask-image: radial-gradient(circle, #000 16%, transparent 56%);
  mask-image: radial-gradient(circle, #000 16%, transparent 56%);
  animation: rays 14s linear infinite;
}
@keyframes rays { to { transform: rotate(360deg); } }

.burst-halo {
  position: relative; z-index: 1;
  width: 116px; height: 116px; margin: 0 auto; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 40%,
    color-mix(in srgb, var(--c) 26%, transparent), transparent 68%);
  animation: halo 2.4s ease-in-out infinite;
}
@keyframes halo {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.07); }
}
.burst .ic {
  font-size: 76px; margin: 0 auto;
  animation: pop .7s var(--ease);
  filter: drop-shadow(0 6px 22px color-mix(in srgb, var(--c) 70%, transparent));
}
@keyframes pop {
  0%   { transform: scale(.3) rotate(-30deg); opacity: 0; }
  60%  { transform: scale(1.18) rotate(8deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}

.burst-amount {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  font-size: 42px; font-weight: 900; color: #fff; margin-top: 12px;
  letter-spacing: -.035em; font-variant-numeric: tabular-nums;
  text-shadow: 0 0 26px color-mix(in srgb, var(--c) 60%, transparent);
}
/* margin:0 — иначе auto-поля от общего правила .burst .ic съедают всю
   свободную ширину флекса и растаскивают число со звездой по краям */
.burst-amount .ic { font-size: 34px; margin: 0; animation: none; filter: none; }
.burst-text {
  position: relative; z-index: 1;
  font-size: 14.5px; color: rgba(255, 255, 255, .6); margin-top: 5px;
}
.burst-chip {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px;
  margin-top: 14px; padding: 8px 14px; border-radius: 999px;
  font-size: 14px; font-weight: 800; color: var(--spin);
  background: rgba(255, 92, 122, .14); border: 1px solid rgba(255, 92, 122, .3);
}
.burst-chip .ic { font-size: 16px; margin: 0; animation: none; filter: none; }

/* Конфетти: угол и дальность каждой частицы заданы в разметке */
.burst-confetti { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.cf {
  position: absolute; left: 50%; top: 38%; width: 8px; height: 11px;
  margin: -5px 0 0 -4px; background: var(--c); border-radius: 2px;
  animation: cfFly 1.15s cubic-bezier(.15, .72, .3, 1) forwards;
}
.cf.round { width: 8px; height: 8px; border-radius: 50%; }
@keyframes cfFly {
  0%   { transform: rotate(var(--a)) translateX(6px) rotate(0); opacity: 0; }
  12%  { opacity: 1; }
  100% { transform: rotate(var(--a)) translateX(var(--d)) rotate(560deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .burst-card, .burst-rays, .burst-halo, .burst .ic, .cf { animation: none !important; }
  .cf { opacity: 0; }
}

/* ---------- Настоящие подарки Telegram (Lottie) ---------- */
.tg-gift { width: 1em; height: 1em; flex: none; position: relative; }
.tg-gift > div { width: 100%; height: 100%; }
/* пока анимация грузится, показываем настоящее превью от Telegram */
.tg-gift.poster {
  background-position: center; background-repeat: no-repeat; background-size: contain;
}
.gift .tg-gift { font-size: 74px; }
.drop-prize .tg-gift { font-size: 32px; }
.burst .tg-gift { font-size: 104px; }

/* мягкое сияние у звезды — «живая», а не плоская картинка.
   Звезда в награде светится цветом приза, её сюда не берём. */
.hero-value .ic {
  filter: drop-shadow(0 0 10px rgba(255, 190, 70, .45));
}

/* ---------- Баланс: крупно и без лишнего ---------- */
.balance-top {
  border-radius: var(--r-lg); padding: 26px 20px 20px; text-align: center;
  background: linear-gradient(160deg, #1b1b26, #101018 60%, #0b0b12);
  border: 1px solid var(--border);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .8);
}
[data-theme="light"] .balance-top {
  background: linear-gradient(160deg, #ffffff, #f6f6fb);
}
.balance-label {
  font-size: 15px; font-weight: 700; color: var(--dim);
  letter-spacing: -.01em;
}
.balance-sum {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 52px; font-weight: 850; letter-spacing: -.035em;
  line-height: 1.05; margin: 6px 0 18px;
  font-variant-numeric: tabular-nums;
}
.balance-sum .ic { font-size: 44px; }
.balance-top .btn { margin-top: 0; }
.balance-split {
  display: flex; gap: 10px; margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--border);
}
/* Шапка над плитками: слева подпись, справа «О балансах» — один в один как
   .pf-bh в «Профиле». Разделительную полоску забирает себе она, поэтому у
   плиток её снимаем: две линии подряд выглядели бы обрывом. */
.bal-bh {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin: 18px 2px 8px; padding-top: 16px;
  border-top: 1px solid var(--border);
}
.bal-bh > span { font-size: 13px; font-weight: 600; color: var(--dim); }
.balance-split.nb { border-top: 0; margin-top: 0; padding-top: 0; }
.balance-split div { flex: 1; }
.balance-split b {
  display: block; font-size: 18px; font-weight: 780;
  font-variant-numeric: tabular-nums;
}
.balance-split span { font-size: 11.5px; color: var(--dim); }

/* ---------- Лестница вывода ---------- */
.ladder { display: grid; gap: 10px; }
.rung {
  display: flex; align-items: center; gap: 13px;
  padding: 14px 15px; border-radius: var(--r-md);
  background: var(--card); border: 1px solid var(--border);
}
.rung-mark {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  font-size: 14px; font-weight: 800; color: var(--dim-2);
  background: var(--card-2); border: 1px solid var(--border);
}
.rung-mark .ic { font-size: 15px; }
.rung-body { flex: 1; min-width: 0; }
.rung-body b {
  display: flex; align-items: center; gap: 5px;
  font-size: 15px; font-weight: 700;
}
.rung-body b .ic { font-size: 15px; }
.rung-body span { display: block; font-size: 12.5px; color: var(--dim); margin-top: 2px; line-height: 1.4; }
/* Открытая ступень должна читаться с одного взгляда: игрок ищет глазами,
   что ему уже доступно, а не что заблокировано. */
.rung.done {
  border-color: rgba(47, 217, 143, .45);
  background: linear-gradient(180deg, rgba(47, 217, 143, .09), rgba(47, 217, 143, .04));
}
.rung.done .rung-mark { background: rgba(47, 217, 143, .18); color: var(--green); border-color: transparent; }
.rung.done .rung-body b { color: var(--green); }
.rung.now { border-color: rgba(255, 201, 60, .35); }
.rung.now .rung-mark { background: rgba(255, 201, 60, .15); color: var(--gold); border-color: transparent; }
.rung.locked { opacity: .55; }

/* ---------- Карточка партнёра ---------- */
.partner-name {
  font-size: 26px; font-weight: 750; letter-spacing: -.02em; margin-top: 14px;
  line-height: 30px;
}
.partner-progress { margin: 16px 0 0; }
.partner-progress span {
  display: block; font-size: 12px; color: var(--dim); margin-top: 7px;
}
/* Кнопка нужна: на образце её не было, но без неё карточка не читается как
   действие. Она встаёт ровно в тот воздух, что оставался снизу, поэтому
   пропорции карточки не поехали, а свечение из нижнего правого угла остаётся
   видно по сторонам кнопки. */
.partner .partner-cta { margin-top: 20px; pointer-events: none; }

/* «+1 🎟» в блоке за друга: иконка того же размера, что цифра */
.percent b.tick {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  -webkit-text-fill-color: var(--spin); color: var(--spin); background: none;
}
.percent b.tick .ic { font-size: 24px; }

/* ---------- Окно «подпишись на канал» ---------- */
.gate {
  width: min(340px, calc(100% - 48px));
  padding: 26px 22px 18px; border-radius: var(--r-lg); text-align: center;
  background: var(--card-2); border: 1px solid var(--border);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
}
.gate-ic .ic { font-size: 58px; margin: 0 auto 12px; }
.gate-title { font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.gate-text {
  font-size: 14px; color: var(--dim); line-height: 1.5; margin: 8px 0 18px;
}
.gate-text b { color: var(--text); }
/* Модалка живёт внутри #burst, а там общее правило раздувает любую иконку
   до 76px, ставит margin:0 auto и анимацию — звезда в тексте уезжала на
   отдельную строку размером с полэкрана. Иконкам внутри текста и на кнопке
   возвращаем строчный размер. */
.gate-text .ic, .gate .btn .ic {
  display: inline-block; vertical-align: -.14em;
  margin: 0; animation: none; filter: none;
}
.gate-text .ic { font-size: 1em; }
.gate .btn .ic { font-size: 17px; }
.gate .btn { margin-top: 10px; }
.gate-close {
  width: 100%; margin-top: 12px; padding: 6px; border: none; background: none;
  font-family: inherit; font-size: 14px; color: var(--dim-2); cursor: pointer;
}

/* ---------- Отклонённый этап ---------- */
.step-reject {
  margin-top: 10px; padding: 10px 12px; border-radius: 12px;
  background: rgba(255, 59, 92, .1); border: 1px solid rgba(255, 59, 92, .28);
}
.step-reject b {
  display: flex; align-items: center; gap: 7px;
  font-size: 13.5px; font-weight: 800; color: #ff6b85;
}
.step-reject b .ic { font-size: 15px; flex: none; }
.step-reject span {
  display: block; margin-top: 5px; font-size: 13px;
  color: var(--text); line-height: 1.45;
}
.step-reject i {
  display: block; margin-top: 5px; font-size: 12px;
  color: var(--dim); font-style: normal;
}

/* ---------- Лимит за друзей ---------- */
.refbonus {
  border-radius: var(--r-md); padding: 14px;
  background: var(--card); border: 1px solid var(--border);
}
.refbonus-row { display: flex; gap: 10px; }
.refbonus-cell {
  flex: 1; text-align: center; padding: 12px 8px; border-radius: var(--r-sm);
  background: var(--card-2); border: 1px solid var(--border);
}
.refbonus-cell b {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  font-size: 22px; font-weight: 850; letter-spacing: -.02em; color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.refbonus-cell b .ic { font-size: 19px; margin: 0; }
.refbonus-cell span {
  display: block; font-size: 11.5px; color: var(--dim); line-height: 1.35; margin-top: 4px;
}
.refbonus-cell i {
  display: block; font-style: normal; font-size: 11px; font-weight: 700;
  color: var(--dim-2); margin-top: 6px;
}
.refbonus-cell.hot { border-color: rgba(255, 190, 70, .3); }
.refbonus-sum {
  margin: 12px 2px 0; font-size: 13px; color: var(--dim); text-align: center;
}
.refbonus-sum b { color: var(--gold); font-weight: 800; }
.refbonus .btn { margin-top: 12px; }

/* карточки ленты: мягкая подсветка цветом приза, а не плоская заливка */
.rcard {
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--c) 22%, transparent), transparent 70%),
    linear-gradient(165deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02));
}
[data-theme="light"] .rcard {
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--c) 16%, transparent), transparent 70%),
    #fff;
}


/* ---------- Наборы звёзд в сетке подарков ----------

   Это вывод звёздами, оформленный как товар: игрок отдаёт внутренние звёзды и
   получает столько же настоящих себе на счёт. Картинка — коробка Telegram,
   тон растёт с суммой: зелёная 1000, синяя 1500, красная 2500.

   Карточка чуть выше обычной: коробке нужно место, иначе звезда сверху
   срезается и предмет перестаёт узнаваться. */
.gift.pack .pack-art {
  display: grid; place-items: center;
  aspect-ratio: 1 / .96; padding: 4px 2px 0;
}
.gift.pack .pack-art img {
  width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .5));
}
/* Пока заявка уходит на сервер — карточка притухает, чтобы не жали дважды */
.gift.pack.busy { opacity: .5; pointer-events: none; }

/* Недоступный набор НЕ гасим прозрачностью: на чёрном фоне золото сразу
   превращается в грязно-оливковое, и карточка выглядит сломанной, а не
   закрытой. Вместо этого чуть уводим цвет и ставим замок в углу — предмет
   остаётся нарядным, а состояние всё равно понятно. */
.gift.pack.locked { opacity: 1; }
.gift.pack.locked .pack-art img { filter: saturate(.85) brightness(.92); }
.gift.pack.locked::after {
  content: ""; position: absolute; top: 8px; right: 8px;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(8, 8, 14, .72) center/12px 12px no-repeat;
  border: 1px solid rgba(255, 255, 255, .12);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b9c2d0' stroke-width='2.2' stroke-linecap='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2.5'/%3E%3Cpath d='M8 11V8a4 4 0 018 0v3'/%3E%3C/svg%3E");
}
.gift.pack { position: relative; }


/* ---------- Окно крупного приза ----------

   Два пути с числами вместо «не хватает звёзд». Второй путь тут не мелким
   шрифтом внизу, а равным по весу первому: он для тех, кому депозит недоступен,
   и именно он приводит владельцу новых людей. */
.gate.big { text-align: left; padding: 22px 18px 16px; }
.gate.big .gate-title { text-align: center; font-size: 19px; }
.big-head { text-align: center; margin-bottom: 16px; }
.big-price {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 30px; font-weight: 900; letter-spacing: -.03em; color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.big-price .ic { font-size: 26px; }

.way {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 13px; border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .04); border: 1px solid var(--border);
}
.way-n {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 13px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--tg-blue-1), var(--tg-blue-2));
}
.way-b { flex: 1; min-width: 0; }
.way-b > b { display: block; font-size: 14.5px; font-weight: 700; line-height: 1.3; }
.way-b > span { display: block; font-size: 12px; color: var(--dim-2); margin-top: 2px; }
.way-get { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.way-get i {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: 999px; font-style: normal;
  font-size: 12.5px; font-weight: 750; color: var(--gold);
  background: rgba(255, 201, 60, .11); border: 1px solid rgba(255, 201, 60, .24);
}
.way-get i .ic { font-size: 13px; }
.way-or {
  text-align: center; font-size: 11.5px; font-weight: 700; color: var(--dim-2);
  text-transform: uppercase; letter-spacing: .1em; margin: 9px 0;
}
.gate.big .btn { margin-top: 12px; }
.gate.big .btn.ghost { margin-top: 8px; }


/* ============================================================================
   Тема «ИИ-удалёнка»: тёмный рабочий кабинет.

   Кладётся поверх базовой ТЁМНОЙ вёрстки (webapp/style.css) БЕЗ слоя Госуслуг:
   тёмной теме от тёмной базы нужно меньше правок, чем светлым вариантам.
   Классы и поведение те же — отличается ровно оформлением.

   Что делает тему узнаваемой:
     — графитово-синий фон (не чёрный) и плоские карточки с волосяными рамками;
     — один сине-фиолетовый градиент (#3d6df2 → #7a5cf0) и жёсткая дисциплина:
       не больше двух градиентных поверхностей на экран (кнопка и блок денег) —
       это и отличает финтех от казино;
     — моноширинные цифры JetBrains Mono во всех суммах: баланс читается как
       выписка, а не как табло автомата;
     — семантика цвета: голубой #7fa6ff — только деньги, сиреневый #b39dff —
       только билеты и бонусы, красный — только ошибки. Золота и жёлтого нет
       вообще (единственное тёплое пятно — янтарный статус «на проверке»);
     — фирменные детали: «искра» (четырёхлучевая звезда в углу блока денег)
       и «нить» (1px градиентная линия по верхней кромке).

   Слово «ИИ» в текстах НЕ используется намеренно: никакого ИИ в бэкенде нет,
   и любая строка вида «ИИ подбирает задания» — ложное заявление. Направление
   передаётся эстетикой, не обещаниями.
   ========================================================================= */


:root,
[data-theme="light"],
[data-theme="dark"] {
  --ai-blue: #3d6df2;
  --ai-violet: #7a5cf0;
  --ai-sky: #7fa6ff;      /* деньги */
  --ai-lilac: #b39dff;    /* билеты и бонусы */
  --ai-grad: linear-gradient(135deg, var(--ai-blue), var(--ai-violet));
  --ai-thread: linear-gradient(90deg, transparent, #3d6df2 30%, #7a5cf0 70%, transparent);
  --ai-tint: rgba(61, 109, 242, .10);
  --ai-green: #3ecf8e;
  --ai-red: #ff6e7c;
  --ai-amber: #e8b34b;
  --mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* базовые токены. Тема запирается в тёмное на все три селектора — светлая
     тема Telegram не должна её перекрашивать (зеркально theme-gu, который
     так же заперт в светлое). Фон не чернее #0b0e13: чистый #000 на AMOLED
     даёт смазы при скролле. */
  --bg: #0b0e13;
  --card: #12161e;
  --card-2: #1a202b;
  --elevated: #212936;
  --border: #232b38;
  --border-2: #2e3848;
  --text: #f2f5fa;
  --dim: #93a1b5;
  --dim-2: #5d6a7d;
  --nav: rgba(11, 14, 19, .88);
  --track: rgba(255, 255, 255, .08);

  /* семантика базы: «золото» везде значит «сумма» — здесь деньги голубые */
  --gold: var(--ai-sky);
  --spin: var(--ai-lilac);
  --green: var(--ai-green);
  --red: var(--ai-red);
  --tg-blue-1: var(--ai-blue);
  --tg-blue-2: var(--ai-violet);
  --rainbow: var(--ai-grad);

  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 20px;
}

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
}

/* Барабан в базе набран округлым шрифтом «под праздник» — здесь всё одним */
.spin-screen { font-family: inherit; }

/* Моно-цифры: суммы, таймеры, счётчики. Главный «взрослый» приём темы.
   JetBrains Mono загружен в 500/700 — веса выше 700 из базы упадут на 700,
   поэтому вес задаём явно. */
.balance-sum, .pay-sum, .rnum, .chip, .row-amount, .burst-amount, .big-price,
.refbonus-cell b, .hero-value, .drop-prize, .btn.countdown, .link-box code,
.spin-meta b, .limit-hint b, .percent b, .balance-split b, .hero-split b,
.refbonus-sum b, .stat b, .pill {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
.balance-sum, .rnum, .burst-amount, .pay-sum, .hero-value { font-weight: 700; }

/* Фоновые пятна — «аврора», единственное свечение темы. Еле заметная дымка,
   ИИ-настроение фоном. Это потолок: любое усиление — скат в казино. */
.glow { filter: blur(120px); }
.glow-a { background: var(--ai-blue); opacity: .10; }
.glow-b { background: var(--ai-violet); opacity: .07; }

/* Перекраска SVG-градиентов из разметки: у билета и звезды цвета зашиты в
   <linearGradient>, CSS-переменные туда не достают, но stop-color — достаёт.
   Билет — сиреневый (семантика бонуса), звезда награды — ледяная. */
#gSpin stop:first-child { stop-color: #c9b8ff; }
#gSpin stop:last-child { stop-color: #8f6bff; }
#gStar stop:nth-child(1) { stop-color: #b7ccff; }
#gStar stop:nth-child(2) { stop-color: #7fa6ff; }
#gStar stop:nth-child(3) { stop-color: #4a7bf0; }
#gStarHi stop:first-child { stop-color: #e6eeff; }
#gStarHi stop:last-child { stop-color: #a9c3ff; }

/* ---------- Шапка ---------- */
.topbar {
  background: rgba(11, 14, 19, .85);
  border-bottom: 1px solid var(--border);
}
.avatar, .ava, .mini-avatar, .drop-ava {
  background: var(--ai-grad);
  border: none;
  color: #fff;
}
.avatar::after, .mini-avatar::after { display: none !important; }
.greet b { font-weight: 700; }
.greet span { color: var(--dim); }

.chip {
  background: var(--card-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-weight: 700;
}
.chip.stars { color: var(--ai-sky); }
.chip.spins { color: var(--ai-lilac); }

/* ---------- Заголовки разделов ----------
   Мелкий серый капслок базы читается «геймерским». Здесь — обычный крупный
   заголовок, как в банковских аппах. */
h2.section {
  font-size: 18px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: -.01em;
  color: var(--text);
  margin: 26px 2px 12px;
}

/* ---------- Общие поверхности ----------
   Один спокойный рецепт: плоскость, волосяная рамка, без теней и градиентов.
   Границу не опускать ниже #232b38 — на AMOLED карточки сольются с фоном. */
.card, .chance, .drop, .rung, .limit-card, .spin-meta > div,
.refbonus, .gift, .step, .empty, .stat, .stat-row > div {
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: none;
  border-radius: var(--r-md);
}
.refbonus-cell {
  background: var(--card-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.pill {
  background: var(--card-2);
  border: 1px solid var(--border);
  color: var(--text);
}
/* Пустые состояния истории и друзей живут ВНУТРИ .card — карточная поверхность
   из общего рецепта дала бы там рамку в рамке */
.card .empty { background: none; border: none; }

/* ---------- Кнопки ----------
   Primary — единственная градиентная кнопка, с одной тихой тенью. «Золотой»
   кнопки в теме не существует: и .gold, и .tg — тот же фирменный градиент.
   Партнёрские акценты (accentStyle) тоже гасятся — дисциплина важнее. */
.btn {
  border-radius: 12px;
  font-weight: 600;
  background: var(--ai-grad);
  box-shadow: 0 8px 20px -12px rgba(61, 109, 242, .55);
}
.btn::before, .btn::after { display: none; }
.btn.gold, .btn.tg { background: var(--ai-grad); color: #fff; }
.btn.ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border-2);
  box-shadow: none;
}
.btn.muted, .btn.pending {
  background: var(--card-2);
  color: var(--dim);
  border: 1px solid var(--border);
  box-shadow: none;
}
/* бегущий блик ожидания оставляем, но тише — это индикатор, не праздник */
.btn.pending { overflow: hidden; }
.btn.pending::after {
  display: block;
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .05), transparent);
  animation: sweep 1.8s infinite;
}
.btn.success {
  background: rgba(62, 207, 142, .12);
  color: var(--ai-green);
  border: 1px solid rgba(62, 207, 142, .3);
  box-shadow: none;
}
.round-btn { background: var(--card-2); border: 1px solid var(--border); }

/* ---------- Баланс: терминал ----------
   Блок денег — вторая (и последняя) градиентная поверхность экрана. По верхней
   кромке «нить», в углу «искра» — фирменные знаки «здесь деньги». */
.balance-top {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #151b26, #10151e);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: none;
}
.balance-top::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: var(--ai-thread);
}
.balance-top::after {
  content: "";
  position: absolute; top: 14px; right: 16px;
  width: 16px; height: 16px;
  background: linear-gradient(135deg, var(--ai-sky), var(--ai-lilac));
  clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
}
.balance-label { color: var(--dim); font-weight: 600; }
.balance-sum { color: #fff; }
.balance-split { border-top: 1px solid var(--track); }
.bal-bh { border-top: 1px solid var(--track); }
.bal-bh > span { color: var(--dim); }
.balance-split b { color: #fff; }
.balance-split span { color: var(--dim); }

/* ---------- Лестница лимита: трекер этапов ---------- */
.rung-mark {
  border-radius: 8px;
  background: var(--card-2);
  border: 1px solid var(--border);
  color: var(--dim);
  font-family: var(--mono);
}
.rung.done {
  border-color: rgba(62, 207, 142, .3);
  background: rgba(62, 207, 142, .07);
}
.rung.done .rung-mark { background: rgba(62, 207, 142, .16); color: var(--ai-green); border-color: transparent; }
.rung.done .rung-body b { color: var(--ai-green); }
.rung.now {
  border-color: rgba(61, 109, 242, .45);
  background: rgba(61, 109, 242, .07);
  box-shadow: inset 3px 0 0 var(--ai-blue);
}
.rung.now .rung-mark { background: var(--ai-blue); color: #fff; border-color: transparent; }
/* Закрытая ступень не гаснет целиком: цель должна остаться читаемой */
.rung.locked { opacity: 1; }
.rung.locked .rung-body b, .rung.locked .rung-body span { color: var(--dim-2); }
.limit-fill { background: var(--ai-grad); }
.limit-hint b { color: var(--ai-sky); }

/* ---------- Лимит за друзей ---------- */
.refbonus-cell b { color: var(--ai-sky); }
.refbonus-cell i { color: var(--dim-2); }
.refbonus-cell.hot {
  border-color: rgba(61, 109, 242, .45);
  background: rgba(61, 109, 242, .07);
}
.refbonus-sum b { color: var(--ai-sky); }

/* ---------- Карточка партнёра ----------
   Радужное угловое свечение базы остужаем до фирменной двухцветки — тише
   втрое, но козырь (свет из противоположных углов) остаётся. Маски берутся
   из базы, здесь только цвет. */
.partner {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.partner::before {
  background: linear-gradient(122deg,
    #3d6df2 0%, #7a5cf0 26%, rgba(122, 92, 240, 0) 46%,
    rgba(61, 109, 242, 0) 54%, #3d6df2 74%, #7a5cf0 100%);
  filter: blur(24px);
  opacity: .35;
}
.logo {
  background: conic-gradient(from 210deg,
    #3d6df2, #7a5cf0, #7fa6ff, #46c8ff, #3d6df2);
  filter: none;
}
.logo::after { background: #0e1219; }
.logo.photo { background: #fff; }
.partner-country { color: var(--dim); }
.progress-track { background: var(--track); }
.progress-fill { background: var(--ai-grad); }
.progress-text { color: var(--dim); }

/* ---------- Этапы задания ---------- */
.step.done {
  border-color: rgba(62, 207, 142, .35);
  background: rgba(62, 207, 142, .06);
}
.tag {
  background: var(--card-2);
  border: 1px solid var(--border);
  color: var(--dim);
}
.badge.pending { background: rgba(232, 179, 75, .12); color: var(--ai-amber); }
.badge.approved { background: rgba(62, 207, 142, .12); color: var(--ai-green); }
.badge.rejected { background: rgba(255, 110, 124, .12); color: var(--ai-red); }
.step-reject {
  background: rgba(255, 110, 124, .10);
  border: 1px solid rgba(255, 110, 124, .3);
}
.step-reject b { color: var(--ai-red); }

/* ---------- Лента призов: датчик, не слот ---------- */
.reel-stage {
  background: radial-gradient(120% 100% at 50% 0%, #161c2a 0%, #10151e 60%, #0d1119 100%);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: none;
}
.reel-frame {
  background: #0e1219;
  border: 1px solid var(--border);
}
/* подсветка цветом приза приглушена: 12% вместо 22% базы */
.rcard {
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--c) 12%, transparent), transparent 70%),
    var(--card-2);
  border: 1px solid var(--border);
}
.rnum { color: #fff; }
.rcard.hit {
  transform: scale(1.06);
  border-color: var(--c);
  box-shadow: 0 0 0 2px var(--c);
}
.rcard.hit .rnum { text-shadow: none; }
/* Маркер — «нить»: тонкая голубая линия с мягким свечением */
.reel-mark {
  width: 2px; margin-left: -1px;
  background: var(--ai-sky);
  box-shadow: 0 0 8px rgba(127, 166, 255, .5);
}
.reel-mark::before { border-top-color: var(--ai-sky); }
.reel-mark::after { border-bottom-color: var(--ai-sky); }
@keyframes markFlash {
  0%, 100% { box-shadow: 0 0 8px rgba(127, 166, 255, .5); }
  45%      { box-shadow: 0 0 18px 4px rgba(127, 166, 255, .85); }
}
.spin-meta .invite {
  background: rgba(61, 109, 242, .10);
  border-color: rgba(61, 109, 242, .45);
}
.spin-meta .invite b, .spin-meta .invite span { color: var(--ai-sky); opacity: 1; }

/* ---------- Лента выигрышей и история: выписка ---------- */
.drop-prize { color: var(--ai-sky); }
.drop-prize.gift { color: var(--ai-lilac); }
.drop-who span { color: var(--dim-2); }
.kind-icon {
  background: var(--card-2);
  border: none;
  border-radius: 10px;
  color: var(--ai-sky);
}

/* ---------- Вывод на карту ----------
   Классы живут в слое темы (в базе их нет): суммы, способ получения, сноска. */
.pay-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pay {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 16px 10px 14px;
  text-align: center;
  cursor: pointer;
  transition: border-color .2s, transform .2s var(--ease);
}
.pay:active { transform: scale(.97); }
.pay-sum {
  font-size: 23px;
  letter-spacing: -.02em;
  color: #fff;
  display: flex; align-items: center; justify-content: center; gap: 3px;
}
.pay-note { margin-top: 5px; font-size: 12px; color: var(--dim); }
.pay.ready { border-color: var(--ai-blue); background: var(--ai-tint); }
.pay.ready .pay-note { color: var(--ai-sky); font-weight: 600; }
/* Закрытая сумма не гаснет целиком: цифра остаётся читаемой, гаснет подпись
   и появляется замок. Цвета замка зашиты в data-uri — тут свой, тёмный. */
.pay.locked .pay-sum { color: var(--dim-2); }
.pay.locked::after {
  content: "";
  position: absolute; top: 8px; right: 8px;
  width: 20px; height: 20px; border-radius: 6px;
  background: var(--card-2) center/11px 11px no-repeat
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%235d6a7d'><rect x='4.5' y='10.5' width='15' height='10.5' rx='3'/><path fill='none' stroke='%235d6a7d' stroke-width='2.2' d='M8 10.5V8a4 4 0 0 1 8 0v2.5'/></svg>");
  border: 1px solid var(--border);
}

.methods { display: grid; gap: 8px; }
.method {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 15px; border-radius: var(--r-md);
  background: var(--card); border: 1px solid var(--border);
  cursor: pointer;
}
.method.on { border-color: var(--ai-blue); background: var(--ai-tint); }
.method .ic { font-size: 24px; color: var(--ai-sky); }
.method-body { flex: 1; min-width: 0; line-height: 1.3; }
.method-body b { display: block; font-size: 15px; font-weight: 650; }
.method-body span { font-size: 12.5px; color: var(--dim); }
.method-tick {
  width: 20px; height: 20px; border-radius: 50%; flex: none;
  border: 1.5px solid var(--border-2);
}
.method.on .method-tick {
  border-color: var(--ai-blue);
  background: var(--ai-blue) center/11px 11px no-repeat
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' d='M4.5 12.6l4.8 4.8L19.5 7.2'/></svg>");
}

/* Сноска про реквизиты и налог — регламент, а не реклама: опора доверия */
.note {
  margin: 10px 2px 0;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: rgba(61, 109, 242, .08);
  border: 1px solid rgba(61, 109, 242, .25);
  font-size: 12.5px;
  line-height: 1.45;
  color: #b8c6dd;
}
.note b { color: var(--ai-sky); }

/* ---------- Навигация: самая тихая часть экрана ---------- */
.nav { border-top: 1px solid var(--border); }
.nav button.active {
  position: relative;
  color: var(--ai-sky);
  background: rgba(61, 109, 242, .14);
}
/* короткая «нить» над активным табом — фирменная деталь */
.nav button.active::after {
  content: "";
  position: absolute; top: 0; left: 50%;
  width: 26px; height: 2px; margin-left: -13px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--ai-blue), var(--ai-violet));
}

/* ---------- Окно награды: «зачисление», не салют ---------- */
.burst { background: rgba(5, 7, 11, .78); }
.burst-card {
  background:
    var(--ai-thread) top/100% 1px no-repeat,
    var(--elevated);
  border: 1px solid var(--border-2);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
}
/* вращающиеся лучи — чистое казино */
.burst-rays { display: none; }
.burst-halo {
  background: radial-gradient(circle at 50% 40%, rgba(61, 109, 242, .16), transparent 68%);
}
.burst-amount { text-shadow: 0 0 20px rgba(61, 109, 242, .35); }
.burst-text { color: var(--dim); }
.burst-chip {
  color: var(--ai-lilac);
  background: rgba(179, 157, 255, .12);
  border: 1px solid rgba(179, 157, 255, .3);
}

/* ---------- Модалки ---------- */
.gate {
  background: var(--elevated);
  border: 1px solid var(--border-2);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
}
.gate-ic { color: var(--ai-sky); }
.gate-close { color: var(--dim-2); }
.way { background: var(--card); border: 1px solid var(--border); }
.way-get i {
  color: var(--ai-sky);
  background: var(--ai-tint);
  border: 1px solid rgba(61, 109, 242, .25);
}
/* Два пути к крупному выводу различаются цветом: синий — задание (деньги),
   сиреневый — друг (бонусная механика). Красного здесь нет — он за ошибками. */
.gate.big .way:last-of-type .way-n {
  background: linear-gradient(135deg, var(--ai-violet), #9d7bff);
}
.gate.big .way:last-of-type .way-get i {
  color: var(--ai-lilac);
  background: rgba(179, 157, 255, .12);
  border-color: rgba(179, 157, 255, .3);
}

/* ---------- Мелочи ---------- */
.toast {
  background: var(--elevated);
  border: 1px solid var(--border-2);
  border-radius: 12px;
  box-shadow: inset 3px 0 0 var(--ai-blue), 0 12px 30px rgba(0, 0, 0, .55);
}
.gift-price {
  color: var(--ai-sky);
  background: var(--ai-tint);
  border: 1px solid rgba(61, 109, 242, .25);
}
.gift-gone { background: var(--card-2); color: var(--dim); }
.link-box { border: 1px dashed var(--border-2); }
.link-box code { color: var(--dim); }
.empty .ic { color: var(--dim-2); }
.empty span { color: var(--dim); }

/* ---------- Герой «Друзья» ----------
   Глубокий сине-фиолетовый вместо сине-розового праздника базы. Та же «искра»,
   что на балансе — рифма «здесь деньги». */
.hero {
  background: linear-gradient(145deg, #1e2c66, #2c2560 55%, #3a2b72);
  box-shadow: none;
  border-radius: var(--r-lg);
}
.hero::after {
  background: radial-gradient(circle, rgba(127, 166, 255, .14), transparent 70%);
  filter: none;
}
.hero::before {
  content: "";
  position: absolute; top: 14px; right: 16px; z-index: 1;
  width: 16px; height: 16px;
  background: linear-gradient(135deg, var(--ai-sky), var(--ai-lilac));
  clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
}
.hero-value .ic { filter: none; }
.percent b {
  background: linear-gradient(135deg, var(--ai-sky), var(--ai-lilac));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.percent b.tick { -webkit-text-fill-color: var(--ai-lilac); color: var(--ai-lilac); }

/* Знак рубля рядом с числом: наследует моно, приглушён — сумма главнее знака */
.cur {
  font-size: .78em;
  font-weight: 700;
  opacity: .6;
  margin-left: .12em;
}
.balance-sum .cur, .burst-amount .cur { opacity: .8; }
.rnum .cur { opacity: .5; }

/* Видимый фокус — и на элементах, которых нет в базе. Дефолтный ринг браузера
   на них есть и так; здесь — фирменный, как у кнопок. */
.pay:focus-visible, .method:focus-visible, .chip:focus-visible,
.profile:focus-visible, .spin-meta .invite:focus-visible {
  outline: 2px solid var(--ai-sky);
  outline-offset: 3px;
}


:root, [data-theme="light"], [data-theme="dark"] {
  --gl-body: linear-gradient(165deg, #0b0e13 0%, #101a30 50%, #0b0e13 100%);
  --gl-glow-a: #3d6df2; --gl-glow-op: .3;
  --gl-glow-b: #7a5cf0; --gl-glow-op2: .25;
  --gl-bg: rgba(255,255,255,.06);
  --gl-bg-strong: rgba(255,255,255,.08);
  --gl-br: rgba(255,255,255,.13);
  --gl-br-strong: rgba(255,255,255,.2);
  --gl-deep: #0e1219;
  --gl-top: rgba(11,14,19,.6);
  --gl-nav: rgba(255,255,255,.07);
  --gl-nav-on: rgba(61,109,242,.22);
  --gl-veil: rgba(5,7,11,.65);
  --gl-elevated: rgba(26,32,48,.8);
  --gl-hero: linear-gradient(145deg, rgba(61,109,242,.32), rgba(122,92,240,.26));
  --card: rgba(255,255,255,.06);
  --card-2: rgba(255,255,255,.1);
  --elevated: rgba(26,32,48,.85);
  --border: rgba(255,255,255,.13);
  --border-2: rgba(255,255,255,.22);
  --nav: rgba(255,255,255,.07);
  --track: rgba(255,255,255,.14);
}
.btn { backdrop-filter: none; box-shadow: 0 10px 26px -10px rgba(61,109,242,.65); }
.nav button.active { color: #9db9ff; }
.pay.ready, .method.on { border-color: rgba(127,166,255,.5); background: rgba(61,109,242,.14); }
.rung.now { border-color: rgba(127,166,255,.5); background: rgba(61,109,242,.12); }
.spin-meta .invite { background: rgba(61,109,242,.14); border-color: rgba(127,166,255,.45); }
.note { background: rgba(61,109,242,.1); border: 1px solid rgba(127,166,255,.3); }

/* ---------- Слой движения: тихий финтех, не казино ---------- */
/* Аврора медленно дышит фоном */
@keyframes glDrift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(28px, 18px) scale(1.08); }
}
.glow-a { animation: glDrift 16s ease-in-out infinite; }
.glow-b { animation: glDrift 22s ease-in-out infinite reverse; }

/* «Нить» на блоке денег мерцает, «искра» подмигивает */
@keyframes glThread { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.balance-top::before { animation: glThread 4s ease-in-out infinite; }
@keyframes glSpark {
  0%, 88%, 100% { transform: scale(1); opacity: 1; }
  94% { transform: scale(1.35) rotate(18deg); opacity: .75; }
}
.balance-top::after, .hero::before { animation: glSpark 3.6s ease-in-out infinite; }

/* Появление списков: каскад снизу */
.pay, .rung, .method, .refbonus, .note, .percent, .gift, .link-box { animation: fadeUp .5s var(--ease) both; }
.pay:nth-child(2), .rung:nth-child(2), .method:nth-child(2), .percent:nth-child(2), .gift:nth-child(2) { animation-delay: 60ms; }
.pay:nth-child(3), .rung:nth-child(3), .percent:nth-child(3), .gift:nth-child(3) { animation-delay: 120ms; }
.note { animation-delay: 150ms; }
.link-box { animation-delay: 90ms; }

/* Отклик на нажатие */
.method, .rung { transition: transform .25s var(--ease), border-color .25s var(--ease); }
.method:active { transform: scale(.97); }
.nav button .ic { transition: transform .3s var(--ease); }
@keyframes tabPop { 0% { transform: scale(.78); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
.nav button.active .ic { animation: tabPop .35s var(--ease); }

/* Ховеры для десктопа и веб-версии Telegram */
@media (hover: hover) {
  .step:hover, .pay:hover, .method:hover, .gift:hover, .rung:hover, .partner:hover { border-color: rgba(127,166,255,.42); }
  .partner:hover { transform: translateY(-2px); }
  .btn:hover { filter: brightness(1.1); }
  .nav button:hover { color: var(--ai-sky); }
  .chip[role="button"]:hover { border-color: rgba(127,166,255,.42); }
}
@media (prefers-reduced-motion: reduce) {
  .glow-a, .glow-b, .balance-top::before, .balance-top::after, .hero::before { animation: none !important; }
}


/* ================= СТЕКЛЯННАЯ ТЕМА ================= */
body {
  background: var(--gl-body);
  background-attachment: fixed;
}
.glow-a { background: var(--gl-glow-a); opacity: var(--gl-glow-op); width: 340px; height: 340px; }
.glow-b { background: var(--gl-glow-b); opacity: var(--gl-glow-op2); width: 300px; height: 300px; }

/* Поверхности: полупрозрачное стекло с блюром и верхним бликом */
.card, .chance, .drop, .rung, .limit-card, .spin-meta > div,
.refbonus, .gift, .step, .empty, .stat, .stat-row > div, .pay, .method,
.link-box, .kind-icon, .refbonus-cell, .tag, .chip, .round-btn, .pill {
  background: var(--gl-bg);
  border: 1px solid var(--gl-br);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
.card .empty { background: none; border: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.profile:active { background: var(--gl-bg); }

.topbar {
  background: var(--gl-top);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* Блок денег — самое сильное стекло */
.balance-top {
  background: var(--gl-bg-strong);
  border: 1px solid var(--gl-br-strong);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 18px 44px -18px rgba(0,0,0,.55);
}
.balance-split { border-top: 1px solid rgba(255,255,255,.16); }

.reel-stage {
  background: var(--gl-bg-strong);
  border: 1px solid var(--gl-br-strong);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}
.reel-frame { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.1); }
.rcard {
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--c) 16%, transparent), transparent 70%),
    var(--gl-bg);
  border: 1px solid var(--gl-br);
}

.partner {
  background: var(--gl-bg);
  border: 1px solid var(--gl-br);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15);
}
.logo::after { background: var(--gl-deep); }

.hero {
  background: var(--gl-hero);
  border: 1px solid var(--gl-br-strong);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 18px 44px -18px rgba(0,0,0,.5);
}

/* Навигация — плавающая стеклянная капсула */
.nav {
  left: max(10px, calc((100% - 480px) / 2));
  right: max(10px, calc((100% - 480px) / 2));
  bottom: calc(8px + env(safe-area-inset-bottom));
  padding: 6px;
  border-radius: 24px;
  background: var(--gl-nav);
  border: 1px solid var(--gl-br-strong);
  border-top: 1px solid var(--gl-br-strong);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 16px 40px -16px rgba(0,0,0,.6);
}
.nav button { border-radius: 18px; }
.nav button.active {
  background: var(--gl-nav-on);
  border: 1px solid var(--gl-br);
}
.nav button.active::after { display: none; }
body { padding-bottom: calc(104px + env(safe-area-inset-bottom)); }

/* Модалки и тост */
.burst { background: var(--gl-veil); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.burst-card, .gate {
  background: var(--gl-elevated);
  border: 1px solid var(--gl-br-strong);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 24px 60px rgba(0,0,0,.55);
}
.way { background: var(--gl-bg); border: 1px solid var(--gl-br); }
.toast {
  background: var(--gl-elevated);
  border: 1px solid var(--gl-br-strong);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 12px 30px rgba(0,0,0,.5);
}
.note { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }

.btn.ghost { background: var(--gl-bg); border: 1px solid var(--gl-br-strong); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.btn.muted, .btn.pending { background: var(--gl-bg); border: 1px solid var(--gl-br); color: var(--dim); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }

/* ============ СКРЕТЧ-КАРТА + ОКНО РЕКВИЗИТОВ (доработка поверх дизайна) ============ */
.scratch-stage {
  margin: 2px 0 16px; padding: 16px 14px 18px; border-radius: var(--r-lg);
  background: var(--gl-bg-strong); border: 1px solid var(--gl-br-strong);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}
.scratch-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.scratch-head b { font-size: 16px; font-weight: 700; }
/* ── Профиль ─────────────────────────────────────────────────────────────
   Раздел «Друзья» стал «Профилем». Сверху — сам игрок и его деньги, ниже
   без изменений живёт рефералка (.rfp-*). Карточки баланса выложены сеткой
   по два: их три или четыре, и в один ряд они на узком экране не влезают,
   а в столбик занимают весь экран прежде, чем человек дойдёт до друзей. */
.pf { padding: 12px 16px 0; }
/* Аватар, имя и @ рисует общая шапка приложения — второй раз их здесь не
   повторяем (.pf-head/.pf-ava/.pf-who убраны вместе с разметкой). */

.pf-bh { display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin: 0 2px 10px; }
.pf-bh > span { font-size: 13px; font-weight: 600; color: var(--dim); }
.pf-about {
  display: inline-flex; align-items: center; gap: 3px; border: 0;
  background: none; color: #7fa6ff; font: inherit; font-size: 13px;
  font-weight: 700; cursor: pointer; padding: 2px 0;
}
.pf-about svg { width: 14px; height: 14px; }

.pf-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.pf-c {
  position: relative; border-radius: 18px; padding: 13px 14px 12px;
  background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.09);
  display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow: hidden;
}
.pf-c b { font-size: 21px; font-weight: 800; color: #fff; line-height: 1.15;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-c span { font-size: 11.5px; color: var(--dim); }
.pf-c-ic {
  position: absolute; top: 11px; right: 11px;
  width: 30px; height: 30px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
}
.pf-c-ic svg { width: 16px; height: 16px; }
/* Цвет несёт смысл: синий — всё, зелёный — доступное, серый замок —
   запертое, фиолетовый — билеты. Иначе четыре одинаковые плитки. */
.pf-c.main { background: linear-gradient(150deg, rgba(91,124,250,.20), rgba(91,124,250,.05));
  border-color: rgba(124,140,255,.30); }
.pf-c.main .pf-c-ic { background: rgba(124,140,255,.20); color: #a8b8ff; }
.pf-c.ok { background: linear-gradient(150deg, rgba(52,211,153,.18), rgba(52,211,153,.04));
  border-color: rgba(52,211,153,.28); }
.pf-c.ok .pf-c-ic { background: rgba(52,211,153,.18); color: #45e0a6; }
.pf-c.ok b { color: #45e0a6; }
.pf-c.lock .pf-c-ic { background: rgba(255,255,255,.07); color: #9aa3c0; }
.pf-c.lock b { color: #c9d1ee; }
.pf-c.tick { background: linear-gradient(150deg, rgba(167,139,250,.16), rgba(167,139,250,.04));
  border-color: rgba(167,139,250,.26); }
.pf-c.tick .pf-c-ic { background: rgba(167,139,250,.18); color: #c4b5fd; }
/* «С заданий» — фиолетовая, «Основной» — синяя. Цвет тут несёт смысл: синее
   уже ваше, фиолетовое ждёт условия. Одинаковые плитки заставляли бы читать
   подписи, а их читают в последнюю очередь. */
.pf-c.task { background: linear-gradient(150deg, rgba(167,139,250,.18), rgba(167,139,250,.04));
  border-color: rgba(167,139,250,.30); }
.pf-c.task .pf-c-ic { background: rgba(167,139,250,.20); color: #c4b5fd; }
.pf-c.task b { color: #cabaff; }
.pf-ab-ic.task { background: rgba(167,139,250,.18); color: #c4b5fd; }
/* Приписка под списком: главное, что человек должен унести из этого листа, —
   что в играх выбирать баланс не придётся. */
.pf-ab-note { font-size: 12.5px; line-height: 1.5; color: var(--dim);
  margin: 0 0 14px; }

.pf-act { display: flex; gap: 9px; margin: 12px 0 4px; }
.pf-act .btn { flex: 1; min-width: 0; }
.pf-h { font-size: 13px; font-weight: 700; color: var(--dim);
  margin: 20px 2px 2px; }

/* Лист «О балансах» — по строке на баланс: значок, имя с суммой, объяснение. */
.pf-ab { display: flex; flex-direction: column; margin-bottom: 14px; }
.pf-ab-row { display: flex; gap: 12px; padding: 13px 0;
  border-bottom: 1px solid rgba(255,255,255,.07); }
.pf-ab-row:last-child { border-bottom: 0; }
.pf-ab-ic { width: 38px; height: 38px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; }
.pf-ab-ic svg { width: 18px; height: 18px; }
.pf-ab-ic.main { background: rgba(124,140,255,.18); color: #a8b8ff; }
.pf-ab-ic.ok { background: rgba(52,211,153,.16); color: #45e0a6; }
.pf-ab-ic.lock { background: rgba(255,255,255,.07); color: #9aa3c0; }
.pf-ab-ic.tick { background: rgba(167,139,250,.18); color: #c4b5fd; }
.pf-ab-tx { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pf-ab-tx b { font-size: 14.5px; font-weight: 700; color: #fff; }
.pf-ab-tx b i { font-style: normal; font-weight: 800; color: #9aa3c0; }
.pf-ab-tx span { font-size: 12.5px; line-height: 1.5; color: var(--dim); }
.pf-ab-tx span b { display: inline; font-size: inherit; color: #c9d1ee; }

/* Счётчик повторов в свёрнутой строке задания. Узкий нарочно: строка не
   должна вырасти в высоту — их в списке десяток, и лишние восемь пикселей
   на каждой уводят половину списка за экран. */
.qrow-prog { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
.qrow-prog-bar {
  flex: 0 1 150px; min-width: 56px; height: 5px; border-radius: 99px;
  background: var(--border); overflow: hidden;
}
.qrow-prog-bar i {
  display: block; height: 100%; border-radius: 99px;
  background: var(--spin); transition: width .35s ease;
}
.qrow-prog b {
  font-size: 11.5px; font-weight: 800; color: var(--dim);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* «Показать ещё» под длинными списками. Неяркая нарочно: это не действие,
   за которым человек пришёл, а способ не грузить телефон полутысячей строк. */
.more-btn {
  display: block; width: 100%; margin: 10px 0 2px; padding: 11px 14px;
  border-radius: 14px; border: 1px solid rgba(148,163,255,.18);
  background: rgba(148,163,255,.06); color: #a5b4fc;
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.more-btn:active { background: rgba(148,163,255,.12); }
.scratch-head span { font-size: 12.5px; color: var(--dim); }
/* Возврат из «Скретча». Вид один в один как у кнопки «Назад» в играх
   (.jp-back): человек уже знает эту кнопку, и вторая её версия только
   сбивала бы с толку. */
.sc-top { display: flex; margin: 0 0 10px; }
.sc-back {
  display: flex; align-items: center; gap: 5px; height: 32px; padding: 0 11px 0 8px;
  border-radius: 11px; border: 1px solid rgba(148,163,255,.18);
  background: rgba(148,163,255,.07); color: #dfe4f5; font-size: 12.5px;
  font-weight: 600; cursor: pointer;
}
.sc-back svg { width: 14px; height: 14px; }
.scratch-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
/* Шесть закрытых полей. Стереть можно только одно — выбранное; остальные после
   выбора блокируются. У каждого поля своя фольга-канвас поверх суммы. */
.scratch-cell {
  position: relative; aspect-ratio: 1 / .92; border-radius: 12px; overflow: hidden;
  display: grid; place-items: center;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
}
.scratch-cell .sc-num {
  font-family: var(--mono); font-weight: 800; font-size: 21px;
  color: var(--ai-sky); font-variant-numeric: tabular-nums;
}
.sc-foil {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border-radius: 12px; cursor: pointer; touch-action: none; display: block;
  transition: opacity .25s var(--ease);
}
.scratch-cell.locked .sc-foil { opacity: .45; cursor: default; pointer-events: none; }
.scratch-cell.chosen { border-color: rgba(127,166,255,.5); }
.scratch-cell.reveal {
  border-color: var(--ai-sky); background: rgba(61,109,242,.16);
  box-shadow: 0 0 0 1px var(--ai-sky), 0 0 22px -6px var(--ai-sky);
  animation: scWin .5s var(--ease);
}
.scratch-cell.reveal .sc-num { color: #fff; }
/* Знак рубля в ячейке скретча — полноценный, а не мелкий бледный хвостик
   сбоку. Сумма тут главное, что видит человек, и ₽ должен читаться вместе
   с ней одним куском, а не отваливаться вправо вниз. */
.scratch-cell .sc-num .cur {
  font-size: .66em;
  font-weight: 800;
  opacity: 1;
  margin-left: .08em;
}
@keyframes scWin { 0% { transform: scale(.9); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }

.req-gate .gate-text { margin-bottom: 14px; }
.req-methods { display: flex; gap: 8px; margin-bottom: 10px; }
.req-m {
  flex: 1; display: grid; grid-template-columns: 18px 3.6em; column-gap: 8px;
  align-items: center; justify-content: center;
  padding: 11px 8px; border-radius: 12px; font: inherit; font-size: 14px; font-weight: 600;
  color: var(--dim); cursor: pointer;
  background: var(--gl-bg); border: 1px solid var(--gl-br);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.req-m .ic { font-size: 18px; width: 18px; height: 18px; justify-self: center; }
.req-m span { text-align: center; white-space: nowrap; }
.req-m.on { color: #fff; border-color: rgba(127,166,255,.5); background: rgba(61,109,242,.16); }
/* Способ выплаты на паузе: гасим, но оставляем читаемым — это объявление,
   а не мусор. Строку убирать нельзя: кто вчера выводил по СБП, решит, что
   сломалось, и пойдёт в поддержку. */
.req-m.off { opacity: .42; cursor: default; }
.req-off { font-size: 12.5px; line-height: 1.4; color: var(--dim); margin: -2px 0 10px; }
.method.off { opacity: .55; cursor: default; }
.method.off .ic { color: var(--dim); }
.req-input {
  width: 100%; padding: 13px 14px; border-radius: 12px; font: inherit; font-size: 16px;
  font-variant-numeric: tabular-nums; letter-spacing: .02em; color: var(--text);
  background: rgba(255,255,255,.05); border: 1px solid var(--gl-br-strong); outline: none;
}
.req-input::placeholder { color: var(--dim-2); }
.req-input:focus { border-color: var(--ai-sky); }
.req-err { min-height: 16px; margin: 6px 2px 2px; font-size: 12.5px; color: var(--ai-red); }
.req-gate .btn { margin-top: 10px; }
@media (prefers-reduced-motion: reduce) { .scratch-cell.reveal { animation: none; } }

/* ============ ЭКРАН БАЛАНСА + СКРЕТЧ: доработки ============ */
/* Подзаголовок «Способ получения» — даёт воздух между суммами и способами */
.pay-methods-title { margin: 20px 2px 10px; font-size: 14px; font-weight: 700; color: var(--dim); letter-spacing: -.01em; }
.pay-grid { gap: 10px; margin-bottom: 2px; }
.methods { gap: 8px; }

/* Таймер до бесплатной карты — в стиле стекла */
.scratch-timer {
  margin-top: 14px; padding: 16px 14px; border-radius: 16px; text-align: center;
  background: rgba(61,109,242,.1); border: 1px solid rgba(127,166,255,.3);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.scratch-timer .st-label { display: block; font-size: 12.5px; color: var(--dim); }
.scratch-timer .st-clock {
  display: block; margin: 7px 0 3px; font-family: var(--mono); font-weight: 700;
  font-size: 32px; letter-spacing: .05em; color: var(--ai-sky);
  font-variant-numeric: tabular-nums; text-shadow: 0 0 20px rgba(127,166,255,.45);
}
.scratch-timer .st-sub { display: block; font-size: 12px; color: var(--dim-2); }
.scratch-grid.locked-grid { opacity: .45; pointer-events: none; transition: opacity .3s var(--ease); }

/* Окно выигрыша (деньги): без большой иконки — сумма ровно по центру, чисто.
   Пустой ореол сворачиваем; для билетов иконка остаётся и ореол показывается. */
.burst-halo:empty { display: none; }
.burst-card { padding: 34px 24px 30px; }
.burst-amount {
  font-size: 52px; margin: 2px 0 4px;
  text-shadow: 0 0 34px rgba(61,109,242,.55);
}
.burst-text { font-size: 15px; opacity: .9; }

/* Подсказка «Потрите поле» — светящаяся пилюля с пульсирующей обводкой,
   чтобы точно заметили: рамка и свечение разгораются и гаснут. */
#scratchHint {
  display: inline-block; padding: 5px 13px; border-radius: 999px;
  font-size: 13px; font-weight: 800; letter-spacing: .01em; white-space: nowrap;
  color: #cfe0ff; background: rgba(61,109,242,.12);
  border: 1.5px solid rgba(127,166,255,.7);
  animation: hintGlow 1.25s ease-in-out infinite;
}
@keyframes hintGlow {
  0%, 100% {
    border-color: rgba(127,166,255,.4);
    box-shadow: 0 0 2px rgba(127,166,255,.2);
    color: #a7c0ff;
  }
  50% {
    border-color: #a9c6ff;
    box-shadow: 0 0 20px rgba(127,166,255,.95), 0 0 8px rgba(127,166,255,.7),
                inset 0 0 12px rgba(127,166,255,.35);
    color: #eaf2ff;
  }
}
@media (prefers-reduced-motion: reduce) { #scratchHint { animation: none; box-shadow: 0 0 14px rgba(127,166,255,.7); } }

/* ============ Знак ₽ и билета: вплотную к цифре и ярко (везде) ============ */
.cur { opacity: .95; margin-left: .12em; font-size: .84em; font-weight: 700; }
.balance-sum .cur, .burst-amount .cur, .pay-sum .cur, .chip .cur { opacity: 1; }
.rnum .cur { opacity: .9; }
.balance-sum { gap: 3px; }
.chip { gap: 3px; }
.spin-meta b { gap: 4px; }
.row-amount { gap: 2px; }
.drop-prize { gap: 2px; }
.pay-sum { gap: 2px; }
.big-price { gap: 3px; }
.refbonus-cell b { gap: 2px; }

/* Плитки вывода кликабельны: замок светлый, сумма яркая — видно, что нажимаемо */
.pay.locked .pay-sum { color: var(--text); }
.pay.locked { cursor: pointer; }
.pay.locked::after {
  background: rgba(127,166,255,.16) center/11px 11px no-repeat
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%237fa6ff'><rect x='4.5' y='10.5' width='15' height='10.5' rx='3'/><path fill='none' stroke='%237fa6ff' stroke-width='2.2' d='M8 10.5V8a4 4 0 0 1 8 0v2.5'/></svg>");
  border: 1px solid rgba(127,166,255,.4);
}

/* «Лимит за друзей» — одна большая красивая стеклянная ячейка */
.refbonus-hero {
  text-align: center; padding: 20px 16px 18px; border-radius: 16px;
  background: linear-gradient(150deg, rgba(61,109,242,.18), rgba(122,92,240,.14));
  border: 1px solid rgba(127,166,255,.35);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 12px 34px -16px rgba(61,109,242,.6);
}
.refbonus-hero .rbh-plus {
  font-family: var(--mono); font-weight: 700; font-size: 40px; letter-spacing: -.02em;
  color: var(--ai-sky); font-variant-numeric: tabular-nums;
  text-shadow: 0 0 24px rgba(127,166,255,.5);
  display: inline-flex; align-items: baseline; gap: 3px;
}
.refbonus-hero .rbh-text { margin-top: 8px; font-size: 13.5px; line-height: 1.4; color: var(--text); }
.refbonus-hero .rbh-have { margin-top: 8px; font-size: 12px; font-weight: 700; color: var(--dim-2); }

/* ============ Окно вывода: сумма + банк ============ */
.req-field { margin-bottom: 12px; }
.req-label { display: block; font-size: 12.5px; color: var(--dim); margin: 0 2px 6px; }
.req-amount {
  cursor: text;
  display: flex; align-items: center; justify-content: center; gap: 1px;
  padding: 12px 14px; border-radius: 12px;
  background: rgba(255,255,255,.05); border: 1px solid var(--gl-br-strong);
}
.req-amount input {
  flex: 0 0 auto; min-width: 0; border: none; outline: none; background: none; text-align: right;
  font-family: var(--mono); font-weight: 700; font-size: 26px; letter-spacing: -.01em;
  color: var(--text); font-variant-numeric: tabular-nums;
}
.req-amount .cur { font-size: 20px; opacity: .95; color: var(--ai-sky); }
.req-amount:focus-within { border-color: var(--ai-sky); }
.req-avail { display: block; margin: 6px 2px 0; font-size: 12.5px; color: var(--dim); }
/* Приглашение ввести свою сумму. Поле выглядит как число под плитками, и без
   этой строки даже владелец прочитал его как выбор из готовых номиналов. */
.req-hint { display: block; margin: 3px 2px 0; font-size: 12px; color: var(--dim); opacity: .8; }
.req-avail b { color: var(--ai-sky); }

.req-bank {
  width: 100%; margin-bottom: 10px; padding: 13px 14px; border-radius: 12px;
  font: inherit; font-size: 15px; color: var(--text);
  background: rgba(255,255,255,.05); border: 1px solid var(--gl-br-strong);
  outline: none; appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237fa6ff' stroke-width='2.2' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 18px;
  padding-right: 40px;
}
.req-bank:focus { border-color: var(--ai-sky); }
.req-bank option { background: #1a2130; color: var(--text); }
/* ===== Прозрачность лимита вывода: теги «на баланс» / «к выводу !» ===== */
.out-tag{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:4px 6px 4px 11px;
  font-size:12px;font-weight:800;color:#1a1204;background:linear-gradient(135deg,#ffcf5c,#ff9f2e);
  box-shadow:0 0 12px -3px rgba(255,159,46,.6);animation:outGlow 2.4s ease-in-out infinite;cursor:pointer;vertical-align:middle}
@keyframes outGlow{0%,100%{box-shadow:0 0 10px -4px rgba(255,159,46,.5)}50%{box-shadow:0 0 16px -1px rgba(255,159,46,.85)}}
/* Тот же золотой тег, но без «!»: на 3 этапе BETBOOM пояснять нечего —
   сумма приза случайная, её показывает соседняя пилюля «до 1000 ₽». */
/* Нажимать не на что: pointer-events выключает и курсор, и подсветку
   нажатия, чтобы метка не притворялась кнопкой. */
.out-tag.static{padding:4px 12px;cursor:default;pointer-events:none}
.out-bang{width:17px;height:17px;border-radius:50%;background:rgba(26,18,4,.22);color:#1a1204;
  display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;line-height:1}
.out-bal{display:inline-flex;align-items:center;border-radius:999px;padding:4px 11px;font-size:12px;font-weight:800;
  color:var(--dim);background:var(--card-2);border:1px solid var(--border);vertical-align:middle}
.out-pop{position:fixed;z-index:9999;max-width:240px;background:#20283a;border:1px solid rgba(255,207,92,.55);
  border-radius:12px;padding:10px 12px;font-size:12px;line-height:1.45;color:#ffe9c2;font-weight:600;
  box-shadow:0 12px 30px -6px rgba(0,0,0,.7);display:none}
.out-pop.show{display:block}
/* «Как увеличить лимит» — лого-строки */
.howto-lim{display:flex;flex-direction:column;gap:9px;margin:0 0 6px}
.hl-row{display:flex;align-items:center;gap:12px;padding:12px;border-radius:16px;background:var(--card);
  border:1px solid var(--border);cursor:pointer;transition:transform .12s}
.hl-row:active{transform:scale(.99)}
.hl-logo{width:42px;height:42px;border-radius:12px;object-fit:cover;background:#fff;flex-shrink:0}
.hl-logo.txt{display:flex;align-items:center;justify-content:center;font-weight:800;font-style:italic;font-size:13px;color:#fff;
  background:radial-gradient(circle at 32% 28%,#9ede4e,#4c9d2f)}
.hl-logo.friends{display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,rgba(179,157,255,.2),rgba(122,92,240,.1));border:1px solid rgba(179,157,255,.3)}
.hl-logo.friends .ic{width:22px;height:22px;color:#b39dff}
.hl-body{flex:1;min-width:0}
.hl-body b{display:block;font-size:14px;font-weight:800;color:var(--text)}
.hl-body span{display:block;font-size:12px;color:var(--dim);margin-top:2px;line-height:1.4}
.hl-chev{flex-shrink:0;color:var(--dim-2)}
.hl-chev .ic{width:18px;height:18px}

/* Модалка «Как забрать» — логотипы вместо цифр + лёгкое свечение BETBOOM */
.way-logo{width:40px;height:40px;border-radius:12px;object-fit:cover;background:#fff;flex-shrink:0}
.way-logo.friends{display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,rgba(179,157,255,.2),rgba(122,92,240,.1));border:1px solid rgba(179,157,255,.3)}
.way-logo.friends .ic{width:22px;height:22px;color:#b39dff}
.way.lim-glow{border-color:rgba(255,207,92,.42);box-shadow:0 0 16px -6px rgba(255,159,46,.5);animation:outGlow 2.4s ease-in-out infinite}
.way-get i.lim{color:#ffcf5c}
/* «Как увеличить лимит»: свечение BETBOOM-строки + золотая пилюля друга */
.hl-row.lim-glow{border-color:rgba(255,207,92,.42);box-shadow:0 0 16px -7px rgba(255,159,46,.5);animation:outGlow 2.4s ease-in-out infinite}
.hl-plus{flex-shrink:0;font-weight:800;font-size:13px;color:#1a1204;white-space:nowrap;
  background:linear-gradient(135deg,#ffcf5c,#ff9f2e);border-radius:999px;padding:6px 11px}

/* ===== Money Spin (3 этап BETBOOM) ===== */
.ms-screen{position:relative;margin:12px 16px 0;border-radius:22px;padding:18px 16px 20px;overflow:hidden;font-family:Nunito,-apple-system,sans-serif;
  background:radial-gradient(120% 90% at 50% 20%,#7b5be8,#5b3fd0 70%)}
.ms-screen::before{content:"";position:absolute;inset:-50%;background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.075) 0deg 14deg,rgba(255,255,255,0) 14deg 30deg);pointer-events:none}
.ms-star{position:absolute;pointer-events:none;z-index:1}
.ms-title{position:relative;text-align:center;font-size:24px;font-weight:900;color:#fff;text-shadow:0 3px 0 rgba(60,20,120,.35)}
.ms-sub{position:relative;text-align:center;font-size:12.5px;font-weight:800;color:rgba(255,255,255,.82);margin-top:2px}
.ms-coin{vertical-align:-3px}
.ms-prize{position:relative;margin:11px auto 0;display:flex;width:max-content;align-items:center;gap:7px;padding:7px 15px;border-radius:999px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);font-weight:900;font-size:14.5px;color:#fff}
/* Ширину берём от КАРТОЧКИ, а не от экрана: у карточки свои поля,
   и 80vw вылезали за неё, а overflow:hidden срезал барабану бок. */
.ms-wheelbox{position:relative;width:min(320px,100%);aspect-ratio:1;margin:13px auto 0;transition:opacity .4s,filter .4s}
.ms-wheelbox.locked{opacity:.5;filter:saturate(.85)}
.ms-wheel{display:block;width:100%;height:100%}
#msWheelSpin,#msWheelSpin2,#msWheelSpin3,#msWheelSpin4{transform-origin:0 0;transition:transform 4.6s cubic-bezier(0.16,0.84,0.22,1)}
.ms-pointer{position:absolute;top:0.76%;left:50%;transform:translateX(-50%);z-index:6;width:11.97%;height:9.31%;filter:drop-shadow(0 3px 4px rgba(0,0,0,.45))}
.ms-pointer svg{display:block;width:100%;height:100%}
/* Кружка над указателем в витрине нет: он остался от прежнего фиолетового
   оформления и на новом ободе читался вторым, лишним элементом. */
.ms-hub{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:24%;aspect-ratio:1;border-radius:50%;z-index:5;
  background:#fff;border:4px solid #fff;display:flex;align-items:center;justify-content:center;color:#F23B67;font-weight:900;
  font-size:min(38px,9.6vw);line-height:1;letter-spacing:0;
  box-shadow:0 2px 10px rgba(120,45,0,.28)}
.ms-hub.lock svg{width:34%;height:34%;stroke:#F23B67}
.ms-lockcap{position:relative;display:none;align-items:center;justify-content:center;gap:8px;margin-top:14px;padding:10px 14px;border-radius:14px;
  background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.18);font-size:13.5px;font-weight:900;color:#fff}
.ms-lockcap svg{width:18px;height:18px;stroke:#fff}
.ms-lockcap.show{display:flex}
.ms-result{position:relative;min-height:22px;text-align:center;font-size:16px;font-weight:900;color:#fff;margin-top:12px;opacity:0;transform:translateY(6px);transition:.4s}
.ms-result.show{opacity:1;transform:none}.ms-result b{font-size:22px;color:#ffe14d}
.ms-btn{position:relative;margin-top:14px;width:100%;height:54px;border:none;border-radius:16px;font-family:inherit;font-size:16px;font-weight:900;
  color:#5b3fd0;background:#fff;cursor:pointer;transition:transform .15s;display:flex;align-items:center;justify-content:center;gap:9px}
.ms-btn:active{transform:scale(.98)}.ms-btn.lock{background:rgba(255,255,255,.18);color:rgba(255,255,255,.8);cursor:not-allowed}
.ms-btn svg{width:19px;height:19px;stroke:currentColor}
.ms-foot{position:relative;text-align:center;font-size:11.5px;font-weight:800;color:rgba(255,255,255,.7);margin-top:11px}
/* Этап ещё закрыт: колесо стоит приманкой, а не кнопкой. Фон глуше, само
   колесо приглушено и слегка уменьшено — чтобы его не путали с рабочим, —
   но номинал приза виден так же ясно. */
.ms-screen.soon{background:radial-gradient(120% 90% at 50% 20%,#4b3a86,#33265e 70%)}
.ms-screen.soon .ms-wheelbox{opacity:.62;transform:scale(.94);filter:saturate(.75)}
.ms-screen.soon .ms-title,.ms-screen.soon .ms-sub{opacity:.8}
.ms-screen.soon .ms-star{opacity:.45}
.ms-btn.lock.soon{background:rgba(255,255,255,.14);border:1px dashed rgba(255,255,255,.4);
  color:#fff;cursor:default;font-size:15px}
/* Верхний приз в закрытом колесе дышит — единственное движение на карточке,
   и взгляд идёт именно туда. Тем, кто просил систему не анимировать, не
   показываем: у части людей от этого укачивает. */
.ms-screen.soon .ms-prize{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.42);
  animation:msPulse 2.4s ease-in-out infinite}
@keyframes msPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
@media (prefers-reduced-motion:reduce){.ms-screen.soon .ms-prize{animation:none}}

/* ===== Раздел «Друзья»: прогрессивная рефералка =========================
   Макет design_handoff_referral_progression/final-design-2a.html. Палитра
   у экрана своя (сине-фиолетовая, как в «Призах»), поэтому цвета заданы
   явно, а не через переменные темы: макет тёмный и в светлой теме не живёт.
   Формулу бонуса тут НЕ считаем — все числа приходят из /me.ref_prog.      */
.rfp { display: flex; flex-direction: column; gap: 18px; padding: 12px 0 8px; }
/* Пробел перед ₽ в моноширинном шрифте шире буквы — поджимаем, иначе
   «3720 ₽» разъезжается на полэкрана */
.rfp-mono { font-family: 'JetBrains Mono','Roboto Mono',ui-monospace,SFMono-Regular,Menlo,monospace; word-spacing: -.22em; }

.rfp-hero {
  position: relative; border-radius: 26px; padding: 22px 22px 18px;
  background: linear-gradient(135deg, rgba(99,102,241,.30), rgba(63,70,135,.16) 55%, rgba(36,42,84,.12));
  border: 1px solid rgba(148,163,255,.16);
}
.rfp-hero::after {
  content: "✦"; position: absolute; top: 16px; right: 20px;
  color: #b9aaff; font-size: 18px; line-height: 1;
}
.rfp-hero-label { font-size: 14px; color: #aab2d0; }
.rfp-hero-value { font-size: 42px; font-weight: 800; color: #fff; letter-spacing: -1px; line-height: 1.1; margin-top: 4px; }
.rfp-hero-sub { font-size: 13px; color: #8d95b2; margin-top: 4px; line-height: 1.45; }
.rfp-div { height: 1px; background: rgba(148,163,255,.14); margin: 16px 0 14px; }
.rfp-split { display: flex; gap: 22px; align-items: flex-start; }
.rfp-split > div { min-width: 0; }
/* «N прошли 2 этап» занимает ровно свою ширину — иначе вторая колонка
   с суммой и пилюлей «к выводу» переносится на узком экране */
.rfp-split .rfp-col-n { flex: 0 0 auto; }
.rfp-split b { display: block; font-size: 20px; font-weight: 800; color: #fff; }
.rfp-split b.acc { color: #b3a6ff; }
.rfp-split span { display: block; font-size: 12px; color: #8d95b2; margin-top: 2px; }
.rfp-tag { display: flex; align-items: center; gap: 6px; margin-top: 3px; white-space: nowrap; }
.rfp-tag span { margin-top: 0; font-size: 11.5px; }
/* Селектор специально «тяжёлый»: .rfp-split span и .rfp-card-head > span
   (класс + тег) перебивали одиночный .rfp-pill, и тёмный текст на янтарной
   пилюле выцветал в серый — надпись «к выводу» становилась нечитаемой. */
.rfp span.rfp-pill, .rfp .rfp-pill {
  padding: 2px 8px; border-radius: 999px;
  background: linear-gradient(135deg, #4ade80, #22c55e); color: #042a18;
  font-size: 10.5px; font-weight: 800; white-space: nowrap; margin-top: 0;
}

.rfp-card {
  border-radius: 26px; padding: 22px;
  background: rgba(22,28,50,.45); border: 1px solid rgba(148,163,255,.09);
}
.rfp-card-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rfp-card-head > span { font-size: 13.5px; color: #8d95b2; }
.rfp-big { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.rfp-big b { font-size: 40px; font-weight: 800; color: #fff; letter-spacing: -1px; }
.rfp-big span { font-size: 13px; color: #8d95b2; }
.rfp-seg { display: flex; gap: 3px; margin-top: 16px; }
.rfp-seg i { flex: 1; height: 6px; border-radius: 3px; background: rgba(148,163,255,.12); transition: background .3s ease-out; }
.rfp-seg i.done { background: linear-gradient(90deg,#3e63f4,#8b5cf6); }
.rfp-seg i.cur { background: linear-gradient(90deg,#4ade80,#22c55e); }
.rfp-scale { display: flex; justify-content: space-between; font-size: 11.5px; color: #5f6785; margin-top: 8px; }
.rfp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.rfp-chips i {
  padding: 5px 8px; border-radius: 9px; font-size: 11.5px; font-weight: 700; font-style: normal;
  background: rgba(148,163,255,.05); border: 1px solid rgba(148,163,255,.08); color: #6b7390;
}
.rfp-chips i.done { background: rgba(52,214,143,.10); border-color: rgba(52,214,143,.25); color: #3fd68f; }
.rfp-chips i.cur { background: linear-gradient(135deg,#6d7cff,#8b5cf6); border-color: rgba(160,140,255,.8); color: #fff; }
.rfp-foot { margin-top: 14px; font-size: 13px; color: #8d95b2; line-height: 1.5; }

.rfp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rfp-pc {
  border-radius: 20px; padding: 16px 12px;
  background: rgba(22,28,50,.45); border: 1px solid rgba(148,163,255,.09);
  display: flex; flex-direction: column; align-items: center; gap: 5px;
}
.rfp-pc b { font-size: 24px; font-weight: 800; color: #b3a6ff; }
.rfp-pc span { font-size: 12.5px; color: #8d95b2; text-align: center; line-height: 1.3; }
.rfp-pc em {
  margin-top: 3px; padding: 3px 9px; border-radius: 999px; font-style: normal;
  background: rgba(148,163,255,.10); color: #aab2d0; font-size: 10.5px; font-weight: 700;
}

.rfp-cta {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 17px; border: 0; border-radius: 18px;
  background: linear-gradient(90deg,#3e63f4,#8455f2); box-shadow: 0 10px 30px rgba(94,86,246,.35);
  color: #fff; font-family: inherit; font-weight: 800; font-size: 17px; cursor: pointer;
  transition: transform .15s var(--ease), filter .15s;
}
.rfp-cta:active { transform: scale(.98); filter: brightness(.92); }
.rfp-cta .ic { font-size: 20px; }

.rfp-link {
  display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px;
  border-radius: 16px; background: rgba(20,26,46,.6); border: 1px solid rgba(148,163,255,.10);
}
.rfp-link code { flex: 1; min-width: 0; font-size: 13px; color: #8d95b2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rfp-copy {
  width: 40px; height: 40px; flex-shrink: 0; border: 0; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: linear-gradient(135deg,#4f6bf5,#8455f2); color: #fff;
}
.rfp-copy:active { filter: brightness(.92); }
.rfp-copy .ic { font-size: 17px; }

.rfp-h { font-size: 18px; font-weight: 800; color: #f0f2fa; margin: 6px 0 12px; }
.rfp-list { border-radius: 22px; background: rgba(22,28,50,.55); border: 1px solid rgba(148,163,255,.09); padding: 4px 18px; }
.rfp-row { display: flex; align-items: center; gap: 14px; padding: 14px 0; }
.rfp-row + .rfp-row { border-top: 1px solid rgba(148,163,255,.07); }
.rfp-av {
  width: 42px; height: 42px; border-radius: 999px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg,#6d7cff,#8b5cf6); color: #fff; font-weight: 800; font-size: 16px;
}
.rfp-row.wait .rfp-av { background: rgba(148,163,255,.10); color: #7b83a3; }
.rfp-row-main { flex: 1; min-width: 0; }
.rfp-row-main b { display: block; font-weight: 700; font-size: 15px; color: #eef1fa; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rfp-row-main span { display: block; font-size: 12.5px; color: #8d95b2; margin-top: 1px; }
.rfp-row-sum { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.rfp-row-sum b { font-size: 15px; font-weight: 800; color: #3fd68f; white-space: nowrap; }
.rfp-row-sum span { font-size: 10.5px; color: #8d95b2; white-space: nowrap; }
.rfp-row-sum span em { color: #3fd68f; font-weight: 700; font-style: normal; }
.rfp-row.wait .rfp-row-sum b { color: #6b7390; }

.rfp-empty {
  border-radius: 22px; background: rgba(22,28,50,.55); border: 1px solid rgba(148,163,255,.09);
  padding: 26px 18px; text-align: center; color: #8d95b2; font-size: 13px; line-height: 1.5;
}
.rfp-empty b { display: block; color: #eef1fa; font-size: 15px; margin-bottom: 6px; }

/* ===== Скриншот-доказательство на карточке этапа ===================== */
.proof {
  margin-top: 13px; padding: 13px 14px; border-radius: 14px;
  background: rgba(255, 201, 60, .07); border: 1px solid rgba(255, 201, 60, .28);
}
.proof.ok { background: rgba(52, 211, 153, .08); border-color: rgba(52, 211, 153, .32); }
.proof.busy { opacity: .6; pointer-events: none; }
.proof-h {
  display: flex; align-items: center; gap: 7px;
  font-size: 13.5px; font-weight: 800; color: #ffce5a;
}
.proof.ok .proof-h { color: #45e0a6; }
.proof-s { font-size: 12.5px; color: #a6afca; line-height: 1.45; margin-top: 5px; }
.proof-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 42px; margin-top: 11px; border-radius: 12px; cursor: pointer;
  background: linear-gradient(92deg, #4c6bff, #8b5cf6);
  font-size: 13.5px; font-weight: 700; color: #fff;
}
.proof-btn:active { transform: scale(.99); filter: brightness(.94); }
.proof.ok .proof-btn { background: rgba(148, 163, 255, .12); color: #c9d1ee; }
.proof-msg { font-size: 12px; color: #ffb3b3; margin-top: 8px; min-height: 0; }
.proof-msg:empty { display: none; }


/* Быстрые задания компактной строкой — весь список должен читаться сразу,
   без прокрутки. Подробности и кнопка раскрываются тапом. */
.qrow {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  padding: 15px 16px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(126, 136, 255, .07), rgba(126, 136, 255, .028));
  border: 1px solid rgba(148, 163, 255, .11);
}
.qrow:active { transform: scale(.995); }
.qrow-main { flex: 1; min-width: 0; }
.qrow-title { font-size: 15.5px; font-weight: 700; color: #fff; line-height: 1.3; }
.qrow .step-rewards { margin-top: 9px; }
.qrow-go {
  width: 38px; height: 38px; border-radius: 999px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: rgba(148, 163, 255, .08);
  border: 1px solid rgba(148, 163, 255, .16);
  color: #aeb7d6;
}
.qrow.done { opacity: .62; }
.qrow.done .qrow-go {
  background: rgba(52, 211, 153, .12);
  border-color: rgba(52, 211, 153, .32);
  color: #34d399;
}


/* Просьба о скриншоте в окне вывода — тот же блок, но компактнее: следом идёт
   «Отправить заявку», и две крупные кнопки подряд слипались. */
.proof.wproof { margin: 4px 0 12px; text-align: left; }
.proof.wproof .proof-btn { height: 38px; font-size: 13px; }


/* Кнопка «Я подписался» — вторая в блоке, поэтому без заливки: две одинаково
   яркие рядом спорят друг с другом, и человек жмёт не ту. */
.proof-btn.ghost {
  margin-top: 8px; background: rgba(148, 163, 255, .12); color: #c9d1ee;
  box-shadow: none;
}
/* Кнопки в блоке — во всю ширину: <button> сам по себе сжимается по тексту,
   и рядом с полноразмерным «Отправить заявку» это выглядело как обрубок. */
.proof-btn { width: 100%; border: none; font: inherit; }
.proof.chan .proof-h { color: #93c5fd; }
.proof.chan { background: rgba(99, 102, 241, .09); border-color: rgba(139, 110, 255, .32); }


/* Окно вывода выросло: к реквизитам добавились подписка на канал и просьба о
   скриншоте. На маленьком экране кнопка «Отправить заявку» уходила за нижний
   край, и заявку было не отправить вовсе. Даём оверлею прокрутку, а самой
   модалке — потолок по высоте экрана. */
.burst { overflow-y: auto; place-items: start center; padding-top: 24px; padding-bottom: 24px; }
.gate { max-height: none; }
.req-gate { width: min(360px, calc(100% - 24px)); }


/* Третья плитка в «Друзьях» — очки. Проценты с дохода идут на баланс, а очки
   в турнир: это разные валюты, и метка снизу должна их разводить, иначе
   человек ждёт рублей. */
.rfp-grid { grid-template-columns: repeat(3, 1fr); }
.rfp-pc.pts { border-color: rgba(52, 211, 153, .34); background: rgba(52, 211, 153, .08); }
.rfp-pc.pts b { color: #45e0a6; }
.rfp-pc.pts em { background: rgba(52, 211, 153, .16); color: #45e0a6; }


/* Способ вывода выбирает сумма, а не палец: неактивный приглушаем, но не
   прячем — человек должен видеть, что второй способ существует. */
.req-m.dim { opacity: .42; }
.req-note {
  margin: -4px 2px 10px; font-size: 12px; color: var(--dim); line-height: 1.35;
}


/* Карточка за второй уровень: зелёное ребро вместо синего — синим в разделе
   помечено то, что делаешь сам, зелёным деньги, которые приходят без тебя. */
.rfp-card.l2 {
  border-color: rgba(47, 217, 143, .30);
  background: linear-gradient(180deg, rgba(47, 217, 143, .10), rgba(47, 217, 143, .03));
}
.rfp-card.l2 .rfp-big b { color: #2fd98f; }
.rfp-card.l2 .rfp-pill {
  color: #2fd98f;
  background: rgba(47, 217, 143, .14);
  border: 1px solid rgba(47, 217, 143, .38);
}


/* ---------- Аватарки: фото внутри готовых кружков ---------------------- */
/* Разметку не меняем — просто разрешаем картинке занять кружок целиком. */
.drop-ava img, .rfp-av img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.drop-ava, .rfp-av{overflow:hidden}


/* ---------- Плавающее колесо «Джекпот» ---------------------------------- */
.jp-fab{
  position:fixed; left:14px; bottom:calc(var(--nav-h,64px) + 14px); z-index:60;
  width:58px; height:58px; border-radius:50%; border:0; padding:0; cursor:pointer;
  background:radial-gradient(circle at 34% 30%, #eaff6b, #b6e01f 58%, #86a915);
  box-shadow:0 0 0 4px rgba(198,240,60,.14), 0 10px 26px -8px rgba(160,220,40,.75);
  display:flex; align-items:center; justify-content:center;
  animation:jpPulse 2.8s ease-in-out infinite;
}
.jp-fab:active{transform:scale(.94)}
.jp-fab svg{width:34px; height:34px; animation:jpSpin 9s linear infinite}
.jp-fab .jp-badge{
  position:absolute; top:-3px; right:-3px; min-width:19px; height:19px; padding:0 5px;
  border-radius:99px; background:#F23B67; color:#fff; font-size:10px; font-weight:800;
  display:flex; align-items:center; justify-content:center; border:2px solid #070A11;
}
@keyframes jpSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes jpPulse{
  0%,100%{box-shadow:0 0 0 4px rgba(198,240,60,.14), 0 10px 26px -8px rgba(160,220,40,.75)}
  50%{box-shadow:0 0 0 9px rgba(198,240,60,.05), 0 10px 30px -8px rgba(160,220,40,.95)}
}
@media (prefers-reduced-motion: reduce){ .jp-fab, .jp-fab svg{animation:none} }


/* ---------- Джекпот: слой поверх приложения ----------------------------- */
/* Ни лупы, ни «Выделить / Скопировать» над игрой.
   Полоса режима (.jp-bar с названием, балансом и «Пополнить») — это документ
   РОДИТЕЛЯ, а не рамка. Внутри jump.html запрет стоял давно и работал, здесь
   его не было вовсе: во всём файле user-select встречался дважды и не тут,
   -webkit-touch-callout — ни разу. Долгое нажатие по цифре баланса давало и
   лупу, и меню. Полей ввода в слое нет, сплошной запрет безопасен. */
.jp-layer,.jp-layer *{-webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none}
.jp-layer{
  position:fixed; inset:0; z-index:80; background:#0a0d14;
  display:flex; flex-direction:column; animation:jpIn .22s ease-out;
}
@keyframes jpIn{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:none}}
.jp-bar{
  display:flex; align-items:center; gap:7px; padding:11px 10px;
  border-bottom:1px solid rgba(148,163,255,.14); flex-shrink:0;
}
.jp-bar b{
  font-size:16px; font-weight:800; color:#fff;
  /* Заголовок — единственное, чему в шапке можно ужиматься: кнопки и баланс
     терять нельзя, а «Ракетка» с многоточием никого не запутает. Без
     min-width:0 флекс текст не сжимает вовсе — и кнопка «Пополнить»
     вылезала за край айфона. */
  flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.jp-back{
  display:flex; align-items:center; gap:5px; height:32px; padding:0 9px 0 7px;
  border-radius:11px; border:1px solid rgba(148,163,255,.18);
  background:rgba(148,163,255,.07); color:#dfe4f5; font-size:12.5px;
  font-weight:600; cursor:pointer;
}
.jp-back svg{width:14px; height:14px}
/* ---- шапка игры на узком экране ----
   Считано на 375: «Назад» 62 px + баланс 78 + «Пополнить ⟨СБП⟩» 132 —
   заголовку оставалось 40 px, отсюда «Пода…». Слово у стрелки убираем
   первым: назад пользователь жмёт по стрелке, а не читает подпись. */
@media (max-width:430px){
  .jp-bar{gap:6px; padding:11px 8px}
  .jp-back{padding:0 8px; gap:0}
  .jp-back span{display:none}
  .jp-bar b{font-size:15px}
  /* На узком экране сумму ужимаем умеренно: смысл правки в том,
     чтобы её было видно, а не в том, чтобы она влезла любой ценой.
     Ужиматься есть чему — название игры рядом с многоточием. */
  .jp-bal{font-size:15px; padding:6px 9px; border-radius:12px}
  .jp-top{padding:0 10px; font-size:12px; gap:5px}
}
.jp-tag{
  margin-left:auto; font-size:10.5px; font-weight:800; letter-spacing:.04em;
  text-transform:uppercase; color:#c6f03c; padding:4px 9px; border-radius:8px;
  background:rgba(198,240,60,.10); border:1px solid rgba(198,240,60,.28);
}
.jp-frame{flex:1; width:100%; border:0; display:block}
/* Пока игра открыта, колесо и нижняя навигация не мешают */
body.jp-open .jp-fab, body.jp-open .nav{display:none}

/* Суммы вывода плитками — свободного ввода нет: выводим только круглыми. */
.req-sums { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.req-sum {
  padding: 12px 2px; border-radius: 12px; cursor: pointer;
  font-family: var(--mono); font-weight: 700; font-size: 14px;
  color: var(--text); font-variant-numeric: tabular-nums;
  background: rgba(255,255,255,.05); border: 1px solid var(--gl-br-strong);
  transition: border-color .12s, background .12s, opacity .12s;
}
.req-sum.on { border-color: var(--ai-sky); background: rgba(127,166,255,.14); }
.req-sum:disabled { opacity: .34; cursor: default; }
.req-sum:focus-visible { outline: 2px solid var(--ai-sky); outline-offset: 2px; }

/* Пополнение звёздами: шторка и быстрые суммы. */
.sheet { position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-end; }
.sheet-bg { position: absolute; inset: 0; background: rgba(4,8,18,.72); backdrop-filter: blur(3px); }
.sheet-card {
  position: relative; width: 100%; max-height: 88vh; overflow-y: auto;
  background: var(--card); border-top-left-radius: 22px; border-top-right-radius: 22px;
  border: 1px solid var(--border); border-bottom: 0; padding: 10px 16px 22px;
}
.sheet-grip { width: 38px; height: 4px; border-radius: 99px; background: var(--border); margin: 0 auto 14px; }
.sheet-title { display: block; font-size: 17px; margin-bottom: 6px; }
.sheet-sub { margin: 0 0 15px; font-size: 12px; line-height: 1.55; color: var(--dim); }
.sheet-input {
  display: flex; align-items: center; justify-content: center; gap: 2px;
  padding: 12px 14px; border-radius: 12px; margin-bottom: 8px;
  background: rgba(255,255,255,.05); border: 1px solid var(--gl-br-strong);
}
.sheet-input input {
  flex: 1; min-width: 0; border: none; outline: none; background: none; text-align: right;
  font-family: var(--mono); font-weight: 700; font-size: 26px; color: var(--text);
}
.sheet-input span { font-size: 20px; color: var(--ai-sky); }
.sheet-min { text-align: center; font-size: 12.5px; color: var(--dim); margin-bottom: 10px; }
.sheet-quick { display: flex; gap: 7px; margin-bottom: 10px; }
.sheet-quick .chip {
  flex: 1; min-width: 0; justify-content: center; padding: 11px 4px; cursor: pointer;
  color: var(--text); font-size: 14.5px; border-radius: 10px;
  background: rgba(127,166,255,.13); border: 1px solid rgba(127,166,255,.34);
}
.sheet-card .btn { width: 100%; }
.sheet-link { display: block; margin-top: 13px; text-align: center; font-size: 12.5px; color: var(--ai-sky); text-decoration: none; }
.tu-err { min-height: 16px; margin-top: 9px; text-align: center; font-size: 12.5px; color: var(--red, #ff6b81); }
.topup-note { margin-top: 10px; font-size: 12.5px; line-height: 1.5; color: var(--dim); }
.topup-note b { color: var(--text); }
/* Заморозка партнёркой. Рамкой и тёплым цветом, а не серым как topup-note:
   человек уже видел эти деньги на балансе, и объяснение должно попасться ему
   на глаза раньше, чем серая кнопка вывода. */
.hold-note { margin-top: 10px; padding: 10px 12px; border-radius: 12px;
  font-size: 12.5px; line-height: 1.5; text-align: left;
  color: var(--dim); background: rgba(255,176,32,.10);
  border: 1px solid rgba(255,176,32,.28); }
.hold-note b { color: #ffb020; }


/* Задание «Сыграй в джекпоте»: золотая обводка и мягкое дыхание. Мигание
   намеренно медленное — быстрое дёргает глаз и читается как ошибка. */
.qrow.jpglow {
  border-color: rgba(255, 207, 92, .55);
  box-shadow: 0 0 0 1px rgba(255, 207, 92, .18), 0 8px 26px -14px rgba(255, 176, 32, .75);
  animation: jpBreath 2.8s ease-in-out infinite;
}
@keyframes jpBreath {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255, 207, 92, .16), 0 8px 22px -16px rgba(255, 176, 32, .6); }
  50%      { box-shadow: 0 0 0 1px rgba(255, 207, 92, .42), 0 10px 30px -10px rgba(255, 176, 32, .95); }
}
@media (prefers-reduced-motion: reduce) { .qrow.jpglow { animation: none; } }


/* Шапка Арены: баланс и пополнение. Баланс — цифра, а не подпись, поэтому
   моноширинный и крупный; кнопка рядом тихая, чтобы не спорить с игрой. */
.jp-money { display:flex; align-items:center; gap:7px; flex:none; }
/* КРУПНЫЙ БАЛАНС В ШАПКЕ ИГР (31.08.2026, решение владельца).
   Было 12,5 px узким моноширинным — сумма терялась рядом с названием игры
   и кнопкой пополнения. Стало 21 px системным шрифтом с табличными
   цифрами: он шире и круглее, при том же кегле читается заметно крупнее,
   а колонки цифр всё равно не пляшут при смене баланса.
   Класс общий, поэтому одна правка накрывает все игры разом: Арену,
   Ракетку, Апгрейд, Прыгуна, Мины и подарки. */
.jp-bal {
  font-family:inherit; font-size:17px; font-weight:800; color:#fff;
  letter-spacing:-.2px; font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
  background:linear-gradient(150deg,rgba(127,166,255,.22),rgba(127,166,255,.06));
  border:1px solid rgba(127,166,255,.42);
  border-radius:13px; padding:7px 11px; white-space:nowrap;
  box-shadow:0 8px 22px -12px rgba(90,140,255,.9),
             inset 0 1px 0 rgba(255,255,255,.14);
}
/* РУБЛЬ В ШАПКЕ. Общий `.cur` рисует знак в 78% кегля, с прозрачностью .6 и
   отступом слева — из-за этого он выглядел мелким и стоящим особняком.
   Здесь он часть суммы, а не сноска к ней: тот же размер, что у цифр,
   почти та же плотность, отступ вдвое меньше. */
.jp-bal .cur{
  font-size:1em; font-weight:800; opacity:.8; margin-left:.05em;
}
.jp-top {
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  font-family:inherit; font-weight:800; font-size:13px; line-height:1;
  letter-spacing:.2px; color:#fff; white-space:nowrap;
  /* Тот же градиент, что у «Бесплатной ставки» в Ракетке, — просьба
     партнёра: две главные кнопки экрана в одном цвете. Размер компактный
     не из скромности: прошлая, на 17px с полем 12×19, вместе с бейджем СБП
     не влезала в айфон, и «Пополнить» уезжало за край экрана. */
  background:linear-gradient(92deg,#1e86f0,#3fc4f5);
  border:0; border-radius:999px; padding:8px 12px;
  text-shadow:0 1px 2px rgba(8,40,90,.35);
  box-shadow:0 10px 24px -10px rgba(48,150,255,.95),
             0 0 0 1px rgba(255,255,255,.22) inset;
}
.jp-top:active { transform:scale(.97); }
.jp-top svg { width:16px; height:16px; }
@media (max-width:400px){
  /* На обычном айфоне (390) слово «Назад» — та самая дюжина пикселей, из-за
     которой «Ракетка» превращалась в «Раке…». Стрелка в пилюле говорит сама. */
  .jp-back span{ display:none }
  .jp-back{ padding:0 9px }
}


/* ---------- Шапка: деньги и действия ----------
   Раньше здесь были только два чипа, а пополнение и вывод жили во вкладке
   «Баланс». Вкладку убрали — значит оба действия обязаны быть тут, иначе до
   денег не добраться. Скругление и градиент повторяют шапку Арены. */
.hd { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.hd-row { display: flex; align-items: center; gap: 10px; }
.hd-row .profile { flex: 1; min-width: 0; }
.hd-chips { display: flex; gap: 7px; flex: none; }
.hd-chip {
  display: flex; align-items: center; gap: 5px;
  height: 36px; padding: 0 13px; border-radius: 999px; cursor: pointer;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .13);
  font-weight: 800; font-size: 14px; line-height: 1;
  transition: transform .18s var(--ease, ease), background .18s ease;
}
.hd-chip:active { transform: scale(.94); background: rgba(255, 255, 255, .09); }
.hd-chip b { font-family: var(--mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-weight: 800; font-variant-numeric: tabular-nums; }
.hd-chip.bal b { color: #EEF2FB; }
/* БАЛАНС НА ГЛАВНОЙ. Рубль стоял отставленным на два отступа сразу — зазор
   самого чипа плюс собственное поле класса `.cur`, — и вдвое мельче цифры:
   12 px против 14, да ещё умноженные на 0.78 изнутри `.cur`. Читалось как
   случайный значок рядом, а не как часть суммы.
   Делаем как в шапке игр: тот же кегль, вплотную, чуть приглушён. */
.hd-chip.bal b { font-size: 16px; }
.hd-chip.bal i { font-style: normal; font-size: 16px; color: #9AA6C2;
  margin-left: -3px; }
.hd-chip.bal i .cur { font-size: 1em; font-weight: 800; opacity: .74;
  margin-left: .04em; }
.hd-chip.tick b { color: #C4B5FD; }
.hd-chip .ic { font-size: 15px; }

/* Все деньги одной группой справа: кнопка действия рядом с суммой, а не
   строкой ниже.

   Переноса здесь быть не должно. Он тут стоял ради узких экранов, но
   переносилась не «группа целиком», а последняя плашка: билеты уезжали под
   кнопку, и шапка ломалась у всех, у кого длинное имя или трёхзначное число
   билетов. Ужимать надо ИМЯ — у него многоточие и оно ничего не решает, — а
   деньги и билеты обязаны остаться на своих местах. */
.hd-money {
  display: flex; align-items: center; gap: 6px;
  flex: 0 1 auto; min-width: 0; justify-content: flex-end; flex-wrap: nowrap;
}
/* Крайний случай — экран 320 и шестизначный баланс: пусть ужмётся подпись
   кнопки, чем поедет вся строка. Плашки денег и билетов не ужимаются никогда:
   ради них шапка и существует. */
.hd-money .hd-chip { flex: 0 0 auto; }
.hd-act { display: flex; gap: 8px; }
.hd-money .hd-btn { flex: 0 0 auto; height: 36px; padding: 0 14px; font-size: 13px; }
.hd-money .hd-chip { height: 36px; }

/* Одной строкой это не влезает физически: имя с @ просит ~140, «Вывести» —
   100, деньги — 100, билеты — 50, плюс зазоры. Итого ~410 при 343 доступных
   на айфоне. Раньше строка была nowrap, а группа денег не ужималась — лишнее
   вылезало ВЛЕВО (justify-content:flex-end выталкивает переполнение в начало)
   и кнопка ложилась поверх имени. Поэтому строка теперь честно переносится:
   имя сверху, деньги — своей строкой справа. На широком экране (планшет,
   десктопный Telegram) всё по-прежнему в одну строку. */
.hd-row { flex-wrap: wrap; }
.hd-row .profile { flex: 1 1 auto; min-width: 138px; overflow: hidden; }
.hd-money { flex: 0 0 auto; margin-left: auto; max-width: 100%; }
.hd-btn { white-space: nowrap; }
.hd-btn {
  flex: 1; height: 42px; border: 0; border-radius: 999px; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 800; line-height: 1;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  transition: transform .18s ease, filter .18s ease;
}
.hd-btn:active { transform: scale(.97); filter: brightness(1.07); }
.hd-btn.out {
  background: rgba(255, 255, 255, .06); color: #EEF2FB;
  border: 1px solid rgba(255, 255, 255, .15);
}
.hd-btn.add {
  background: linear-gradient(96deg, #4E6BF5, #8B5CF6); color: #fff;
  box-shadow: 0 12px 26px -14px rgba(99, 102, 241, .95);
}
.hd-btn .ic { font-size: 16px; }
/* Ниже 440 строка денег заведомо уезжает на вторую строку (имя 138 + деньги
   ~261 + зазор просят 409 при 408 доступных). Раз уж она своя — пусть «Вывести»
   занимает всё свободное место, а не висит с дырой слева. */
@media (max-width: 440px) {
  .hd-money { width: 100%; }
  .hd-money .hd-btn { flex: 1 1 auto; }
  .hd { gap: 8px; }
}
/* Порог подняли с 360: ломалось и на 390 — у iPhone это самая частая ширина. */
@media (max-width: 400px) {
  .hd-row { gap: 8px; }
  .hd-money { gap: 5px; }
  .hd-chip { padding: 0 10px; font-size: 13px; }
  .hd-money .hd-btn { padding: 0 11px; font-size: 12.5px; }
}


/* ---------- Пополнение на экране баланса ----------
   Две одинаковые кнопки подряд читались как одна двойная, и человек жал
   «Пополнить», думая, что выводит. Разводим их отступом и цветом: вывод —
   синий, пополнение — золотое. */
.balance-top #topupBtn {
  margin-top: 12px;
  /* Синяя, как везде. Золотая читалась ярче, но выбивалась из ряда: у одного
     действия в приложении должен быть один цвет. */
  background: linear-gradient(96deg, #229ED9, #1B8FC7);
  border: 0; color: #fff; font-weight: 900;
  font-size: 17.5px; letter-spacing: .2px;
  box-shadow: 0 14px 30px -16px rgba(34, 158, 217, .95);
}
.balance-top #topupBtn:active { filter: brightness(1.06); }


/* ---------- Плавная шторка ----------
   Шторка появлялась мгновенно вместе с затемнением — глаз читал это как
   рывок интерфейса. Подложка проявляется, карточка поднимается снизу с
   мягким торможением; закрытие проигрывается в обратную сторону, иначе она
   исчезает щелчком. */
.sheet-bg { animation: sheetFade .22s ease both; }
.sheet-card {
  animation: sheetUp .36s cubic-bezier(.22, 1, .36, 1) both;
  will-change: transform;
}
@keyframes sheetFade { from { opacity: 0 } to { opacity: 1 } }
@keyframes sheetUp { from { transform: translateY(102%) } to { transform: translateY(0) } }
.sheet.closing .sheet-bg { animation: sheetFade .2s ease reverse both; }
.sheet.closing .sheet-card { animation: sheetUp .24s cubic-bezier(.4, 0, 1, 1) reverse both; }
/* Кому анимации мешают — системная настройка это и говорит. */
@media (prefers-reduced-motion: reduce) {
  .sheet-bg, .sheet-card,
  .sheet.closing .sheet-bg, .sheet.closing .sheet-card { animation: none; }
}


/* ---------- Вкладки «Заработка» и карточки игр ---------- */
.ztabs{display:flex;gap:6px;padding:5px;margin:0 16px 14px;border-radius:17px;
  background:rgba(148,163,255,.06);border:1px solid rgba(255,255,255,.09)}
.ztab{position:relative;overflow:visible;flex:1;height:46px;border:0;border-radius:13px;cursor:pointer;font-family:inherit;
  display:flex;align-items:center;justify-content:center;gap:7px;background:transparent;
  font-size:14.5px;font-weight:800;color:#5F6B80;
  transition:background .18s ease,color .18s ease}
.ztab.on{background:#F2F3F5;color:#0A0D14}
.ztab .n{font-family:var(--mono,ui-monospace,Menlo,monospace);font-size:12px;
  padding:2px 7px;border-radius:99px;background:rgba(255,255,255,.08)}
.ztab.on .n{background:rgba(10,13,20,.12)}
.zpane{display:none} .zpane.on{display:block}

.gcard{position:relative;display:flex;align-items:center;gap:12px;overflow:hidden;
  margin:0 16px 11px;padding:16px 16px 16px 18px;border-radius:22px;cursor:pointer;
  background:#12161F;border:1px solid rgba(255,255,255,.09);transition:transform .16s ease}
.gcard:active{transform:scale(.988)}
.gcard::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 130% at 0% 50%,var(--tint) 0%,transparent 62%)}
.gcard::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.45;
  background-image:radial-gradient(circle,rgba(255,255,255,.5) 1px,transparent 1px);
  background-size:38px 34px;background-position:8px 6px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 45%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 45%,transparent)}
.g-l{position:relative;z-index:1;flex:1 1 auto;min-width:0}
/* Заголовок и бейдж — всегда в одну строку: перенос бейджа вниз ломал
   пропорции карточки сильнее, чем чуть меньший кегль. */
.g-t{display:flex;align-items:center;gap:8px;margin-bottom:5px;flex-wrap:nowrap;min-width:0}
.g-t b{font-size:24px;font-weight:900;font-style:italic;letter-spacing:-.02em;
  text-transform:uppercase;line-height:1;color:var(--acc);white-space:nowrap;
  text-shadow:0 0 22px var(--glow)}
.g-badge{flex:0 0 auto;padding:4px 9px;border-radius:99px;font-size:10px;font-weight:900;
  letter-spacing:.03em;text-transform:uppercase;color:#04202E;background:var(--acc);
  white-space:nowrap}
.g-sub{font-size:13px;line-height:1.3;color:#C3CBD9;margin-bottom:7px}
/* Ударная строка обязана лечь в одну линию: «ПОБЕДИТЕЛЬ ЗАБИРАЕТ / ВСЁ»
   выглядело обрубком. */
.g-cap{font-size:11.5px;font-weight:900;line-height:1.2;text-transform:uppercase;
  letter-spacing:-.01em;color:var(--acc);
  /* Перенос вместо обрезки: окно превью стало шире, колонка текста уже, и
     обрубать фразу многоточием некрасивее, чем перенести на две строки. */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden}
/* Превью лежит на подложке цвета карточки, а не на чёрном прямоугольнике:
   чёрное поверх тёмного читается как чужая картинка, наложенная сверху. */
/* Окно превью — ДОЛЯ ширины карточки, а не фиксированные пиксели. Фикс не
   растёт вместе с экраном: на широком телефоне справа оставалось пусто, а
   картинка выглядела мелкой. Пропорцию держит aspect-ratio, высота руками
   больше не задаётся. */
/* Крупнее прежних 150 px, но не в ущерб тексту: на 48% название с плашкой
   NEW переставало помещаться и заезжало на картинку. 42-46% — предел, при
   котором «АПГРЕЙД NEW» ещё влезает целиком. */
.g-vis{position:relative;z-index:1;flex:0 0 40%;width:40%;aspect-ratio:150/132;
  max-width:210px;border-radius:18px;overflow:hidden;background:var(--pad);
  box-shadow:inset 0 0 0 1px var(--edge)}
@media (min-width:412px){.g-vis{flex-basis:43%;width:43%}}
@media (max-width:380px){.g-vis{flex-basis:38%;width:38%}
  .g-t b{font-size:20px}.g-cap{font-size:10.5px}}
/* Название показывается ЦЕЛИКОМ. Обрезка в многоточие («АПГРЕ…», «СК…»)
   прятала проблему вместо того, чтобы её решать: заголовок и плашка стояли в
   одну строку без права переноса. Разрешаем плашке переезжать вниз. */
.g-l{overflow:hidden}
.g-t{flex-wrap:wrap;row-gap:4px}
.g-badge{flex:0 0 auto}

.g-arena{--acc:#3FC4F5;--glow:rgba(63,196,245,.35);--tint:rgba(30,134,240,.22);--pad:rgba(30,134,240,.16);--edge:rgba(63,196,245,.28)}
.mos i{position:absolute;display:block}
.mos .s1{left:0;top:0;width:42%;height:52%;background:#F97316}
.mos .s2{left:42%;top:0;right:0;height:44%;background:#22C55E}
.mos .s3{left:0;top:52%;bottom:0;width:36%;background:#22B8CF}
.mos .s4{left:36%;top:44%;width:34%;bottom:0;background:#7C3AED}
.mos .s5{left:70%;top:44%;right:0;bottom:0;background:#E11D48}
.mos .grid{position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.13) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.13) 1px,transparent 1px);
  background-size:15px 15px}
/* Мяч гуляет по полю и отскакивает — так карточка показывает саму игру,
   а не абстракцию. Участники сидят в своих ячейках. */
/* Мяч бьётся о стены: каждая точка траектории — точка касания края, движение
   между ними прямое. Криволинейный «облёт» читался как плавание, а не как
   отскок. */
.ball{position:absolute;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;
  background:#fff;box-shadow:0 0 10px 3px rgba(255,255,255,.8);
  animation:gBall 5.2s linear infinite}
@keyframes gBall{
  0.0%{left:6.0%;top:34.0%}
  22.3%{left:90.0%;top:90.0%}
  23.4%{left:94.0%;top:87.3%}
  46.8%{left:6.0%;top:28.7%}
  54.2%{left:34.0%;top:10.0%}
  70.2%{left:94.0%;top:50.0%}
  86.1%{left:34.0%;top:90.0%}
  100.0%{left:6.0%;top:34.0%}}
.pl{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;
  align-items:center;gap:2px}
.pl b{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:9px;font-weight:800;color:#fff;
  background:rgba(9,12,20,.55);border:1.5px solid rgba(255,255,255,.7);
  box-shadow:0 3px 8px rgba(0,0,0,.45)}
.pl span{font-size:7.5px;font-weight:700;color:#fff;letter-spacing:.01em;
  text-shadow:0 1px 3px rgba(0,0,0,.9)}

.g-tour{--acc:#7CF7B0;--glow:rgba(74,222,128,.32);--tint:rgba(20,150,90,.22);--pad:rgba(20,150,90,.16);--edge:rgba(74,222,128,.26)}
.tv{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:2px}
.tv .n{font-family:var(--mono,ui-monospace,Menlo,monospace);font-weight:800;font-size:19px;
  color:#8DF5B4;text-shadow:0 0 20px rgba(74,222,128,.55);animation:gPulse 2.6s ease-in-out infinite}
.tv .p{font-size:9px;color:#9FB6C9;letter-spacing:.12em;text-transform:uppercase}
.tv .bar{width:70%;height:6px;border-radius:4px;margin-top:7px;background:rgba(255,255,255,.14);
  overflow:hidden}
.tv .bar i{display:block;height:100%;border-radius:4px;
  background:linear-gradient(90deg,#4ADE80,#3FC4F5);animation:gGrow 3.6s ease-in-out infinite}
@keyframes gPulse{0%,100%{opacity:.82}50%{opacity:1}}
@keyframes gGrow{0%,100%{width:32%}50%{width:80%}}

.g-wheel{--acc:#FFC53D;--glow:rgba(255,197,61,.32);--tint:rgba(180,130,20,.22);--pad:rgba(180,130,20,.16);--edge:rgba(255,197,61,.26)}
/* Колесо на карточке — то самое, что крутится в задании: та же вёрстка SVG,
   те же сектора и суммы. Рисовать похожее заново значит однажды разойтись. */
.whbox{position:absolute;left:50%;top:50%;width:104px;height:104px;margin:-52px 0 0 -52px;
  animation:gTurn 9s linear infinite;filter:drop-shadow(0 6px 14px rgba(0,0,0,.45))}
@keyframes gTurn{to{transform:rotate(360deg)}}
.whv{position:absolute;left:50%;top:4px;margin-left:-7px;width:0;height:0;z-index:2;
  border:7px solid transparent;border-top-color:#fff;filter:drop-shadow(0 2px 4px rgba(0,0,0,.6))}

/* ---------------------------------------------------------------- Апгрейд */
.g-upg{--acc:#FFA76B;--glow:rgba(255,167,107,.34);--tint:rgba(190,95,30,.22);
  --pad:rgba(190,95,30,.16);--edge:rgba(255,167,107,.26)}

/* ── Прыгун ────────────────────────────────────────────────────────────
   Окно карточки — не абстракция, а кусок самой игры: её лист спрайтов, её
   тетрадная бумага, её рукописный шрифт. Кадры нарисованы кодом игры и
   сведены в гифку (48 КБ, 30 кадров), поэтому витрина не может разойтись с
   тем, что человек увидит внутри.

   Фон окна СВЕТЛЫЙ, в отличие от Ракетки и Апгрейда: тетрадный лист тёмным
   не бывает. Рамка двойная — чернильная под лист и зелёная под гамму карты. */
.g-jmp{--acc:#7BC043;--glow:rgba(123,192,67,.36);--tint:rgba(60,120,40,.22);
  --pad:#F5F0E4;--edge:rgba(123,192,67,.5)}
.g-jmp .g-vis{background:var(--pad);
  box-shadow:inset 0 0 0 1px rgba(46,42,38,.5), 0 0 0 1px var(--edge)}
/* Окно карточки — запись живой игры, а не гифка. Гифка тут была плохим
   форматом: тетрадная бумага и сетка — сплошной мелкий шум, палитра его не
   вытягивает. Тот же ролик в видео весит 29 КБ против 56 КБ у гифки, при
   вдвое большем разрешении и вдвое плавнее (20 кадров в секунду против
   девяти кадров на всю анимацию). */
.jmp{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;pointer-events:none;border:0}
/* Лайт-режим слабых телефонов: ролик не крутим, но карточка не пустеет —
   на месте видео остаётся его постер, тот же первый кадр. */
html.lite .jmp{animation:none}
/* Кольцо на превью — то же, что в самой игре: тонкая выигрышная дуга на
   тёмном бублике и белая стрелка сверху. Рисовать «похожее» заново значит
   однажды разойтись с игрой. */
.upr{position:absolute;left:50%;top:50%;width:100px;height:100px;margin:-50px 0 0 -50px}
.upr svg{width:100%;height:100%;transform:rotate(-90deg);
  filter:drop-shadow(0 0 10px rgba(255,167,107,.45));
  /* Кольцо медленно крутится, как в самой игре. Вращаем ТОЛЬКО svg, а не блок
     целиком: иначе вместе с ним поехал бы и множитель в центре. */
  animation:upTurn 12s linear infinite}
@keyframes upTurn{from{transform:rotate(-90deg)}to{transform:rotate(270deg)}}
.upr .fon{stroke:rgba(255,255,255,.13)}
/* Дуга сжимается в такт множителю: на ×2 широкая, на ×50 — тонкая полоска.
   Это то же соотношение, что в игре, а не произвольная анимация. */
.upr .dug{stroke:url(#upg);stroke-linecap:round;
  stroke-dasharray:150;animation:upSweep 8s ease-in-out infinite}
@keyframes upSweep{
  0%{stroke-dashoffset:75}
  25%{stroke-dashoffset:105}
  50%{stroke-dashoffset:127}
  75%{stroke-dashoffset:139}
  100%{stroke-dashoffset:75}}
/* Стрелку нельзя вешать на отрицательный отступ: у .g-vis overflow:hidden,
   и её верхушку срезало. */
.upv{position:absolute;left:50%;top:3px;margin-left:-6px;width:0;height:0;z-index:2;
  border:6px solid transparent;border-top-color:#fff;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.6))}
/* Множитель в центре. CSS не умеет менять текст, поэтому значения лежат
   стопкой и по очереди проявляются — каждое ровно четверть цикла, в такт
   ширине дуги. Скрипт тут не годится: список игр перерисовывается при каждом
   обновлении профиля, и его пришлось бы заводить заново каждый раз. */
.upm{position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--mono,ui-monospace,Menlo,monospace);font-weight:800;font-size:15px;
  color:#FFD9BC;text-shadow:0 0 16px rgba(255,167,107,.75)}
.upm b{grid-area:1/1;opacity:0;font-weight:800;
  animation:upNum 8s ease-in-out infinite}
.upm b:nth-child(1){animation-delay:0s}
.upm b:nth-child(2){animation-delay:2s}
.upm b:nth-child(3){animation-delay:4s}
.upm b:nth-child(4){animation-delay:6s}
@keyframes upNum{
  0%{opacity:0;transform:translateY(6px) scale(.9)}
  6%,19%{opacity:1;transform:none}
  25%,100%{opacity:0;transform:translateY(-6px) scale(.9)}}

.g-scr{--acc:#9DB4FF;--glow:rgba(157,180,255,.32);--tint:rgba(70,95,220,.22);--pad:rgba(70,95,220,.16);--edge:rgba(157,180,255,.26)}
.sc{position:absolute;inset:12px;border-radius:12px;overflow:hidden;display:flex;
  align-items:center;justify-content:center;
  background:linear-gradient(160deg,rgba(120,150,255,.22),rgba(255,255,255,.05));
  box-shadow:inset 0 0 0 1px rgba(180,200,255,.28)}
.sc .val{font-family:var(--mono,ui-monospace,Menlo,monospace);font-weight:800;font-size:26px;
  color:#4ADE80}
.sc .foil{position:absolute;inset:0;border-radius:11px;
  background:linear-gradient(120deg,#2A3550,#48587F 45%,#2A3550);
  animation:gPeel 4.4s ease-in-out infinite}
.sc .foil::after{content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.4) 50%,transparent 65%);
  animation:gSheen 4.4s ease-in-out infinite}
@keyframes gPeel{0%,10%{clip-path:inset(0 0 0 0)}34%,86%{clip-path:inset(0 0 0 100%)}
  100%{clip-path:inset(0 0 0 0)}}
@keyframes gSheen{0%,12%{transform:translateX(-60%)}40%,100%{transform:translateX(60%)}}
.sc .tick{position:absolute;left:9px;top:8px;font-size:10px;font-weight:800;
  letter-spacing:.08em;color:#8494B0}

.g-prize{--acc:#C4B5FD;--glow:rgba(196,181,253,.32);--tint:rgba(124,58,237,.3);--pad:rgba(124,58,237,.18);--edge:rgba(196,181,253,.26)}
/* «Призы» показываем так же, как турнир: сумма, подпись и полоса. Тройка
   лидеров в рамке 126×98 читалась как обрубленная таблица. */
.pz{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:2px}
.pz b{font-family:var(--mono,ui-monospace,Menlo,monospace);font-weight:800;font-size:17px;
  color:#E4DAFF;text-shadow:0 0 20px rgba(167,139,250,.55);
  animation:gPulse 2.6s ease-in-out infinite}
.pz span{font-size:9px;color:#A99CC4;letter-spacing:.12em;text-transform:uppercase}
.pz .bar{width:70%;height:6px;border-radius:4px;margin-top:7px;background:rgba(255,255,255,.14);
  overflow:hidden}
.pz .bar i{display:block;height:100%;border-radius:4px;
  background:linear-gradient(90deg,#8B5CF6,#C4B5FD);animation:gGrow 3.6s ease-in-out infinite}
@media (prefers-reduced-motion: reduce){
  .ball,.whbox,.sc .foil,.sc .foil::after,.tv .n,.tv .bar i,.pz b,.pz .bar i{animation:none}
}


/* ---------- Папка подписок ---------- */
.subfold{margin:0 0 10px;border-radius:18px;overflow:hidden;
  background:linear-gradient(160deg,rgba(56,189,248,.10),rgba(255,255,255,.02));
  border:1px solid rgba(56,189,248,.22)}
.sf-head{display:flex;align-items:center;gap:12px;padding:14px;cursor:pointer;user-select:none}
.sf-ic{width:44px;height:44px;flex:0 0 44px;border-radius:13px;display:flex;
  align-items:center;justify-content:center;
  background:linear-gradient(140deg,#38BDF8,#0E7FB0);box-shadow:0 10px 22px -12px rgba(56,189,248,.9)}
.sf-ic svg{width:22px;height:22px}
.sf-m{flex:1;min-width:0}
/* Название и подпись — строго в одну строку: перенос «Быстрые / задания»
   ломал строку заголовка на три этажа. */
.sf-m b{display:block;font-size:14.5px;font-weight:700;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sf-m span{display:block;font-size:12px;color:#8A94A6;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sf-pay{flex:0 0 auto;text-align:right;white-space:nowrap}
.sf-pay b{display:block;font-family:var(--mono,ui-monospace,Menlo,monospace);
  font-size:15px;font-weight:800;color:#4ADE80}
.sf-pay i{display:flex;align-items:center;justify-content:flex-end;gap:9px;
  font-style:normal;font-size:11.5px;font-weight:700;margin-top:1px}
.sf-pay i span{display:inline-flex;align-items:center;gap:3px}
.sf-pay i .tk{color:#C4B5FD}
.sf-pay i .pt{color:#4ADE80}
.sf-chev{color:#5F6B80;font-size:20px;transition:transform .2s ease}
.subfold.open .sf-chev{transform:rotate(90deg)}
.sf-list{display:none;padding:0 10px 10px;flex-direction:column;gap:10px}
.subfold.open .sf-list{display:flex}


/* ---------- Метка «новое» на вкладке «Игры» ---------- */
.zneu{
  position:absolute; top:-8px; right:10px; padding:2px 7px; border-radius:99px;
  font-style:normal; font-size:8.5px; font-weight:900; letter-spacing:.07em;
  color:#fff; background:linear-gradient(96deg,#FF4D6D,#FF8A3D);
  animation:zneuPulse 1.8s ease-in-out infinite; pointer-events:none;
}
@keyframes zneuPulse{
  0%,100%{transform:scale(1); box-shadow:0 0 0 0 rgba(255,77,109,.5)}
  50%{transform:scale(1.07); box-shadow:0 0 12px 2px rgba(255,77,109,.75)}
}
/* Свечение самой вкладки — только пока на неё ни разу не заходили. */
.ztab.fresh:not(.on){
  background:rgba(255,138,61,.10);
  animation:zTabGlow 2.4s ease-in-out infinite;
}
@keyframes zTabGlow{
  0%,100%{box-shadow:inset 0 0 0 1px rgba(255,138,61,.28)}
  50%{box-shadow:inset 0 0 0 1px rgba(255,138,61,.7), 0 0 14px -2px rgba(255,138,61,.45)}
}
@media (prefers-reduced-motion: reduce){ .zneu,.ztab.fresh:not(.on){animation:none} }

/* Ракетка: превью показывает саму механику — рубль идёт вверх по кривой, свет
   вокруг него меняется ступенями множителя ровно теми же четырьмя цветами, что
   и в самой игре (зелёный → синий → фиолетовый → золото), а на взрыве гаснет
   красным. Абстрактная иконка ракеты не объясняет игру, а знак рубля объясняет,
   на что она играется.

   Весь цикл — 3.6 с, и все четыре анимации размечены по одной шкале: рубль
   летит 0→70%, свет переключается на 18/36/54/72%, множители показываются в тех
   же окнах. Задержек (animation-delay) нет нигде намеренно: раньше окна чисел
   считались delay-ами, арифметика разъехалась, и на карточке одновременно
   висели два множителя один поверх другого. */
.g-rocket{--acc:#A78BFA;--glow:rgba(167,139,250,.4);--tint:rgba(109,40,217,.24);
  --pad:rgba(76,58,224,.18);--edge:rgba(167,139,250,.3)}
.rk{position:absolute;inset:0;overflow:hidden}
.rk i{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff;opacity:.5;
  animation:rkStar 2.6s linear infinite}
.rk .rk-s1{left:18%;top:22%;animation-delay:-.4s}
.rk .rk-s2{left:64%;top:12%;animation-delay:-1.3s}
.rk .rk-s3{left:82%;top:52%;animation-delay:-2s}
@keyframes rkStar{0%{transform:translateY(-6px);opacity:0}
  30%{opacity:.65}100%{transform:translateY(22px);opacity:0}}

.rk-c{position:absolute;inset:0;width:100%;height:100%}
/* Длина кривой 127 — dasharray чуть больше, иначе хвост виден на старте. */
.rk-c path{stroke-dasharray:130;stroke-dashoffset:130;
  animation:rkDraw 3.6s cubic-bezier(.4,0,.75,.3) infinite}
@keyframes rkDraw{0%{stroke-dashoffset:130}70%{stroke-dashoffset:0}
  78%{stroke-dashoffset:0;opacity:1}86%{opacity:.15}100%{stroke-dashoffset:0;opacity:0}}

/* Сам рубль. Точки сняты с той же кривой, что нарисована в разметке, и
   расставлены по времени так, где в этот момент оказывается конец линии:
   обводка едет с ускорением, а рубль идёт linear — поэтому он сидит НА конце
   линии, а не убегает вперёд, как было при равномерных кадрах. */
.rk-r{position:absolute;left:7.9%;top:87.8%;width:18px;height:18px;
  margin:-9px 0 0 -9px;border-radius:50%;display:grid;place-items:center;
  font:900 11px/1 -apple-system,Inter,system-ui,sans-serif;color:#0A0D14;
  animation:rkFly 3.6s linear infinite, rkLight 3.6s linear infinite}
@keyframes rkFly{
  0%{left:7.9%;top:87.8%}
  29.1%{left:20.4%;top:85.2%}
  39.8%{left:32.5%;top:80.7%}
  47.5%{left:43.9%;top:73.9%}
  53.6%{left:54.4%;top:65.0%}
  58.6%{left:63.9%;top:54.4%}
  62.9%{left:72.5%;top:42.5%}
  66.7%{left:80.2%;top:29.7%}
  70%,100%{left:87.3%;top:16.3%}}
/* Свет по ступеням: до 2x зелёный, 2–5x синий, 5–10x фиолетовый, от 10x
   золото, на взрыве — красный и гаснет. Пороги те же, что в игре. */
@keyframes rkLight{
  0%,18%{background:#4ADE80;box-shadow:0 0 10px 3px rgba(74,222,128,.5);opacity:1}
  22%,36%{background:#60A5FA;box-shadow:0 0 10px 3px rgba(96,165,250,.5);opacity:1}
  40%,54%{background:#A78BFA;box-shadow:0 0 11px 4px rgba(167,139,250,.6);opacity:1}
  58%,72%{background:#FCD34D;box-shadow:0 0 12px 5px rgba(252,211,77,.65);opacity:1}
  78%{background:#F87171;box-shadow:0 0 14px 6px rgba(248,113,113,.6);opacity:1}
  86%{background:#F87171;box-shadow:0 0 6px 1px rgba(248,113,113,.2);opacity:.45}
  100%{background:#F87171;box-shadow:0 0 6px 1px rgba(248,113,113,0);opacity:0}}

/* Множитель набирает вместе с рублём. Каждому числу — своё окно на общей
   шкале, поэтому два числа одновременно показаться не могут в принципе. */
.rk-m{position:absolute;left:8px;top:7px;width:62px;height:1.05em;
  font:900 15px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:-.5px}
.rk-m span{position:absolute;left:0;top:0;white-space:nowrap;opacity:0}
.rk-m span:nth-child(1){color:#4ADE80;text-shadow:0 0 12px rgba(74,222,128,.5);
  animation:rkM1 3.6s linear infinite}
.rk-m span:nth-child(2){color:#60A5FA;text-shadow:0 0 12px rgba(96,165,250,.5);
  animation:rkM2 3.6s linear infinite}
.rk-m span:nth-child(3){color:#A78BFA;text-shadow:0 0 12px rgba(167,139,250,.55);
  animation:rkM3 3.6s linear infinite}
.rk-m span:nth-child(4){color:#FCD34D;text-shadow:0 0 12px rgba(252,211,77,.6);
  animation:rkM4 3.6s linear infinite}
@keyframes rkM1{0%{opacity:0}3%,18%{opacity:1}21%,100%{opacity:0}}
@keyframes rkM2{0%,22%{opacity:0}25%,36%{opacity:1}39%,100%{opacity:0}}
@keyframes rkM3{0%,40%{opacity:0}43%,54%{opacity:1}57%,100%{opacity:0}}
@keyframes rkM4{0%,58%{opacity:0}61%,80%{opacity:1}88%,100%{opacity:0}}

@media (prefers-reduced-motion: reduce){
  .rk i,.rk-c path,.rk-r,.rk-m span{animation:none}
  .rk-r{left:87.3%;top:16.3%;background:#FCD34D;box-shadow:0 0 12px 5px rgba(252,211,77,.65)}
  .rk-c path{stroke-dashoffset:0}
  .rk-m span{opacity:0}
  .rk-m span:nth-child(4){opacity:1}
}

/* ===== Экономия батареи: не анимируем то, чего никто не видит =====

   Аппка ушла с экрана — свернули, переключились в переписку, положили телефон
   в карман. Тридцать с лишним бесконечных анимаций при этом продолжали
   крутиться и греть телефон впустую. Все они декоративные (блики, пульсации,
   вращения), ко времени и прогрессу не привязана ни одна, так что пауза
   ничего не сбивает. */
/* Игра открыта — всё под ней рисовать незачем: слой непрозрачный, и каждая
   анимация под ним это работа видеочасти впустую, одновременно с canvas самой
   игры. Особенно дорого обходились две «авроры» с blur(120px): браузер
   растеризует под каждую поверхность около 1000×1000 точек и пересчитывает
   её, потому что анимация меняет масштаб.
   Гасим тем же приёмом, что и уход из приложения, — он уже проверен. */
body.game-open .glow-a, body.game-open .glow-b,
body.game-open .app > *:not(.jp-layer):not(.rk-layer):not(.jm-layer):not(.up-layer),
body.game-open #content, body.game-open .nav, body.game-open .topbar {
  animation-play-state: paused !important;
}
/* Плашки размером с ноготь не нуждаются в размытии фона: их два десятка на
   экране, и каждая заставляет браузер держать отдельный слой. */
.pill.sm, .g-badge, .rfp-pill, .out-tag { backdrop-filter: none !important; }

body.app-away *, body.app-away *::before, body.app-away *::after {
  animation-play-state: paused !important;
}

/* То же в простое: 25 c без касания — декоративные анимации на паузу (экономия
   батареи и тепла). Класс idle-still снимается мгновенно по первому касанию. */
body.idle-still *, body.idle-still *::before, body.idle-still *::after {
  animation-play-state: paused !important;
}

/* Открыт слой игры. Разделы остаются в DOM под непрозрачным слоем и крутят
   свои анимации: карточки игр, блики, плавающая кнопка. Телефон считает их
   вместе с canvas Ракетки, а человек не видит ни одной.
   Пауза, а не display:none — раскладка и прокрутка целы, при закрытии игры
   кадр продолжается с того же места. */
body.jp-open #content,
body.jp-open #content *,
body.jp-open #topbar,
body.jp-open #topbar *,
body.jp-open #nav,
body.jp-open #nav * {
  animation-play-state: paused !important;
}

/* ===== ЛАЙТ-РЕЖИМ: слабым телефонам — та же аппка без самого дорогого =====

   Класс lite вешает app.js, и только на устройствах, которые сам Telegram
   считает слабыми (LOW в User-Agent), или провалившим замер кадров середнякам
   (AVERAGE с медианой кадра длиннее 24 мс). Айфоны, десктоп и сильные
   андроиды этот блок не видят никогда.

   Гасим два пожирателя кадров:
   1) матовое стекло — размытие пересчитывается каждый кадр при любом движении
      под панелью, на бюджетных GPU это главный источник лагов;
   2) вечные декоративные циклы — блики, пульсации, вращения.
   Одноразовые анимации НЕ трогаем: появление карточек, конфетти выигрыша,
   вскрытие скретча, колесо — они дёшевы, а радость от них и есть продукт.
   Стоп-кадры — авторские, из блоков prefers-reduced-motion выше. */

body.lite *, body.lite *::before, body.lite *::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* Панели, плавающие над прокруткой, без размытия делаем плотнее — иначе текст
   мешается с контентом, проезжающим под ними. Остальное стекло лежит на
   спокойных фонах, ему хватает прежней полупрозрачности. */
body.lite .topbar { background: rgba(11,14,19,.96); }
body.lite .nav { background: rgba(22,27,40,.97); }
body.lite .toast { background: rgba(26,32,48,.97); }

/* Вечные циклы — стоп, в авторских замерших позах. */
body.lite .glow-a, body.lite .glow-b, body.lite .balance-top::before,
body.lite .balance-top::after, body.lite .hero::before { animation: none !important; }
body.lite #scratchHint { animation: none; box-shadow: 0 0 14px rgba(127,166,255,.7); }
body.lite .jp-fab, body.lite .jp-fab svg { animation: none; }
body.lite .qrow.jpglow { animation: none; }
body.lite .ball, body.lite .whbox, body.lite .sc .foil, body.lite .sc .foil::after,
body.lite .tv .n, body.lite .tv .bar i, body.lite .pz b, body.lite .pz .bar i { animation: none; }
body.lite .zneu, body.lite .ztab.fresh:not(.on) { animation: none; }
/* Новая витрина игр: у карточек свои имена классов (приставка gx), и
   правила выше их не находят. Без этой строки лайт-режим не гасит на
   вкладке «Игры» ни одной анимации из семидесяти шести. */
/* Пауза, а НЕ animation:none. В витрине сорок восемь объявлений с
   opacity:0 — то, что появляется анимацией: гемы Мин, множитель Ракетки,
   сумма Прыгуна. С animation:none они не появятся никогда, и карточка
   застынет пустой: поле Мин без единой открытой клетки и шкала, залитая
   целиком. Пауза с отрицательной задержкой замораживает каждую карточку
   на осмысленном кадре — том, ради которого её и рисовали. Приём уже
   применён в файле дважды, для app-away и idle-still. */
body.lite .gxv, body.lite .gxv *, body.lite .gxv *::before,
body.lite .gxv *::after { animation-play-state: paused !important;
  animation-delay: -2.2s !important; }
body.lite .rk i, body.lite .rk-c path, body.lite .rk-r, body.lite .rk-m span { animation: none; }
body.lite .rk-r { left: 87.3%; top: 16.3%; background: #FCD34D;
  box-shadow: 0 0 12px 5px rgba(252,211,77,.65); }
body.lite .rk-c path { stroke-dashoffset: 0; }
body.lite .rk-m span { opacity: 0; }
body.lite .rk-m span:nth-child(4) { opacity: 1; }
/* Циклы, у которых авторского стоп-кадра нет, — гасим как есть. */
body.lite .btn.pending::after, body.lite .skel,
body.lite .out-tag, body.lite .way.lim-glow, body.lite .hl-row.lim-glow { animation: none !important; }


/* Ссылки на документы. Самый низ экрана «Баланс»: найти можно, в глаза не
   лезет. Кегль и цвет — как у самых тихих подписей в аппке. */
.legal{display:flex;align-items:center;justify-content:center;gap:8px;
  /* Отступ снизу уже задан у body и хватает, чтобы нижняя панель не накрыла
     ссылки. Второй такой же оставлял под ними экран пустоты. */
  margin:18px 0 0;padding-bottom:14px;
  font-size:12px;color:#5D6683}
.legal a{color:#5D6683;text-decoration:none;padding:6px 2px}
.legal a:active{color:#8B93AD}
.legal i{font-style:normal;opacity:.6}


/* Выбор способа пополнения. Две плитки над полем суммы: видно оба варианта
   сразу, а не выпадающим списком, где второй способ прячется. */
.paytabs{display:flex;gap:8px;margin:2px 0 12px}
.paytab{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;
  gap:2px;padding:11px 8px 10px;border-radius:15px;cursor:pointer;
  background:rgba(148,163,255,.06);border:1px solid rgba(148,163,255,.14);
  color:#8B93AD;transition:transform .18s cubic-bezier(.22,1,.36,1),
    border-color .18s,background .18s,color .18s}
.paytab i{font-style:normal;font-size:19px;line-height:1;margin-bottom:2px}
.paytab b{font-size:13.5px;font-weight:700;color:#C9D2E6;white-space:nowrap}
.paytab span{font-size:11px;color:#5D6683;white-space:nowrap}
.paytab:active{transform:scale(.97)}
.paytab.on{background:rgba(124,140,255,.16);border-color:rgba(148,163,255,.5)}
.paytab.on b{color:#fff}
.paytab.on span{color:#8B93AD}


/* Шторка: плотный фон и читаемый текст ------------------------------------
   Ставим ПОСЛЕ стеклянной темы: там --card стал полупрозрачным, и модальное
   окно просвечивало насквозь. */
.sheet-bg{background:rgba(4,7,14,.84)}
.sheet-card{
  background:linear-gradient(180deg,#141A26,#0F141D);
  border-color:rgba(148,163,255,.18);
  box-shadow:0 -18px 50px -12px rgba(0,0,0,.75);
}
/* Подписи в шторке были 12 px приглушённым серым — на телефоне это нечитаемо.
   Кегль и вес подняты, цвет выведен из «тусклого» в обычный текст. */
.sheet-title{font-size:19px;font-weight:800;letter-spacing:-.01em}
.sheet-sub{font-size:13.5px;font-weight:500;line-height:1.5;color:#B9C4D8;
  margin-bottom:14px}
.sheet-min{font-size:13px;font-weight:600;color:#9AA7BD}
.sheet-quick .chip{font-weight:700}
.sheet-link{font-size:13.5px;font-weight:600}
.tu-err{font-size:13px;font-weight:600}
.sheet-input input{font-weight:800;font-size:28px}
.sheet-input span{font-weight:700;opacity:.9}

/* Плитки способов: подпись под названием тоже была слишком тихой. */
.paytab b{font-size:14px}
.paytab span{font-size:11.5px;font-weight:600;color:#7C8AA3}
.paytab.on span{color:#A8B6CC}
.paytab i{font-size:20px}


/* Окно «сыграйте раунд» перед выводом ------------------------------------ */
.pgate{position:fixed;inset:0;z-index:95;display:grid;place-items:center;
  padding:18px;background:rgba(4,7,14,.84);animation:pgIn .2s ease}
@keyframes pgIn{from{opacity:0}to{opacity:1}}
.pgate-c{position:relative;width:100%;max-width:352px;padding:24px 20px 20px;
  border-radius:24px;background:linear-gradient(180deg,#141A26,#0F141D);
  border:1px solid rgba(148,163,255,.2);
  box-shadow:0 26px 60px -18px rgba(0,0,0,.85);
  animation:pgUp .28s cubic-bezier(.2,1.1,.3,1)}
@keyframes pgUp{from{transform:scale(.9);opacity:0}to{transform:none;opacity:1}}
.pgate-x{position:absolute;top:12px;right:12px;width:32px;height:32px;border:0;
  border-radius:50%;display:grid;place-items:center;color:#8B93AD;font-size:19px;
  line-height:1;background:rgba(148,163,255,.08);cursor:pointer}
.pgate-ic{width:56px;height:56px;margin:0 auto 12px;border-radius:18px;
  display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,#4c6bff,#8b5cf6);
  box-shadow:0 14px 30px -12px rgba(97,85,255,.8)}
.pgate-ic svg{width:26px;height:26px}
.pgate-t{font-size:21px;font-weight:800;text-align:center;color:#fff;
  letter-spacing:-.01em;margin-bottom:8px}
.pgate-s{font-size:14.5px;line-height:1.5;color:#B9C4D8;text-align:center;margin:0 0 6px}
.pgate-s b{color:#fff;font-weight:800}
.pgate-n{font-size:12.5px;line-height:1.45;color:#5D6683;text-align:center;margin:0 0 18px}
.pgate-n b{color:#8B93AD;font-weight:700}
.pgate-go{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;
  margin-bottom:9px;border-radius:16px;cursor:pointer;text-align:left;
  background:rgba(148,163,255,.07);border:1px solid rgba(148,163,255,.15);
  transition:transform .18s cubic-bezier(.22,1,.36,1),border-color .18s}
.pgate-go:active{transform:scale(.985);border-color:rgba(148,163,255,.4)}
.pgate-gi{width:42px;height:42px;flex:0 0 42px;border-radius:13px;
  display:inline-flex;align-items:center;justify-content:center;font-style:normal}
.pgate-gi svg{width:19px;height:19px}
.pgate-gi.pg-rk{background:rgba(167,139,250,.18);color:#C4B5FD}
.pgate-gi.pg-ar{background:rgba(63,196,245,.18);color:#7ED8F7}
.pgate-go span{flex:1;min-width:0;display:block}
.pgate-go b{display:block;font-size:15.5px;font-weight:700;color:#fff}
.pgate-go em{display:block;font-style:normal;font-size:12px;color:#8B93AD;
  margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pgate-go u{text-decoration:none;color:#5D6683;font-size:20px}


/* Стейкинг ---------------------------------------------------------------
   Ставка стоит рядом с суммой, а не в углу: в углу её не замечают. Знак рубля
   везде один и тот же — .cur из общей темы, чтобы не съезжал по базовой линии. */
.stk-entry{display:flex;align-items:center;gap:12px;margin:12px 0 4px;padding:14px 15px;
  border-radius:20px;cursor:pointer;
  background:linear-gradient(150deg,rgba(124,140,255,.16),rgba(124,140,255,.04));
  border:1px solid rgba(148,163,255,.26);
  transition:transform .16s cubic-bezier(.22,1,.36,1),border-color .16s}
.stk-entry:active{transform:scale(.99);border-color:rgba(148,163,255,.45)}
.stk-ic{width:42px;height:42px;flex:0 0 42px;border-radius:13px;display:grid;
  place-items:center;color:#fff;background:linear-gradient(135deg,#4c6bff,#8b5cf6)}
.stk-ic svg{width:20px;height:20px}
.stk-m{flex:1;min-width:0}
.stk-m b{display:block;font-size:15.5px;font-weight:800;color:#fff}
.stk-m>span{display:block;font-size:12.5px;color:#8B93AD;margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stk-m .cur{opacity:.85;font-size:.9em}
.stk-apr{flex:0 0 auto;text-decoration:none;font-family:var(--mono);font-size:15px;
  font-weight:900;letter-spacing:-.04em;color:#4ADE80}
.stk-ch{font-style:normal;color:#5D6683;font-size:20px}

.stk-layer .stk-body{padding:14px 16px 40px;overflow-y:auto;height:100%}
.stk-main{padding:20px 18px;border-radius:22px;margin-bottom:11px;
  background:linear-gradient(160deg,rgba(124,140,255,.18),rgba(124,140,255,.04));
  border:1px solid rgba(148,163,255,.26)}
.stk-lab{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:#8B93AD;margin-bottom:9px}
/* Сумма и ставка на одной строке: человек видит их вместе. */
.stk-sum{display:flex;align-items:center;flex-wrap:wrap;gap:10px;
  font-family:var(--mono);font-size:42px;font-weight:900;letter-spacing:-.055em;
  line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.stk-sum .cur{opacity:1;font-size:.72em;font-weight:800;letter-spacing:0}
.stk-badge{display:inline-flex;align-items:center;gap:5px;text-decoration:none;
  cursor:pointer;padding:6px 9px 6px 11px;border-radius:99px;
  font-family:var(--mono);font-size:13px;font-weight:900;letter-spacing:-.02em;
  color:#4ADE80;background:rgba(52,211,153,.14);border:1px solid rgba(52,211,153,.34)}
.stk-badge em{font-style:normal;width:16px;height:16px;border-radius:50%;
  display:grid;place-items:center;font-size:11px;font-weight:900;
  color:#0A140C;background:#4ADE80}
.stk-two{display:flex;gap:9px;margin-top:16px}
.stk-two>div{flex:1;padding:11px 13px;border-radius:14px;background:rgba(8,11,18,.4);
  border:1px solid rgba(148,163,255,.14)}
.stk-two em{display:block;font-style:normal;font-size:11.5px;color:#5D6683;margin-bottom:4px}
.stk-two b{font-family:var(--mono);font-size:18px;font-weight:900;letter-spacing:-.045em;
  color:#4ADE80;font-variant-numeric:tabular-nums}
.stk-two b .cur{opacity:1;font-size:.8em;font-weight:800}

.stk-free{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:16px;
  margin-bottom:12px;background:rgba(52,211,153,.08);border:1px solid rgba(52,211,153,.24)}
.stk-free>i{width:30px;height:30px;flex:0 0 30px;border-radius:10px;display:grid;
  place-items:center;background:rgba(52,211,153,.18);color:#4ADE80;font-style:normal}
.stk-free svg{width:16px;height:16px}
.stk-free span{font-size:12.5px;line-height:1.5;color:#A7D9C3}
.stk-free b{color:#fff;font-weight:700}

.stk-acts{display:flex;gap:9px;margin-bottom:13px}
.stk-acts button{flex:1;height:54px;border:0;border-radius:16px;cursor:pointer;
  font-family:inherit;font-size:16px;font-weight:800;color:#fff;
  transition:transform .16s cubic-bezier(.22,1,.36,1)}
.stk-acts button:active{transform:scale(.98)}
.stk-add{background:linear-gradient(92deg,#4c6bff,#8b5cf6);
  box-shadow:0 12px 26px -12px rgba(97,85,255,.8)}
.stk-take{background:rgba(148,163,255,.1);border:1px solid rgba(148,163,255,.24)!important}

.stk-card{padding:16px;border-radius:20px;margin-bottom:12px;background:#121826;
  border:1px solid rgba(148,163,255,.14)}
.stk-t{display:flex;align-items:baseline;margin-bottom:11px}
.stk-t b{font-size:15.5px;font-weight:800;color:#fff}
.stk-t u{margin-left:auto;text-decoration:none;font-family:var(--mono);font-size:18px;
  font-weight:900;letter-spacing:-.045em;color:#fff}
.stk-t u .cur{opacity:1;font-size:.8em;font-weight:800}
.stk-bar{height:8px;border-radius:99px;background:rgba(148,163,255,.12);overflow:hidden;
  margin-bottom:11px}
.stk-bar i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,#4c6bff,#8b5cf6)}
.stk-steps{display:flex;flex-direction:column;gap:8px}
.stk-step{display:flex;align-items:flex-start;gap:10px;font-size:13px;line-height:1.45;
  color:#8B93AD}
.stk-step u{flex:0 0 20px;height:20px;margin-top:1px;border-radius:6px;display:grid;
  place-items:center;text-decoration:none;font-family:var(--mono);font-size:11px;
  font-weight:900;color:#C4B5FD;background:rgba(167,139,250,.18)}
.stk-step b{color:#fff;font-weight:700}
.stk-raise{display:flex;align-items:center;gap:10px;margin-top:12px;padding:11px 13px;
  border-radius:14px;cursor:pointer;background:rgba(148,163,255,.06);
  border:1px solid rgba(148,163,255,.14)}
.stk-raise>i{width:34px;height:34px;flex:0 0 34px;border-radius:11px;display:grid;
  place-items:center;background:rgba(167,139,250,.18);color:#C4B5FD;font-style:normal}
.stk-raise svg{width:17px;height:17px}
.stk-raise span{flex:1;min-width:0;font-size:13.5px;font-weight:700;color:#fff}
.stk-raise u{text-decoration:none;color:#5D6683;font-size:19px}

/* ползунок в шторке */
.stk-pick{text-align:center;margin-bottom:4px}
.stk-pick b{font-family:var(--mono);font-size:42px;font-weight:900;letter-spacing:-.055em;
  color:#fff;font-variant-numeric:tabular-nums}
.stk-pick b .cur{opacity:1;font-size:.72em;font-weight:800}
.stk-gives{text-align:center;font-size:13.5px;color:#8B93AD;margin-bottom:14px}
.stk-gives b{font-family:var(--mono);font-weight:900;color:#4ADE80;letter-spacing:-.03em}
.stk-rng{-webkit-appearance:none;appearance:none;width:100%;height:30px;background:none;
  margin:0 0 2px}
.stk-rng::-webkit-slider-runnable-track{height:8px;border-radius:99px;
  background:linear-gradient(90deg,#4c6bff var(--p,50%),rgba(148,163,255,.14) var(--p,50%))}
.stk-rng::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:26px;height:26px;
  margin-top:-9px;border-radius:50%;background:#fff;cursor:grab;
  box-shadow:0 4px 14px rgba(0,0,0,.5),0 0 0 4px rgba(124,140,255,.35)}
.stk-ends{display:flex;justify-content:space-between;font-family:var(--mono);
  font-size:11.5px;font-weight:700;color:#5D6683;margin-bottom:14px}
.stk-sheet .sheet-card .btn.main{font-size:16px;font-weight:800}

/* окно-объяснение */
.stk-info{position:fixed;inset:0;z-index:96;display:grid;place-items:center;padding:18px;
  background:rgba(4,7,14,.84)}
.stk-info-c{width:100%;max-width:344px;padding:22px 20px 18px;border-radius:24px;
  background:linear-gradient(180deg,#141A26,#0F141D);border:1px solid rgba(148,163,255,.2);
  box-shadow:0 26px 60px -18px rgba(0,0,0,.85)}
.stk-info-t{font-size:19px;font-weight:800;text-align:center;margin-bottom:12px;color:#fff}
.stk-info-c p{margin:0 0 16px;font-size:13.5px;line-height:1.55;color:#B9C4D8}
.stk-info-c p b{color:#fff;font-weight:700}
.stk-info-c .btn.main{width:100%;height:46px;font-size:15px;font-weight:800}


/* Стейкинг встал внутрь карточки баланса: там текст по центру и свои поля,
   поэтому выравнивание и отступы задаём заново. */
.stk-entry{text-align:left;margin:10px 0 0;padding:12px 13px}
.stk-entry .stk-ic{width:38px;height:38px;flex:0 0 38px;border-radius:12px}
.stk-entry .stk-ic svg{width:18px;height:18px}
.stk-entry .stk-m b{font-size:15px}
.stk-src{margin-top:12px;font-size:12px;line-height:1.45;color:#7C86A3}


/* Стейкинг: ужатая посадка. Экран целиком должен помещаться в телефон без
   прокрутки — иначе кнопки «В стейкинг» человек просто не видит. Размеры
   цифр не трогаем: ужимаются поля и воздух, а не сами числа. */
.stk-layer .stk-body{padding:12px 14px 28px}
.stk-main{padding:16px 16px 15px;margin-bottom:9px}
.stk-lab{margin-bottom:6px}
.stk-sum{font-size:38px;gap:9px}
.stk-two{margin-top:13px;gap:8px}
.stk-two>div{padding:9px 11px;border-radius:12px}
.stk-two em{font-size:11px;margin-bottom:3px}
.stk-two b{font-size:17px}
.stk-free{padding:10px 12px;margin-bottom:9px;gap:9px;align-items:center}
.stk-free>i{width:26px;height:26px;flex:0 0 26px;border-radius:9px}
.stk-free svg{width:15px;height:15px}
.stk-free span{font-size:12.5px;line-height:1.45}
.stk-acts{margin-bottom:10px;gap:8px}
.stk-acts button{height:50px;border-radius:14px;font-size:15.5px}
.stk-card{padding:14px;margin-bottom:10px}
.stk-t{margin-bottom:9px}
.stk-bar{height:7px;margin-bottom:10px}
/* Две строки вместо трёх нумерованных шагов: числа те же, воздуха вдвое меньше */
.stk-note{font-size:12.5px;line-height:1.5;color:#8B93AD}
.stk-note b{color:#fff;font-weight:700}
.stk-raise{margin-top:11px;padding:10px 12px}
.stk-raise>i{width:30px;height:30px;flex:0 0 30px;border-radius:10px}
.stk-raise svg{width:16px;height:16px}
.stk-raise span{font-size:13px}


/* Стейкинг в карточке баланса — строка настроек Telegram, доведённая до ума.
   Тип ячейки узнаваемый: квадратная иконка со скруглением как у иконок
   приложений слева, значение и шеврон справа. Плотнее и жирнее прежней
   строчки, но третья по яркости: золотую «Пополнить» и синюю «Вывести»
   не перебивает — цветом набирает вес только иконка размером 40 px. */
.stk-entry {
  display: flex; align-items: center; gap: 10px;
  box-sizing: border-box; width: 100%;
  margin: 10px 0 0; padding: 10px 11px 10px 10px;
  border-radius: 17px; text-align: left; cursor: pointer;
  user-select: none; -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  /* Плоская «ячейка настроек»: заливка чуть светлее фона карточки, поверх —
     едва заметный наш градиент. Тени наружу нет, строка не всплывает. */
  background:
    linear-gradient(180deg, rgba(126, 98, 246, .20), rgba(61, 109, 242, .09)),
    #1d2436;
  border: 1px solid rgba(158, 174, 255, .25);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
  transition: transform .16s var(--ease), border-color .16s var(--ease);
}
.stk-entry:active {
  transform: scale(.985);
  border-color: rgba(150, 166, 255, .34);
}

/* Иконка. 40 px и радиус 12 — пропорция иконки приложения в iOS/Telegram.
   Верхний блик и короткая тень под плиткой держат её «предметной». */
.stk-entry .stk-ic {
  position: relative; overflow: hidden;
  flex: 0 0 40px; width: 40px; height: 40px;
  border-radius: 12px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, #3d6df2 0%, #5c65f1 48%, #7a5cf0 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26),
              0 4px 10px -4px rgba(70, 92, 240, .6);
}
.stk-entry .stk-ic svg {
  position: relative; z-index: 1; width: 19px; height: 19px;
}

/* Блик по плитке раз в семь секунд: единственное движение в строке.
   Только transform и opacity, ничего в тени и фильтрах. */
.stk-entry .stk-sheen {
  position: absolute; top: -30%; bottom: -30%; left: -46%; width: 34%;
  pointer-events: none; opacity: 0;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0), rgba(255, 255, 255, .55), rgba(255, 255, 255, 0));
  transform: translate3d(0, 0, 0) rotate(18deg);
  animation: stkSheen 7s linear infinite;
}
@keyframes stkSheen {
  0%, 70%   { transform: translate3d(0, 0, 0) rotate(18deg); opacity: 0 }
  73%       { opacity: .38 }
  84%       { opacity: .38 }
  86%, 100% { transform: translate3d(330%, 0, 0) rotate(18deg); opacity: 0 }
}

/* Текст. Строки посажены по сетке 18 + 2 + 15 = 35 px и оптически
   центрированы против плитки 40 px. Подпись в одну строку: полная фраза
   «Проценты капают каждый день» в 318 px не влезает и рвётся многоточием,
   поэтому в пустом состоянии стоит короткое «Проценты каждый день». */
.stk-entry .stk-m { flex: 1 1 auto; min-width: 0; }
.stk-entry .stk-m b {
  display: block; font-size: 15.5px; font-weight: 800; line-height: 18px;
  letter-spacing: -.012em; color: #fff;
}
.stk-entry .stk-sub {
  display: block; margin-top: 2px; font-size: 12px; line-height: 15px;
  letter-spacing: -.005em; color: #8f9bb2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.stk-entry .stk-sub i {
  font-style: normal; font-family: var(--mono); font-weight: 700;
  font-size: 12px; letter-spacing: -.02em; color: #d2dcec;
}
.stk-entry .stk-sub i.up { color: var(--ai-green); }
.stk-entry .stk-sub em {
  font-style: normal; color: #4e596d; padding: 0 3px;
}

/* Правый край: значение и шеврон в 5 px друг от друга — как в списке настроек. */
.stk-entry .stk-right {
  flex: 0 0 auto; display: flex; align-items: center; gap: 5px;
}
.stk-entry .stk-val {
  display: inline-flex; align-items: center; height: 23px; padding: 0 7px;
  border-radius: 8px; text-decoration: none;
  font-family: var(--mono); font-size: 12.5px; font-weight: 800;
  letter-spacing: -.03em; color: #c8b8ff;
  background: rgba(122, 92, 240, .24);
  border: 1px solid rgba(152, 132, 255, .34);
}
.stk-entry .stk-ch {
  display: flex; font-style: normal; color: #626e86;
  transition: transform .16s var(--ease), color .16s var(--ease);
}
.stk-entry .stk-ch svg { width: 14px; height: 14px; }
.stk-entry:active .stk-ch { transform: translateX(2px); color: #8b99b2; }

/* Узкий экран (SE и подобные): режем воздух и на полпункта подпись,
   чтобы строка «2400 ₽ · +32 ₽ в день» доходила до конца без многоточия. */
@media (max-width: 359px) {
  .stk-entry { gap: 9px; padding: 9px; border-radius: 16px }
  .stk-entry .stk-ic {
    flex: 0 0 37px; width: 37px; height: 37px; border-radius: 11px }
  .stk-entry .stk-ic svg { width: 18px; height: 18px }
  .stk-entry .stk-sub { font-size: 11.5px }
  .stk-entry .stk-sub i { font-size: 11.5px }
  .stk-entry .stk-val { padding: 0 6px; font-size: 12px }
}

@media (prefers-reduced-motion: reduce) {
  .stk-entry { transition: none }
  .stk-entry .stk-sheen { animation: none; opacity: 0 }
  .stk-entry .stk-ch { transition: none }
}


/* Окно «Как забрать»: ужатая посадка под четыре пути и три кнопки.
   Прежние поля рассчитывались на три блока — четвёртый уводил окно за экран.
   Режем воздух, а не смысл: тексты и суммы остаются целиком. */
.gate.big{padding:18px 15px 13px}
.big-head{margin-bottom:12px}
.big-price{font-size:27px}
.gate.big .gate-title{font-size:17.5px}
.way{padding:10px 11px;gap:10px;border-radius:14px}
.way-logo{width:34px;height:34px;border-radius:10px}
.way-b > b{font-size:13.5px}
.way-b > span{font-size:11.5px;margin-top:1px;line-height:1.35}
.way-get{margin-top:7px;gap:5px}
.way-get i{padding:4px 8px;font-size:11.5px}
/* «или» словом занимало строку на каждый стык — четыре пути дают три стыка.
   Волосяная черта делит так же понятно и экономит около сорока точек. */
.way-or{margin:6px 0;font-size:0;height:1px;background:var(--border);opacity:.7}
.gate.big .btn{margin-top:9px;height:46px;padding:0;font-size:15px}
.gate.big .btn.ghost{margin-top:7px}
/* Переносим, а не режем: если содержимое не влезает в строку (крупный
   системный шрифт), кнопки встают друг под друга во всю ширину. Обрезка
   посреди слова — «ополнить» вместо «Пополнить» — это не решение. */
.g-two{display:flex;flex-wrap:wrap;gap:8px;margin-top:7px}
/* min-width:0 — не украшение: без него флекс не сжимает кнопку меньше её
   содержимого, и ряд «Пополнить + СБП» и «Пригласить» распирал шторку
   за край экрана. Текст не переносим и не даём ему рвать вёрстку. */
.g-two .btn{flex:1 1 132px;min-width:0;margin-top:0;font-size:13.5px;
  padding-left:10px;padding-right:10px;gap:6px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.g-two .btn .ic{flex:none}
@media (max-width:380px){ .g-two .btn{font-size:12.5px;padding-left:8px;padding-right:8px} }
.gate-close{margin-top:9px}
/* Значок игрового пути — тем же градиентом, что и остальная аппка */
.way-logo.game{display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#3d6df2,#7a5cf0);color:#fff}
.way-logo.game .ic{width:17px;height:17px}
/* Полоса отыгрыша: видно, сколько осталось */
.way-prog{margin-top:7px;height:5px;border-radius:99px;
  background:rgba(255,255,255,.09);overflow:hidden}
.way-prog i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,#3d6df2,#7a5cf0)}


/* Топ по стейкингу ---------------------------------------------------------
   Та же гамма, что у остальных карточек экрана: фиолет для подложки, зелёный
   для сумм — деньги в приложении всегда зелёные, и топ не должен спорить. */
.stk-lb { margin-top: 11px; display: flex; flex-direction: column; gap: 6px; }
.stk-lb-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border-radius: 13px;
  background: rgba(148,163,255,.06); border: 1px solid rgba(148,163,255,.12);
}
/* Своя строка выделена подложкой, а не цветом текста: цветом уже помечены
   деньги, и второй смысл на том же признаке читается как ошибка. */
.stk-lb-row.me {
  background: linear-gradient(96deg, rgba(124,140,255,.24), rgba(124,140,255,.08));
  border-color: rgba(148,163,255,.5);
}
.stk-lb-n {
  font-style: normal; width: 22px; flex: none; text-align: center;
  font-weight: 900; font-size: 13px; color: #8B93AD;
}
.stk-lb-n.top { color: #FFD166; }
.stk-lb-row img, .stk-lb-av {
  width: 28px; height: 28px; border-radius: 999px; flex: none; object-fit: cover;
}
.stk-lb-av {
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; color: #C9D2E6;
  background: rgba(148,163,255,.16);
}
.stk-lb-row b {
  flex: 1; min-width: 0; font-size: 14px; font-weight: 700; color: #DFE4F5;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.stk-lb-row u {
  text-decoration: none; flex: none;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 14px; font-weight: 800; color: #4ADE80;
}


/* Кнопки окна «Как забрать» ------------------------------------------------
   Синий телеграма — на пополнение, золотой — на приглашение. Оба цвета уже
   работают в приложении (кнопка «Вывести» и «Пополнить» на балансе), новых
   не заводим: третий цвет в одном окне превращает выбор в светофор. */
.btn.gate-pay {
  /* Синий чуть глубже, текст белый: тёмные буквы по телеграм-синему дают
     грязный контраст, а белые — ровно то, как выглядит родная кнопка. */
  background: linear-gradient(96deg, #229ED9, #1B8FC7); border: 0;
  color: #fff; font-weight: 900;
  box-shadow: 0 14px 30px -16px rgba(34,158,217,.95);
}
.btn.gate-inv {
  background: linear-gradient(96deg, #FFD166, #E2951C); border: 0;
  color: #1B1206; font-weight: 900;
  box-shadow: 0 14px 30px -16px rgba(255,190,80,.95);
}
.btn.gate-pay:active, .btn.gate-inv:active { filter: brightness(1.06); }


/* Экран пополнения ---------------------------------------------------------
   Кнопка оплаты — тот же синий, что у «Пополнить»: одно действие, один цвет.
   Выключенная не красится в синий, иначе обещает нажатие, которого нет. */
#tuGo {
  background: linear-gradient(96deg, #229ED9, #1B8FC7);
  border: 0; color: #fff; font-weight: 900; letter-spacing: .2px;
  box-shadow: 0 14px 30px -16px rgba(34, 158, 217, .95);
}
/* Цвет кнопки оплаты по монете: зелёный USDT, синий TON. Так выбор виден
   на самой кнопке, а не только обводкой чипа выше. Оба цвета из палитры
   приложения. Правила стоят ДО [disabled] — выключенная перекрывает их. */
#tuGo.tu-usdt {
  background: linear-gradient(96deg, #2FD98F, #26B877);
  color: #04241A;
  box-shadow: 0 14px 30px -16px rgba(47, 217, 143, .85);
}
#tuGo.tu-ton {
  background: linear-gradient(96deg, #3AA8EF, #2B86D4);
  color: #04203A;
  box-shadow: 0 14px 30px -16px rgba(58, 168, 239, .85);
}
#tuGo svg { width: 22px; height: 22px; flex: none; }
/* Название монеты — тише суммы: на неё смотрят, на монету только сверяются. */
#tuGo em {
  font-style: normal; font-weight: 400; font-size: 15px; opacity: .62;
}
#tuGo[disabled] {
  background: rgba(148, 163, 255, .10); color: #7D86A4;
  box-shadow: none; opacity: 1;
}
.sheet-quick .chip.on {
  background: rgba(34, 158, 217, .18);
  border-color: rgba(34, 158, 217, .55);
  color: #fff;
}
/* Поле суммы отзывается на фокус: без этого непонятно, куда печатать. */
.sheet-input:focus-within {
  border-color: rgba(34, 158, 217, .55);
  box-shadow: 0 0 0 3px rgba(34, 158, 217, .12);
}
.tu-bonus {
  text-align: center; font-size: 12.5px; color: #8B93AD; margin: -2px 0 8px;
}
.tu-bonus b { color: #4ADE80; font-weight: 800; }
.tu-bonus s { text-decoration: none; color: #5d6a7d; margin-left: 6px; font-size: 11.5px; }
.tu-promo { margin: 0 0 10px; }
.tu-pr-card {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border-radius: 14px; border: 1px solid rgba(62,207,142,.30);
  background: linear-gradient(100deg, rgba(62,207,142,.14) 0%, rgba(62,207,142,.05) 70%);
}
.tu-pr-ic {
  flex: none; width: 30px; height: 30px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(62,207,142,.18); color: var(--ai-green);
}
.tu-pr-ic svg { width: 16px; height: 16px; }
.tu-pr-tx { flex: 1; min-width: 0; }
.tu-pr-tx b { display: block; font-size: 13.5px; font-weight: 800; color: var(--text); }
.tu-pr-tx s { display: block; margin-top: 1px; text-decoration: none;
  font-size: 11px; font-weight: 600; color: #7fc9a8; }
.tu-pr-card button {
  flex: none; height: 32px; padding: 0 13px; border: 0; border-radius: 10px;
  background: var(--ai-green); color: #06231a; font-size: 12.5px; font-weight: 800;
}
.tu-pr-card button:disabled { opacity: .55; }
.tu-pr-in { display: flex; gap: 8px; }
.tu-pr-in input {
  flex: 1; min-width: 0; height: 40px; padding: 0 12px; border-radius: 12px;
  background: var(--card-2); border: 1px solid var(--border); color: var(--text);
  font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.tu-pr-in input::placeholder { color: #5d6a7d; letter-spacing: 0; text-transform: none; font-weight: 600; }
.tu-pr-in button {
  flex: none; height: 40px; padding: 0 16px; border-radius: 12px; border: 0;
  background: var(--card-2); color: var(--dim); font-size: 13px; font-weight: 750;
}
.tu-pr-in button:disabled { opacity: .5; }
.tu-pr-err { min-height: 14px; margin-top: 5px; text-align: center;
  font-size: 11.5px; font-weight: 650; color: #F87171; }
.tu-pr-ok {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 12px; border-radius: 12px;
  background: rgba(62,207,142,.12); border: 1px solid rgba(62,207,142,.34);
}
.tu-pr-ok svg { width: 14px; height: 14px; color: var(--ai-green); }
.tu-pr-ok b { color: var(--ai-green); font-size: 14px; font-weight: 850; }
.tu-pr-ok s { text-decoration: none; color: #8fdcb9; font-size: 12px; font-weight: 650; }
.tu-free {
  text-align: center; font-size: 12.5px; color: #8B93AD;
  margin: -4px 0 10px; min-height: 15px;
}
.tu-free b { color: #4ADE80; font-weight: 800; }


/* Способы оплаты в цвете ---------------------------------------------------
   Раньше три одинаковые серые плитки, и выбранная отличалась только рамкой.
   Каждому способу — свой цвет: звёзды золотые, СБП синий, крипта оранжевая.
   Выбранный заливается своим цветом, невыбранные держат лёгкий оттенок. */
.paytab[data-way="stars"] {
  background: linear-gradient(180deg, rgba(255,209,102,.10), rgba(255,209,102,.03));
  border-color: rgba(255,209,102,.24);
}
.paytab[data-way="stars"].on {
  background: linear-gradient(180deg, rgba(255,209,102,.30), rgba(255,209,102,.10));
  border-color: rgba(255,209,102,.75);
}
.paytab[data-way="stars"].on b { color: #FFD166; }

.paytab[data-way="sbp"] {
  background: linear-gradient(180deg, rgba(42,171,238,.10), rgba(42,171,238,.03));
  border-color: rgba(42,171,238,.24);
}
.paytab[data-way="sbp"].on {
  background: linear-gradient(180deg, rgba(42,171,238,.32), rgba(42,171,238,.10));
  border-color: rgba(42,171,238,.8);
}
.paytab[data-way="sbp"].on b { color: #7CD4FF; }

.paytab[data-way="crypto"] {
  background: linear-gradient(180deg, rgba(247,147,26,.10), rgba(247,147,26,.03));
  border-color: rgba(247,147,26,.24);
}
.paytab[data-way="crypto"].on {
  background: linear-gradient(180deg, rgba(247,147,26,.30), rgba(247,147,26,.10));
  border-color: rgba(247,147,26,.75);
}
.paytab[data-way="crypto"].on b { color: #FFB765; }

/* Подписи под названием способа были почти неразличимы на тёмном. */
.paytab span { color: #93A0B8; }
.paytab.on span { color: #C9D6EA; }

/* Онлайн на карточке игры --------------------------------------------------
   Точка «живого» пульсирует — но только она: анимация целой строки на списке
   карточек заметно греет слабые телефоны. */
/* Наклейка на самом превью, в нижнем углу окна. Строкой под текстом она
   занимала целую линию и тянула карточку вниз; здесь она ничего не двигает
   и читается как «тут сейчас живут». Тёмная подложка нужна: превью Прыгуна
   светлое, зелёное по белому не видно. */
.g-live {
  /* Своей строкой ПОД ударной фразой. На самом превью владелец её отменил, а
     хвостом к фразе она обрезалась вместе с ней: у .g-cap стоит клип по двум
     строкам. Отдельная строка ничем не рискует. */
  display: flex; align-items: center; gap: 5px; margin-top: 5px;
  font-size: 11px; font-weight: 800; letter-spacing: 0; color: #4ADE80;
  text-transform: none; white-space: nowrap; overflow: hidden;
}
.g-live i {
  width: 6px; height: 6px; border-radius: 999px; background: #4ADE80;
  box-shadow: 0 0 8px rgba(74,222,128,.9); animation: gLive 2s ease-in-out infinite;
}
@keyframes gLive { 0%,100% { opacity: 1 } 50% { opacity: .35 } }

/* Билеты и «пригласить друга» на экране бонуса: было набрано мелко. */
.spin-meta > div b { font-size: 20px; font-weight: 900; }
.spin-meta > div span { font-size: 13px; font-weight: 600; color: #93A0B8; }
.spin-meta .invite b { font-size: 19px; }
.spin-meta .invite span { color: #7CD4FF; }


/* Выбор способа пополнения -------------------------------------------------
   Список, а не вкладки: на телефоне три плитки в ряд не помещаются, а выбор
   способа оплаты человек привык видеть строками — так это сделано в банках. */
.tu-ways { display: flex; flex-direction: column; gap: 9px; margin: 4px 0 14px; }
.tu-way {
  display: flex; align-items: center; gap: 13px; width: 100%;
  padding: 13px 14px; border-radius: 17px; cursor: pointer; text-align: left;
  background: rgba(148,163,255,.05); border: 1.5px solid rgba(148,163,255,.14);
  transition: transform .16s cubic-bezier(.22,1,.36,1), background .2s, border-color .2s;
}
.tu-way:active { transform: scale(.985); }
.tu-ic {
  width: 44px; height: 44px; flex: none; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 800;
}
.tu-ic svg { width: 22px; height: 27px; }
.tu-ic.sbp    { background: rgba(42,171,238,.14); }
.tu-ic.stars  { background: rgba(255,209,102,.16); color: #FFD166; }
.tu-ic.stars svg { width: 24px; height: 24px; }
.tu-ic.crypto { background: rgba(247,147,26,.16); color: #F7931A; }
.tu-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tu-tx b { font-size: 16.5px; font-weight: 800; color: #EEF2FF; }
.tu-tx i {
  font-style: normal; font-size: 12.5px; font-weight: 600; color: #8F9BB3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Галочка появляется только у выбранного: пустой кружок в каждой строке
   выглядит как незаполненная анкета. */
.tu-tick {
  width: 26px; height: 26px; flex: none; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(148,163,255,.10); color: transparent;
}
.tu-tick svg { width: 14px; height: 14px; }
.tu-way.on .tu-tick { color: #0B1220; }

.tu-way[data-way="sbp"].on {
  background: linear-gradient(96deg, rgba(42,171,238,.26), rgba(42,171,238,.09));
  border-color: rgba(42,171,238,.85);
}
.tu-way[data-way="sbp"].on .tu-tick { background: #2AABEE; }
.tu-way[data-way="stars"].on {
  background: linear-gradient(96deg, rgba(255,209,102,.24), rgba(255,209,102,.08));
  border-color: rgba(255,209,102,.85);
}
.tu-way[data-way="stars"].on .tu-tick { background: #FFD166; }
.tu-way[data-way="crypto"].on {
  background: linear-gradient(96deg, rgba(247,147,26,.24), rgba(247,147,26,.08));
  border-color: rgba(247,147,26,.85);
}
.tu-way[data-way="crypto"].on .tu-tick { background: #F7931A; }
.tu-way.on .tu-tx i { color: #C6D2E8; }

/* Сумма — главное на экране, поэтому крупно и по центру. */
.sheet-card .sheet-input {
  padding: 16px 18px; border-radius: 18px;
  background: rgba(148,163,255,.06); border: 1.5px solid rgba(148,163,255,.16);
}
.sheet-card .sheet-input input {
  font-size: 34px; font-weight: 900; letter-spacing: -.5px; text-align: center;
}
.sheet-card .sheet-input span { font-size: 26px; font-weight: 800; }
.sheet-card .sheet-quick { gap: 9px; }
.sheet-card .sheet-quick .chip {
  flex: 1; justify-content: center; padding: 12px 6px;
  font-size: 14.5px; font-weight: 800; border-radius: 14px;
}
#tuGo { height: 54px; font-size: 17px; border-radius: 17px; }


/* СБП — зелёный и с пульсацией; экран пополнения компактнее ----------------
   Зелёный отделяет способ, который человеку ничего не стоит и зачисляется
   сразу. Пульсирует только обводка: мигающая заливка утомляет глаз и на
   слабых телефонах заметна по батарее. */
.tu-way[data-way="sbp"] {
  background: linear-gradient(96deg, rgba(52,211,153,.10), rgba(52,211,153,.03));
  border-color: rgba(52,211,153,.45);
  animation: tuPulse 2.4s ease-in-out infinite;
}
.tu-way[data-way="sbp"].on {
  background: linear-gradient(96deg, rgba(52,211,153,.28), rgba(52,211,153,.10));
  border-color: rgba(52,211,153,.95);
}
.tu-way[data-way="sbp"].on .tu-tick { background: #34D399; }
.tu-way[data-way="sbp"] .tu-ic.sbp { background: rgba(52,211,153,.16); }
.tu-way[data-way="sbp"].on .tu-tx b { color: #B9FFE2; }
@keyframes tuPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); }
  50%      { box-shadow: 0 0 0 3px rgba(52,211,153,.18); }
}
@media (prefers-reduced-motion: reduce) {
  .tu-way[data-way="sbp"] { animation: none; }
}

/* Плотнее: шторка не должна занимать весь экран, иначе сумма и кнопка
   уезжают под клавиатуру. */
.tu-ways { gap: 7px; margin: 2px 0 11px; }
.tu-way { padding: 10px 12px; gap: 11px; border-radius: 15px; }
.tu-ic { width: 38px; height: 38px; border-radius: 12px; font-size: 19px; }
.tu-ic svg { width: 19px; height: 23px; }
.tu-ic.stars svg { width: 21px; height: 21px; }
.tu-tx b { font-size: 15.5px; }
.tu-tx i { font-size: 12px; }
.tu-tick { width: 23px; height: 23px; }
.sheet-card .sheet-input { padding: 12px 16px; border-radius: 16px; }
.sheet-card .sheet-input input { font-size: 30px; }
.sheet-card .sheet-quick .chip { padding: 10px 6px; font-size: 14px; }
#tuGo { height: 50px; font-size: 16.5px; }
.sheet-card .sheet-sub { font-size: 12.5px; line-height: 1.4; margin-bottom: 10px; }


/* Плюс у суммы --------------------------------------------------------------
   Единственный элемент шапки, который говорит «сюда можно положить». Зелёный,
   потому что зелёным в приложении помечены приходящие деньги. */
.hd-chip.bal { gap: 6px; }
.hd-plus {
  width: 21px; height: 21px; flex: none; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font: 900 15px/1 inherit; color: #06231A;
  background: linear-gradient(180deg, #4BE3A6, #23C68A);
  box-shadow: 0 4px 10px -4px rgba(35,198,138,.9);
  cursor: pointer;
}
.hd-plus:active { transform: scale(.92); }


/* Кнопка пополнения в шапке -------------------------------------------------
   Синяя со знаком СБП: слово объясняет действие, знак — способ. Плюс сам по
   себе читался как «добавить» вообще.
   На узких экранах текст прячется: в шапке уже имя, «Вывести», сумма и
   билеты, и лишние 70 px выдавливают билеты за край. */
.hd-top {
  /* Круглая кнопка с плюсом: одно действие — один знак, без подписи и без
     логотипа. Способ оплаты человек выберет внутри. */
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 24px; height: 24px; margin-left: 3px; border-radius: 999px;
  background: linear-gradient(180deg, #35B6F2, #1B8FC7);
  box-shadow: 0 6px 14px -7px rgba(34,158,217,.95),
              0 0 0 1px rgba(255,255,255,.16) inset;
  cursor: pointer;
}
.hd-top .hd-pl { width: 14px; height: 14px; flex: none; color: #fff; }
.hd-top:active { transform: scale(.94); }
@media (max-width: 380px) {
  .hd-top { width: 22px; height: 22px; }
}


/* Откуда взялась доступная сумма — строкой под ней, мелко и спокойно:
   это пояснение, а не призыв. Зелёным, когда путь уже пройден. */
.req-why { display: block; margin-top: 6px; font-size: 12px; line-height: 1.35;
  color: #8f9bb3; }
.req-why b { color: #c6d2e8; font-weight: 800; }
.req-why.ok { color: #7fd6a2; }
.req-why.ok b { color: #a9f0c6; }


/* ---------- Экран закрытого аккаунта -------------------------------------
   Не модалка: закрыть нельзя, под ней ничего нет. Красный только в значке —
   стена красного читается как поломка сервиса, а это решение по аккаунту. */
body.ban-open { overflow: hidden; }
#banScreen {
  position: fixed; inset: 0; z-index: 999; background: #0b0f1a;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  animation: banIn .25s ease-out;
}
@keyframes banIn { from { opacity: 0 } to { opacity: 1 } }
#banScreen .ban-card { max-width: 380px; text-align: center; }
#banScreen .ban-ic {
  width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 50%;
  display: grid; place-items: center; color: #f87171;
  background: rgba(248,113,113,.12); border: 1px solid rgba(248,113,113,.32);
}
#banScreen .ban-ic svg { width: 28px; height: 28px; }
#banScreen h2 { font-size: 20px; font-weight: 800; color: #fff; margin: 0 0 14px; }
#banScreen .ban-text p {
  font-size: 13.5px; line-height: 1.6; color: #9aa3bd; margin: 0 0 11px;
  text-align: left;
}
#banScreen .ban-sup {
  display: block; margin-top: 18px; text-decoration: none;
  background: linear-gradient(96deg, #229ED9, #1B8FC7); color: #fff;
  font-weight: 800; border: 0;
}
#banScreen .ban-note {
  margin-top: 12px; font-size: 12px; line-height: 1.5; color: #6b7590;
}


/* Партнёрские разблокировки: логотипы в ряд под правилом. Пройденные —
   в полную силу, остальные приглушены. Это и список партнёров, и прогресс. */
.pu-way .way-b { padding-left: 0; }
.pu-logos { display: flex; gap: 7px; margin: 7px 0 2px; }
.pu-l {
  width: 26px; height: 26px; border-radius: 8px; object-fit: cover;
  opacity: .32; filter: grayscale(1);
  border: 1px solid rgba(148,163,255,.14);
}
.pu-l.on {
  opacity: 1; filter: none;
  border-color: rgba(255,207,92,.55);
  box-shadow: 0 0 10px -3px rgba(255,176,32,.7);
}

/* Кошелёк в окне вывода: подключён — короткий адрес и «отвязать». Полный
   адрес не показываем, его всё равно никто не читает, а места он занимает
   на две строки. */
.req-wal{display:flex;align-items:center;gap:11px;padding:12px 13px;
  border-radius:14px;background:rgba(38,161,123,.10);
  border:1px solid rgba(38,161,123,.32);margin-bottom:10px}
.req-wal-b{flex:1;min-width:0;line-height:1.3}
.req-wal-b b{display:block;font-size:14px;font-weight:700;
  font-family:ui-monospace,'SF Mono',Menlo,monospace}
.req-wal-b span{font-size:11.5px;color:var(--dim)}
/* Адрес в одну строку: он и так укорочен до UQDTBN…hZZa, переносить нечего. */
.req-wal-b b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-size:14.5px;color:#EAF2EE}
/* «Отвязать» — тихое действие рядом с адресом, а не кнопка во всю строку.
   Свой класс, а не .proof-btn: у той стоит width:100% (она задумана широкой
   кнопкой ПОД карточкой), и здесь она вылезала за край, накрывая адрес. */
.req-wal-off{flex:none;border:none;background:none;cursor:pointer;
  padding:6px 2px;font:600 12.5px/1 inherit;color:var(--dim);
  text-decoration:underline;text-underline-offset:3px}
.req-wal-off:active{color:#fff}
.req-wal-off:disabled{opacity:.5}
.req-m[data-code="ton"].on{border-color:#26A17B}

/* Выбор монеты при пополнении. Курса рядом нет намеренно: наш был бы
   приблизительным, а точную сумму в ту же секунду называет кошелёк. */
.tu-coins{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 12px}
.tu-coin{display:flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 12px;border-radius:15px;cursor:pointer;
  background:rgba(148,163,255,.05);border:1.5px solid rgba(148,163,255,.14)}
.tu-coin svg{width:24px;height:24px;flex:none}
/* Семейство задаём явно: без него кнопки брали шрифт от соседей —
   моноширинный от плиток сумм — и названия монет выглядели чужими. */
.tu-coin b{font-family:-apple-system,'SF Pro Text','Segoe UI',Roboto,sans-serif;
  font-size:15.5px;font-weight:700;letter-spacing:.01em;color:#EEF2FF}
.tu-coin.on{background:rgba(38,161,123,.12);border-color:#26A17B}
.tu-coin.ton.on{background:rgba(42,171,238,.12);border-color:#2AABEE}


/* ---------- Заморозка партнёра на экране вывода ----------
   Деньги на балансе есть, вывести нельзя, причина не названа — человек идёт
   в поддержку. Полоса под суммой называет и сумму, и того, кто её держит. */
.req-hold{display:flex;align-items:flex-start;gap:9px;margin:10px 2px 0;
  padding:11px 12px;border-radius:13px;font-size:12.5px;line-height:1.4;color:#d9c48a;
  background:rgba(251,191,36,.10);border:1px solid rgba(251,191,36,.32)}
.req-hold b{color:#FBBF24;font-weight:800}
.req-hold i{flex:0 0 auto;width:8px;height:8px;margin-top:5px;border-radius:50%;
  background:#FBBF24;box-shadow:0 0 10px rgba(251,191,36,.6)}

/* Шапка без профиля: аватар и юзернейм убраны, чтобы не перегружать экран.
   Строка «Вывести / баланс / билеты» занимает всю ширину и поднята вверх. */
.hd-row--solo { flex-wrap: nowrap; }
.hd-row--solo .hd-money { width: 100%; margin-left: 0; justify-content: flex-start; }
.hd-row--solo .hd-money .hd-btn { flex: 1 1 auto; }
.topbar { padding-top: calc(8px + env(safe-area-inset-top)); padding-bottom: 8px; }

/* Раздел «Баланс»: две карточки «Основной / С заданий», а ссылка «О балансах»
   стоит ПОД ними, справа, без толстого разделителя и большого зазора. */
.bal-cards { margin-top: 14px; }
.bal-about-row { display: flex; justify-content: flex-end; margin: 8px 2px 0; }

/* Окно вывода, вариант 2: сумма крупно по центру, метод — две пилюли с
   минимумом внутри. Плитки сумм убраны, вводится любая сумма. */
.req-v2 .req-amount { padding: 16px 14px; border-radius: 16px; }
/* Число обычным шрифтом, а не моноширинным: на крупном размере мено читалось
   тяжело и «вырвиглазно». ₽ приглушаем, чтобы не спорил с числом. */
.req-v2 .req-amount input { font-family: -apple-system, "SF Pro Display",
  "Segoe UI", Roboto, sans-serif; font-size: 42px; font-weight: 800;
  letter-spacing: -.5px; }
.req-v2 .req-amount .cur { font-size: 24px; color: #8A94A6; font-weight: 700; }
.req-v2 .req-avail { text-align: center; margin-top: 10px; font-size: 13px; }
.req-v2 .req-hint { text-align: center; }
.req-methods-v2 { gap: 9px; margin: 12px 0 10px; }
.req-methods-v2 .req-m { flex: 1; display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center; gap: 2px 7px; height: 60px;
  border-radius: 15px; padding: 0; }
.req-methods-v2 .req-m > span { font-size: 15px; font-weight: 700; }
.req-m-min { flex-basis: 100%; text-align: center; font-style: normal;
  font-size: 11.5px; font-weight: 600; color: var(--dim); }
.req-methods-v2 .req-m.on .req-m-min { color: rgba(255,255,255,.72); }
.req-methods-v2 .req-m[data-code="ton"].on { border-color: rgba(47,217,143,.55);
  background: linear-gradient(150deg, rgba(47,217,143,.14), rgba(47,217,143,.03));
  color: #eafff5; }

/* окно вывода: крупнее */
.req-note { display: none; }
.req-v2 .req-avail { font-size: 14.5px; margin-top: 12px; }
.req-methods-v2 { margin: 14px 0 6px; }
.req-methods-v2 .req-m { height: 66px; }
.req-methods-v2 .req-m > span { font-size: 16.5px; font-weight: 800; }
.req-methods-v2 .req-m-min { font-size: 13px; color: #9aa3b8; font-weight: 600; }
.req-methods-v2 .req-m.on .req-m-min { color: rgba(255,255,255,.85); }
.req-gate .req-bank, .req-gate .req-input {
  font-size: 16px; min-height: 52px; }
.req-gate .req-input::placeholder { font-size: 16px; }

/* пилюли методов — надёжно */
.req-methods-v2 { display: flex; gap: 9px; margin: 14px 0 8px; }
.req-methods-v2 .req-m {
  flex: 1 1 0; min-width: 0; overflow: hidden; flex-wrap: nowrap;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 3px; height: 64px; border-radius: 15px;
  padding: 0 6px;
}
.req-methods-v2 .rm-top { display: flex; align-items: center; gap: 7px; max-width: 100%; }
.req-methods-v2 .rm-top b {
  font-size: 15px; font-weight: 800; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.req-methods-v2 .req-m .ic { flex: 0 0 auto; }
.req-methods-v2 .req-m-min { font-size: 12.5px; color: #9aa3b8; font-weight: 600; white-space: nowrap; }
.req-methods-v2 .req-m.on .req-m-min { color: rgba(255,255,255,.85); }


/* ── Промокод блогера ──────────────────────────────────────────────────
   Поле показывается только в первый час после первого входа, поэтому оно
   обязано быть мелким: это не раздел, а короткая возможность. Габариты и
   цвета — как у соседних плиток профиля, чтобы строка не выпадала из
   колонки и не читалась рекламой. */
.pmc {
  margin: 12px 0 2px; padding: 11px 12px 10px; border-radius: 16px;
  background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.09);
}
.pmc-h {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 8px;
}
.pmc-h span {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; color: #c9d1ee;
}
.pmc-h span svg { width: 14px; height: 14px; color: #c4b5fd; }
.pmc-row { display: flex; gap: 8px; }
/* «Мой промокод» — не кнопка действия, а переключатель вида. Поэтому без
   заливки: рядом с «Применить» вторая яркая кнопка спорила бы за внимание. */
.pmc-mine { margin-left: auto; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 11.5px; font-weight: 600; color: #a8b8ff;
  padding: 2px 0; }
.pmc-mine:active { opacity: .6; }
/* Пилюля только у «мой промокод»: класс .pmc-mine носит ещё и «назад»,
   а её трогать незачем. Высота строки не меняется — блок не поедет. */
.pmc-zov { display: inline-flex; align-items: center; gap: 3px;
  background: rgba(148,163,255,.12); border: 1px solid rgba(148,163,255,.24);
  border-radius: 999px; padding: 4px 9px 4px 11px; color: #c3ceff;
  position: relative; }
.pmc-zov svg { width: 11px; height: 11px; }
.pmc-zov:active { background: rgba(148,163,255,.18); opacity: 1; }
/* Точка горит, пока не нажали ни разу. После первого нажатия класс
   снимается и больше не возвращается: метка лежит в localStorage. */
.pmc-zov.pmc-new::before { content: ""; position: absolute; top: -2px; right: -2px;
  width: 7px; height: 7px; border-radius: 99px; background: #4c6bff;
  box-shadow: 0 0 0 0 rgba(76,107,255,.55); animation: pmcPulse 1.9s ease-out infinite; }
@keyframes pmcPulse {
  0%   { box-shadow: 0 0 0 0   rgba(76,107,255,.55); }
  70%  { box-shadow: 0 0 0 7px rgba(76,107,255,0); }
  100% { box-shadow: 0 0 0 0   rgba(76,107,255,0); }
}
@media (prefers-reduced-motion: reduce) {
  .pmc-zov.pmc-new::before { animation: none; }
}
/* Сам код: моноширинный и крупный — его переписывают глазами в чужой чат. */
.pmc-code { flex: 1; min-width: 0; height: 38px; display: flex; align-items: center;
  padding: 0 12px; border-radius: 12px; background: rgba(20,26,46,.6);
  border: 1px solid rgba(148,163,255,.14);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 15px; font-weight: 700; letter-spacing: .10em; color: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pmc-inp {
  flex: 1; min-width: 0; height: 38px; padding: 0 12px;
  border-radius: 12px; border: 1px solid rgba(148,163,255,.14);
  background: rgba(20,26,46,.6); color: #fff;
  font-size: 14px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; outline: none;
}
.pmc-inp::placeholder {
  color: #6d7490; font-weight: 600; letter-spacing: .02em;
  text-transform: none;
}
.pmc-inp:focus { border-color: rgba(132,85,242,.45); }
.pmc-btn {
  flex-shrink: 0; height: 38px; padding: 0 15px; border: 0; border-radius: 12px;
  background: linear-gradient(135deg,#4f6bf5,#8455f2); color: #fff;
  font-size: 13px; font-weight: 700; cursor: pointer;
}
.pmc-btn:active { filter: brightness(.92); }
.pmc-btn:disabled { opacity: .55; }
/* Пустая подпись не должна занимать место: она появляется только текстом
   отказа, а до первой ошибки её нет вовсе. */
.pmc-note:empty { display: none; }
.pmc-note { margin-top: 7px; font-size: 11.5px; line-height: 1.45; color: var(--dim); }
.pmc-note.bad { color: #ff8a96; }
/* Жирные куски подписи не рвём: разряды в суммах разделяет узкий пробел, а
   он разрывный — «1 000 ₽» уезжало на две строки. */
.pmc-note b { white-space: nowrap; }
/* Правило и награда — разными блоками. Одним предложением это рвалось в
   узкой колонке где попало, и сумму приходилось выискивать глазами. */
.pmc-rule { margin-top: 9px; font-size: 11.5px; line-height: 1.45;
  color: var(--dim); text-wrap: pretty; }
.pmc-gain { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 8px; padding: 8px 11px; border-radius: 11px;
  background: rgba(47,217,143,.08); border: 1px solid rgba(47,217,143,.20); }
.pmc-gain { align-items: center; gap: 9px; padding: 7px 10px;
  background: rgba(255,255,255,.035); border-color: rgba(148,163,255,.10);
  justify-content: flex-start; }
.pmc-g-ic { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 9px;
  display: grid; place-items: center; font: 800 14px/1 inherit; }
.pmc-g-ic.bb { background: linear-gradient(135deg,#ffd76a,#f5a623); color: #241800; }
.pmc-g-ic.pc { background: linear-gradient(135deg,#6d7cff,#8b5cf6); color: #fff; }
.pmc-g-tx { flex: 1; min-width: 0; }
.pmc-g-tx b { display: block; font: 700 13.5px/1.25 inherit; color: #EEF1FA;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pmc-g-tx s { display: block; text-decoration: none; font-size: 11px;
  line-height: 1.3; color: #8A94A6; margin-top: 1px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.pmc-gain b { color: #c9d1ee; font-weight: 700; white-space: nowrap; }
.pmc-gain i { font-style: normal; font-size: 14px; font-weight: 800;
  color: var(--safe, #2fd98f); white-space: nowrap; }
.pmc.done { border-color: rgba(52,211,153,.28); background: rgba(52,211,153,.07); }
.pmc-ok {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 600; color: #45e0a6;
}
.pmc-ok svg { width: 15px; height: 15px; flex-shrink: 0; }
.pmc-ok b { font-weight: 800; color: #45e0a6; }


/* ===== Доход с друзей ================================================= */
.rs-row {
  display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 16px;
  padding: 11px 12px; border-radius: 14px; cursor: pointer; text-align: left;
  font-family: inherit; background: rgba(52,214,143,.08);
  border: 1px solid rgba(52,214,143,.22);
}
.rs-row:active { filter: brightness(.93); }
.rs-row-l { flex: 1; min-width: 0; }
.rs-row-l b { display: block; font-size: 13.5px; font-weight: 700; color: #eef1fa; }
.rs-row-l > span {
  display: block; font-size: 11.5px; color: #8d95b2; margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rs-row-r { display: flex; align-items: center; gap: 3px; flex-shrink: 0; }
.rs-row-r b { font-size: 15px; font-weight: 800; color: #3fd68f; }
.rs-row-r .ic { font-size: 15px; color: #5f6785; }
.rs-row.wait { background: rgba(148,163,255,.06); border-color: rgba(148,163,255,.16); }
.rs-row.wait .rs-row-r b { color: #c3c9e6; }

.rev-lead { font-size: 13.5px; color: #8d95b2; line-height: 1.5; margin: 2px 0 16px; }
.rev-lead b { color: #3fd68f; }
.rev-take {
  display: flex; align-items: center; gap: 12px; padding: 13px 14px;
  border-radius: 16px; background: rgba(52,214,143,.09);
  border: 1px solid rgba(52,214,143,.24);
}
.rev-take-l { flex: 1; min-width: 0; }
.rev-take-l span { display: block; font-size: 11.5px; color: #8d95b2; }
.rev-take-l b {
  display: block; font-size: 26px; font-weight: 800; color: #3fd68f;
  letter-spacing: -.5px; margin-top: 2px;
}
.rev-btn {
  flex-shrink: 0; height: 44px; padding: 0 22px; border: 0; border-radius: 14px;
  font-family: inherit; font-size: 15px; font-weight: 800; color: #fff;
  cursor: pointer; background: linear-gradient(135deg,#3fd68f,#22c55e);
}
.rev-btn:active { transform: scale(.98); }
.rev-btn.off { background: rgba(148,163,255,.12); color: #6b7390; cursor: default; }
.rev-note { font-size: 11.5px; color: #6d76a0; margin: 8px 2px 0; }
.rev-list { margin: 16px 0 18px; padding: 0; list-style: none; }
.rev-list li {
  position: relative; padding: 0 0 0 18px; margin-bottom: 8px;
  font-size: 12.5px; color: #8d95b2; line-height: 1.5;
}
.rev-list li b { color: #eef1fa; }
.rev-list li::before {
  content: ""; position: absolute; left: 3px; top: 7px; width: 5px; height: 5px;
  border-radius: 99px; background: #5f6785;
}
.rev-list li:last-child { margin-bottom: 0; }

/* ═══ карточки игр: новая витрина ═══ */
@font-face{font-family:'Каракуля';font-style:normal;font-weight:400;
  font-display:swap;unicode-range:U+0400-04FF;
  src:url(fonts/karakulya.woff2) format('woff2')}
*{box-sizing:border-box}
:root{--bg:#05070C;--ink:#F0F4FB;--dim:#7C889F}
body{margin:0;background:var(--bg);color:var(--ink);
  font:15px/1.45 -apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased}
h1{margin:0 18px 6px;font-size:20px;font-weight:800;letter-spacing:-.02em}

.gxc{position:relative;display:block;overflow:hidden;min-height:158px;
  margin:0 16px 13px;padding:20px 0 20px 21px;border-radius:28px;cursor:pointer;
  background:linear-gradient(102deg,#0A0E17 0%,var(--mid) 46%,var(--deep) 100%);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 1px 0 rgba(255,255,255,.07) inset,0 22px 46px -30px #000;
  transition:transform .18s ease,border-color .18s ease}
.gxc:hover{transform:translateY(-2px);border-color:var(--acc)}
.gxc:active{transform:scale(.99)}
.gxc::before{content:"";position:absolute;right:-16%;top:50%;width:80%;aspect-ratio:1;
  transform:translateY(-50%);border-radius:50%;pointer-events:none;z-index:1;
  background:radial-gradient(circle,var(--halo) 0%,transparent 66%)}
.gxc::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:4;
  opacity:.5;background-image:radial-gradient(circle,rgba(255,255,255,.45) 1px,transparent 1px);
  background-size:32px 28px;background-position:10px 8px;
  -webkit-mask-image:linear-gradient(102deg,rgba(0,0,0,.6),transparent 52%);
  mask-image:linear-gradient(102deg,rgba(0,0,0,.6),transparent 52%)}

.gxl{position:relative;z-index:3;width:52%}
.gxv{position:absolute;z-index:2;right:-4%;top:50%;width:52%;
  transform:translateY(-50%);aspect-ratio:200/150;pointer-events:none}
.gxv.gxpaper{-webkit-mask-image:linear-gradient(96deg,transparent 0%,#000 20%,#000 100%);
  mask-image:linear-gradient(96deg,transparent 0%,#000 20%,#000 100%)}
.gxv svg{display:block;width:100%;height:100%;overflow:visible}

.gxt{display:flex;align-items:center;gap:7px;margin-bottom:7px}
.gxt b{font-size:24px;font-weight:900;font-style:italic;letter-spacing:-.03em;
  text-transform:uppercase;line-height:1;white-space:nowrap;color:var(--acc);
  text-shadow:0 0 28px var(--halo)}
.gxbdg{flex:0 0 auto;padding:4px 9px;border-radius:99px;font-size:9.4px;font-weight:900;
  letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;
  color:var(--bink);background:var(--acc)}
.gxsub{margin:0 0 8px;font-size:12.2px;line-height:1.34;color:#B4BECF}
/* Ударная строка переносится на вторую строку, а не обрубается многоточием:
   «ПОБЕДИТЕЛЬ ЗАБИРАЕТ …» — это не фраза, а обрубок. Ровно та же причина
   записана у .gxg-cap в боевом style.gxcss. */
.gxtag{margin:0 0 9px;font-size:9.8px;font-weight:900;letter-spacing:.02em;
  line-height:1.2;text-transform:uppercase;color:var(--acc);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden}
/* ---- кегль по ширине карточки ---- */
@supports (container-type: inline-size){
  .gxc{container-type:inline-size}
  /* 343 px — ширина карточки на 375-м экране, на ней и откалиброваны
     прежние пиксели: 24/343 = 7 cqw, 12.2/343 = 3.56 и так далее.
     Границы clamp держат край: на очень узком не сожмётся до нечитаемого,
     на планшете не раздуется в баннер. */
  .gxt b   {font-size:clamp(22px, 7cqw,    34px)}
  .gxbdg   {font-size:clamp(9.2px, 2.75cqw, 13px)}
  .gxsub   {font-size:clamp(12px, 3.56cqw,  17px)}
  .gxtag   {font-size:clamp(9.6px, 2.86cqw, 13.5px)}
  .gxst    {font-size:clamp(10.4px, 3.1cqw, 14.5px)}
  .gxc .g-live{font-size:clamp(10.8px, 3.2cqw, 15px)}
}

.gxst{display:flex;align-items:center;gap:6px;font-size:10.6px;font-weight:700;
  color:#93A0B6;font-variant-numeric:tabular-nums}
.gxst i{width:6px;height:6px;border-radius:50%;background:#3DDC84;
  box-shadow:0 0 8px #3DDC84;animation:gxpuls 2.2s ease-in-out infinite}
@keyframes gxpuls{0%,100%{opacity:1}50%{opacity:.35}}

@media (prefers-reduced-motion:no-preference){
/* ── Ракетка: ступень ведёт кривую, монету и число разом ── */
.gxrk{--d:5.6s;color:#4ADE80;animation:gxrkTier var(--d) linear infinite}
@keyframes gxrkTier{0%,16%{color:#4ADE80}17%,38%{color:#5B9DFF}
  39%,60%{color:#A78BFA}61%,100%{color:#F5B942}}
.gxrk-line{stroke-dasharray:270;stroke-dashoffset:270;
  animation:gxrkDraw var(--d) linear infinite}
@keyframes gxrkDraw{0%{stroke-dashoffset:270;opacity:1}78%{stroke-dashoffset:0;opacity:1}
  84%{opacity:.12}100%{opacity:0}}
.gxrk-head{animation:gxrkFly var(--d) linear infinite}
@keyframes gxrkFly{0%{offset-distance:0%;opacity:1}78%{offset-distance:100%;opacity:1}
  81%{opacity:0}100%{opacity:0}}
.gxrk-aura{animation:gxrkAura var(--d) linear infinite}
@keyframes gxrkAura{0%{opacity:.3}78%{opacity:1}86%{opacity:.15}100%{opacity:.15}}
.gxrk-boom-t{opacity:0;animation:gxrkBoomT var(--d) linear infinite}
@keyframes gxrkBoomT{0%,78%{opacity:0}82%,93%{opacity:1}97%,100%{opacity:0}}
.gxrk-boom{opacity:0;transform-box:view-box;transform-origin:166px 16px;
  animation:gxrkBoom var(--d) linear infinite}
@keyframes gxrkBoom{0%,78%{opacity:0;transform:scale(.3)}
  82%{opacity:1;transform:scale(1)}92%{opacity:0;transform:scale(2.1)}
  100%{opacity:0;transform:scale(2.1)}}

/* ── Прыгун: мир на две ступени за два прыжка, герой между колонками ── */
.gxjm-world{animation:gxjmWorld 3.6s linear infinite}
@keyframes gxjmWorld{from{transform:translateY(-136px)}to{transform:translateY(0)}}
.gxjm-x{transform-box:view-box;animation:gxjmX 1.8s linear infinite}
@keyframes gxjmX{0%{transform:translateX(0)}50%{transform:translateX(52px)}
  100%{transform:translateX(0)}}
.gxjm-y{transform-box:view-box;animation:gxjmY .9s infinite}
/* Смотрит туда, куда летит. Переключаем ступенькой: персонаж не
   поворачивается плавно, он просто оказывается развёрнутым. */
.gxjm-flip{transform-box:view-box;transform-origin:92px 85px;
  animation:gxjmFlip 1.8s steps(1,end) infinite}
@keyframes gxjmFlip{0%{transform:scaleX(1)}50%{transform:scaleX(-1)}
  100%{transform:scaleX(1)}}
@keyframes gxjmY{
  0%{transform:translateY(0);animation-timing-function:cubic-bezier(.16,.62,.36,1)}
  50%{transform:translateY(-46px);animation-timing-function:cubic-bezier(.6,0,.82,.44)}
  100%{transform:translateY(0)}}

/* ── Апгрейд: кольцо крутится и встаёт в цветном ── */
.gxup-ring{transform-box:view-box;transform-origin:100px 74px;will-change:transform;
  animation:gxupSpin 6s cubic-bezier(.16,.85,.2,1) infinite}
@keyframes gxupSpin{0%,7%{transform:rotate(0)}66%,100%{transform:rotate(1080deg)}}
/* Сумма видна всегда, как в игре: до спина это возможная выплата.
   На остановке она вспыхивает цветом ступени — и всё, без лишних плашек. */
.gxup-sum text{animation:gxupFlash 6s linear infinite}
@keyframes gxupFlash{0%,66%{fill:#FFF3E6}70%,92%{fill:#FDBA74}96%,100%{fill:#FFF3E6}}

/* ── Колесо: три оборота и остановка на призе ── */
.gxwh-ring{transform-box:view-box;transform-origin:104px 76px;will-change:transform;
  animation:gxwhSpin 6.4s cubic-bezier(.14,.82,.18,1) infinite}
@keyframes gxwhSpin{0%,6%{transform:rotate(0)}70%,100%{transform:rotate(1080deg)}}

/* ── Мины: клетки вскрываются одна за другой, шестая взрывается ──
   Клетка не проявляется, а выскакивает: масштаб с перелётом и лёгкий
   доворот. Проявление по прозрачности читается подгрузкой, а не ходом. */
.gxmn-o{opacity:0;transform-box:fill-box;transform-origin:center}
.gxmn-o0{animation:gxmnO0 6s linear infinite}
.gxmn-o1{animation:gxmnO1 6s linear infinite}
.gxmn-o2{animation:gxmnO2 6s linear infinite}
.gxmn-o3{animation:gxmnO3 6s linear infinite}
.gxmn-o4{animation:gxmnO4 6s linear infinite}
@keyframes gxmnO0{
  0%,8%{opacity:0;transform:scale(.45) rotate(-14deg)}
  10%{opacity:1;transform:scale(1.1) rotate(4deg)}
  11.5%,44%{opacity:1;transform:scale(1) rotate(0deg)}
  47%,100%{opacity:0;transform:scale(.62) rotate(0deg)}}
@keyframes gxmnO1{
  0%,14.5%{opacity:0;transform:scale(.45) rotate(-14deg)}
  16.5%{opacity:1;transform:scale(1.1) rotate(4deg)}
  18%,44%{opacity:1;transform:scale(1) rotate(0deg)}
  47%,100%{opacity:0;transform:scale(.62) rotate(0deg)}}
@keyframes gxmnO2{
  0%,21%{opacity:0;transform:scale(.45) rotate(-14deg)}
  23%{opacity:1;transform:scale(1.1) rotate(4deg)}
  24.5%,44%{opacity:1;transform:scale(1) rotate(0deg)}
  47%,100%{opacity:0;transform:scale(.62) rotate(0deg)}}
@keyframes gxmnO3{
  0%,27.5%{opacity:0;transform:scale(.45) rotate(-14deg)}
  29.5%{opacity:1;transform:scale(1.1) rotate(4deg)}
  31%,44%{opacity:1;transform:scale(1) rotate(0deg)}
  47%,100%{opacity:0;transform:scale(.62) rotate(0deg)}}
@keyframes gxmnO4{
  0%,34%{opacity:0;transform:scale(.45) rotate(-14deg)}
  36%{opacity:1;transform:scale(1.1) rotate(4deg)}
  37.5%,44%{opacity:1;transform:scale(1) rotate(0deg)}
  47%,100%{opacity:0;transform:scale(.62) rotate(0deg)}}

/* Барабан множителя: строка уезжает вверх ровно на ход. Подмена цифры на
   месте не читается ростом — глазу нужен сдвиг, а не мигание. */
.gxmn-reel{animation:gxmnReel 6s cubic-bezier(.2,.9,.25,1) infinite}
@keyframes gxmnReel{
  0%{transform:translateY(0)}
  8%{transform:translateY(0px)}
  9.6%{transform:translateY(-26px)}
  14.5%{transform:translateY(-26px)}
  16.1%{transform:translateY(-52px)}
  21%{transform:translateY(-52px)}
  22.6%{transform:translateY(-78px)}
  27.5%{transform:translateY(-78px)}
  29.1%{transform:translateY(-104px)}
  34%{transform:translateY(-104px)}
  35.6%{transform:translateY(-130px)}
  44%{opacity:1;transform:translateY(-130px)}
  45.5%{opacity:0;transform:translateY(-130px)}
  46.5%,79%{opacity:0;transform:translateY(0)}
  82%,100%{opacity:1;transform:translateY(0)}}

/* Ноль на месте множителя: приходит вместо барабана, а не поверх него. */
.gxmn-bust{opacity:0;transform-box:fill-box;transform-origin:center;
  animation:gxmnBust 6s ease-out infinite}
@keyframes gxmnBust{
  0%,45%{opacity:0;transform:scale(.6)}
  47%{opacity:1;transform:scale(1.15)}
  49%,76%{opacity:1;transform:scale(1)}
  80%,100%{opacity:0;transform:scale(.92)}}

/* Шкала: одно деление на ход. Шесть делений — всё поле, значит по шкале
   сразу видно, сколько ходов осталось. Гаснет вместе со взрывом. */
.gxmn-bar{transform-box:fill-box;transform-origin:left center;
  animation:gxmnBar 6s cubic-bezier(.2,.9,.25,1) infinite}
@keyframes gxmnBar{
  0%{transform:scaleX(0)}
  8%{transform:scaleX(0.0000)}
  9.6%{transform:scaleX(0.1667)}
  14.5%{transform:scaleX(0.1667)}
  16.1%{transform:scaleX(0.3333)}
  21%{transform:scaleX(0.3333)}
  22.6%{transform:scaleX(0.5000)}
  27.5%{transform:scaleX(0.5000)}
  29.1%{transform:scaleX(0.6667)}
  34%{transform:scaleX(0.6667)}
  35.6%{transform:scaleX(0.8333)}
  44%{transform:scaleX(0.8333)}
  46%,100%{transform:scaleX(0)}}

/* Сканер: узкая полоса под 45°, идёт по полю, пока игрок открывает.
   Гаснет перед взрывом — на взрыве зелёный поперёк поля читается ложью. */
.gxmn-sweep{opacity:0;transform-box:fill-box;transform-origin:center;
  animation:gxmnSweep 6s linear infinite}
@keyframes gxmnSweep{
  0%,4%{opacity:0;transform:translate(-56px,-56px) rotate(45deg)}
  8%{opacity:.9}
  35.5%{opacity:.9}
  38%{opacity:0;transform:translate(56px,56px) rotate(45deg)}
  39%,100%{opacity:0;transform:translate(-56px,-56px) rotate(45deg)}}

.gxmn-b{opacity:0;transform-box:fill-box;transform-origin:center;
  animation:gxmnB 6s ease-out infinite}
@keyframes gxmnB{
  0%,44%{opacity:0;transform:scale(.4)}
  45.5%{opacity:1;transform:scale(1.25)}
  47.5%,76%{opacity:1;transform:scale(1)}
  80%,100%{opacity:0;transform:scale(.9)}}

/* Тряска поля — семь затухающих шагов по 60 мс, как в самой игре. */
.gxmn-shake{transform-box:view-box;transform-origin:center;
  animation:gxmnShake 6s linear infinite}
@keyframes gxmnShake{
  0%,44%{transform:translate(0,0) rotate(0deg)}
  45%{transform:translate(-3px,1.5px) rotate(-1deg)}
  46%{transform:translate(3px,-1.5px) rotate(1deg)}
  47%{transform:translate(-2.4px,1px) rotate(-.7deg)}
  48%{transform:translate(2px,-1px) rotate(.6deg)}
  49%{transform:translate(-1.2px,.6px) rotate(-.3deg)}
  50%{transform:translate(.6px,0) rotate(.15deg)}
  51%,100%{transform:translate(0,0) rotate(0deg)}}

/* Красный залив на весь кадр: взрыв должен доставать до краёв карточки,
   иначе он остаётся событием одной клетки и его пропускают. */
.gxmn-wash{opacity:0;animation:gxmnWash 6s linear infinite}
@keyframes gxmnWash{0%,44%{opacity:0}
  45.5%{opacity:1}60%,100%{opacity:0}}

.gxmn-blast{opacity:0;transform-box:view-box;transform-origin:center;
  animation:gxmnBlast 6s linear infinite}
@keyframes gxmnBlast{0%,44%{opacity:0;transform:scale(.2)}
  48%{opacity:1;transform:scale(1)}
  60%,100%{opacity:0;transform:scale(2.2)}}

/* ── Скретч: фольга уезжает целиком, по ней проходит блик ── */
.gxsc-foil{transform-box:view-box;animation:gxscFoil 5.2s cubic-bezier(.6,0,.3,1) infinite}
@keyframes gxscFoil{0%,24%{transform:translateX(0) rotate(0)}
  58%,90%{transform:translateX(228px) rotate(6deg)}
  100%{transform:translateX(0) rotate(0)}}
.gxsc-shine{animation:gxscShine 5.2s ease-in-out infinite}
@keyframes gxscShine{0%,20%{transform:translateX(0)}48%,100%{transform:translateX(330px)}}
}
 @keyframes gxаре-ball{0%,1.500%{offset-distance:0%}2.632%{offset-distance:0.0000%}3.765%{offset-distance:0.0000%}4.897%{offset-distance:0.0000%}6.029%{offset-distance:0.0000%}7.161%{offset-distance:0.0000%}8.294%{offset-distance:0.0000%}9.426%{offset-distance:2.1140%}10.558%{offset-distance:4.2647%}11.690%{offset-distance:6.4154%}12.823%{offset-distance:8.5662%}13.955%{offset-distance:10.7169%}15.087%{offset-distance:12.8676%}16.219%{offset-distance:15.0184%}17.352%{offset-distance:17.1691%}18.484%{offset-distance:19.3199%}19.616%{offset-distance:21.4706%}20.748%{offset-distance:23.6213%}21.881%{offset-distance:25.7721%}23.013%{offset-distance:27.9228%}24.145%{offset-distance:30.0735%}25.277%{offset-distance:32.2243%}26.410%{offset-distance:34.3750%}27.542%{offset-distance:36.5257%}28.674%{offset-distance:38.6765%}29.806%{offset-distance:40.8272%}30.939%{offset-distance:42.9779%}32.071%{offset-distance:45.1287%}33.203%{offset-distance:47.2794%}34.335%{offset-distance:49.4301%}35.468%{offset-distance:51.5809%}36.600%{offset-distance:53.7316%}37.732%{offset-distance:55.8824%}38.865%{offset-distance:58.0331%}39.997%{offset-distance:60.1838%}41.129%{offset-distance:62.3346%}42.261%{offset-distance:64.4853%}43.394%{offset-distance:66.6360%}44.526%{offset-distance:68.7868%}45.658%{offset-distance:70.9375%}46.790%{offset-distance:73.0882%}47.923%{offset-distance:75.2390%}49.055%{offset-distance:77.3453%}50.187%{offset-distance:79.3580%}51.319%{offset-distance:81.2771%}52.452%{offset-distance:83.1026%}53.584%{offset-distance:84.8344%}54.716%{offset-distance:86.4727%}55.848%{offset-distance:88.0173%}56.981%{offset-distance:89.4684%}58.113%{offset-distance:90.8258%}59.245%{offset-distance:92.0896%}60.377%{offset-distance:93.2597%}61.510%{offset-distance:94.3363%}62.642%{offset-distance:95.3193%}63.774%{offset-distance:96.2086%}64.906%{offset-distance:97.0043%}66.039%{offset-distance:97.7064%}67.171%{offset-distance:98.3149%}68.303%{offset-distance:98.8298%}69.435%{offset-distance:99.2511%}70.568%{offset-distance:99.5787%}71.700%{offset-distance:99.8128%}72.832%{offset-distance:99.9532%}73.965%{offset-distance:100.0000%}100%{offset-distance:100%}}@keyframes gxаре-t0{0%,1.500%{stroke-opacity:0;stroke-dasharray:.01 1752;stroke-dashoffset:0px}2.632%{stroke-opacity:.16;stroke-dasharray:0.01 1752;stroke-dashoffset:0.00px}3.765%{stroke-opacity:.16;stroke-dasharray:0.01 1752;stroke-dashoffset:0.00px}4.897%{stroke-opacity:.16;stroke-dasharray:0.01 1752;stroke-dashoffset:0.00px}6.029%{stroke-opacity:.16;stroke-dasharray:0.01 1752;stroke-dashoffset:0.00px}7.161%{stroke-opacity:.16;stroke-dasharray:0.01 1752;stroke-dashoffset:0.00px}8.294%{stroke-opacity:.16;stroke-dasharray:0.01 1752;stroke-dashoffset:0.00px}9.426%{stroke-opacity:.16;stroke-dasharray:36.47 1752;stroke-dashoffset:0.00px}10.558%{stroke-opacity:.16;stroke-dasharray:44.72 1752;stroke-dashoffset:-28.85px}11.690%{stroke-opacity:.16;stroke-dasharray:44.72 1752;stroke-dashoffset:-65.96px}12.823%{stroke-opacity:.16;stroke-dasharray:44.72 1752;stroke-dashoffset:-103.06px}13.955%{stroke-opacity:.16;stroke-dasharray:44.72 1752;stroke-dashoffset:-140.16px}15.087%{stroke-opacity:.16;stroke-dasharray:44.72 1752;stroke-dashoffset:-177.27px}16.219%{stroke-opacity:.16;stroke-dasharray:44.72 1752;stroke-dashoffset:-214.37px}17.352%{stroke-opacity:.16;stroke-dasharray:44.72 1752;stroke-dashoffset:-251.47px}18.484%{stroke-opacity:.16;stroke-dasharray:44.72 1752;stroke-dashoffset:-288.58px}19.616%{stroke-opacity:.16;stroke-dasharray:44.72 1752;stroke-dashoffset:-325.68px}20.748%{stroke-opacity:.16;stroke-dasharray:44.72 1752;stroke-dashoffset:-362.79px}21.881%{stroke-opacity:.16;stroke-dasharray:44.72 1752;stroke-dashoffset:-399.89px}23.013%{stroke-opacity:.16;stroke-dasharray:44.72 1752;stroke-dashoffset:-436.99px}24.145%{stroke-opacity:.16;stroke-dasharray:44.72 1752;stroke-dashoffset:-474.10px}25.277%{stroke-opacity:.16;stroke-dasharray:44.72 1752;stroke-dashoffset:-511.20px}26.410%{stroke-opacity:.16;stroke-dasharray:44.72 1752;stroke-dashoffset:-548.30px}27.542%{stroke-opacity:.16;stroke-dasharray:44.72 1752;stroke-dashoffset:-585.41px}28.674%{stroke-opacity:.16;stroke-dasharray:44.72 1752;stroke-dashoffset:-622.51px}29.806%{stroke-opacity:.16;stroke-dasharray:44.72 1752;stroke-dashoffset:-659.61px}30.939%{stroke-opacity:.16;stroke-dasharray:44.72 1752;stroke-dashoffset:-696.72px}32.071%{stroke-opacity:.16;stroke-dasharray:44.72 1752;stroke-dashoffset:-733.82px}33.203%{stroke-opacity:.16;stroke-dasharray:44.72 1752;stroke-dashoffset:-770.93px}34.335%{stroke-opacity:.16;stroke-dasharray:44.72 1752;stroke-dashoffset:-808.03px}35.468%{stroke-opacity:.16;stroke-dasharray:44.72 1752;stroke-dashoffset:-845.13px}36.600%{stroke-opacity:.16;stroke-dasharray:44.72 1752;stroke-dashoffset:-882.24px}37.732%{stroke-opacity:.16;stroke-dasharray:44.72 1752;stroke-dashoffset:-919.34px}38.865%{stroke-opacity:.16;stroke-dasharray:44.72 1752;stroke-dashoffset:-956.44px}39.997%{stroke-opacity:.16;stroke-dasharray:44.72 1752;stroke-dashoffset:-993.55px}41.129%{stroke-opacity:.16;stroke-dasharray:44.72 1752;stroke-dashoffset:-1030.65px}42.261%{stroke-opacity:.16;stroke-dasharray:44.72 1752;stroke-dashoffset:-1067.75px}43.394%{stroke-opacity:.16;stroke-dasharray:44.72 1752;stroke-dashoffset:-1104.86px}44.526%{stroke-opacity:.16;stroke-dasharray:44.72 1752;stroke-dashoffset:-1141.96px}45.658%{stroke-opacity:.16;stroke-dasharray:44.72 1752;stroke-dashoffset:-1179.07px}46.790%{stroke-opacity:.16;stroke-dasharray:44.72 1752;stroke-dashoffset:-1216.17px}47.923%{stroke-opacity:.16;stroke-dasharray:44.72 1752;stroke-dashoffset:-1253.27px}49.055%{stroke-opacity:.16;stroke-dasharray:42.82 1752;stroke-dashoffset:-1291.51px}50.187%{stroke-opacity:.16;stroke-dasharray:40.88 1752;stroke-dashoffset:-1328.18px}51.319%{stroke-opacity:.16;stroke-dasharray:38.93 1752;stroke-dashoffset:-1363.23px}52.452%{stroke-opacity:.16;stroke-dasharray:36.98 1752;stroke-dashoffset:-1396.67px}53.584%{stroke-opacity:.16;stroke-dasharray:35.04 1752;stroke-dashoffset:-1428.49px}54.716%{stroke-opacity:.16;stroke-dasharray:33.09 1752;stroke-dashoffset:-1458.70px}55.848%{stroke-opacity:.16;stroke-dasharray:31.14 1752;stroke-dashoffset:-1487.30px}56.981%{stroke-opacity:.16;stroke-dasharray:29.20 1752;stroke-dashoffset:-1514.27px}58.113%{stroke-opacity:.16;stroke-dasharray:27.25 1752;stroke-dashoffset:-1539.64px}59.245%{stroke-opacity:.16;stroke-dasharray:25.30 1752;stroke-dashoffset:-1563.39px}60.377%{stroke-opacity:.16;stroke-dasharray:23.36 1752;stroke-dashoffset:-1585.52px}61.510%{stroke-opacity:.16;stroke-dasharray:21.41 1752;stroke-dashoffset:-1606.04px}62.642%{stroke-opacity:.16;stroke-dasharray:19.47 1752;stroke-dashoffset:-1624.94px}63.774%{stroke-opacity:.16;stroke-dasharray:17.52 1752;stroke-dashoffset:-1642.23px}64.906%{stroke-opacity:.16;stroke-dasharray:15.57 1752;stroke-dashoffset:-1657.91px}66.039%{stroke-opacity:.16;stroke-dasharray:13.63 1752;stroke-dashoffset:-1671.97px}67.171%{stroke-opacity:.16;stroke-dasharray:11.68 1752;stroke-dashoffset:-1684.41px}68.303%{stroke-opacity:.16;stroke-dasharray:9.73 1752;stroke-dashoffset:-1695.24px}69.435%{stroke-opacity:.16;stroke-dasharray:7.79 1752;stroke-dashoffset:-1704.45px}70.568%{stroke-opacity:.16;stroke-dasharray:5.84 1752;stroke-dashoffset:-1712.05px}71.700%{stroke-opacity:.16;stroke-dasharray:3.89 1752;stroke-dashoffset:-1718.04px}72.832%{stroke-opacity:.16;stroke-dasharray:1.95 1752;stroke-dashoffset:-1722.41px}73.965%{stroke-opacity:.16;stroke-dasharray:0.01 1752;stroke-dashoffset:-1725.16px}96.000%,100%{stroke-opacity:0;stroke-dasharray:.01 1752;stroke-dashoffset:-1725.16px}}@keyframes gxаре-t1{0%,1.500%{stroke-opacity:0;stroke-dasharray:.01 1752;stroke-dashoffset:0px}2.632%{stroke-opacity:.34;stroke-dasharray:0.01 1752;stroke-dashoffset:0.00px}3.765%{stroke-opacity:.34;stroke-dasharray:0.01 1752;stroke-dashoffset:0.00px}4.897%{stroke-opacity:.34;stroke-dasharray:0.01 1752;stroke-dashoffset:0.00px}6.029%{stroke-opacity:.34;stroke-dasharray:0.01 1752;stroke-dashoffset:0.00px}7.161%{stroke-opacity:.34;stroke-dasharray:0.01 1752;stroke-dashoffset:0.00px}8.294%{stroke-opacity:.34;stroke-dasharray:0.01 1752;stroke-dashoffset:0.00px}9.426%{stroke-opacity:.34;stroke-dasharray:20.06 1752;stroke-dashoffset:-16.41px}10.558%{stroke-opacity:.34;stroke-dasharray:24.60 1752;stroke-dashoffset:-48.98px}11.690%{stroke-opacity:.34;stroke-dasharray:24.60 1752;stroke-dashoffset:-86.08px}12.823%{stroke-opacity:.34;stroke-dasharray:24.60 1752;stroke-dashoffset:-123.18px}13.955%{stroke-opacity:.34;stroke-dasharray:24.60 1752;stroke-dashoffset:-160.29px}15.087%{stroke-opacity:.34;stroke-dasharray:24.60 1752;stroke-dashoffset:-197.39px}16.219%{stroke-opacity:.34;stroke-dasharray:24.60 1752;stroke-dashoffset:-234.50px}17.352%{stroke-opacity:.34;stroke-dasharray:24.60 1752;stroke-dashoffset:-271.60px}18.484%{stroke-opacity:.34;stroke-dasharray:24.60 1752;stroke-dashoffset:-308.70px}19.616%{stroke-opacity:.34;stroke-dasharray:24.60 1752;stroke-dashoffset:-345.81px}20.748%{stroke-opacity:.34;stroke-dasharray:24.60 1752;stroke-dashoffset:-382.91px}21.881%{stroke-opacity:.34;stroke-dasharray:24.60 1752;stroke-dashoffset:-420.01px}23.013%{stroke-opacity:.34;stroke-dasharray:24.60 1752;stroke-dashoffset:-457.12px}24.145%{stroke-opacity:.34;stroke-dasharray:24.60 1752;stroke-dashoffset:-494.22px}25.277%{stroke-opacity:.34;stroke-dasharray:24.60 1752;stroke-dashoffset:-531.32px}26.410%{stroke-opacity:.34;stroke-dasharray:24.60 1752;stroke-dashoffset:-568.43px}27.542%{stroke-opacity:.34;stroke-dasharray:24.60 1752;stroke-dashoffset:-605.53px}28.674%{stroke-opacity:.34;stroke-dasharray:24.60 1752;stroke-dashoffset:-642.63px}29.806%{stroke-opacity:.34;stroke-dasharray:24.60 1752;stroke-dashoffset:-679.74px}30.939%{stroke-opacity:.34;stroke-dasharray:24.60 1752;stroke-dashoffset:-716.84px}32.071%{stroke-opacity:.34;stroke-dasharray:24.60 1752;stroke-dashoffset:-753.95px}33.203%{stroke-opacity:.34;stroke-dasharray:24.60 1752;stroke-dashoffset:-791.05px}34.335%{stroke-opacity:.34;stroke-dasharray:24.60 1752;stroke-dashoffset:-828.15px}35.468%{stroke-opacity:.34;stroke-dasharray:24.60 1752;stroke-dashoffset:-865.26px}36.600%{stroke-opacity:.34;stroke-dasharray:24.60 1752;stroke-dashoffset:-902.36px}37.732%{stroke-opacity:.34;stroke-dasharray:24.60 1752;stroke-dashoffset:-939.46px}38.865%{stroke-opacity:.34;stroke-dasharray:24.60 1752;stroke-dashoffset:-976.57px}39.997%{stroke-opacity:.34;stroke-dasharray:24.60 1752;stroke-dashoffset:-1013.67px}41.129%{stroke-opacity:.34;stroke-dasharray:24.60 1752;stroke-dashoffset:-1050.77px}42.261%{stroke-opacity:.34;stroke-dasharray:24.60 1752;stroke-dashoffset:-1087.88px}43.394%{stroke-opacity:.34;stroke-dasharray:24.60 1752;stroke-dashoffset:-1124.98px}44.526%{stroke-opacity:.34;stroke-dasharray:24.60 1752;stroke-dashoffset:-1162.09px}45.658%{stroke-opacity:.34;stroke-dasharray:24.60 1752;stroke-dashoffset:-1199.19px}46.790%{stroke-opacity:.34;stroke-dasharray:24.60 1752;stroke-dashoffset:-1236.29px}47.923%{stroke-opacity:.34;stroke-dasharray:24.60 1752;stroke-dashoffset:-1273.40px}49.055%{stroke-opacity:.34;stroke-dasharray:23.55 1752;stroke-dashoffset:-1310.78px}50.187%{stroke-opacity:.34;stroke-dasharray:22.48 1752;stroke-dashoffset:-1346.57px}51.319%{stroke-opacity:.34;stroke-dasharray:21.41 1752;stroke-dashoffset:-1380.75px}52.452%{stroke-opacity:.34;stroke-dasharray:20.34 1752;stroke-dashoffset:-1413.31px}53.584%{stroke-opacity:.34;stroke-dasharray:19.27 1752;stroke-dashoffset:-1444.26px}54.716%{stroke-opacity:.34;stroke-dasharray:18.20 1752;stroke-dashoffset:-1473.59px}55.848%{stroke-opacity:.34;stroke-dasharray:17.13 1752;stroke-dashoffset:-1501.31px}56.981%{stroke-opacity:.34;stroke-dasharray:16.06 1752;stroke-dashoffset:-1527.41px}58.113%{stroke-opacity:.34;stroke-dasharray:14.99 1752;stroke-dashoffset:-1551.90px}59.245%{stroke-opacity:.34;stroke-dasharray:13.92 1752;stroke-dashoffset:-1574.77px}60.377%{stroke-opacity:.34;stroke-dasharray:12.85 1752;stroke-dashoffset:-1596.03px}61.510%{stroke-opacity:.34;stroke-dasharray:11.78 1752;stroke-dashoffset:-1615.68px}62.642%{stroke-opacity:.34;stroke-dasharray:10.71 1752;stroke-dashoffset:-1633.70px}63.774%{stroke-opacity:.34;stroke-dasharray:9.64 1752;stroke-dashoffset:-1650.12px}64.906%{stroke-opacity:.34;stroke-dasharray:8.56 1752;stroke-dashoffset:-1664.92px}66.039%{stroke-opacity:.34;stroke-dasharray:7.49 1752;stroke-dashoffset:-1678.10px}67.171%{stroke-opacity:.34;stroke-dasharray:6.42 1752;stroke-dashoffset:-1689.67px}68.303%{stroke-opacity:.34;stroke-dasharray:5.35 1752;stroke-dashoffset:-1699.62px}69.435%{stroke-opacity:.34;stroke-dasharray:4.28 1752;stroke-dashoffset:-1707.96px}70.568%{stroke-opacity:.34;stroke-dasharray:3.21 1752;stroke-dashoffset:-1714.68px}71.700%{stroke-opacity:.34;stroke-dasharray:2.14 1752;stroke-dashoffset:-1719.79px}72.832%{stroke-opacity:.34;stroke-dasharray:1.07 1752;stroke-dashoffset:-1723.28px}73.965%{stroke-opacity:.34;stroke-dasharray:0.01 1752;stroke-dashoffset:-1725.16px}96.000%,100%{stroke-opacity:0;stroke-dasharray:.01 1752;stroke-dashoffset:-1725.16px}}@keyframes gxаре-t2{0%,1.500%{stroke-opacity:0;stroke-dasharray:.01 1752;stroke-dashoffset:0px}2.632%{stroke-opacity:.62;stroke-dasharray:0.01 1752;stroke-dashoffset:0.00px}3.765%{stroke-opacity:.62;stroke-dasharray:0.01 1752;stroke-dashoffset:0.00px}4.897%{stroke-opacity:.62;stroke-dasharray:0.01 1752;stroke-dashoffset:0.00px}6.029%{stroke-opacity:.62;stroke-dasharray:0.01 1752;stroke-dashoffset:0.00px}7.161%{stroke-opacity:.62;stroke-dasharray:0.01 1752;stroke-dashoffset:0.00px}8.294%{stroke-opacity:.62;stroke-dasharray:0.01 1752;stroke-dashoffset:0.00px}9.426%{stroke-opacity:.62;stroke-dasharray:8.02 1752;stroke-dashoffset:-28.45px}10.558%{stroke-opacity:.62;stroke-dasharray:9.84 1752;stroke-dashoffset:-63.73px}11.690%{stroke-opacity:.62;stroke-dasharray:9.84 1752;stroke-dashoffset:-100.84px}12.823%{stroke-opacity:.62;stroke-dasharray:9.84 1752;stroke-dashoffset:-137.94px}13.955%{stroke-opacity:.62;stroke-dasharray:9.84 1752;stroke-dashoffset:-175.05px}15.087%{stroke-opacity:.62;stroke-dasharray:9.84 1752;stroke-dashoffset:-212.15px}16.219%{stroke-opacity:.62;stroke-dasharray:9.84 1752;stroke-dashoffset:-249.25px}17.352%{stroke-opacity:.62;stroke-dasharray:9.84 1752;stroke-dashoffset:-286.36px}18.484%{stroke-opacity:.62;stroke-dasharray:9.84 1752;stroke-dashoffset:-323.46px}19.616%{stroke-opacity:.62;stroke-dasharray:9.84 1752;stroke-dashoffset:-360.56px}20.748%{stroke-opacity:.62;stroke-dasharray:9.84 1752;stroke-dashoffset:-397.67px}21.881%{stroke-opacity:.62;stroke-dasharray:9.84 1752;stroke-dashoffset:-434.77px}23.013%{stroke-opacity:.62;stroke-dasharray:9.84 1752;stroke-dashoffset:-471.87px}24.145%{stroke-opacity:.62;stroke-dasharray:9.84 1752;stroke-dashoffset:-508.98px}25.277%{stroke-opacity:.62;stroke-dasharray:9.84 1752;stroke-dashoffset:-546.08px}26.410%{stroke-opacity:.62;stroke-dasharray:9.84 1752;stroke-dashoffset:-583.19px}27.542%{stroke-opacity:.62;stroke-dasharray:9.84 1752;stroke-dashoffset:-620.29px}28.674%{stroke-opacity:.62;stroke-dasharray:9.84 1752;stroke-dashoffset:-657.39px}29.806%{stroke-opacity:.62;stroke-dasharray:9.84 1752;stroke-dashoffset:-694.50px}30.939%{stroke-opacity:.62;stroke-dasharray:9.84 1752;stroke-dashoffset:-731.60px}32.071%{stroke-opacity:.62;stroke-dasharray:9.84 1752;stroke-dashoffset:-768.70px}33.203%{stroke-opacity:.62;stroke-dasharray:9.84 1752;stroke-dashoffset:-805.81px}34.335%{stroke-opacity:.62;stroke-dasharray:9.84 1752;stroke-dashoffset:-842.91px}35.468%{stroke-opacity:.62;stroke-dasharray:9.84 1752;stroke-dashoffset:-880.01px}36.600%{stroke-opacity:.62;stroke-dasharray:9.84 1752;stroke-dashoffset:-917.12px}37.732%{stroke-opacity:.62;stroke-dasharray:9.84 1752;stroke-dashoffset:-954.22px}38.865%{stroke-opacity:.62;stroke-dasharray:9.84 1752;stroke-dashoffset:-991.33px}39.997%{stroke-opacity:.62;stroke-dasharray:9.84 1752;stroke-dashoffset:-1028.43px}41.129%{stroke-opacity:.62;stroke-dasharray:9.84 1752;stroke-dashoffset:-1065.53px}42.261%{stroke-opacity:.62;stroke-dasharray:9.84 1752;stroke-dashoffset:-1102.64px}43.394%{stroke-opacity:.62;stroke-dasharray:9.84 1752;stroke-dashoffset:-1139.74px}44.526%{stroke-opacity:.62;stroke-dasharray:9.84 1752;stroke-dashoffset:-1176.84px}45.658%{stroke-opacity:.62;stroke-dasharray:9.84 1752;stroke-dashoffset:-1213.95px}46.790%{stroke-opacity:.62;stroke-dasharray:9.84 1752;stroke-dashoffset:-1251.05px}47.923%{stroke-opacity:.62;stroke-dasharray:9.84 1752;stroke-dashoffset:-1288.15px}49.055%{stroke-opacity:.62;stroke-dasharray:9.42 1752;stroke-dashoffset:-1324.91px}50.187%{stroke-opacity:.62;stroke-dasharray:8.99 1752;stroke-dashoffset:-1360.06px}51.319%{stroke-opacity:.62;stroke-dasharray:8.56 1752;stroke-dashoffset:-1393.60px}52.452%{stroke-opacity:.62;stroke-dasharray:8.14 1752;stroke-dashoffset:-1425.52px}53.584%{stroke-opacity:.62;stroke-dasharray:7.71 1752;stroke-dashoffset:-1455.82px}54.716%{stroke-opacity:.62;stroke-dasharray:7.28 1752;stroke-dashoffset:-1484.51px}55.848%{stroke-opacity:.62;stroke-dasharray:6.85 1752;stroke-dashoffset:-1511.59px}56.981%{stroke-opacity:.62;stroke-dasharray:6.42 1752;stroke-dashoffset:-1537.05px}58.113%{stroke-opacity:.62;stroke-dasharray:6.00 1752;stroke-dashoffset:-1560.89px}59.245%{stroke-opacity:.62;stroke-dasharray:5.57 1752;stroke-dashoffset:-1583.13px}60.377%{stroke-opacity:.62;stroke-dasharray:5.14 1752;stroke-dashoffset:-1603.74px}61.510%{stroke-opacity:.62;stroke-dasharray:4.71 1752;stroke-dashoffset:-1622.74px}62.642%{stroke-opacity:.62;stroke-dasharray:4.28 1752;stroke-dashoffset:-1640.13px}63.774%{stroke-opacity:.62;stroke-dasharray:3.85 1752;stroke-dashoffset:-1655.90px}64.906%{stroke-opacity:.62;stroke-dasharray:3.43 1752;stroke-dashoffset:-1670.05px}66.039%{stroke-opacity:.62;stroke-dasharray:3.00 1752;stroke-dashoffset:-1682.59px}67.171%{stroke-opacity:.62;stroke-dasharray:2.57 1752;stroke-dashoffset:-1693.52px}68.303%{stroke-opacity:.62;stroke-dasharray:2.14 1752;stroke-dashoffset:-1702.83px}69.435%{stroke-opacity:.62;stroke-dasharray:1.71 1752;stroke-dashoffset:-1710.53px}70.568%{stroke-opacity:.62;stroke-dasharray:1.28 1752;stroke-dashoffset:-1716.61px}71.700%{stroke-opacity:.62;stroke-dasharray:0.86 1752;stroke-dashoffset:-1721.07px}72.832%{stroke-opacity:.62;stroke-dasharray:0.43 1752;stroke-dashoffset:-1723.92px}73.965%{stroke-opacity:.62;stroke-dasharray:0.01 1752;stroke-dashoffset:-1725.16px}96.000%,100%{stroke-opacity:0;stroke-dasharray:.01 1752;stroke-dashoffset:-1725.16px}}@keyframes gxаре-cam{0%,47.952%{transform:none}49.252%{transform:translate(-0.05px,-0.49px) scale(1.004)}50.553%{transform:translate(-2.60px,-1.96px) scale(1.014)}51.854%{transform:translate(-5.86px,-4.41px) scale(1.032)}53.154%{transform:translate(-10.42px,-7.84px) scale(1.056)}54.455%{transform:translate(-16.27px,-12.25px) scale(1.087)}55.755%{transform:translate(-8.01px,-17.64px) scale(1.126)}57.056%{transform:translate(-2.40px,-24.01px) scale(1.171)}58.357%{transform:translate(-3.14px,-31.36px) scale(1.224)}59.657%{transform:translate(-3.97px,-38.38px) scale(1.284)}60.958%{transform:translate(-4.90px,-37.52px) scale(1.350)}62.259%{transform:translate(-5.83px,-36.68px) scale(1.417)}63.559%{transform:translate(-13.93px,-35.41px) scale(1.476)}64.860%{transform:translate(-41.80px,-33.90px) scale(1.528)}66.161%{transform:translate(-67.28px,-32.28px) scale(1.574)}67.461%{transform:translate(-89.80px,-30.69px) scale(1.612)}68.762%{transform:translate(-108.87px,-29.25px) scale(1.644)}70.063%{transform:translate(-124.12px,-28.03px) scale(1.668)}71.363%{transform:translate(-127.60px,-27.11px) scale(1.686)}72.664%{transform:translate(-129.55px,-26.53px) scale(1.696)}73.965%{transform:translate(-130.20px,-26.34px) scale(1.700)}93.0%{transform:translate(-130.20px,-26.34px) scale(1.700)}99.0%,100%{transform:none}}
@keyframes gxаре-Puck{0%{opacity:0}1.50%{opacity:1}
  96.00%{opacity:1}98.50%,100%{opacity:0}}

@keyframes gxаре-Dim{0%,73.96%{opacity:1}75.46%,96.00%{opacity:.42}
  98.00%,100%{opacity:1}}
@keyframes gxаре-Glow{0%,73.96%{filter:none}
  75.46%,96.00%{filter:brightness(1.22) saturate(1.1)}
  98.00%,100%{filter:none}}
@keyframes gxаре-Hide{0%,73.96%{opacity:1}75.46%,96.00%{opacity:0}
  98.00%,100%{opacity:1}}
@keyframes gxаре-Mark{0%,73.46%{opacity:0}
  75.46%,96.00%{opacity:1}98.00%,100%{opacity:0}}
@keyframes gxаре-Win{0%,74.46%{opacity:0}
  76.46%,96.00%{opacity:1}98.00%,100%{opacity:0}}
.gxаре .gxar-ball{animation:gxаре-ball 15.50s linear infinite,аре-Puck 15.50s linear infinite}.gxаре .gxar-t0{stroke-width:1.1;stroke-opacity:0;animation:gxаре-t0 15.50s linear infinite}.gxаре .gxar-t1{stroke-width:2.8;stroke-opacity:0;animation:gxаре-t1 15.50s linear infinite}.gxаре .gxar-t2{stroke-width:5.2;stroke-opacity:0;animation:gxаре-t2 15.50s linear infinite}.gxаре .gxar-cam{animation:gxаре-cam 15.50s linear infinite}.gxаре .gxarz{animation:gxаре-Dim 15.50s linear infinite}.gxаре .gxarc{animation:gxаре-Dim 15.50s linear infinite}.gxаре .gxarz-win{animation:gxаре-Glow 15.50s linear infinite}.gxаре .gxarc-win{animation:gxаре-Hide 15.50s linear infinite}.gxаре .gxar-mark{animation:gxаре-Mark 15.50s linear infinite}.gxаре .gxar-win{animation:gxаре-Win 15.50s linear infinite}
.gxar-ball,.gxar-aim,.gxar-t0,.gxar-t1,.gxar-t2{will-change:transform,stroke-dashoffset}
/* Safari (и macOS, и iOS) рисует штрих следа не одним отрезком, а несколькими:
   на карточке появлялись 4–5 лишних «шариков» помимо мяча. Проверено на живом
   WebKit — ни зазор между штрихами, ни will-change, ни отказ от анимации длины
   на это не влияют, поэтому лечим не параметр, а сам приём: в Safari следа
   нет. Мяч со своим свечением остаётся, карточка выглядит чисто. */
@supports (-webkit-hyphens: none) {
  .gxаре .gxar-t0, .gxаре .gxar-t1, .gxаре .gxar-t2 { display: none }
}
.gxar-cam{transform-box:view-box;transform-origin:0 0}
.gxar-mark,.gxar-win{opacity:0}
 .gxjm-marks .gxсл0{opacity:1} .gxjm-marks .gxсл1{opacity:1} .gxjm-marks .gxсл2{opacity:1} @keyframes gxсл3{0%,24.9%{opacity:0}25.0%,100%{opacity:1}} .gxjm-marks .gxсл3{opacity:0;animation:gxсл3 3.6s linear infinite} @keyframes gxсл4{0%,49.9%{opacity:0}50.0%,100%{opacity:1}} .gxjm-marks .gxсл4{opacity:0;animation:gxсл4 3.6s linear infinite} @keyframes gxсл5{0%,74.9%{opacity:0}75.0%,100%{opacity:1}} .gxjm-marks .gxсл5{opacity:0;animation:gxсл5 3.6s linear infinite} @keyframes gxсл6{0%,99.4%{opacity:0}99.5%,100%{opacity:1}} .gxjm-marks .gxсл6{opacity:0;animation:gxсл6 3.6s linear infinite} @keyframes gxсл7{0%,99.4%{opacity:0}99.5%,100%{opacity:1}} .gxjm-marks .gxсл7{opacity:0;animation:gxсл7 3.6s linear infinite} @keyframes gxсл8{0%,99.4%{opacity:0}99.5%,100%{opacity:1}} .gxjm-marks .gxсл8{opacity:0;animation:gxсл8 3.6s linear infinite} @keyframes gxсл9{0%,99.4%{opacity:0}99.5%,100%{opacity:1}} .gxjm-marks .gxсл9{opacity:0;animation:gxсл9 3.6s linear infinite} @keyframes gxсл10{0%,99.4%{opacity:0}99.5%,100%{opacity:1}} .gxjm-marks .gxсл10{opacity:0;animation:gxсл10 3.6s linear infinite} @keyframes gxсл11{0%,99.4%{opacity:0}99.5%,100%{opacity:1}} .gxjm-marks .gxсл11{opacity:0;animation:gxсл11 3.6s linear infinite} @keyframes gxn0{0%{opacity:1}14.04%{opacity:1}14.05%,100%{opacity:0}} .gxrk-nums .gxn0{opacity:0;animation:gxn0 5.6s linear infinite} @keyframes gxn1{0%,14.04%{opacity:0}14.05%{opacity:1}23.14%{opacity:1}23.15%,100%{opacity:0}} .gxrk-nums .gxn1{opacity:0;animation:gxn1 5.6s linear infinite} @keyframes gxn2{0%,23.14%{opacity:0}23.15%{opacity:1}33.22%{opacity:1}33.23%,100%{opacity:0}} .gxrk-nums .gxn2{opacity:0;animation:gxn2 5.6s linear infinite} @keyframes gxn3{0%,33.22%{opacity:0}33.23%{opacity:1}45.68%{opacity:1}45.69%,100%{opacity:0}} .gxrk-nums .gxn3{opacity:0;animation:gxn3 5.6s linear infinite} @keyframes gxn4{0%,45.68%{opacity:0}45.69%{opacity:1}56.99%{opacity:1}57.00%,100%{opacity:0}} .gxrk-nums .gxn4{opacity:0;animation:gxn4 5.6s linear infinite} @keyframes gxn5{0%,56.99%{opacity:0}57.00%{opacity:1}69.06%{opacity:1}69.07%,100%{opacity:0}} .gxrk-nums .gxn5{opacity:0;animation:gxn5 5.6s linear infinite} @keyframes gxn6{0%,69.06%{opacity:0}69.07%{opacity:1}77.99%{opacity:1}78.00%,100%{opacity:0}} .gxrk-nums .gxn6{opacity:0;animation:gxn6 5.6s linear infinite} @keyframes gxn7{0%,77.99%{opacity:0}78.00%{opacity:1}78.00%{opacity:1}78.00%,100%{opacity:0}} .gxrk-nums .gxn7{opacity:0;animation:gxn7 5.6s linear infinite} @keyframes gxs0{0.00%,24.99%{opacity:1}25.00%,100%{opacity:0}} @keyframes gxs1{0%,24.99%{opacity:0}25.00%,49.99%{opacity:1}50.00%,100%{opacity:0}} @keyframes gxs2{0%,49.99%{opacity:0}50.00%,74.99%{opacity:1}75.00%,100%{opacity:0}} @keyframes gxs3{0%,74.99%{opacity:0}75.00%,99.99%{opacity:1}100.00%,100%{opacity:0}} .gxjm-sum .gxs0{opacity:0;animation:gxs0 3.6s linear infinite} .gxjm-sum .gxs1{opacity:0;animation:gxs1 3.6s linear infinite} .gxjm-sum .gxs2{opacity:0;animation:gxs2 3.6s linear infinite} .gxjm-sum .gxs3{opacity:0;animation:gxs3 3.6s linear infinite}


/* ===== Подарки: строки входа в «Профиле» ============================== */
.nft-tag {
  font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .4px;
  color: #ffc93c; background: rgba(255,201,60,.13);
  border: 1px solid rgba(255,201,60,.3); border-radius: 6px;
  padding: 2px 6px; margin-left: 8px; vertical-align: 2px; text-transform: uppercase;
}
.nft-rows { display: flex; flex-direction: column; gap: 9px; margin-bottom: 4px; }
.nft-row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 13px 14px; border-radius: 18px; cursor: pointer;
  font-family: inherit; text-align: left; color: inherit;
  background: var(--card); border: 1px solid var(--border);
  transition: transform .15s var(--ease);
}
.nft-row:active { transform: scale(.985); }
.nft-ic {
  width: 38px; height: 38px; flex: 0 0 38px; border-radius: 13px;
  display: grid; place-items: center;
}
.nft-ic svg { width: 19px; height: 19px; }
.nft-ic-g { background: rgba(47,217,143,.14); color: #2fd98f; }
.nft-ic-v { background: rgba(122,92,240,.16); color: #b3a6ff; }
.nft-tx { flex: 1; min-width: 0; }
.nft-tx b { display: block; font-size: 14.5px; font-weight: 700; }
.nft-tx s {
  display: block; text-decoration: none; font-size: 11.5px;
  color: var(--dim); margin-top: 2px;
}
.nft-ar { color: var(--dim-2); flex: none; }
.nft-ar svg { width: 16px; height: 16px; }


/* ── Подарки: барабан крутится, тормозит, приз забирает карточку ──
   Иконки настоящие, из самой игры: /rub/gifts/png/<ключ>.webp. Цикл длиной
   в 15,5 с, как у Ракетки и Арены, — карточка показывает не «что-то
   крутится», а весь путь до выигрыша, ради которого раздел и открывают.

   Лента занимает 92% высоты: прежняя была вдвое ниже, и под плашку с ценой
   держался запас, который всё остальное время просто пустовал.

   Только transform и opacity — ни одного stroke-dasharray: на нём Арена
   сыпала лишними «шариками» в Safari. */
.gxgf .gfrLent{will-change:transform;
  /* Кривая ровная: резкость на старте и давала рывок. Разгон и торможение
     заданы кадрами, а не изломом кривой. */
  animation:gfrЕдет 7.2s linear infinite}
@keyframes gfrЕдет{
  /* ДВА кадра на весь проезд. Промежуточные кадры и были причиной
     рывков: браузер сглаживает каждый отрезок отдельно, и на стыках
     скорость менялась скачком. Здесь отрезок один, торможение задаёт
     кривая — движение непрерывное по построению.
     Кривая: резкий старт, длинный плавный выкат. Как в опенкейсе. */
  0%      {transform:translateX(0);
           animation-timing-function:cubic-bezier(.08,.62,.12,1)}
  /* 1417 = 82·18 − 59: ячейка 18 (кепка) центром в прицел. Любое другое
     число ставит подарок боком — шаг ленты 82, на глаз не подбирается. */
  56%,100%{transform:translateX(-1417px)}}
.gxgf .gfrReel{animation:gfrЛента 7.2s ease-in-out infinite}
@keyframes gfrЛента{0%,50%{opacity:1}60%,78%{opacity:.1}88%,100%{opacity:1}}
.gxgf .gfrAim{animation:gfrРамка 7.2s ease-in-out infinite}
@keyframes gfrРамка{0%,44%{stroke-opacity:.55}52%{stroke-opacity:1}100%{stroke-opacity:.55}}
.gxgf .gfrCard{opacity:0;transform-box:view-box;transform-origin:100px 62px;
  animation:gfrКарта 7.2s cubic-bezier(.2,1.5,.3,1) infinite}
@keyframes gfrКарта{
  0%,51%  {opacity:0;transform:scale(.5)}
  59%     {opacity:1;transform:scale(1)}
  78%     {opacity:1;transform:scale(1)}
  86%,100%{opacity:0;transform:scale(.92)}}
.gxgf .gfrRays{opacity:0;transform-box:view-box;transform-origin:100px 62px;
  animation:gfrЛучи 7.2s linear infinite}
@keyframes gfrЛучи{
  0%,52%  {opacity:0;transform:rotate(0)}
  61%     {opacity:.5}
  78%     {opacity:.22;transform:rotate(30deg)}
  86%,100%{opacity:0;transform:rotate(35deg)}}
@media (prefers-reduced-motion:reduce){
  .gxgf .gfrLent,.gxgf .gfrReel,.gxgf .gfrAim,
  .gxgf .gfrCard,.gxgf .gfrRays{animation:none!important}
  .gxgf .gfrCard{opacity:1}.gxgf .gfrRays{opacity:.22}}

/* ── Внести подарком: кнопка в листе пополнения и своё окно ──────────
   Кнопка намеренно НЕ такая, как три способа выше: те про сумму в
   рублях, а этот путь сумму не спрашивает. Одинаковый вид обещал бы
   одинаковое поведение. */
.tu-gift-open{
  display:flex;align-items:center;gap:10px;width:100%;margin-top:10px;
  padding:12px 14px;border-radius:16px;cursor:pointer;font:inherit;
  font-size:14.5px;font-weight:600;color:var(--text);
  background:var(--card-2,rgba(255,255,255,.05));
  border:1px solid var(--stroke,rgba(255,255,255,.1));
  transition:background .18s var(--ease),border-color .18s;
}
.tu-gift-open:hover{background:var(--glass-2,rgba(255,255,255,.085))}
.tu-gift-open:focus-visible{outline:2px solid var(--tg-blue-1);outline-offset:2px}
.tu-gift-ic{flex:none;width:28px;height:28px;display:grid;place-items:center;
  border-radius:9px;background:rgba(255,201,60,.16);color:var(--gold)}
.tu-gift-ic svg{width:17px;height:17px}
.tu-gift-arr{margin-left:auto;opacity:.45;display:grid;place-items:center}
.tu-gift-arr svg{width:16px;height:16px}

.tu-gift{display:flex;flex-direction:column;gap:11px;margin-top:4px}
.tu-gift-load,.tu-gift-off{padding:14px;border-radius:14px;font-size:13px;
  line-height:1.5;color:var(--dim);background:var(--card-2,rgba(255,255,255,.05));
  border:1px solid var(--stroke,rgba(255,255,255,.1))}
.tu-gift-to{display:flex;align-items:center;gap:9px;padding:13px 14px;
  border-radius:16px;text-decoration:none;color:inherit;
  background:rgba(42,171,238,.10);border:1px solid rgba(42,171,238,.30)}
.tu-gift-to b{font:700 15px/1 var(--mono,ui-monospace,monospace);color:var(--tg-blue-1)}
.tu-gift-to span{margin-left:auto;font-size:11.5px;color:var(--dim)}
.tu-gift-rules{margin:0;padding:0 0 0 18px;color:var(--dim);
  font-size:12.5px;line-height:1.65}
.tu-gift-rules li{margin:0 0 4px}
.tu-gift-h{font-size:13px;font-weight:700;margin-top:2px}
.tu-gift-row{display:flex;align-items:center;gap:10px;padding:10px 12px;
  border-radius:13px;font-size:13px;
  background:var(--card-2,rgba(255,255,255,.05));
  border:1px solid var(--stroke,rgba(255,255,255,.1))}
.tu-gift-row span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.tu-gift-row b{font-weight:800;color:var(--gold);font-variant-numeric:tabular-nums}
.tu-gift-row i{font-style:normal;font-size:11.5px;font-weight:600;color:var(--dim)}

/* Способ «Подарком» стоит в общем ряду, но ведёт в своё окно, а не
   выбирает оплату. Поэтому вместо галочки выбора у него шеврон: галочка
   обещала бы «выбрал и ввожу сумму», а сумму здесь называет вещь. */
.tu-way-gift .tu-tick-go{background:none;border:0;opacity:.42}
.tu-way-gift .tu-tick-go svg{width:16px;height:16px}
.tu-ic.gift{background:rgba(255,201,60,.16);color:var(--gold)}

/* Строка депозита в истории баланса: суммы нет, потому что подарок лёг
   в инвентарь, а не на счёт. Место под сумму не пустует — там пусто по
   замыслу, и золотой оттенок вида отличает её от денежных строк. */
.row-amount.gift{color:var(--gold);opacity:.9}

/* Пояснение в окне депозита. По центру и обычным абзацем: маркеры списка
   при одном-двух пунктах выглядят обрубком, а не перечислением. */
.tu-gift-note{margin:0;padding:0 6px;text-align:center;font-size:13px;
  line-height:1.55;color:var(--dim)}
.tu-gift-note + .tu-gift-note{margin-top:-4px;font-size:12.5px;
  color:var(--dim-2)}


/* Подарки под процентами — карточка на экране стейкинга. */
.dp-list{display:flex;flex-direction:column;gap:8px;margin:10px 0 12px}
.dp-row{display:flex;align-items:center;gap:10px;padding:9px 11px;
  border-radius:14px;background:rgba(255,255,255,.04);
  border:1px solid rgba(148,163,255,.12)}
.dp-row img{width:34px;height:34px;object-fit:contain;flex:none}
.dp-n{flex:1;min-width:0}
.dp-n b{display:block;font-size:14px;font-weight:700;color:#fff;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dp-n em{font-style:normal;font-size:11.5px;color:#8A94A6;
  font-variant-numeric:tabular-nums}
.dp-off{flex:none;padding:7px 12px;border:0;border-radius:11px;
  font:600 12.5px/1 inherit;color:#E7DEFF;cursor:pointer;
  background:rgba(255,255,255,.07)}
.dp-off:disabled{opacity:.5}
/* Высоту и шрифт кнопке задаёт `.stk-acts button`, а наша кнопка стоит вне
   этого ряда — без своих правил она выходила тонкой полоской. */
.dp-add{display:block;width:100%;height:52px;margin:14px 0 12px;border:0;
  border-radius:16px;cursor:pointer;font-family:inherit;font-size:15.5px;
  font-weight:800;color:#fff;
  transition:transform .16s cubic-bezier(.22,1,.36,1)}
.dp-add:active{transform:scale(.98)}
.stk-split{margin:-4px 0 10px;font-size:12.5px;letter-spacing:0;
  text-transform:none;color:#8A94A6;font-variant-numeric:tabular-nums}
.dp-pick{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
  margin:10px 0 12px;max-height:46vh;overflow-y:auto}
.dp-cell{display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:10px 6px;border:1px solid rgba(148,163,255,.14);border-radius:14px;
  background:#121826;color:#fff;cursor:pointer}
.dp-cell img{width:44px;height:44px;object-fit:contain}
.dp-cell b{font-size:11.5px;font-weight:700;text-align:center;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.dp-cell em{font-style:normal;font-size:11px;color:#8A94A6;
  font-variant-numeric:tabular-nums}
.dp-cell:disabled{opacity:.42;cursor:default}
.dp-cell.выбр{border-color:#7C6BFF;background:#1a2136;
  box-shadow:0 0 0 1px #7C6BFF inset}
/* Переключатель «Рублями / Подарком» — тот же приём, что в Ракетке, но
   там он живёт в своём файле, и общего класса у них нет. */
.дар-чем{display:flex;gap:6px;padding:4px;margin:2px 0 12px;border-radius:16px;
  background:rgba(255,255,255,.05)}
/* Шрифт задаём по частям. Короткая запись `font: 800 14.5px/1 inherit`
   не работает: последним в ней идёт СЕМЕЙСТВО, а `inherit` семейством
   быть не может — правило разбиралось неверно, и кнопка брала системный
   шрифт вместо шрифта аппки. */
.дар-чем button{flex:1;padding:11px 0;border:0;border-radius:12px;
  background:transparent;color:#8A94A6;cursor:pointer;
  font-family:inherit;font-size:14.5px;font-weight:800;line-height:1;
  transition:background .18s,color .18s}
.дар-чем button.on{background:linear-gradient(92deg,#4c6bff,#8b5cf6);color:#fff}
.дар-чем button:disabled{opacity:.4;cursor:default}

.dp-cell.дорого{opacity:.42}

/* Вывод подарком: подобранная вещь — СТРОКОЙ, как «Номер карты» рядом.
   Панель с крупной картинкой выбивалась из листа: там всё тонкими рядами. */
.gp-box{display:flex;align-items:center;gap:12px;margin:0 0 8px;
  padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.05);
  border:1px solid rgba(148,163,255,.16)}
.gp-art{width:56px;height:56px;object-fit:contain;flex:none}
.gp-nm{flex:1;min-width:0;font-size:14.5px;font-weight:700;color:#fff;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gp-pr{font-style:normal;font-family:var(--mono);font-size:13.5px;color:#8B93AD;
  font-variant-numeric:tabular-nums;flex:none}
.gp-wait{font-size:12.5px;color:#8B93AD;padding:2px 0}
.gp-note{font-size:12px;line-height:1.5;color:#7C889F;margin:-4px 0 10px;
  padding:0 2px}
.gp-note b{color:#fff;font-weight:700}

/* Окно вывода — НА ВЕСЬ ЭКРАН. Узкая карточка посреди экрана была здесь
   единственной: ширина зажата, половина высоты пустует, а кнопка стоит у
   середины, куда палец не тянется. */
.burst.burst-sheet{place-items:end stretch;padding:0}
/* Высота — ПО СОДЕРЖИМОМУ, а не во весь экран. Растянутый лист оставлял
   у карты и крипты треть экрана пустой: содержимого там на три строки, а
   кнопку прижимало к самому низу. Подарок и так высокий — картинка. */
.burst.burst-sheet .gate{
  width:100%;max-width:none;height:auto;max-height:92vh;
  border-radius:26px 26px 0 0;
  display:flex;flex-direction:column;overflow-y:auto;
  padding:calc(16px + env(safe-area-inset-top, 0px)) 18px
          calc(18px + env(safe-area-inset-bottom, 0px));
  animation:reqUp .28s cubic-bezier(.22,1,.36,1)}
@keyframes reqUp{from{transform:translateY(20px);opacity:0}
                 to{transform:none;opacity:1}}
/* Кнопку к низу больше не прижимаем: лист сам по содержимому, и
   разрыва перед ней не остаётся. */
.burst.burst-sheet #reqGo{margin-top:14px}
.burst.burst-sheet #reqCancel{margin-top:10px}
.burst.burst-sheet .gate-ic .ic{font-size:44px;margin-bottom:8px}
.burst.burst-sheet .gate-title{font-size:19px;margin-bottom:4px}

/* Пилюли способов: значки разной природы (svg у крипты, иконка у карты и
   подарка) вставали на разной высоте и обрезались сверху. Кладём каждый в
   коробку одного размера — тогда все три стоят на одной линии. */
.burst.burst-sheet .req-methods-v2{gap:8px;margin-bottom:12px}
/* Выравниваем ОТ ВЕРХА, а не по центру: у подарка нет второй строки с
   минимумом, и при центрировании его значок уезжал ниже остальных на
   одиннадцать пикселей. */
.burst.burst-sheet .req-methods-v2 .req-m{
  display:flex;flex-direction:column;flex-wrap:nowrap;
  align-items:center;justify-content:flex-start;gap:5px;
  height:auto;min-height:80px;padding:13px 6px 10px}
.burst.burst-sheet .req-methods-v2 .req-m > *:first-child{
  width:26px;height:26px;flex:none;display:block;font-size:22px;line-height:26px}
/* Значок крипты приходит своим svg с зашитым размером — дожимаем и его. */
.burst.burst-sheet .req-methods-v2 .req-m > *:first-child svg,
.burst.burst-sheet .req-methods-v2 .req-m > svg:first-child{
  width:26px;height:26px;display:block}
.burst.burst-sheet .req-m-min{flex-basis:auto;margin:0}

/* На весь экран подарок показываем КРУПНО: под ним всё равно пустовало
   пол-листа, а это главное, ради чего человек сюда пришёл — он должен
   разглядеть вещь, а не угадывать её по значку. */
.burst.burst-sheet .gp-box{
  flex-direction:column;gap:6px;padding:14px 16px;border-radius:20px;
  margin-bottom:4px}
.burst.burst-sheet .gp-art{width:92px;height:92px}
.burst.burst-sheet .gp-nm{flex:none;font-size:18px;text-align:center;
  white-space:normal}
.burst.burst-sheet .gp-pr{font-size:15.5px;color:#fff}
.burst.burst-sheet .gp-note{text-align:center;font-size:13px;margin:0 0 6px}

/* Полный экран — значит и поля под него. Карта и крипта оставались с
   размерами узкой карточки: мелкие строки посреди пустоты. */
.burst.burst-sheet .req-input,
.burst.burst-sheet .req-bank{
  height:56px;font-size:16px;border-radius:16px;margin-bottom:10px}
.burst.burst-sheet .req-bank{padding-right:40px}
.burst.burst-sheet #reqWallet{font-size:14.5px}
.burst.burst-sheet #reqWallet .btn{height:52px;font-size:16px;border-radius:16px}
.burst.burst-sheet #reqGo{height:56px;font-size:17px;border-radius:18px}
/* Подпись про списание и сдачу — крупнее: это главная цифра экрана. */
.burst.burst-sheet .gp-note{font-size:14.5px;line-height:1.45;margin:2px 0 8px}
.burst.burst-sheet .gate-ic{display:flex;justify-content:center;
  align-items:center;margin-bottom:8px}
.burst.burst-sheet .gate-ic > *{margin:0}
.burst.burst-sheet .gate-ic svg{width:40px;height:40px}

/* профиль: блок баланса убран (01.09.2026) */
.pf > .pf-bh,
.pf > .pf-cards,
.pf > .pf-act { display: none !important; }

/* стейкинг: голова экрана — три числа и пересчёт (01.09.2026) */
.s2h{padding:16px 15px 15px}
.s2-trio{display:flex;gap:0}
.s2-trio>div{flex:1;min-width:0;text-align:center;padding:0 3px}
.s2-trio>div+div{border-left:1px solid rgba(255,255,255,.1)}
.s2-trio b{display:block;font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:22px;font-weight:800;letter-spacing:-.045em;line-height:1.06;white-space:nowrap}
.s2-trio s{display:block;margin-top:5px;font-size:11px;line-height:13.5px;
  font-weight:600;color:#8e9cb2;text-decoration:none}
.s2-sky{color:var(--ai-sky)} .s2-grn{color:var(--ai-green)}
.s2-sl{margin-top:16px}
.s2-slt{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:9px}
.s2-slt span{font-size:11.5px;font-weight:600;color:var(--dim)}
.s2-slt b{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:14.5px;
  font-weight:800;letter-spacing:-.03em;color:var(--text)}
.s2-tr{position:relative;height:8px;border-radius:99px;background:var(--track);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.4)}
.s2-tr i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(135deg,var(--ai-blue),var(--ai-violet))}
.s2-tr u{position:absolute;top:50%;width:22px;height:22px;border-radius:50%;background:#fff;
  transform:translate(-50%,-50%);text-decoration:none;
  box-shadow:0 3px 10px rgba(0,0,0,.55),0 0 0 4px rgba(61,109,242,.28)}
.s2-en{display:flex;justify-content:space-between;margin-top:7px;font-size:10.5px;
  font-weight:600;color:var(--dim-2)}
.s2-split{display:flex;gap:10px;margin-top:12px;font-size:11.5px;color:var(--dim)}
.s2-split span{flex:1;padding:8px 10px;border-radius:12px;background:rgba(8,11,18,.4)}
.s2-split b{display:block;margin-top:3px;font-family:var(--mono);
  font-variant-numeric:tabular-nums;font-size:15px;font-weight:800;
  letter-spacing:-.03em;color:var(--text)}
.s2-addc{margin-top:13px;font-size:11.5px;font-weight:600;color:var(--dim)}
.s2-chips{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:7px}
.s2-chips i{font-style:normal;height:34px;border-radius:12px;display:flex;
  align-items:center;justify-content:center;font-family:var(--mono);
  font-variant-numeric:tabular-nums;font-size:12.5px;font-weight:700;
  letter-spacing:-.03em;color:#c3cfe2;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);cursor:pointer}
.s2-chips i.on{color:#fff;background:rgba(61,109,242,.3);
  border-color:rgba(127,166,255,.62);box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.s2-delta{display:flex;align-items:center;gap:6px;margin-top:10px;padding:9px 11px;
  border-radius:14px;background:rgba(62,207,142,.09);
  border:1px solid rgba(62,207,142,.24);font-size:11.5px;line-height:15px;
  color:#9fcdb8;white-space:nowrap;overflow:hidden}
.s2-delta b{font-family:var(--mono);font-variant-numeric:tabular-nums;
  letter-spacing:-.03em;font-size:12.5px;font-weight:800;color:var(--ai-green)}
.s2-delta em{font-style:normal;font-family:var(--mono);
  font-variant-numeric:tabular-nums;letter-spacing:-.03em;font-size:12.5px;
  font-weight:800;color:#fff}
.s2-delta span{color:#63866f;font-weight:700}
.s2-base{margin-top:12px;padding-top:11px;
  border-top:1px solid rgba(255,255,255,.09);font-size:11.5px;line-height:16px;
  color:#8b98ad}
.s2-base b{color:#fff;font-weight:750}
.s2-base .stk-badge{margin-left:6px;vertical-align:middle}

/* стейкинг: рабочий ползунок (01.09.2026) */
.s2-rng{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:99px;
  background:var(--track);box-shadow:inset 0 1px 2px rgba(0,0,0,.4);outline:none;margin:0}
.s2-rng::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;
  background:#fff;border:0;cursor:grab;
  box-shadow:0 3px 10px rgba(0,0,0,.55),0 0 0 4px rgba(61,109,242,.28)}
.s2-rng::-webkit-slider-thumb:active{cursor:grabbing}
.s2-rng::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#fff;border:0;
  box-shadow:0 3px 10px rgba(0,0,0,.55),0 0 0 4px rgba(61,109,242,.28)}
.s2-rng::-moz-range-track{height:8px;border-radius:99px;background:var(--track)}
.s2-q{padding:2px 7px}
.s2-q em{margin:0}
/* Шапка листа стейкинга — та же, что у игр: сумма и «Пополнить» не должны
   разъезжаться на узких телефонах. */
#stkLayer .jp-money{display:flex;align-items:center;gap:7px;flex:none}

/* стейкинг: доход с каждого подарка (01.09.2026) */
.g2-sum{padding:14px 15px}
.g2-srow{display:flex;align-items:center;gap:11px}
.g2-ic{flex:none;width:36px;height:36px;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--ai-blue),var(--ai-violet));color:#fff}
.g2-ic svg{width:19px;height:19px}
.g2-st{flex:1;min-width:0}
.g2-st b{display:block;font-size:15px;font-weight:750;color:var(--text)}
.g2-st s{display:block;text-decoration:none;font-size:11.5px;color:var(--dim);margin-top:2px}
.g2-big{flex:none;font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:23px;font-weight:800;letter-spacing:-.045em;color:var(--ai-sky)}
.g2-split{display:flex;gap:10px;margin-top:12px}
.g2-split>div{flex:1;padding:9px 11px;border-radius:13px;background:rgba(8,11,18,.4)}
.g2-split em{display:block;font-style:normal;font-size:11px;color:var(--dim)}
.g2-split b{display:block;margin-top:3px;font-family:var(--mono);
  font-variant-numeric:tabular-nums;font-size:16px;font-weight:800;
  letter-spacing:-.035em;color:var(--text)}
.g2-earn{display:flex;align-items:baseline;justify-content:space-between;
  margin-top:12px;padding-top:11px;border-top:1px solid rgba(255,255,255,.08)}
.g2-earn em{font-style:normal;font-size:11.5px;color:var(--dim)}
.g2-earn b{font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:18px;font-weight:800;letter-spacing:-.04em;color:var(--ai-green)}
.g2-note{margin:10px 0 12px;padding:11px 12px;border-radius:14px;
  background:rgba(255,255,255,.04);font-size:12.5px;line-height:17px;color:#9fadc2}
.g2-note b{color:#fff;font-weight:750}
.g2-list{display:flex;flex-direction:column}
.g2-row{display:flex;align-items:center;gap:11px;padding:10px 0}
.g2-row+.g2-row{border-top:1px solid rgba(255,255,255,.06)}
.g2-img{flex:none;width:46px;height:46px;object-fit:contain;
  background:none;padding:0;border-radius:0}
.g2-n{flex:1;min-width:0}
.g2-n b{display:block;font-size:14.5px;font-weight:700;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.g2-n s{display:block;text-decoration:none;margin-top:2px;font-family:var(--mono);
  font-variant-numeric:tabular-nums;font-size:12.5px;font-weight:700;color:var(--ai-sky)}
.g2-day{flex:none;text-align:right}
.g2-day b{display:block;font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:14px;font-weight:800;letter-spacing:-.03em;color:var(--ai-green)}
.g2-day s{display:block;text-decoration:none;font-size:10.5px;color:var(--dim-2);margin-top:1px}
.g2-lab{margin:14px 0 8px;font-size:11.5px;font-weight:600;color:var(--dim)}
.g2-shelf{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.g2-cell{padding:8px 5px;border-radius:14px;text-align:center;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09)}
.g2-cell img{width:42px;height:42px;object-fit:contain}
.g2-cell b{display:block;margin-top:4px;font-size:10.5px;font-weight:700;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.g2-cell s{display:block;text-decoration:none;margin-top:2px;font-family:var(--mono);
  font-variant-numeric:tabular-nums;font-size:11px;font-weight:700;color:var(--ai-sky)}
.g2-cell u{display:block;text-decoration:none;margin-top:1px;font-family:var(--mono);
  font-variant-numeric:tabular-nums;font-size:10px;font-weight:700;color:var(--ai-green)}
.g2-put{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  height:46px;margin-top:12px;border:1px solid rgba(255,255,255,.12);border-radius:16px;
  background:rgba(255,255,255,.06);color:var(--text);font:700 14.5px/1 inherit;cursor:pointer}
.g2-put svg{width:18px;height:18px}

/* стейкинг: чистая карточка подарков и кнопка игр (01.09.2026) */
/* Заголовок карточки и счётчик рядом: оба ломались на две строки и карточка
   разъезжалась. Название ужимаем, счётчик переносить запрещаем. */
.g2-t{align-items:center;gap:10px}
.g2-t b{font-size:15px;line-height:1.2}
.g2-t u{flex:none;white-space:nowrap;text-decoration:none;font-size:11.5px;
  font-weight:700;color:var(--dim);font-family:var(--mono);
  font-variant-numeric:tabular-nums}
.g2-note{margin:9px 0 11px;padding:10px 12px;font-size:12.5px;line-height:17px}
/* Кнопка «Сыграть и поднять лимит»: была плоской строкой и терялась среди
   пояснений — это единственный путь поднять потолок вклада, он должен звать. */
.g2-play{margin-top:12px;padding:13px 14px;border-radius:16px;
  background:linear-gradient(135deg,var(--ai-blue),var(--ai-violet));
  border:0;box-shadow:0 12px 26px -14px rgba(61,109,242,.95);cursor:pointer}
.g2-play span{color:#fff;font-weight:750;font-size:14.5px}
.g2-play i{background:rgba(255,255,255,.22);color:#fff}
.g2-play u{color:rgba(255,255,255,.8)}
.g2-play:active{transform:scale(.985)}

/* стейкинг: знак вопроса у лимита вложения (01.09.2026) */
.s2-q2{display:inline-flex;align-items:center;justify-content:center;
  width:17px;height:17px;margin-left:5px;border-radius:50%;text-decoration:none;
  vertical-align:middle;background:rgba(127,166,255,.18);
  border:1px solid rgba(127,166,255,.4);color:var(--ai-sky);
  font-family:-apple-system,system-ui,sans-serif;font-size:11px;font-weight:800;
  line-height:1;cursor:pointer}
.s2-q2:active{opacity:.6}

/* стейкинг: компактная голова (01.09.2026) */
.s2h{padding:14px 15px 13px}
.s2-trio b{font-size:21px}
.s2-trio s{margin-top:3px;font-size:11px;white-space:nowrap}
.s2-sl{margin-top:13px}
.s2-slt{margin-bottom:7px}
/* Строка пересчёта была карточкой и занимала место даже пустой. Тонкая
   строка: цифры видно, воздуха нет. */
.s2-delta{margin-top:9px;padding:7px 10px;border-radius:11px;gap:5px;
  font-size:11px;line-height:14px}
.s2-delta b{font-size:12px}
.s2-hint{color:#5f7a6b;font-weight:600}
.s2-base{margin-top:10px;padding-top:9px;font-size:11.5px;line-height:15px}

/* профиль: карточки стейкинга и инвентаря, пока админам (01.09.2026) */
.pf-h i{font-style:normal;float:right;font-weight:600;font-size:11.5px;color:var(--dim-2)}
.p2-card{margin:0 0 4px;padding:14px 15px;border-radius:20px;background:var(--card);
  border:1px solid var(--border);width:100%;text-align:left;display:block}
.p2-top{display:flex;align-items:center;gap:11px}
.p2-ic{flex:none;width:38px;height:38px;border-radius:13px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--ai-blue),var(--ai-violet));color:#fff}
.p2-ic svg{width:19px;height:19px}
.p2-gift{background:linear-gradient(135deg,#7a5cf0,#b39dff)}
.p2-t{flex:1;min-width:0}
.p2-t b{display:block;font-size:15px;font-weight:750;color:var(--text)}
.p2-t s{display:block;text-decoration:none;margin-top:2px;font-size:11.5px;color:var(--dim)}
.p2-apr{flex:none;text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:21px;font-weight:800;letter-spacing:-.04em;color:var(--ai-lilac)}
.p2-apr u{text-decoration:none;font-size:.62em}
.p2-apr s{display:block;text-decoration:none;font-family:inherit;font-size:10.5px;
  font-weight:600;color:var(--dim-2);letter-spacing:0;margin-top:1px}
.p2-sum{flex:none;text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:20px;font-weight:800;letter-spacing:-.04em;color:var(--ai-sky)}
.p2-sum s{display:block;text-decoration:none;font-size:10.5px;font-weight:600;
  color:var(--dim-2);letter-spacing:0;margin-top:1px}
.p2-three{display:flex;gap:9px;margin-top:13px}
.p2-three>div{flex:1;min-width:0;padding:9px 10px;border-radius:13px;background:rgba(8,11,18,.4)}
.p2-three em{display:block;font-style:normal;font-size:10.5px;color:var(--dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p2-three b{display:block;margin-top:3px;font-family:var(--mono);
  font-variant-numeric:tabular-nums;font-size:16px;font-weight:800;letter-spacing:-.04em}
.p2-sky{color:var(--ai-sky)} .p2-grn{color:var(--ai-green)}
.p2-note{margin-top:11px;padding:9px 11px;border-radius:12px;background:rgba(255,255,255,.04);
  font-size:11.5px;line-height:16px;color:#8b98ad}
.p2-hint{margin-top:11px;padding:10px 12px;border-radius:13px;
  background:rgba(179,157,255,.1);border:1px solid rgba(179,157,255,.22);
  font-size:12px;line-height:16.5px;color:#c3b7ea}
.p2-hint b{color:#fff;font-weight:750}
.p2-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:11px}
.p2-cell{padding:9px 5px;border-radius:14px;text-align:center;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09)}
.p2-cell img{width:54px;height:54px;object-fit:contain}
.p2-cell b{display:block;margin-top:5px;font-size:11px;font-weight:700;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.p2-cell s{display:block;text-decoration:none;margin-top:2px;font-family:var(--mono);
  font-variant-numeric:tabular-nums;font-size:11.5px;font-weight:700;color:var(--ai-sky)}
.p2-more{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:10px;
  padding:10px;border-radius:13px;background:rgba(255,255,255,.05);
  font-size:12.5px;font-weight:600;color:var(--dim)}
.p2-more svg{width:14px;height:14px}
.p2-empty{margin-top:11px;font-size:12.5px;color:var(--dim)}

/* профиль: компактная карточка стейкинга (01.09.2026) */
.p2-tap{cursor:pointer;transition:transform .15s,border-color .15s}
.p2-tap:active{transform:scale(.99);border-color:rgba(148,163,255,.45)}
.p2-card .p2-ar{flex:none;margin-left:2px;color:var(--dim-2);display:flex}
.p2-card .p2-ar svg{width:15px;height:15px}
/* Доход одной строкой вместо трёх плиток: два числа рядом читаются быстрее,
   чем три коробки, и карточка становится вдвое ниже. */
.p2-line{display:flex;gap:9px;margin-top:11px;padding-top:10px;
  border-top:1px solid rgba(255,255,255,.08)}
.p2-line>span{flex:1;display:flex;align-items:baseline;justify-content:space-between;
  gap:8px;padding:0 2px}
.p2-line em{font-style:normal;font-size:11.5px;color:var(--dim)}
.p2-line b{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:15px;
  font-weight:800;letter-spacing:-.035em;color:var(--ai-green)}
.p2-line>span+span{border-left:1px solid rgba(255,255,255,.08);padding-left:11px}

/* стейкинг: подпись «можно застейкать» в одну строку (01.09.2026) */
.s2-trio s{font-size:10.5px;letter-spacing:-.01em}

/* профиль: друзья и бонусы под макет, пока админам (01.09.2026) */
.f2-card{margin:0 0 12px;padding:15px;border-radius:22px;
  background:linear-gradient(150deg,#151b2a,#12161e);border:1px solid var(--border)}
.f2-top{display:flex;align-items:center;gap:11px}
.f2-ic{flex:none;width:38px;height:38px;border-radius:13px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--ai-blue),var(--ai-violet));color:#fff}
.f2-ic svg{width:19px;height:19px}
.f2-t{flex:1;min-width:0}
.f2-t b{display:block;font-size:15.5px;font-weight:750;color:var(--text)}
.f2-t s{display:block;text-decoration:none;margin-top:2px;font-size:11.5px;color:var(--dim)}
.f2-sum{flex:none;font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:22px;font-weight:800;letter-spacing:-.045em;color:var(--ai-sky)}
.f2-next{display:flex;align-items:center;gap:11px;margin-top:13px;padding:11px 12px;
  border-radius:16px;background:rgba(62,207,142,.09);border:1px solid rgba(62,207,142,.26)}
.f2-bb{flex:none;width:34px;height:34px;border-radius:11px;object-fit:contain;background:#111}
.f2-nt{flex:1;min-width:0}
.f2-nt b{display:block;font-size:13.5px;font-weight:750;color:var(--text)}
.f2-nt em{font-style:normal;font-family:var(--mono);font-variant-numeric:tabular-nums;
  color:var(--ai-green);letter-spacing:-.03em}
.f2-nt s{display:block;text-decoration:none;margin-top:3px;font-size:11.5px;
  line-height:15.5px;color:#8fae9e}
.f2-lad{position:relative;margin-top:26px}
.f2-here{position:absolute;top:-22px;transform:translateX(-50%);white-space:nowrap;
  padding:3px 9px;border-radius:99px;font-size:11px;font-weight:700;color:#fff;
  background:linear-gradient(135deg,var(--ai-blue),var(--ai-violet))}
.f2-here::after{content:"";position:absolute;left:50%;bottom:-4px;width:8px;height:8px;
  transform:translateX(-50%) rotate(45deg);background:var(--ai-violet)}
.f2-bars{display:flex;align-items:flex-end;gap:3px;height:34px}
.f2-bars i{flex:1;border-radius:4px;background:rgba(255,255,255,.09)}
.f2-bars i.d{background:linear-gradient(180deg,var(--ai-violet),var(--ai-blue))}
.f2-bars i.c{background:var(--ai-lilac);box-shadow:0 0 12px rgba(179,157,255,.7)}
.f2-ends{display:flex;justify-content:space-between;margin-top:7px;font-size:10.5px;
  font-weight:600;color:var(--dim-2)}
.f2-foot{margin-top:10px;font-size:11.5px;line-height:16px;color:#8b98ad}
.f2-card .rev-row,.f2-card #revRow{margin-top:11px}

/* профиль: кнопка «Стейкать» (01.09.2026) */
.p2-go{display:flex;align-items:center;justify-content:center;height:44px;margin-top:12px;
  border-radius:15px;font-size:15px;font-weight:750;color:#fff;
  background:linear-gradient(135deg,var(--ai-blue),var(--ai-violet));
  box-shadow:0 12px 26px -14px rgba(61,109,242,.95)}
.p2-tap:active .p2-go{opacity:.9}

/* стейкинг: ставка крупно на всю ширину (01.09.2026) */
.s2-rate{display:flex;margin-top:13px;padding-top:12px;
  border-top:1px solid rgba(255,255,255,.09)}
.s2-rate>div{flex:1;min-width:0;text-align:center;padding:0 4px}
.s2-rate>div+div{border-left:1px solid rgba(255,255,255,.1)}
.s2-rate b{display:block;font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:27px;font-weight:900;letter-spacing:-.05em;line-height:1.02;
  color:var(--ai-lilac);white-space:nowrap}
.s2-rate b u{text-decoration:none;font-size:.56em;font-weight:800;
  margin-left:.06em;opacity:.85}
.s2-rate s{display:block;margin-top:5px;text-decoration:none;font-size:11.5px;
  font-weight:600;color:var(--dim);white-space:nowrap}
/* Знак вопроса переехал в подпись: у большого числа он спорил с ним за
   внимание, а объяснение нужно не всем и не сразу. */
.s2-rate .s2-q{display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;margin-left:4px;border-radius:50%;vertical-align:middle;
  font-style:normal;background:rgba(179,157,255,.18);
  border:1px solid rgba(179,157,255,.42);color:var(--ai-lilac);
  font-family:-apple-system,system-ui,sans-serif;font-size:10.5px;font-weight:800;
  line-height:1;cursor:pointer}
.s2-rate .s2-q:active{opacity:.6}

/* стейкинг: ставка плашкой в карточке «В стейкинге» (01.09.2026) */
.g2-apr{display:inline-block;margin-right:7px;padding:2px 8px;border-radius:8px;
  font-style:normal;font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:11.5px;font-weight:900;letter-spacing:-.02em;color:var(--ai-lilac);
  background:rgba(179,157,255,.16);border:1px solid rgba(179,157,255,.36);
  vertical-align:middle}

/* задания: вид «дорожка», пока админам (01.09.2026) */
.zd-head{margin:8px 16px 0;padding:15px;border-radius:20px;background:var(--card);
  border:1px solid var(--border)}
.zd-big{display:flex;align-items:baseline;gap:2px;font-family:var(--mono);
  font-variant-numeric:tabular-nums;font-size:29px;font-weight:900;
  letter-spacing:-.05em;color:var(--ai-sky)}
.zd-big i{font-style:normal;font-family:inherit;font-size:.58em;font-weight:800;
  margin-right:.14em;color:var(--dim)}
.zd-big u{text-decoration:none;font-size:.56em;font-weight:800;margin-left:.06em;opacity:.9}
.zd-big s{margin-left:auto;text-align:right;text-decoration:none;font-family:
  -apple-system,system-ui,sans-serif;font-size:11.5px;font-weight:600;
  letter-spacing:0;line-height:14px;color:var(--dim)}
.zd-trio{display:flex;margin-top:13px;padding-top:12px;
  border-top:1px solid rgba(255,255,255,.09)}
.zd-trio>div{flex:1;min-width:0;padding:0 4px}
.zd-trio>div+div{border-left:1px solid rgba(255,255,255,.1);padding-left:11px}
.zd-trio b{display:block;font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:18px;font-weight:800;letter-spacing:-.04em;color:var(--text)}
.zd-trio b u{text-decoration:none;font-size:.58em;font-weight:800;margin-left:.06em;opacity:.85}
.zd-trio s{display:block;margin-top:4px;text-decoration:none;font-size:10.5px;
  line-height:13px;font-weight:600;color:var(--dim)}
.zd-grn{color:var(--ai-green)!important}
.zd-note{margin-top:11px;padding-top:10px;border-top:1px solid rgba(255,255,255,.09);
  font-size:11.5px;line-height:16px;color:#8b98ad}
.zd-note b{color:#fff;font-weight:750}
.zd-lab{display:flex;align-items:baseline;gap:8px;margin:18px 18px 9px;
  font-size:13px;font-weight:700;color:var(--text)}
.zd-lab i{font-style:normal;margin-left:auto;font-size:11.5px;font-weight:600;color:var(--dim-2)}
.zd-card{margin:0 16px;padding:14px 15px;border-radius:20px;background:var(--card);
  border:1px solid var(--border)}
.zd-top{display:flex;align-items:center;gap:11px}
.zd-logo{flex:none;width:44px;height:44px;border-radius:14px;object-fit:contain;
  background:#fff;padding:3px}
.zd-logo-t{display:grid;place-items:center;background:var(--card-2);color:#fff;
  font:800 15px/1 inherit}
.zd-t{flex:1;min-width:0}
.zd-t b{display:block;font-size:16px;font-weight:800;color:var(--text)}
.zd-t s{display:block;margin-top:2px;text-decoration:none;font-size:11.5px;color:var(--dim)}
.zd-cnt{flex:none;padding:4px 10px;border-radius:99px;font-size:11.5px;font-weight:700;
  color:var(--ai-green);background:rgba(62,207,142,.13);border:1px solid rgba(62,207,142,.3)}
.zd-track{display:flex;gap:5px;margin-top:13px}
.zd-track i{flex:1;min-width:0;padding:7px 4px;border-radius:12px;text-align:center;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);font-style:normal}
.zd-track i.d{background:rgba(62,207,142,.12);border-color:rgba(62,207,142,.3)}
.zd-track i.c{background:rgba(61,109,242,.2);border-color:rgba(127,166,255,.55)}
.zd-track em{display:block;font-style:normal;font-size:9px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--dim-2);white-space:nowrap}
.zd-track b{display:block;margin-top:3px;font-family:var(--mono);
  font-variant-numeric:tabular-nums;font-size:12px;font-weight:800;
  letter-spacing:-.04em;color:var(--text);white-space:nowrap}
.zd-track i.d b{color:var(--ai-green)}
.zd-track s{display:block;margin-top:2px;text-decoration:none;font-size:9px;color:var(--dim-2)}
.zd-go{display:flex;align-items:center;justify-content:center;height:46px;margin-top:13px;
  border-radius:15px;font-size:14.5px;font-weight:750;color:#fff;
  background:linear-gradient(135deg,var(--ai-blue),var(--ai-violet));
  box-shadow:0 12px 26px -14px rgba(61,109,242,.95)}
.zd-list{margin:0 16px;border-radius:20px;background:var(--card);
  border:1px solid var(--border);padding:0 14px}
.zd-row{display:flex;align-items:center;gap:11px;padding:10px 0;cursor:pointer}
.zd-row+.zd-row{border-top:1px solid rgba(255,255,255,.06)}
.zd-ic{flex:none;width:32px;height:32px;border-radius:11px;object-fit:contain;
  background:#fff;padding:2px}
.zd-n{flex:1;min-width:0}
.zd-n b{display:block;font-size:14.5px;font-weight:700;color:var(--text)}
.zd-n s{display:block;margin-top:1px;text-decoration:none;font-size:11.5px;color:var(--dim)}
.zd-sum{flex:none;font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:14px;font-weight:800;letter-spacing:-.03em;color:var(--ai-sky)}
.zd-ar{flex:none;display:flex;color:var(--dim-2)}
.zd-ar svg{width:15px;height:15px}
.zd-rules>div{display:flex;gap:11px;padding:10px 0}
.zd-rules>div+div{border-top:1px solid rgba(255,255,255,.06)}
.zd-ri{flex:none;width:30px;height:30px;border-radius:10px;display:grid;place-items:center;
  background:rgba(148,163,255,.14);color:#a8b8ff}
.zd-ri svg{width:16px;height:16px}
.zd-rules p{font-size:12.5px;line-height:17px;color:#9fadc2}
.zd-rules b{color:#fff;font-weight:750}

/* стейкинг: суточный доход в карточке (01.09.2026) */
/* Строка была одна пара «подпись — число», стала две. Раскладываем половинами
   с разделителем, как плитки выше: иначе два числа в ряд читаются как одно. */
.g2-earn{display:flex;gap:9px;align-items:stretch}
.g2-earn>span{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;padding:0 2px}
.g2-earn>span+span{border-left:1px solid rgba(255,255,255,.09);padding-left:11px;
  align-items:flex-end;text-align:right}
.g2-earn em{font-style:normal;font-size:11px;color:var(--dim);white-space:nowrap}
.g2-earn b{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:18px;
  font-weight:800;letter-spacing:-.04em;color:var(--text);white-space:nowrap}
.g2-earn .g2-plus{color:var(--ai-green)}

/* стейкинг: доход одной фразой, итог плашкой (01.09.2026) */
.g2-earn{align-items:baseline;gap:12px}
.g2-earn>span+span{border-left:0;padding-left:0}
/* Слева доход одной фразой: число крупно, слово следом мелким. */
.g2-day2{flex:0 1 auto!important;min-width:0;display:flex!important;
  flex-direction:row!important;align-items:baseline;gap:6px}
.g2-day2 b{font-size:22px;color:var(--ai-green);white-space:nowrap}
.g2-day2 em{font-size:12px;color:var(--dim);font-style:normal;white-space:nowrap}
/* Справа итог — БЕЗ подложки. Обводка тут только мешала: флекс сжимал её по
   ширине, и подпись с числом вылезали за края. Выделяем типографикой. */
.g2-tot{flex:1 1 auto!important;min-width:0;display:flex!important;
  flex-direction:column!important;align-items:flex-end;gap:2px;
  padding:0;background:none;border:0}
.g2-tot em{font-size:10.5px;color:var(--dim-2);font-style:normal;white-space:nowrap}
.g2-tot b{font-size:17px;color:var(--text);white-space:nowrap}

/* задания: вид «плакат», пока админам (01.09.2026) */
.zp{position:relative;overflow:hidden;margin:8px 16px 0;padding:17px 16px 16px;
  border-radius:22px;background:linear-gradient(170deg,#161d2c 0%,#12161e 56%,#111620 100%);
  border:1px solid #2b3547;box-shadow:0 20px 44px -26px rgba(61,109,242,.75);cursor:pointer}
.zp::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(118% 74% at 50% -14%,rgba(89,120,250,.30),transparent 62%)}
.zp>*{position:relative}
.zp-kick{display:flex;align-items:center;gap:7px;margin-bottom:11px;font-size:10.5px;
  font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:#8ea3c9}
.zp-kick u{margin-left:auto;text-decoration:none;letter-spacing:.02em;text-transform:none;
  font-size:11px;font-weight:700;color:#8ea3c9}
.zp-top{display:flex;align-items:center;gap:13px}
.zp-lg{flex:none;width:70px;height:70px;border-radius:21px;overflow:hidden;background:#0d1118;
  border:1px solid #2f3a4e;display:grid;place-items:center;font:800 20px/1 inherit;color:#fff;
  box-shadow:0 10px 24px -14px rgba(0,0,0,.9)}
.zp-lg img{width:100%;height:100%;object-fit:cover;display:block}
.zp-nm{min-width:0}
.zp-nm b{display:block;font-size:25px;font-weight:850;letter-spacing:-.028em;line-height:1.05}
.zp-nm s{display:block;margin-top:5px;text-decoration:none;font-size:12px;line-height:16px;color:var(--dim)}
.zp-big{margin-top:14px;display:flex;align-items:flex-end;gap:9px}
.zp-big b{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:55px;
  font-weight:900;letter-spacing:-.05em;line-height:.9;color:var(--ai-sky);white-space:nowrap}
.zp-big b em{font-style:normal;font-family:-apple-system,system-ui,sans-serif;
  font-size:.4em;margin-right:.14em;opacity:.85}
.zp-big b u{text-decoration:none;font-size:.84em;font-weight:700;margin-left:.06em}
.zp-big s{padding-bottom:5px;text-decoration:none;font-size:11px;line-height:14px;
  font-weight:650;color:#8ea0ba}
.zp-sub{margin-top:9px;font-size:12.5px;line-height:17px;color:var(--dim)}
.zp-sub b{color:#dde5f1;font-weight:750}
.zp-facts{display:flex;margin-top:12px;padding:8px 2px;border-radius:14px;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.075)}
.zp-facts>div{flex:1;min-width:0;text-align:center;padding:0 6px}
.zp-facts>div+div{border-left:1px solid rgba(255,255,255,.09)}
.zp-facts b{display:block;font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:18px;font-weight:800;letter-spacing:-.04em;line-height:1.1;
  white-space:nowrap;color:var(--ai-sky)}
.zp-facts s{display:block;margin-top:4px;text-decoration:none;font-size:10.5px;
  line-height:13px;font-weight:600;color:#8797ac}
.zp-fn{margin:6px 2px 0;text-align:right;font-size:10.5px;line-height:14px;color:#778699}
.zp-lad{margin-top:13px}
.zp-st{display:flex;align-items:center;gap:11px;padding:7px 0}
.zp-st+.zp-st{border-top:1px solid rgba(255,255,255,.065)}
.zp-dot{flex:none;width:27px;height:27px;border-radius:9px;display:grid;place-items:center;
  font-family:var(--mono);font-size:12.5px;font-weight:800;color:#7b8aa1;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.11)}
.zp-dot svg{width:14px;height:14px}
.zp-t{flex:1;min-width:0}
.zp-t b{display:block;font-size:13.4px;font-weight:700;letter-spacing:-.012em;line-height:17px}
.zp-t s{display:block;text-decoration:none;font-size:11.3px;line-height:14px;color:var(--dim-2)}
.zp-v{flex:none;text-align:right}
.zp-v b{display:block;font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:15px;
  font-weight:800;letter-spacing:-.04em;line-height:1.1;white-space:nowrap;color:var(--ai-sky)}
.zp-v u{display:block;margin-top:3px;text-decoration:none;font-size:10px;font-weight:650;color:#6d7b8f}
.zp-st.d .zp-dot{background:rgba(62,207,142,.16);border-color:rgba(62,207,142,.42);color:var(--ai-green)}
.zp-st.d .zp-t b{color:#cfdae8}
.zp-st.d .zp-v b{color:var(--ai-green)}
.zp-st.n{margin:5px -8px;padding:10px 9px;border-radius:15px;
  background:rgba(61,109,242,.14);border:1px solid rgba(61,109,242,.34);border-top:0}
.zp-st.n+.zp-st{border-top:0}
.zp-st.n .zp-dot{background:linear-gradient(135deg,var(--ai-blue),var(--ai-violet));
  border-color:transparent;color:#fff;box-shadow:0 7px 16px -8px rgba(61,109,242,1)}
.zp-st.n .zp-t b{font-size:14px}
.zp-st.n .zp-v b{font-size:17px}
.zp-st.l .zp-dot{opacity:.72}
.zp-st.l .zp-t b{color:#a9b6c8}
.zp-st.l .zp-v b{color:#8ea6d8;opacity:.9}
.zp-cta{margin-top:14px;width:100%;height:58px;border-radius:16px;
  background:linear-gradient(135deg,var(--ai-blue),var(--ai-violet));color:#fff;
  font-size:16.5px;font-weight:750;letter-spacing:-.015em;display:flex;align-items:center;
  justify-content:center;gap:9px;box-shadow:0 12px 26px -14px rgba(61,109,242,.95)}
.zp-cs{margin-top:8px;text-align:center;font-size:11.3px;line-height:15px;color:#8b98ad}
.zq-h{display:flex;align-items:baseline;margin:18px 18px 8px;font-size:13px;
  font-weight:700;color:var(--text)}
.zq-h i{font-style:normal;margin-left:auto;font-size:11.5px;font-weight:600;color:var(--dim-2)}
.zq{margin:0 16px;border-radius:18px;background:var(--card);border:1px solid var(--border);padding:0 13px}
.zq-r{display:flex;align-items:center;gap:10px;height:35px;cursor:pointer}
.zq-r+.zq-r{border-top:1px solid rgba(255,255,255,.055)}
.zq-i{flex:none;width:22px;height:22px;border-radius:7px;object-fit:contain;background:#fff;padding:1px}
.zq-t{display:grid;place-items:center;background:var(--card-2);color:#fff;font:800 10px/1 inherit}
.zq-n{flex:1;min-width:0;display:flex;align-items:baseline;gap:6px;overflow:hidden}
.zq-n b{font-size:13px;font-weight:700;color:var(--text);white-space:nowrap}
.zq-n em{font-style:normal;font-size:11px;color:var(--dim-2);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.zq-s{flex:none;font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:12.5px;
  font-weight:800;letter-spacing:-.03em;color:var(--ai-sky)}
.zq-a{flex:none;display:flex;color:var(--dim-2)}
.zq-a svg{width:13px;height:13px}

/* стейкинг: вариант «как в образце» (02.09.2026) */
#stkBody s,#stkBody u,#stkBody a,#stkBody i{text-decoration:none;font-style:normal}
#stkBody button{font:inherit;border:0;background:none;color:inherit}
#stkBody /* ───────── телефон ───────── */
.scr{position:relative;width:390px;height:844px;border-radius:26px;overflow:hidden;
  background:linear-gradient(168deg,#0b0e13 0%,#0f1728 46%,#0b0e13 100%);
  box-shadow:0 24px 60px -24px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.07)}
#stkBody .bd{position:absolute;top:58px;left:0;right:0;bottom:0;z-index:2;overflow:hidden}
#stkBody /* док с кнопками */
.dock{position:absolute;left:10px;right:10px;bottom:80px;z-index:6;display:flex;gap:9px;
  padding:7px;border-radius:26px;background:rgba(15,19,27,.76);
  -webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);
  border:1px solid rgba(255,255,255,.13);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 -10px 30px -18px rgba(0,0,0,.9)}
#stkBody /* ───────── атомы ───────── */
.m{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.04em;font-weight:800}
#stkBody .cur{font-size:.84em;font-weight:700;margin-left:.12em;letter-spacing:0}
#stkBody .sky{color:var(--ai-sky)}
#stkBody .lil{color:var(--ai-lilac)}
#stkBody .grn{color:var(--ai-green)}
#stkBody .card{background:var(--card);border:1px solid var(--border);border-radius:20px}
#stkBody .h{display:flex;align-items:baseline;justify-content:space-between;margin:17px 4px 9px;
  font-size:13.5px;font-weight:700;color:var(--dim)}
#stkBody .h u{font-size:11.5px;font-weight:650;color:var(--dim-2)}
#stkBody .lbl{font-size:10px;font-weight:800;letter-spacing:.155em;text-transform:uppercase;color:#63718a;white-space:nowrap}
#stkBody .h .lbl{font-size:9.5px;letter-spacing:.115em}
#stkBody .h u{white-space:nowrap}
#stkBody .mn{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.03em;font-weight:800}
#stkBody /* ───────── шапка ───────── */
.head{display:flex;align-items:center;gap:12px}
#stkBody .head .ic{flex:none;width:46px;height:46px;border-radius:16px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(140deg,#3d6df2 0%,#5c65f1 46%,#7a5cf0 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 8px 18px -8px rgba(80,100,240,.85)}
#stkBody .head .ic svg{width:24px;height:24px}
#stkBody .head b{display:block;font-size:21px;font-weight:800;letter-spacing:-.025em;line-height:24px}
#stkBody .head .sub{display:flex;align-items:center;gap:8px;margin-top:5px}
#stkBody .apr{display:inline-block;padding:2.5px 8px;border-radius:9px;font-size:11.5px;font-weight:800;
  letter-spacing:-.01em;color:#c9baff;background:rgba(179,157,255,.16);
  border:1px solid rgba(179,157,255,.34)}
#stkBody .head .sub s{font-size:11.5px;font-weight:600;color:var(--dim-2)}
#stkBody /* ───────── огромное число ───────── */
.tot{margin-top:16px}
#stkBody .tot .row{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:4px}
#stkBody .big{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:59px;font-weight:900;
  letter-spacing:-.045em;line-height:.98;white-space:nowrap;
  background:linear-gradient(96deg,#79a3ff 0%,#9d9dff 52%,#bfa4ff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
#stkBody .acc{text-align:right;padding-bottom:7px}
#stkBody .acc s{display:block;font-size:10.5px;font-weight:650;color:var(--dim-2);line-height:13px}
#stkBody .acc b{display:block;margin-top:2px;font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:15px;font-weight:800;letter-spacing:-.04em;color:#c4cfe0}
#stkBody /* ───────── зелёная полоса ───────── */
.day{margin-top:14px;display:flex;align-items:center;justify-content:space-between;
  padding:12px 15px;border-radius:19px;
  background:linear-gradient(100deg,rgba(62,207,142,.20) 0%,rgba(62,207,142,.075) 62%,rgba(62,207,142,.05) 100%);
  border:1px solid rgba(62,207,142,.34);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 12px 26px -20px rgba(62,207,142,.9)}
#stkBody .day .lft{display:flex;align-items:baseline;gap:8px}
#stkBody .day .lft b{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:28px;font-weight:900;
  letter-spacing:-.045em;line-height:1;color:var(--ai-green)}
#stkBody .day .lft s{font-size:13px;font-weight:700;color:#8fdcb9;letter-spacing:-.01em}
#stkBody .day .rgt{text-align:right}
#stkBody .day .rgt s{display:flex;align-items:center;justify-content:flex-end;gap:5px;
  font-size:11.5px;font-weight:700;color:#7fc9a8}
#stkBody .day .rgt s svg{width:12px;height:12px}
#stkBody .day .rgt u{display:block;margin-top:3px;font-size:10.5px;font-weight:600;color:#5e8a76}
#stkBody /* ───────── неделя и месяц ───────── */
.stk-span{margin-top:9px;display:grid;grid-template-columns:1fr 1fr;gap:9px}
#stkBody .stk-span .sp{display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  padding:10px 13px;border-radius:15px;background:var(--card);border:1px solid var(--border)}
#stkBody .stk-span .sp s{text-decoration:none;font-size:11.5px;font-weight:650;color:var(--dim)}
#stkBody .stk-span .sp b{font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:15px;font-weight:850;letter-spacing:-.04em;line-height:1;color:var(--ai-green)}
#stkBody .stk-span .sp b .cur{font-size:.72em;margin-left:.05em;opacity:1;
  color:var(--ai-green);-webkit-text-fill-color:var(--ai-green)}
#stkBody /* ───────── две плитки ───────── */
.duo{margin-top:10px;display:grid;grid-template-columns:1fr 1fr;gap:9px}
#stkBody .duo .t{padding:11px 12px 10px;border-radius:17px;background:var(--card);border:1px solid var(--border)}
#stkBody .duo .t .k{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:650;color:var(--dim)}
#stkBody .duo .t .k i{width:7px;height:7px;border-radius:3px;flex:none}
#stkBody .duo .t b{display:block;margin-top:6px;font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:20px;font-weight:800;letter-spacing:-.045em;line-height:1}
#stkBody .duo .t s{display:block;margin-top:5px;font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:12px;font-weight:800;letter-spacing:-.035em;color:var(--ai-green)}
#stkBody .duo .t s em{font-family:-apple-system,system-ui,sans-serif;font-style:normal;font-weight:650;
  letter-spacing:0;color:#5e8a76;margin-left:4px;font-size:10.5px}
#stkBody /* ───────── честная строка ───────── */
.free{margin-top:10px;display:flex;gap:10px;align-items:flex-start;padding:11px 13px;border-radius:16px;
  background:rgba(127,166,255,.075);border:1px solid rgba(127,166,255,.22)}
#stkBody .free svg{flex:none;width:16px;height:16px;color:var(--ai-sky);margin-top:1px}
#stkBody .free p{font-size:11.5px;line-height:15.5px;font-weight:600;color:#a8b7cc}
#stkBody .free p b{color:#dce5f3;font-weight:750}
#stkBody /* ───────── подарки в стейкинге ───────── */
.gl-row{display:flex;align-items:center;gap:11px;padding:9px 12px 9px 9px;border-radius:18px;
  background:var(--card);border:1px solid var(--border)}
#stkBody /* ───────── полка инвентаря ───────── */
.shelf{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
#stkBody .shelf .it{padding:9px 4px 8px;border-radius:16px;text-align:center;
  background:var(--card-2);border:1px dashed rgba(179,157,255,.28)}
#stkBody .shelf .it .pic{width:46px;height:46px;margin:0 auto;display:grid;place-items:center}
#stkBody .shelf .it .pic img{width:44px;height:44px;object-fit:contain;display:block}
#stkBody .shelf .it b{display:block;margin-top:5px;font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:12.5px;font-weight:800;letter-spacing:-.045em;color:var(--ai-sky)}
#stkBody .shelf .it s{display:block;margin-top:2px;font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:10.5px;font-weight:800;letter-spacing:-.04em;color:var(--ai-green)}
#stkBody /* ───────── калькулятор ───────── */
.calc{padding:13px 14px 14px;border-radius:20px;background:var(--card);border:1px solid var(--border)}
#stkBody .calc .top{display:flex;align-items:center;justify-content:space-between}
#stkBody .calc .top .q{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:650;color:var(--dim)}
#stkBody .calc .top .q i{width:15px;height:15px;border-radius:50%;display:grid;place-items:center;
  font-size:10px;font-weight:800;color:#9fb2cc;background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.16)}
#stkBody .calc .top .v{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:15px;
  font-weight:800;letter-spacing:-.04em;color:var(--ai-sky)}
#stkBody .tip{margin-top:9px;display:flex;gap:8px;align-items:flex-start;padding:8px 10px;border-radius:13px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
#stkBody .tip svg{flex:none;width:13px;height:13px;color:#8ea0b8;margin-top:1px}
#stkBody .tip p{font-size:10.5px;line-height:14px;font-weight:600;color:#9aa8bd}
#stkBody .tip p b{color:#cfd9e8;font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:800;letter-spacing:-.03em}
#stkBody .amt{margin-top:11px;display:flex;align-items:baseline;gap:9px}
#stkBody .amt b{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:36px;font-weight:900;
  letter-spacing:-.05em;line-height:1;color:#e9eefb}
#stkBody .amt s{font-size:12px;font-weight:650;color:var(--dim-2)}
#stkBody .sld{position:relative;height:22px;margin:13px 3px 0}
#stkBody .sld .trk{position:absolute;left:0;right:0;top:8px;height:7px;border-radius:4px;background:rgba(255,255,255,.09)}
#stkBody .sld .fil{position:absolute;left:0;top:8px;height:7px;border-radius:4px;
  background:linear-gradient(90deg,#3d6df2,#7a5cf0)}
#stkBody .sld .knb{position:absolute;top:0;width:22px;height:22px;border-radius:50%;background:#fff;
  box-shadow:0 4px 12px -3px rgba(0,0,0,.85),0 0 0 4px rgba(122,92,240,.30)}
#stkBody .sld-e{display:flex;justify-content:space-between;margin:8px 4px 0;font-size:10.5px;
  font-weight:650;color:var(--dim-2)}
#stkBody .chips{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:11px}
#stkBody .chips b{height:32px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:12.5px;font-weight:800;
  letter-spacing:-.035em;color:#b7c4d8;background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.11)}
#stkBody .chips b.on{color:#fff;background:rgba(122,92,240,.30);border-color:rgba(179,157,255,.55)}
#stkBody .chips b.wrd{font-family:-apple-system,system-ui,sans-serif;letter-spacing:-.01em;font-weight:700;font-size:12.5px}
#stkBody .res{margin-top:12px;display:flex;border-radius:15px;overflow:hidden;
  background:rgba(62,207,142,.09);border:1px solid rgba(62,207,142,.26)}
#stkBody .res>div{flex:1;text-align:center;padding:9px 2px 9px}
#stkBody .res>div+div{border-left:1px solid rgba(62,207,142,.22)}
#stkBody .res s{display:block;font-size:10px;font-weight:650;color:#6f9e88;letter-spacing:-.005em}
#stkBody .res b{display:block;margin-top:4px;font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:16px;font-weight:900;letter-spacing:-.05em;color:var(--ai-green);line-height:1}
#stkBody /* ───────── лимит ───────── */
.lim{margin-top:10px;padding:13px 14px 12px;border-radius:20px;background:var(--card);border:1px solid var(--border)}
#stkBody .lim .r1{display:flex;align-items:baseline;justify-content:space-between;font-size:12px;
  font-weight:650;color:var(--dim)}
#stkBody .lim .r1 em{font-family:var(--mono);font-variant-numeric:tabular-nums;font-style:normal;
  font-weight:800;letter-spacing:-.04em;font-size:13px;color:#dbe4f2;margin-left:5px}
#stkBody .bar{margin-top:9px;height:9px;border-radius:5px;background:rgba(255,255,255,.08);overflow:hidden}
#stkBody .bar i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,#3d6df2,#7a5cf0)}
#stkBody .lim .r2{margin-top:8px;display:flex;align-items:baseline;justify-content:space-between;
  font-size:11px;font-weight:600;color:var(--dim-2)}
#stkBody .lim .r2 b{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:800;
  letter-spacing:-.04em;font-size:12.5px;color:var(--ai-sky)}
#stkBody .play{margin-top:11px;display:flex;align-items:center;gap:10px;padding:10px 11px;border-radius:15px;
  background:rgba(122,92,240,.13);border:1px solid rgba(179,157,255,.28)}
#stkBody .play .pi{flex:none;width:30px;height:30px;border-radius:11px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--ai-blue),var(--ai-violet));color:#fff}
#stkBody .play .pi svg{width:15px;height:15px}
#stkBody .play .tx{flex:1;min-width:0}
#stkBody .play .tx b{display:block;font-size:13px;font-weight:750;letter-spacing:-.015em}
#stkBody .play .tx s{display:block;margin-top:2px;font-size:10.5px;line-height:14px;font-weight:600;color:#9285c4}
#stkBody .play .ch{flex:none;width:16px;height:16px;color:#8f80c9}
#stkBody .note{margin-top:12px;display:flex;gap:9px;align-items:flex-start;padding:11px 13px;
  border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09)}
#stkBody .note svg{flex:none;width:14px;height:14px;color:#5d6a7d;margin-top:1px}
#stkBody .note p{font-size:11.5px;line-height:15.5px;font-weight:600;color:var(--dim-2)}
#stkBody .note p b{color:#8593a8;font-weight:700}
/* стейкинг: список подарков и чипы (02.09.2026) */
#stkBody .chips i{height:32px;border-radius:12px;display:flex;align-items:center;
  justify-content:center;font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:12.5px;font-weight:800;letter-spacing:-.035em;color:#b7c4d8;font-style:normal;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.11);cursor:pointer}
#stkBody .chips i.on{color:#fff;background:rgba(122,92,240,.30);border-color:rgba(179,157,255,.55)}
#stkBody .chips i.wrd{font-family:-apple-system,system-ui,sans-serif;letter-spacing:-.01em;
  font-weight:700;font-size:12.5px}
#stkBody #stkRng{margin-top:16px;margin-bottom:2px}
/* Список подарков: картинка, имя с ценой, доход в сутки, кнопка снятия. */
#stkBody .gl-row{display:flex;align-items:center;gap:9px;padding:9px 9px 9px 9px;
  border-radius:18px;background:var(--card);border:1px solid var(--border)}
#stkBody .gl-row+.gl-row{margin-top:8px}
#stkBody .gl-row .pic{flex:none;width:46px;height:46px;display:grid;place-items:center}
#stkBody .gl-row .pic img{width:44px;height:44px;object-fit:contain;display:block}
#stkBody .gl-row .nm{min-width:0;flex:1}
#stkBody .gl-row .nm b{display:block;font-size:13.5px;font-weight:700;letter-spacing:-.015em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#stkBody .gl-row .nm s{display:block;margin-top:3px;text-decoration:none;font-family:var(--mono);
  font-variant-numeric:tabular-nums;font-size:13px;font-weight:800;letter-spacing:-.04em;
  color:var(--ai-sky)}
#stkBody .gl-row .pay{flex:none;text-align:right}
#stkBody .gl-row .pay b{display:block;font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:15px;font-weight:900;letter-spacing:-.045em;color:var(--ai-green);line-height:1}
#stkBody .gl-row .pay s{display:block;margin-top:3px;text-decoration:none;font-size:10px;
  font-weight:600;color:#5e8a76}
#stkBody .gl-row .dp-off{flex:none;height:27px;padding:0 10px;border-radius:99px;
  font-size:11px;font-weight:700;letter-spacing:-.01em;color:#a9b6ca;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);cursor:pointer}
#stkBody .gl-row .dp-off:disabled{opacity:.45}
#stkBody .shelf{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
#stkBody .shelf .it{padding:9px 4px 8px;border-radius:16px;text-align:center;
  background:var(--card-2);border:1px dashed rgba(179,157,255,.28)}
#stkBody .shelf .it .pic{width:46px;height:46px;margin:0 auto;display:grid;place-items:center}
#stkBody .shelf .it .pic img{width:44px;height:44px;object-fit:contain;display:block}
#stkBody .shelf .it b{display:block;margin-top:5px;font-family:var(--mono);
  font-variant-numeric:tabular-nums;font-size:12.5px;font-weight:800;letter-spacing:-.045em;
  color:var(--ai-sky)}
#stkBody .shelf .it s{display:block;margin-top:2px;text-decoration:none;font-family:var(--mono);
  font-variant-numeric:tabular-nums;font-size:10.5px;font-weight:800;letter-spacing:-.04em;
  color:var(--ai-green)}

/* стейкинг: гасим чужие .pay и .note (02.09.2026) */
#stkBody .gl-row .pay{animation:none;position:static;padding:0;background:none;
  border:0;border-radius:0;cursor:default;text-align:right}
#stkBody .gl-row .pay:hover{border:0}
#stkBody .note{animation:none;backdrop-filter:none;-webkit-backdrop-filter:none}

/* стейкинг: правки владельца (02.09.2026) */
/* Ставка — главное число шапки. Цифры градиентом, «%» им же, но мельче. */
#stkBody .head{align-items:center}
#stkBody .pct{margin-left:auto;text-align:right;flex:none;padding-left:10px}
#stkBody .pct b{display:block;font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:27px;font-weight:900;letter-spacing:-.05em;line-height:1;
  background:linear-gradient(135deg,var(--ai-sky),var(--ai-lilac));
  -webkit-background-clip:text;background-clip:text;color:transparent}
#stkBody .pct b i{font-style:normal;font-size:19px;font-weight:800;margin-left:1px;
  vertical-align:.06em;letter-spacing:0}
#stkBody .pct s{display:block;margin-top:3px;text-decoration:none;font-size:9.5px;
  font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--dim-2)}
/* Начислено — это доход, поэтому зелёным и со знаком. */
#stkBody .tot .acc{text-align:right;flex:none}
#stkBody .tot .acc s{display:block;text-decoration:none;font-size:9.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--dim-2)}
#stkBody .tot .acc b{display:block;margin-top:4px;font-family:var(--mono);
  font-variant-numeric:tabular-nums;font-size:19px;font-weight:900;letter-spacing:-.045em;
  line-height:1;color:var(--ai-green)}
/* Стейкать — там же, где цифры, на которые человек смотрит. */
#stkBody .stk-go{width:100%;height:48px;margin-top:10px;display:flex;align-items:center;
  justify-content:center;gap:8px;border:0;border-radius:16px;cursor:pointer;
  font-size:15px;font-weight:750;letter-spacing:-.01em;color:#fff;
  background:linear-gradient(135deg,var(--ai-blue),var(--ai-violet));
  box-shadow:0 8px 22px -12px rgba(122,92,240,.9)}
#stkBody .stk-go .ic{width:16px;height:16px}
#stkBody .stk-go:active{transform:scale(.985)}
#stkBody .stk-off{width:100%;height:34px;margin-top:6px;border:0;background:none;
  cursor:pointer;font-size:12px;font-weight:650;color:var(--dim-2)}
#stkBody .stk-off:active{opacity:.6}

/* стейкинг: знак рубля у главной суммы (02.09.2026) */
#stkBody .big .cur{opacity:1;color:#bfa4ff;-webkit-text-fill-color:#bfa4ff}

/* стейкинг: верх «свечение» (02.09.2026) */
#stkBody .stkhero{position:relative;overflow:hidden;padding:18px 18px 16px;
  border-radius:24px;background:var(--card);border:1px solid var(--border)}
/* Свечение из-за угла — единственная вольность на экране, остальное строго. */
#stkBody .stkhero::before{content:"";position:absolute;left:-40px;top:-70px;
  width:230px;height:190px;pointer-events:none;filter:blur(6px);
  background:radial-gradient(closest-side,rgba(122,92,240,.34),transparent 70%)}
#stkBody .stkhero::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(179,157,255,.5),transparent)}
#stkBody .stkhero-top{position:relative;display:flex;align-items:center;
  justify-content:space-between;gap:10px}
#stkBody .stkhero-lbl{font-size:10px;font-weight:800;letter-spacing:.17em;
  text-transform:uppercase;color:var(--dim-2)}
#stkBody .stkhero-apr{flex:none;display:inline-flex;align-items:baseline;gap:4px;
  padding:5px 10px;border-radius:99px;background:rgba(122,92,240,.16);
  border:1px solid rgba(179,157,255,.34)}
#stkBody .stkhero-apr b{font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:13px;font-weight:900;letter-spacing:-.03em;color:#c9b8ff}
#stkBody .stkhero-apr s{text-decoration:none;font-size:9.5px;font-weight:700;color:#8d80c4}
#stkBody .stkhero-num{position:relative;margin-top:12px;font-family:var(--mono);
  font-variant-numeric:tabular-nums;font-size:52px;font-weight:900;
  letter-spacing:-.055em;line-height:1;
  background:linear-gradient(96deg,#79a3ff,#9d9dff 52%,#bfa4ff);
  -webkit-background-clip:text;background-clip:text;color:transparent}
#stkBody .stkhero-num .cur{font-size:.66em;margin-left:.06em;opacity:1;
  color:#bfa4ff;-webkit-text-fill-color:#bfa4ff}
#stkBody .stkhero-bot{position:relative;margin-top:14px;padding-top:12px;
  display:flex;align-items:baseline;justify-content:space-between;
  border-top:1px solid rgba(255,255,255,.07)}
#stkBody .stkhero-bot s{text-decoration:none;font-size:11.5px;font-weight:650;
  color:var(--dim-2)}
#stkBody .stkhero-bot b{font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:17px;font-weight:900;letter-spacing:-.045em;color:var(--ai-green)}

/* стейкинг: строка ставки и полоса дохода (02.09.2026) */
/* Строка ставки: была без правил вовсе — отсюда и худоба, и слипание. */
#stkBody .calc .base{margin-top:15px;font-size:13.5px;line-height:19px;
  font-weight:700;letter-spacing:-.01em;color:#b6c3d8}
#stkBody .calc .base b{font-size:15px;font-weight:800;color:#f2f5fa}
#stkBody .calc .base .stk-badge{margin:0 5px 0 6px;vertical-align:middle}
/* Полоса дохода: правая часть стала одноэтажной, растим её под левую. */
#stkBody .day .rgt s{font-size:13.5px;font-weight:750;color:#8fdcb9;gap:6px}
#stkBody .day .rgt s svg{width:14px;height:14px}

/* стейкинг: отбивка топа от карточки лимита (02.09.2026) */
#stkBody .stk-top{margin-top:12px}

/* карточка партнёра: герой (02.09.2026) */
.bb-hero{position:relative;overflow:hidden;margin:0 16px;padding:20px 16px 16px;
  border-radius:24px;display:flex;flex-direction:column;align-items:center;
  cursor:pointer;background:var(--card);border:1px solid rgba(148,163,255,.16)}
/* Свет из-за логотипа: раньше жёлтый круг лежал на плоском фоне сам по себе. */
.bb-hero::before{content:"";position:absolute;left:50%;top:-96px;width:280px;
  height:220px;transform:translateX(-50%);pointer-events:none;filter:blur(4px);
  background:radial-gradient(closest-side,rgba(126,136,255,.30),transparent 72%)}
.bb-hero::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(179,157,255,.55),transparent)}
.bb-hero>*{position:relative}
.bb-top{position:absolute;top:12px;right:12px;padding:4px 10px;border-radius:999px;
  background:rgba(99,102,241,.16);border:1px solid rgba(99,102,241,.35);
  font-size:10.5px;font-weight:600;color:#a5b4fc}
/* Ореол вокруг логотипа — тем же приёмом, что свет карточки, но плотнее. */
.bb-logo{position:relative;display:grid;place-items:center}
.bb-logo::before{content:"";position:absolute;width:118px;height:118px;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,217,59,.16),transparent 70%)}
.bb-name{margin-top:10px;font-size:22px;font-weight:800;letter-spacing:-.02em;color:#fff}
.bb-country{margin-top:2px;font-size:13px;font-weight:600;color:#7c86a2}
/* Денежный блок — то, ради чего карточку и открывают. */
.bb-money{margin-top:14px;text-align:center}
.bb-money b{display:block;font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:34px;font-weight:900;letter-spacing:-.05em;line-height:1;
  background:linear-gradient(96deg,#79a3ff,#9d9dff 54%,#bfa4ff);
  -webkit-background-clip:text;background-clip:text;color:transparent}
/* Знак рубля внутри градиента: у .cur своё opacity, из-за него глиф уходит
   в отдельный слой и обрезка по тексту до него не достаёт. */
.bb-money b .cur{opacity:1;color:#bfa4ff;-webkit-text-fill-color:#bfa4ff;
  font-size:.66em;margin-left:.06em}
.bb-money s{display:block;margin-top:6px;text-decoration:none;font-size:10px;
  font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--ai-green)}
.bb-money u{display:block;margin-top:7px;text-decoration:none;font-size:11px;
  font-weight:600;color:var(--dim-2)}
.bb-chips{display:flex;gap:6px;margin-top:13px}
.bb-chip{display:inline-flex;align-items:center;gap:4px;padding:5px 12px;
  border-radius:999px;background:rgba(148,163,255,.09);
  border:1px solid rgba(148,163,255,.16);font-family:var(--mono);
  font-variant-numeric:tabular-nums;font-size:12px;font-weight:600;color:#a78bfa}
.bb-chip.bb-toy{width:28px;height:28px;padding:3px;box-sizing:border-box;
  justify-content:center;font-size:16px;line-height:1}
.bb-prog{width:100%;margin-top:14px}
.bb-bar{height:8px;border-radius:99px;background:rgba(148,163,255,.12);overflow:hidden}
.bb-bar i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,#4c6bff,#8b5cf6)}
.bb-step{margin-top:7px;text-align:center;font-size:11px;font-weight:600;color:#7c86a2}
.bb-go{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;
  height:48px;margin-top:14px;border-radius:15px;font-size:14.5px;font-weight:650;
  color:#fff;background:linear-gradient(92deg,#4c6bff,#8b5cf6);
  box-shadow:0 12px 26px -12px rgba(97,85,255,.75)}
.bb-hero:active{transform:scale(.995)}

/* карточка партнёра: оговорка «до» (02.09.2026) */
.bb-money b{display:flex;align-items:baseline;justify-content:center;gap:7px}
.bb-money b em{font-style:normal;font-family:-apple-system,system-ui,sans-serif;
  font-size:14px;font-weight:700;letter-spacing:-.01em;
  -webkit-text-fill-color:var(--dim-2);color:var(--dim-2)}

/* карточка партнёра: плакат (02.09.2026) */
.bb-plak{position:relative;overflow:hidden;margin:0 16px;padding:18px 16px 16px;
  border-radius:24px;display:block;
  background:linear-gradient(165deg,rgba(255,217,59,.13),rgba(255,217,59,.02) 42%,transparent 66%),var(--card);
  border:1px solid rgba(255,217,59,.24);cursor:pointer}
.bb-plak>*{position:relative;z-index:1}
/* Блик: светлая полоса раз в 7 секунд. Двигаем transform — фон при этом
   не перерисовывается, на слабых телефонах это разница в разы. */
.bb-plak::after{content:"";position:absolute;z-index:0;top:0;bottom:0;width:42%;
  left:-55%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.055),transparent);
  animation:bbShine 7s ease-in-out infinite}
@keyframes bbShine{0%,72%{transform:translateX(0)}100%{transform:translateX(370%)}}
@keyframes bbUp{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.bb-plak .bb-big,.bb-plak .bb-lbl,.bb-plak .bb-sub{animation:bbUp .45s cubic-bezier(.2,.7,.3,1) both}
.bb-plak .bb-lbl{animation-delay:.05s}
.bb-plak .bb-sub{animation-delay:.1s}
@media (prefers-reduced-motion: reduce){
  .bb-plak::after{animation:none}
  .bb-plak .bb-big,.bb-plak .bb-lbl,.bb-plak .bb-sub{animation:none}
}
.bb-hd{display:flex;align-items:center;gap:12px}
.bb-hd b{font-size:20px;font-weight:800;letter-spacing:-.02em;color:#fff}
.bb-big{margin-top:16px;display:flex;align-items:baseline;gap:8px}
.bb-big em{font-style:normal;font-size:14px;font-weight:700;color:#7c86a2}
.bb-big b{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:46px;
  font-weight:900;letter-spacing:-.055em;line-height:1;color:#FFD93B}
.bb-big b .cur{opacity:1;color:#FFD93B;font-size:.58em;margin-left:.06em}
.bb-lbl{margin-top:7px;font-size:10.5px;font-weight:800;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ai-green)}
.bb-sub{margin-top:9px;font-size:11.5px;font-weight:600;color:var(--dim-2)}
.bb-ft{display:flex;align-items:center;gap:8px;margin-top:14px}
.bb-ft .bb-bar{flex:1}
.bb-ft u{text-decoration:none;font-size:11px;font-weight:700;color:#7c86a2;white-space:nowrap}
.bb-plak:active{transform:scale(.995)}

/* карточка партнёра: кегль под ширину карточки (02.09.2026) */
.bb-plak{padding:20px 18px 18px}
.bb-hd{gap:14px}
.bb-hd b{font-size:23px;letter-spacing:-.025em}
.bb-big{margin-top:18px;gap:10px}
.bb-big em{font-size:16px}
.bb-big b{font-size:62px;letter-spacing:-.055em}
.bb-big b .cur{font-size:.58em}
.bb-lbl{margin-top:9px;font-size:12px;letter-spacing:.13em}
.bb-sub{margin-top:10px;font-size:12.5px}
.bb-ft{margin-top:16px;gap:9px}
.bb-ft u{font-size:12px}
.bb-plak .bb-bar{height:9px}
.bb-plak .bb-chip{font-size:12.5px;padding:6px 12px}
.bb-plak .bb-chip.bb-toy{width:30px;height:30px;padding:0;font-size:16px}
.bb-plak .bb-go{height:52px;margin-top:16px;border-radius:16px;font-size:15.5px}