/* ============================================================
   KostroGive — v5 "Ice & Platinum"
   Стиль: Liquid Glass. Палитра снята с фонового арта:
   лёд #7FC5F2, платина #C9D6E2, чёрный #000409.
   Золото — только для победы.
   ============================================================ */

/* ------------------------------------------------------------
   font

   Один вариативный файл на весь диапазон 400-800 вместо пяти
   статических начертаний с Google Fonts. Кириллица и латиница
   разделены по unicode-range: латинский файл (48 КБ) качается
   только если на экране появятся латинские символы.
   swap — текст виден сразу системным шрифтом, без «мигания в пустоту».
   ------------------------------------------------------------ */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/static/fonts/inter-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Латиница урезана до реально используемого: базовый набор, диакритика
   европейских имён и типографика. Полный файл Google весил 48 КБ и
   тянул письменности, которых в интерфейсе нет. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/static/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0100-017F, U+0131, U+0152-0153,
    U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2010-2015, U+2018-201D,
    U+2020-2022, U+2026, U+2030, U+20AC, U+20BD, U+2116, U+2122,
    U+2190-2193, U+2212, U+2215;
}

/* ------------------------------------------------------------
   tokens
   ------------------------------------------------------------ */

:root {
  /* ink — базовый тон подсвечен: на #00040A фон уходил в чёрный
     провал, и фотография с пятнами почти не читалась */
  --ink-0: #061530;
  --ink-1: #0A1B33;
  --ink-2: #12253E;

  /* ice — электрический, насыщенный */
  --ice-1: #EAF7FF;
  --ice-2: #7DD8FF;
  --ice-3: #2CB6FF;
  --ice-4: #0A8CE8;
  --ice-5: #0055A8;

  /* platinum */
  --pt-1: #F4F8FC;
  --pt-2: #D2E2F0;
  --pt-3: #93AAC0;
  --pt-4: #5A6B7C;

  /* accents */
  --gold: #FFC24B;
  --gold-2: #FFE08A;
  --green: #2BE38A;
  --red: #FF5A78;
  --violet: #7B5CFF;

  /* text */
  --tx-1: #F4F8FC;
  --tx-2: rgba(210, 226, 240, .84);
  --tx-3: rgba(147, 170, 192, .78);

  /* glass */
  --glass-1: rgba(18, 52, 86, .3);
  --glass-2: rgba(28, 72, 116, .38);
  --glass-3: rgba(44, 182, 255, .16);
  --line-1: rgba(125, 216, 255, .16);
  --line-2: rgba(125, 216, 255, .3);
  --blur: 22px;

  /* gradients */
  --g-ice:  linear-gradient(135deg, #7DD8FF 0%, #2CB6FF 46%, #0A7FE0 100%);
  --g-cta:  linear-gradient(180deg, rgba(44,182,255,.22), rgba(10,140,232,.12));
  --g-gold: linear-gradient(135deg, #FFE08A 0%, #FFC24B 52%, #E08A1E 100%);
  --g-steel: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.02));

  /* radius */
  --r-xl: 28px;
  --r-lg: 22px;
  --r-md: 16px;
  --r-sm: 12px;
  --r-pill: 999px;

  /* type */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --num: "Inter", ui-monospace, "SF Mono", Menlo, monospace;

  /* layout */
  --pad: 18px;
  --appbar-h: 60px;
  --tabbar-h: 66px;
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);

  /* motion — liquid glass: 400-600ms */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --out:  cubic-bezier(.16, 1, .3, 1);
  --spring: cubic-bezier(.34, 1.4, .5, 1);

  /* elevation
     Плашки не только отбрасывают тень, но и подсвечивают фон вокруг:
     широкий ледяной ореол малой плотности + чёрная тень под ним.
     Без ореола карточки выглядели вдавленными в фон. */
  --e-1:
    0 1px 0 rgba(125,216,255,.1) inset,
    0 0 26px rgba(44,182,255,.11),
    0 10px 30px rgba(0,0,0,.5);
  --e-2:
    0 1px 0 rgba(125,216,255,.14) inset,
    0 0 38px rgba(44,182,255,.14),
    0 24px 60px rgba(0,0,0,.66);
  --glow-ice:  0 8px 30px rgba(44, 182, 255, .5);
  --glow-gold: 0 8px 30px rgba(255, 194, 75, .45);
}

/* ------------------------------------------------------------
   base
   ------------------------------------------------------------ */

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  background: var(--ink-0);
  color: var(--tx-1);
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
  user-select: none;
  -webkit-user-select: none;
  font-feature-settings: "tnum" 1, "cv05" 1;
}

img, svg { display: block; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
input, textarea { font: inherit; }
code { font-family: var(--num); font-size: .92em; color: var(--ice-3); letter-spacing: .02em; }
::-webkit-scrollbar { width: 0; height: 0; }

.num { font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

/* ------------------------------------------------------------
   backdrop
   ------------------------------------------------------------ */

.bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }

/* Два слоя фотографии: сначала 7 КБ размытой версии, поверх неё —
   полная. Раньше bg.webp (127 КБ) висел в preload и конкурировал за
   канал с маскотом и стилями, а до его загрузки фон был пустой
   заливкой. Теперь картинка на месте почти сразу, полная догружается
   и проявляется. Визуально итог тот же: слой всё равно под blur и
   opacity .45. */
.bg__photo {
  position: absolute;
  inset: -6%;
  background: url("/static/img/bg-blur.webp") center 22% / cover no-repeat;
  /* Фон приглушён: карточки и текст стоят на нём поверх, и при .62
     фотография спорила с контентом за внимание. */
  opacity: .45;
  filter: saturate(1.2) contrast(1.04) brightness(.99);
  transform: scale(1.06);
  /* Дыхание без рывков: alternate разворачивал кривую в конце
     цикла, и движение спотыкалось на точках разворота.
     Замкнутый цикл с совпадающими концами идёт бесшовно. */
  animation: bg-drift 72s cubic-bezier(.37,0,.63,1) infinite;
}
/* Полная фотография проявляется поверх размытой, когда догрузится.
   Класс ставит JS после успешной загрузки — если сеть не дала файл,
   на экране остаётся размытая версия, а не пустота. */
.bg__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  background-image: url("/static/img/bg.webp");
  opacity: 0;
  transition: opacity .6s var(--ease);
}
.bg--full .bg__photo::after { opacity: 1; }
@keyframes bg-drift {
  0%   { transform: scale(1.06) translate3d(0, 0, 0); }
  25%  { transform: scale(1.10) translate3d(-1.6%, -1.2%, 0); }
  50%  { transform: scale(1.15) translate3d(-2.2%, -2.6%, 0); }
  75%  { transform: scale(1.10) translate3d(-.8%, -1.6%, 0); }
  100% { transform: scale(1.06) translate3d(0, 0, 0); }
}

.bg__ice {
  position: absolute;
  border-radius: 50%;
  filter: blur(88px);
  opacity: .49;
}
.bg__ice--a {
  width: 74vw; height: 74vw; max-width: 460px; max-height: 460px;
  top: -16vh; left: -22vw;
  background: radial-gradient(circle, rgba(44,182,255,.68), transparent 68%);
  animation: ice-a 44s cubic-bezier(.37,0,.63,1) infinite;
}
.bg__ice--b {
  width: 62vw; height: 62vw; max-width: 400px; max-height: 400px;
  bottom: -14vh; right: -20vw;
  background: radial-gradient(circle, rgba(123,92,255,.4), transparent 70%);
  animation: ice-b 56s cubic-bezier(.37,0,.63,1) infinite;
}
/* Пятна ходят по замкнутой траектории и пульсируют по яркости —
   это даёт объём вместо плоской езды туда-сюда. */
@keyframes ice-a {
  0%   { transform: translate3d(0, 0, 0) scale(1); opacity: .42; }
  25%  { transform: translate3d(5vw, 5vh, 0) scale(1.1); opacity: .54; }
  50%  { transform: translate3d(8vw, 2vh, 0) scale(1.18); opacity: .5; }
  75%  { transform: translate3d(3vw, -3vh, 0) scale(1.08); opacity: .44; }
  100% { transform: translate3d(0, 0, 0) scale(1); opacity: .42; }
}
@keyframes ice-b {
  0%   { transform: translate3d(0, 0, 0) scale(1); opacity: .48; }
  30%  { transform: translate3d(-5vw, -3vh, 0) scale(.92); opacity: .38; }
  60%  { transform: translate3d(-7vw, -6vh, 0) scale(.86); opacity: .46; }
  85%  { transform: translate3d(-2vw, -2vh, 0) scale(.95); opacity: .42; }
  100% { transform: translate3d(0, 0, 0) scale(1); opacity: .48; }
}

.bg__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(0,4,10,.66) 0%, rgba(0,6,16,.86) 44%, rgba(0,3,8,.97) 100%),
    radial-gradient(120% 80% at 50% 0%, transparent 26%, rgba(0,4,10,.8) 100%);
}

/* Свечение в цвет рамок (--line-1 / --line-2, тот же ice-2 #7DD8FF).
   Два широких пятна по краям экрана: подсвечивают контур интерфейса,
   но не превращаются в заметные «лампы» за карточками. */
.bg__aura {
  position: absolute; inset: 0;
  background:
    radial-gradient(78% 44% at 50% -6%,  rgba(125,216,255,.17), transparent 68%),
    radial-gradient(64% 40% at 50% 106%, rgba(125,216,255,.11), transparent 70%),
    radial-gradient(52% 34% at -8% 44%,  rgba(125,216,255,.09), transparent 72%),
    radial-gradient(52% 34% at 108% 58%, rgba(123,92,255,.08),  transparent 72%);
  mix-blend-mode: screen;
  animation: aura-breathe 26s var(--ease) infinite;
}
@keyframes aura-breathe {
  0%, 100% { opacity: .82; }
  50%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .bg__aura { animation: none; }
}
.bg__grain {
  position: absolute; inset: -50%;
  opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------
   layout
   ------------------------------------------------------------ */

.viewport {
  position: relative;
  z-index: 1;
  max-width: 480px;
  margin: 0 auto;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.stage {
  flex: 1;
  padding: calc(var(--appbar-h) + var(--sat) + 14px) var(--pad) calc(var(--tabbar-h) + var(--sab) + 30px);
}
/* Экран без шапки (главная): убираем зарезервированную под неё высоту,
   иначе сверху остаётся пустая полоса на месте аппбара. */
.stage--bare { padding-top: calc(var(--sat) + 2px); }
/* Голова маскота выходит за карточку — оставляем только её вылет,
   без лишней пустоты под шапкой Telegram. */
.stage--bare .hero { margin-top: 36px; }
/* Отступ под бар — от его реальной высоты (--bar-h ставит JS),
   fallback на случай первого кадра до замера. */
.stage--bar { padding-bottom: calc(var(--bar-h, 118px) + 14px); }
/* Экран с баром в потоке (итоги): контент должен занимать всю высоту,
   иначе внизу остаётся мёртвая зона в 200px. Нижний воздух даёт сам бар. */
.stage--fill {
  display: flex; flex-direction: column;
  padding-bottom: 0;
}

/* ------------------------------------------------------------
   appbar
   ------------------------------------------------------------ */

.appbar {
  position: fixed;
  top: 0; left: 50%;
  width: 100%; max-width: 480px;
  z-index: 40;
  padding: var(--sat) var(--pad) 0;
  transform: translateX(-50%);
  transition: padding .45s var(--spring);
}

/* скрим: перекрывает контент, уезжающий под шапку */
.appbar::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: calc(var(--sat) + var(--appbar-h) + 10px);
  background: linear-gradient(180deg, rgba(0,4,9,.96) 46%, rgba(0,4,9,.72) 74%, rgba(0,4,9,0));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  pointer-events: none;
  transition: opacity .4s var(--ease);
}

/* внутренняя «капсула» — она и превращается в пилюлю */
.appbar__inner {
  position: relative;
  height: var(--appbar-h);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 2px;
  border: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  transition:
    height .45s var(--spring),
    padding .4s var(--out),
    border-radius .5s var(--spring),
    border-color .4s var(--ease),
    background .4s var(--ease),
    box-shadow .4s var(--ease);
}

/* скроллнули — шапка стягивается в скруглённую полупрозрачную пилюлю */
.appbar.is-stuck {
  padding-top: calc(var(--sat) + 7px);
  padding-left: 14px; padding-right: 14px;
}
/* вуаль накрывает всю зону пилюли: иначе текст карточек читается в зазоре */
.appbar.is-stuck::before {
  height: calc(var(--sat) + 66px);
  background: linear-gradient(
    180deg,
    rgba(0,4,9,.9) 0%, rgba(0,4,9,.78) 46%,
    rgba(0,4,9,.46) 74%, rgba(0,4,9,0) 100%);
}
.appbar.is-stuck .appbar__inner {
  height: 48px;
  padding: 0 8px 0 8px;
  border-radius: var(--r-pill);
  border-color: rgba(255,255,255,.1);
  background: rgba(9,20,35,.86);
  box-shadow:
    0 1px 0 rgba(255,255,255,.07) inset,
    0 14px 34px rgba(0,0,0,.5);
  backdrop-filter: blur(26px) saturate(180%);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
}
/* в пилюле метка раздела уезжает, остаётся одна строка */
.appbar.is-stuck .appbar__text small {
  opacity: 0;
  max-height: 0;
  margin-bottom: 0;
  transform: translateY(-4px);
}
.appbar.is-stuck .appbar__text b { font-size: 15.5px; }
.appbar.is-stuck .appbar__text { padding-left: 11px; }
.appbar.is-stuck .appbar__text::before { height: 18px; opacity: .55; }

/* лид: только кнопка «назад», на корневых экранах скрыт */
.appbar__lead {
  width: 40px; height: 40px;
  flex: 0 0 40px;
  border-radius: 13px;
  display: grid; place-items: center;
  background: var(--glass-2);
  border: 1px solid var(--line-1);
  transition: transform .3s var(--spring), background .3s var(--ease);
}
.appbar__lead svg { width: 20px; height: 20px; stroke: var(--pt-1); fill: none; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.appbar__lead:active { transform: scale(.9); background: var(--glass-3); }
.appbar__lead[hidden] { display: none; }

/* Иерархия перевёрнута: сверху мелкая метка раздела, под ней —
   крупная строка с живым содержимым («Профиль / Андрей»,
   «Мои номера / 3 номера»). Раньше сверху стояло родовое слово
   крупно, а под ним подпись, которая его же и пересказывала. */
.appbar__text {
  position: relative;
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  padding-left: 13px;
  text-align: left;
  transition: transform .3s var(--spring), padding-left .4s var(--out);
}
/* Корешок билета: перфорированная линия у левого края заголовка —
   тот же язык, что и отрывной край карточек с номерами. */
.appbar__text::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 3px; height: 26px;
  transform: translateY(-50%);
  border-radius: var(--r-pill);
  background: repeating-linear-gradient(
    180deg,
    var(--ice-3) 0 3px,
    transparent 3px 6px);
  opacity: .72;
  transition: height .4s var(--spring), opacity .3s var(--ease);
}
.appbar__text b {
  font-size: 19px; font-weight: 800; letter-spacing: -.03em;
  line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: font-size .4s var(--spring);
}
/* метка раздела: капслок вразрядку — читается как надпись на корешке */
.appbar__text small {
  order: -1;
  font-size: 9.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ice-2);
  margin-bottom: 3px;
  white-space: nowrap; overflow: hidden;
  max-height: 14px; opacity: .9;
  transition: opacity .3s var(--ease), max-height .4s var(--out), transform .4s var(--out), margin .4s var(--out);
}
/* кликабельный тайтл */
.appbar__text { cursor: default; }
.appbar__text--tap { cursor: pointer; }
.appbar__text--tap:active { transform: scale(.98); }
.appbar__text--tap:active::before { opacity: 1; }
/* индикатор «тап → домой» стоит у метки раздела, а не у заголовка:
   рядом с именем человека точка читалась как статус онлайн */
.appbar__text--tap small::after {
  content: "";
  display: inline-block;
  width: 4px; height: 4px;
  margin-left: 6px;
  vertical-align: 1.5px;
  border-radius: 50%;
  background: currentColor;
  opacity: .7;
}
.appbar__side { display: flex; align-items: center; gap: 8px; }

/* ------------------------------------------------------------
   boot
   ------------------------------------------------------------ */

.boot {
  min-height: 64vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
}
.boot__mask {
  width: 120px;
  filter: drop-shadow(0 18px 40px rgba(62,133,181,.4));
  animation: boot-in .8s var(--out) both, float 4s var(--ease) .8s infinite alternate;
}
.boot__mask img { width: 100%; height: auto; }
@keyframes boot-in { from { opacity: 0; transform: scale(.86) translateY(14px); } }
@keyframes float { from { transform: translateY(-5px); } to { transform: translateY(6px); } }
/* Плавание без рывка: цикл замкнут в нуле, поэтому не важно,
   с какой задержкой он включается и что было в анимации входа. */
@keyframes float-soft {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-7px); }
  100% { transform: translateY(0); }
}

.boot__bar {
  width: 132px; height: 3px;
  border-radius: var(--r-pill);
  background: var(--glass-2);
  overflow: hidden;
}
.boot__bar i {
  display: block; width: 42%; height: 100%;
  border-radius: inherit;
  background: var(--g-ice);
  animation: boot-bar 1.3s var(--ease) infinite;
}
@keyframes boot-bar {
  from { transform: translateX(-110%); }
  to   { transform: translateX(280%); }
}

/* ------------------------------------------------------------
   entrances
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: no-preference) {
  .in-up   { animation: in-up .6s var(--out) both; }
  .in-fade { animation: in-fade .5s var(--ease) both; }
  .in-pop  { animation: in-pop .55s var(--spring) both; }
  .d1 { animation-delay: .06s; } .d2 { animation-delay: .12s; }
  .d3 { animation-delay: .18s; } .d4 { animation-delay: .24s; }
  .d5 { animation-delay: .3s; }  .d6 { animation-delay: .36s; }
}
@keyframes in-up   { from { opacity: 0; transform: translateY(20px); } }
@keyframes in-fade { from { opacity: 0; } }
@keyframes in-pop  { from { opacity: 0; transform: scale(.92); } }

/* точечные акценты */
@keyframes tick-up {
  0%   { transform: translateY(0); }
  40%  { transform: translateY(-3px); }
  100% { transform: translateY(0); }
}
.is-tick { animation: tick-up .4s var(--spring); }

@keyframes shake-x {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-4px); }
  75%      { transform: translateX(4px); }
}
.is-shake { animation: shake-x .32s var(--ease); }

/* мягкое дыхание для акцентных цифр */
@keyframes breathe {
  from { opacity: .82; }
  to   { opacity: 1; }
}

/* ------------------------------------------------------------
   surfaces
   ------------------------------------------------------------ */

.card {
  position: relative;
  background: var(--glass-1);
  border: 1px solid var(--line-1);
  border-radius: var(--r-lg);
  padding: 18px;
  box-shadow: var(--e-1);
  backdrop-filter: blur(var(--blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(140%);
}
.card--tap { transition: transform .35s var(--spring), background .3s var(--ease); }
.card--tap:active { transform: scale(.978); background: var(--glass-2); }

.section {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 26px 2px 12px;
}
.section h2 { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--tx-2); }
.section span { font-size: 12px; color: var(--tx-3); }
/* приглушённый заголовок для второстепенных блоков */
.section--sm h2 { font-size: 11px; letter-spacing: .13em; color: var(--tx-3); }

/* Заголовок пустого раздела стоит по центру строки: справа от него
   ничего нет, и прижатый влево он выглядел обрубком. */
.section--center { justify-content: center; }

/* Свет живой: тлеет и разгорается, чтобы пустой экран не выглядел
   выключенным. Селектор с .section — иначе цвет перебивает `.section h2`. */
.section h2.section__glow {
  /* заголовок пустого экрана — единственный акцент в блоке,
     поэтому тяжелее обычных 700 */
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #FFFFFF;
  /* Ближний ореол делает буквы «горячими», дальний — рассеянный свет
     вокруг. Без ближнего слоя свечение на 13px просто не читается. */
  text-shadow:
    0 0 4px rgba(255,255,255,.9),
    0 0 14px rgba(255,255,255,.6),
    0 0 30px rgba(255,255,255,.35);
  animation: sect-glow 4.5s ease-in-out infinite;
}
@keyframes sect-glow {
  0%, 100% {
    text-shadow:
      0 0 4px rgba(255,255,255,.9),
      0 0 14px rgba(255,255,255,.6),
      0 0 30px rgba(255,255,255,.35);
  }
  50% {
    text-shadow:
      0 0 6px rgba(255,255,255,1),
      0 0 20px rgba(255,255,255,.85),
      0 0 44px rgba(255,255,255,.5);
  }
}

/* Стрелка мягко покачивается, указывая на плашку под заголовком.
   Заголовок — inline-flex, поэтому центровка идёт по нему, а не по
   базовой линии текста: у капслока она проходит выше середины букв.
   Селектор с .section — правило `.section span` иначе перебивает
   размер и цвет. */
.section span.section__arrow {
  display: inline-flex;
  color: rgba(255,255,255,.8);
  filter: drop-shadow(0 0 8px rgba(255,255,255,.65));
  animation: sect-arrow 2.6s ease-in-out infinite;
}
.section span.section__arrow svg {
  width: 15px; height: 15px;
  fill: none; stroke: currentColor;
  stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
}
@keyframes sect-arrow {
  0%, 100% { transform: translateY(-1px); opacity: .65; }
  50%      { transform: translateY(2px);  opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .section__glow, .section__arrow { animation: none; }
}

.eyebrow {
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ice-4);
}
.muted { color: var(--tx-3); font-size: 13px; line-height: 1.55; }
.center { text-align: center; }
.split { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.inline { display: flex; align-items: center; gap: 8px; }
.stack > * + * { margin-top: 12px; }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.grid2 .span2 { grid-column: span 2; }

/* Группы строк в админке: подпись + вертикальный список .arow */
.admg { margin-top: 22px; }
.admg .eyebrow { display: block; margin-bottom: 9px; }

.rows { display: flex; flex-direction: column; gap: 8px; }
.row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px 15px;
  background: var(--glass-1);
  border: 1px solid var(--line-1);
  border-radius: var(--r-md);
}
.row__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.row__main b { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row__main span { font-size: 11.5px; color: var(--tx-3); }
.row__num { font-family: var(--num); font-weight: 700; font-size: 14px; color: var(--ice-3); }

/* Участники: username заблюрен фулл-блюром, тап раскрывает + переход в профиль */
.row--tap { cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; }
.pblur {
  display: inline-block;
  font-style: normal;
  filter: blur(10px);
  opacity: .75;
  transition: filter .22s ease, opacity .22s ease, background .22s ease;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  border-radius: 6px;
  padding: 1px 6px;
  margin: -1px -2px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.06);
  line-height: 1.2;
  -webkit-tap-highlight-color: transparent;
}
.pblur.is-open {
  filter: blur(0);
  opacity: 1;
  background: rgba(44,182,255,.14);
  border-color: rgba(44,182,255,.32);
  color: var(--ice-2);
}
.pblur.is-open:active { transform: scale(.96); }
.pblur-wrap { display: inline-flex; align-items: center; }

/* Пагинация списка участников */
.pager {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 12px;
}
.pager__info {
  font-family: var(--num);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--tx-3);
}
.pager .btn[disabled] { opacity: .4; pointer-events: none; }

.errbox b { font-size: 16px; }
.errbox p { margin-top: 6px; }

/* ------------------------------------------------------------
   buttons — min 44px touch target
   ------------------------------------------------------------ */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 52px;
  padding: 0 22px;
  border-radius: var(--r-md);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink-0);
  background: var(--g-ice);
  box-shadow: var(--glow-ice);
  overflow: hidden;
  isolation: isolate;
  transition: transform .3s var(--spring), box-shadow .35s var(--ease), opacity .3s;
}
.btn:active { transform: scale(.965); }
.btn:disabled { opacity: .5; pointer-events: none; }
.btn:focus-visible { outline: 2px solid var(--ice-3); outline-offset: 3px; }

.btn--block { display: flex; width: 100%; }
.btn--sm { min-height: 44px; padding: 0 16px; font-size: 13.5px; border-radius: var(--r-sm); }

.btn--ghost {
  background: var(--glass-2);
  border: 1px solid var(--line-2);
  box-shadow: none;
  color: var(--tx-1);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.btn--ghost:active { background: var(--glass-3); }
.btn--gold { background: var(--g-gold); box-shadow: var(--glow-gold); color: #241802; }
/* Вход в команду: кнопка в тон фиолетовой теме закрытого розыгрыша.
   Золото на такой карточке спорило с её собственным цветом и тянуло
   внимание сильнее, чем «Участвовать» на соседних открытых. */
.btn--violet {
  background: linear-gradient(135deg, #C9B8FF 0%, #8B6CFF 52%, #6242E0 100%);
  box-shadow: 0 8px 30px rgba(123,92,255,.42);
  color: #140B33;
}
.btn--danger { background: linear-gradient(135deg, #F1687E, #C63A50); box-shadow: 0 8px 30px rgba(241,104,126,.3); color: #fff; }

/* liquid sheen on primary CTA */
@media (prefers-reduced-motion: no-preference) {
  .btn--shine::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(112deg, transparent 34%, rgba(255,255,255,.5) 50%, transparent 66%);
    transform: translateX(-130%);
    animation: sheen 3.4s var(--ease) infinite;
  }
}
@keyframes sheen {
  0%   { transform: translateX(-130%); }
  52%  { transform: translateX(130%); }
  100% { transform: translateX(130%); }
}

.btn.is-pressed { animation: press .48s var(--spring); }
@keyframes press {
  0% { transform: scale(1); } 34% { transform: scale(.93, .95); }
  66% { transform: scale(1.03, 1.01); } 100% { transform: scale(1); }
}
.btn__ring {
  position: absolute; inset: 0;
  border-radius: inherit;
  border: 2px solid rgba(255,255,255,.7);
  opacity: 0;
  pointer-events: none;
  animation: ring .7s var(--out) forwards;
}
@keyframes ring {
  from { opacity: .85; transform: scale(1); }
  to   { opacity: 0; transform: scale(1.24, 1.75); }
}

.btn.is-busy .btn__text { opacity: 0; }
.btn__spin { position: absolute; inset: 0; display: grid; place-items: center; }
.btn__spin i {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 2.4px solid rgba(0,0,0,.22);
  border-top-color: var(--ink-0);
  animation: spin .7s linear infinite;
}
.btn--ghost .btn__spin i { border-color: rgba(255,255,255,.2); border-top-color: var(--ice-2); }
@keyframes spin { to { transform: rotate(360deg); } }

.iconbtn {
  width: 44px; height: 44px;
  border-radius: 14px;
  display: grid; place-items: center;
  background: var(--glass-2);
  border: 1px solid var(--line-1);
  transition: transform .3s var(--spring);
}
.iconbtn:active { transform: scale(.9); }
.iconbtn svg {
  width: 20px; height: 20px;
  stroke: var(--pt-2); fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .35s var(--spring);
}
/* «+» превращается в «×», когда форма раскрыта */
.iconbtn.is-open { background: var(--glass-3); border-color: var(--line-2); }
.iconbtn.is-open svg { transform: rotate(135deg); stroke: var(--ice-2); }

/* sticky action bar */
.actionbar__row { display: flex; gap: 9px; }
.actionbar__row > .btn { flex: 1; min-width: 0; }

.actionbar {
  position: fixed;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 100%; max-width: 480px;
  padding: 10px var(--pad) calc(var(--sab) + 8px);
  z-index: 38;
  display: flex; flex-direction: column; gap: 7px;
  background: linear-gradient(180deg, rgba(0,4,9,0), rgba(0,4,9,.9) 34%);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  animation: bar-in .5s var(--out) both;
}
/* Компактный бар для экрана итогов: две строки кнопок по 52px
   занимали слишком много экрана и давили карточку. */
.actionbar--slim {
  padding-top: 6px;
  /* Поднимаем бар над краем: вплотную к границе экрана кнопки
     труднее нажать и они спорят с жестовой полосой iOS.
     Отступ снизу — максимум из безопасной зоны и 20px: на телефонах
     с жестовой полосой сложение давало лишние 34px пустоты. */
  padding-bottom: max(var(--sab), 20px);
  gap: 8px;
}
.actionbar--slim .btn { min-height: 46px; font-size: 14px; padding: 0 15px; }
.actionbar--slim .actionbar__row { gap: 8px; }

/* Бар в потоке (экран итогов): контент там короткий, и фиксированный
   бар внизу экрана оставлял под собой до 225px пустоты.
   margin-top: auto — бар уезжает к низу экрана, а весь свободный запас
   высоты уходит в один зазор между контентом и кнопками. Раньше этот
   запас копился ниже кнопок мёртвой зоной. */
.actionbar--inline {
  position: static;
  transform: none;
  width: auto; max-width: none;
  margin-top: 22px;
  padding: 0 0 calc(var(--sab) + 26px);
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  animation: in-up .45s var(--spring) both;
}
/* Экран итогов короче своей высоты: запас в ~200px раньше висел мёртвой
   зоной под кнопками. Распускаем его поровну в зазоры между блоками,
   и кнопки уезжают к низу экрана.
   Все зазоры делятся поровну только если блоки — соседи в ОДНОМ flex-
   контейнере. Бар лежит в .draw, а карточка и места — двумя уровнями
   глубже, в .result внутри .stack. Поэтому промежуточные обёртки
   расформировываем через display: contents: их дети всплывают прямыми
   детьми .draw, и четыре auto-отступа получают общий запас. */
.stage--fill .draw {
  flex: 1;
  display: flex; flex-direction: column;
  min-height: 0;
  /* Минимальный зазор. auto-отступы схлопываются в 0, когда свободного
     места нет (низкий экран), и без gap блоки слипались бы вплотную.
     gap складывается с auto-отступами, а не спорит с ними. */
  gap: 16px;
  /* Компенсация padding расформированного .result: без неё карточка
     становится на 4px шире и вынос фигуры упирается в край экрана. */
  padding: 0 2px;
  /* Нижний воздух под кнопками на низком экране, где всё уходит в скролл. */
  padding-bottom: 4px;
}
.stage--fill .stack,
.stage--fill .result { display: contents; }
/* Строки мест и «честность» добирают по паре пикселей каждая — вместе
   это ещё ~30px запаса без ощущения растянутости. Только на высоких
   экранах: на 640px запаса нет и лишняя плотность уводила бы в скролл. */
@media (min-height: 760px) {
  .stage--fill .prize { padding-top: 16px; padding-bottom: 16px; }
  .stage--fill .proof__btn { padding-top: 14px; padding-bottom: 14px; }
}
/* Четыре равные доли запаса: шапка/карточка, карточка/места,
   места/честность, честность/кнопки. Собственный нижний отступ шапки
   обнуляем — иначе её зазор оказывается на 14px больше остальных. */
.stage--fill .draw__head { margin-bottom: 0; }
.stage--fill .win,
.stage--fill .rlose,
.stage--fill .awin,
.stage--fill .result__places,
.stage--fill .proof,
.stage--fill .actionbar--inline { margin-top: auto; }
/* Потолок зазора. На планшетной высоте четыре auto-доли раздувались
   до 134px и блоки переставали читаться группой. Выше 1000px запас
   уводим под кнопки — там пустота безобидна. */
@media (min-height: 1000px) {
  .stage--fill .win,
  .stage--fill .rlose,
  .stage--fill .awin,
  .stage--fill .result__places,
  .stage--fill .proof { margin-top: 0; }
  .stage--fill .draw { gap: 30px; }
}
@keyframes bar-in { from { transform: translate(-50%, 100%); } }

/* ------------------------------------------------------------
   badges / chips
   ------------------------------------------------------------ */

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  background: var(--glass-2);
  border: 1px solid var(--line-1);
  color: var(--tx-2);
  white-space: nowrap;
}
.badge--live { color: var(--ice-2); border-color: rgba(127,197,242,.3); background: rgba(62,133,181,.14); }
.badge--win  { color: var(--gold-2); border-color: rgba(217,185,121,.38); background: rgba(217,185,121,.12); }
.badge--gold { color: var(--gold-2); border-color: rgba(217,185,121,.38); background: rgba(217,185,121,.12); }
.badge--warn { color: var(--red); border-color: rgba(241,104,126,.34); background: rgba(241,104,126,.1); }

/* Маркер есть у всех статусных чипов, иначе «завершён» и «победа»
   стояли со сдвигом текста относительно «• идёт» в одном столбце.
   Цвет берётся от чипа, пульсирует только живой статус. */
.badge__dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: currentColor;
  opacity: .85;
}
.badge--live .badge__dot {
  background: var(--ice-3);
  opacity: 1;
  animation: live 2s var(--ease) infinite;
}
@keyframes live {
  0%   { box-shadow: 0 0 0 0 rgba(127,197,242,.5); }
  70%  { box-shadow: 0 0 0 7px rgba(127,197,242,0); }
  100% { box-shadow: 0 0 0 0 rgba(127,197,242,0); }
}

.metachip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  border-radius: var(--r-pill);
  background: var(--glass-1);
  border: 1px solid var(--line-1);
  font-size: 12px;
  color: var(--tx-2);
  white-space: nowrap;
}
.metachip b { color: var(--tx-1); font-weight: 700; }
.metachip svg { width: 14px; height: 14px; stroke: var(--tx-3); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ------------------------------------------------------------
   hero — маскот в центре, текст под ним
   ------------------------------------------------------------ */

/* ---------- hero: компактная сводка сверху ---------- */

.hero {
  position: relative;
  /* Сетка вместо flex: колонка под маскота фиксирована, поэтому
     на любой ширине экрана он стоит на одном месте. */
  display: grid;
  grid-template-columns: 112px 1fr;
  align-items: end;
  gap: 0 12px;
  /* сверху место под голову, которая выходит за рамку */
  margin-top: 30px;
  padding: 16px 16px 16px 10px;
  border-radius: var(--r-xl);
  border: 1px solid var(--line-2);
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(44,182,255,.24), transparent 60%),
    radial-gradient(100% 130% at 0% 100%, rgba(123,92,255,.2), transparent 62%),
    linear-gradient(165deg, rgba(28,72,116,.44), rgba(4,16,32,.62));
  box-shadow: var(--e-1);
  backdrop-filter: blur(var(--blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(160%);
}

/* бегущий блик по стеклу */
@media (prefers-reduced-motion: no-preference) {
  /* блик держим внутри рамки: у .hero больше нет overflow:hidden */
  .hero::after {
    content: "";
    position: absolute; inset: 0;
    border-radius: inherit;
    overflow: hidden;
    background: linear-gradient(100deg, transparent 30%, rgba(125,216,255,.12) 50%, transparent 70%);
    background-size: 260% 100%;
    background-repeat: no-repeat;
    animation: hero-sheen 7s var(--ease) 1.4s infinite;
    pointer-events: none;
  }
}
@keyframes hero-sheen {
  0%   { background-position: -160% 0; }
  38%  { background-position: 260% 0; }
  100% { background-position: 260% 0; }
}
@keyframes banner-sheen {
  0%   { transform: translateX(-160%); }
  38%  { transform: translateX(320%); }
  100% { transform: translateX(320%); }
}

.hero__motes {
  position: absolute; inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
}
.hero__motes i {
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--ice-2);
  box-shadow: 0 0 8px rgba(44,182,255,.65);
  opacity: .5;
}
.hero__motes i:nth-child(1) { left: 22%; top: 18%; }
.hero__motes i:nth-child(2) { left: 78%; top: 28%; width: 3px; height: 3px; }
.hero__motes i:nth-child(3) { left: 62%; top: 72%; width: 5px; height: 5px; }
.hero__motes i:nth-child(4) { left: 88%; top: 58%; }
@media (prefers-reduced-motion: no-preference) {
  .hero__motes i { animation: rlose-mote 5.6s var(--ease) infinite; }
  .hero__motes i:nth-child(2) { animation-duration: 6.4s; animation-delay: .5s; }
  .hero__motes i:nth-child(3) { animation-duration: 4.8s; animation-delay: .2s; }
  .hero__motes i:nth-child(4) { animation-duration: 7s; animation-delay: .8s; }
}

/* маскот слева, небольшой */
.hero__mask {
  /* Высота колонки задана жёстко, картинка внутри — абсолютная.
     Иначе крупный ассет растягивал карточку по своей высоте. */
  position: relative;
  align-self: end;
  height: 104px;
  margin: 0 0 -14px;
  pointer-events: none;
  z-index: 2;
  /* плавание живёт на обёртке: на картинке уже есть transform входа,
     две анимации одного свойства и давали дёрганье */
  animation: float-soft 5.2s var(--ease) infinite;
}
.hero__mask::before {
  content: "";
  position: absolute; inset: -16% -18% 8%;
  background: radial-gradient(circle at 52% 50%, rgba(44,182,255,.44), transparent 66%);
  filter: blur(12px);
  animation: hero-glow 4s var(--ease) infinite alternate;
}
@keyframes hero-glow {
  from { opacity: .5; transform: scale(.9); }
  to   { opacity: 1; transform: scale(1.08); }
}
.hero__mask img {
  /* Прижата к низу колонки и выходит вверх за карточку. */
  position: absolute;
  left: 50%; bottom: 0;
  display: block;
  width: 168px;
  max-width: none;
  height: auto;
  transform-origin: 50% 100%;
  margin-left: -84px;
  /* Растворяем только у самой кромки: раньше затухание начиналось
     с 46% и фигура «висела» намного выше низа карточки. */
  -webkit-mask-image: linear-gradient(
    180deg, #000 78%, rgba(0,0,0,.85) 88%, rgba(0,0,0,.45) 95%, transparent 100%);
          mask-image: linear-gradient(
    180deg, #000 78%, rgba(0,0,0,.85) 88%, rgba(0,0,0,.45) 95%, transparent 100%);
  /* тень рассеянная, без заметной кромки под фигурой */
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.42));
  animation: hero-in .8s var(--spring) both;
}
@keyframes hero-in {
  from { opacity: 0; transform: translate(-14px, 10px) scale(.88); }
}

.hero__body { position: relative; z-index: 2; min-width: 0; align-self: start; padding: 2px 0 0; }

/* приветствие с переливающимся градиентом */
.hero__hi {
  font-size: clamp(22px, 7.2vw, 28px);
  font-weight: 800;
  letter-spacing: -.035em; line-height: 1.12;
  text-wrap: balance;
  /* Полированный лёд: белый на верхней кромке букв уходит в
     насыщенный голубой к нижней — так свет ложится на металл.
     Плоский белый выглядел пустым. Золото сюда не подмешано: оно
     работает как акцент на опорном слове (.hero__hi em), иначе
     на многострочной фразе попадало бы на случайные буквы. */
  background: linear-gradient(
    176deg,
    #FFFFFF 0%, #F0FAFF 28%, #C3E7FF 56%, #8FD3FF 78%, #5FC0F5 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  /* лёгкая посадка на фон: без неё светлый текст висит в воздухе */
  filter: drop-shadow(0 2px 10px rgba(4,16,32,.55));
  animation: hi-in .6s var(--spring) both;
}

/* Опорное слово фразы — золото награды с бегущим бликом.
   Блик один и проходит редко: текст остаётся золотым, а не мигающим.
   Бесшовность: смещение при background-position P% равно W×(1−s)×P,
   путь кратен плитке только при s=200% и P=200%, иначе цикл рвётся
   на развороте. Крайние стопы совпадают — стык плиток невидим. */
.hero__hi em {
  font-style: normal;
  background:
    linear-gradient(
      100deg,
      transparent 0%, transparent 42%,
      rgba(255,255,255,.92) 50%,
      transparent 58%, transparent 100%),
    linear-gradient(176deg, #FFF3C9 0%, #FFE08A 34%, #FFC24B 72%, #E8A32B 100%);
  background-size: 200% 100%, 100% 100%;
  background-repeat: repeat, no-repeat;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  animation: hi-flow 9s linear 1.1s infinite;
}
@keyframes hi-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes hi-flow {
  from { background-position: 0% 0, 0 0; }
  to   { background-position: 200% 0, 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__hi em { animation: none; background-position: 30% 0, 0 0; }
}

.hero__tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  background: rgba(43,227,138,.14);
  border: 1px solid rgba(43,227,138,.36);
  color: var(--green);
  font-size: 9.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}
.hero__tag i {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--green);
  animation: live-g 2s var(--ease) infinite;
}
@keyframes live-g {
  0%   { box-shadow: 0 0 0 0 rgba(43,227,138,.55); }
  70%  { box-shadow: 0 0 0 7px rgba(43,227,138,0); }
  100% { box-shadow: 0 0 0 0 rgba(43,227,138,0); }
}

.hero__rail {
  display: flex;
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--line-1);
}
.hero__cell { flex: 1; min-width: 0; }
.hero__cell + .hero__cell { border-left: 1px solid var(--line-1); padding-left: 11px; }
.hero__cell b {
  display: block;
  font-family: var(--num);
  font-size: 19px; font-weight: 800;
  letter-spacing: -.035em;
  color: var(--tx-1);
}
.hero__cell small {
  display: block; margin-top: 1px;
  font-size: 8.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--tx-3);
}
.hero__cell--ice b { color: var(--ice-2); }
.hero__cell--gold b { color: var(--gold); }

/* полоса доверия: строго один ряд, три равные доли */
.trust {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 10px;
}
.trust__item {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  min-width: 0;
  padding: 8px 6px;
  border-radius: var(--r-pill);
  background: var(--glass-1);
  border: 1px solid var(--line-1);
  font-size: 10.5px; font-weight: 500;
  letter-spacing: -.01em;
  color: var(--tx-2);
  white-space: nowrap;
  animation: chip-in .5s var(--spring) both;
}
.trust__item svg { flex: 0 0 auto; }
.trust__item:nth-child(2) { animation-delay: .07s; }
.trust__item:nth-child(3) { animation-delay: .14s; }
@keyframes chip-in { from { opacity: 0; transform: translateY(8px) scale(.92); } }
.trust__item svg { width: 13px; height: 13px; stroke: var(--ice-3); fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* ------------------------------------------------------------
   giveaway card
   ------------------------------------------------------------ */

/* Карточка развёрнута всегда: «Участвовать» — главное действие
   приложения и не должно прятаться за тапом. Читается сверху вниз как
   афиша: статус → название → приз → цифры → кнопка. */

.gw {
  position: relative;
  margin-top: 12px;
  padding: 15px;
  overflow: hidden;
  cursor: pointer;
  /* Тёплый свет от приза сверху справа на общем ледяном стекле: карточка
     розыгрыша — единственное место в ленте, где живёт золото. */
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(255,194,75,.09), transparent 58%),
    var(--glass-1);
  transition: transform .35s var(--spring), background .3s var(--ease);
}
/* Не :active — он всплывает от кнопок внутри, и нажатие «Участвовать»
   сжимало карточку целиком поверх собственной анимации кнопки. Класс
   ставит JS и только когда палец лёг мимо кнопок. */
.gw.is-press { transform: scale(.984); background: var(--glass-2); }

/* Ледяная нить по левому краю — метка «идёт сейчас». У карточки, где
   номер уже взят, она горит ярче: это твой розыгрыш. */
.gw::before {
  content: "";
  position: absolute; left: 0; top: 14px; bottom: 14px;
  width: 2px;
  border-radius: 0 2px 2px 0;
  background: var(--g-ice);
  opacity: .5;
}
.gw--joined::before { opacity: 1; box-shadow: 0 0 12px rgba(44,182,255,.6); }

/* Два формата розыгрыша различаются с одного взгляда, а не только
   надписью на бейдже. Открытый — золото приза на ледяном стекле,
   как во всей ленте. Закрытый — фиолетовая нить и холодная плашка:
   «для своих» здесь читается материалом, а не текстом.

   Фиолетовый взят из фоновой ауры приложения, поэтому карточка не
   выпадает из палитры; золото остаётся закреплённым за общедоступным
   призом, который может забрать любой. */
.gw--team {
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(123,92,255,.13), transparent 58%),
    var(--glass-1);
  border-color: rgba(123,92,255,.26);
}
.gw--team::before { background: linear-gradient(180deg, #A78BFF, #7B5CFF 60%, #5B3CE0); }
.gw--team.gw--joined::before { box-shadow: 0 0 12px rgba(123,92,255,.65); }

/* ---------- шапка: статус слева, время справа ---------- */

.gw__top {
  display: flex; align-items: center;
  gap: 7px;
  margin-bottom: 11px;
}
.badge--team {
  color: #C9B8FF;
  border-color: rgba(123,92,255,.42);
  background: rgba(123,92,255,.16);
}
.badge--team svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.gw__clock {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: auto;
  font-family: var(--num);
  font-size: 12.5px; font-weight: 600;
  letter-spacing: -.02em;
  color: var(--tx-2);
  font-variant-numeric: tabular-nums;
}
.gw__clock svg { width: 13px; height: 13px; stroke: var(--tx-3); fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.gw__clock--tbd { color: var(--tx-3); }
/* Последний час: время перестаёт быть справкой и становится поводом
   нажать — отсюда красный и пульс. */
.gw__clock--hot { color: var(--red); }
.gw__clock--hot svg { stroke: var(--red); }
.gw__clock--now { color: var(--gold-2); }
.gw__clock--now svg { stroke: var(--gold); fill: rgba(255,194,75,.2); }
@media (prefers-reduced-motion: no-preference) {
  .gw__clock--hot span { animation: breathe 1.1s var(--ease) infinite alternate; }
  .gw__clock--now { animation: breathe 1.4s var(--ease) infinite alternate; }
}

/* ---------- название и описание ---------- */

.gw__name {
  font-size: 18px; font-weight: 700;
  letter-spacing: -.025em; line-height: 1.2;
  /* Две строки максимум: третья ломала ритм ленты, а название розыгрыша
     всё равно повторяется на его экране целиком. */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
}
.gw__note {
  margin-top: 6px;
  font-size: 12.5px; line-height: 1.5;
  color: var(--tx-3);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
}

/* ---------- призовая плашка ---------- */

.gw__prize {
  position: relative;
  display: flex; align-items: center; gap: 11px;
  margin-top: 12px;
  padding: 11px 13px;
  border-radius: var(--r-md);
  border: 1px solid rgba(255,194,75,.26);
  background: linear-gradient(135deg, rgba(255,194,75,.14), rgba(255,194,75,.04) 62%, transparent);
  overflow: hidden;
}
/* Редкий блик по золоту — плашка выглядит металлом, а не заливкой.
   Задержка своя у каждой карточки (--sheen), иначе лента моргает
   целиком. */
@media (prefers-reduced-motion: no-preference) {
  .gw__prize::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(104deg, transparent 38%, rgba(255,224,138,.22) 50%, transparent 62%);
    transform: translateX(-140%);
    animation: banner-sheen 6.5s var(--ease) var(--sheen, 0s) infinite;
    pointer-events: none;
  }
}
.gw__prizeIco {
  width: 34px; height: 34px; flex: 0 0 34px;
  border-radius: 11px;
  display: grid; place-items: center;
  background: var(--g-gold);
  box-shadow: 0 4px 16px rgba(255,194,75,.32);
}
.gw__prizeIco svg { width: 19px; height: 19px; stroke: #241802; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gw__prizeTxt { min-width: 0; flex: 1; }
.gw__prizeTxt small {
  display: block;
  font-size: 9px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--tx-3);
}
.gw__prizeTxt b {
  display: block; margin-top: 2px;
  font-size: 16px; font-weight: 700; letter-spacing: -.02em;
  color: var(--gold-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gw__prizeMore {
  flex: 0 0 auto;
  padding: 4px 9px;
  border-radius: var(--r-pill);
  background: rgba(255,194,75,.12);
  border: 1px solid rgba(255,194,75,.24);
  font-size: 10.5px; font-weight: 700;
  color: var(--gold-2);
  white-space: nowrap;
}

/* Приз командного розыгрыша — та же плашка в холодном металле.
   Иконка щита вместо кубка ставится в разметке: приз здесь не открыт
   всем, и об этом честнее сказать формой, а не только цветом. */
.gw--team .gw__prize {
  border-color: rgba(123,92,255,.28);
  background: linear-gradient(135deg, rgba(123,92,255,.16), rgba(123,92,255,.05) 62%, transparent);
}
.gw--team .gw__prize::after {
  background: linear-gradient(104deg, transparent 38%, rgba(201,184,255,.2) 50%, transparent 62%);
}
.gw--team .gw__prizeIco {
  background: linear-gradient(135deg, #C9B8FF 0%, #7B5CFF 55%, #5B3CE0 100%);
  box-shadow: 0 4px 16px rgba(123,92,255,.36);
}
.gw--team .gw__prizeIco svg { stroke: #120A2E; }
.gw--team .gw__prizeTxt b { color: #D9CCFF; }
.gw--team .gw__prizeMore {
  background: rgba(123,92,255,.14);
  border-color: rgba(123,92,255,.3);
  color: #C9B8FF;
}

/* Подпись вместо чипов: два факта не стоят двух отдельных плашек, а
   карточка и так плотная. Каждый факт — неразрывная ячейка: на узких
   экранах строка переносится целиком, а не рвётся посреди «12 000
   участников». Дата приглушена, потому что обратный отсчёт в шапке
   отвечает на тот же вопрос точнее. */
.gw__meta {
  display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap;
  margin-top: 11px;
  font-size: 12px;
  color: var(--tx-3);
}
.gw__metaCell { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.gw__metaCell b { color: var(--tx-1); font-weight: 700; font-family: var(--num); letter-spacing: -.02em; }
.gw__metaCell svg { width: 14px; height: 14px; flex: 0 0 14px; stroke: var(--tx-3); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- действие ---------- */

.gw__act { display: flex; align-items: center; gap: 11px; margin-top: 13px; }

.gw__act .btn__text { display: inline-flex; align-items: center; }

.btn svg.bico {
  width: 15px; height: 15px; flex: 0 0 15px;
  margin-right: 6px;
  stroke: currentColor; fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

.gw__title { font-size: 19px; font-weight: 700; letter-spacing: -.025em; line-height: 1.24; }
.gw__desc { margin-top: 8px; font-size: 13px; line-height: 1.55; color: var(--tx-2); }

.myticket { flex: 1; display: flex; align-items: center; gap: 11px; min-width: 0; }
.myticket__box {
  padding: 8px 14px;
  border-radius: var(--r-sm);
  background: rgba(62,133,181,.14);
  border: 1px solid rgba(127,197,242,.28);
  text-align: center;
}
.myticket__box small {
  display: block;
  font-size: 10px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--tx-3);
}
.myticket__box b {
  display: block; margin-top: 2px;
  font-family: var(--num);
  font-size: 20px; font-weight: 700;
  letter-spacing: -.03em;
  color: var(--ice-2);
}

/* prize vault — топ-приз крупно, остальные списком */
.vault {
  margin-top: 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-1);
  background: linear-gradient(180deg, rgba(217,185,121,.07), rgba(255,255,255,.015));
  overflow: hidden;
}
.vault__top {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 14px;
}
.vault__medal {
  width: 34px; height: 34px; flex: 0 0 34px;
  border-radius: 11px;
  display: grid; place-items: center;
  font-family: var(--num);
  font-size: 14px; font-weight: 800;
  background: var(--g-gold);
  color: #241802;
  box-shadow: 0 4px 16px rgba(217,185,121,.3);
}
.vault__txt { min-width: 0; }
.vault__txt small {
  display: block;
  font-size: 9.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--tx-3);
}
.vault__txt b {
  display: block; margin-top: 2px;
  font-size: 16px; font-weight: 700; letter-spacing: -.02em;
  color: var(--gold-2);
}
.vault__rest { border-top: 1px solid var(--line-1); }

.prize {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 14px;
}
.prize + .prize { border-top: 1px solid var(--line-1); }
.prize__medal {
  width: 24px; height: 24px; flex: 0 0 24px;
  border-radius: 8px;
  display: grid; place-items: center;
  font-family: var(--num);
  font-size: 11.5px; font-weight: 700;
  background: var(--glass-3);
  color: var(--tx-2);
}
.prize--1 .prize__medal { background: var(--g-gold); color: #241802; }
.prize--2 .prize__medal { background: linear-gradient(135deg, #E6ECF2, #A9B7C4); color: #131A22; }
.prize--3 .prize__medal { background: linear-gradient(135deg, #D6A882, #A0693F); color: #1E0F03; }
.prize__text { flex: 1; font-size: 13.5px; font-weight: 500; min-width: 0; color: var(--tx-1); }
.prize__num { font-family: var(--num); font-size: 12.5px; font-weight: 700; color: var(--ice-3); white-space: nowrap; }
.prize--me { background: rgba(217,185,121,.1); }
.prize--me .prize__num { color: var(--gold-2); }
.prize.is-reveal { animation: reveal .6s var(--out) both; }
@keyframes reveal { from { opacity: 0; transform: translateX(-12px); } }

/* ------------------------------------------------------------
   links
   ------------------------------------------------------------ */

.links__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.linkcard {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 15px;
  border-radius: var(--r-lg);
  background: var(--glass-1);
  border: 1px solid var(--line-1);
  box-shadow: 0 0 22px rgba(44,182,255,.1), 0 8px 22px rgba(0,0,0,.42);
  overflow: hidden;
  text-align: left;
  transition: transform .3s var(--spring), background .3s var(--ease), border-color .3s, box-shadow .3s var(--ease);
  animation: link-in .55s var(--spring) both;
}
@keyframes link-in { from { opacity: 0; transform: translateY(14px) scale(.94); } }
.linkcard:active { transform: scale(.965); background: var(--glass-2); }

.linkcard__ico {
  width: 40px; height: 40px; flex: 0 0 40px;
  border-radius: 13px;
  display: grid; place-items: center;
  background: var(--glass-2);
  border: 1px solid var(--line-1);
  transition: transform .35s var(--spring);
}
.linkcard:active .linkcard__ico { transform: scale(.9) rotate(-6deg); }
.linkcard__ico svg { width: 20px; height: 20px; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Каждый значок подсвечен своим цветом: ореол наружу и мягкий отсвет
   на самой иконке. Цвет задаётся один раз в --tint, дальше его
   разбирают и фон, и рамка, и тени. */
.linkcard--channel .linkcard__ico { --tint: 44,182,255;  }
.linkcard--channel .linkcard__ico svg { stroke: var(--ice-2); }
.linkcard--youtube .linkcard__ico { --tint: 255,90,120; }
.linkcard--youtube .linkcard__ico svg { stroke: #FF7A92; }
.linkcard--manager .linkcard__ico { --tint: 43,227,138; }
.linkcard--manager .linkcard__ico svg { stroke: var(--green); }
.linkcard--founder .linkcard__ico { --tint: 255,194,75; }
.linkcard--founder .linkcard__ico svg { stroke: var(--gold); }

.linkcard__ico {
  background: rgba(var(--tint), .16);
  border-color: rgba(var(--tint), .4);
  box-shadow:
    0 0 14px rgba(var(--tint), .3),
    inset 0 0 10px rgba(var(--tint), .16);
}
.linkcard__ico svg { filter: drop-shadow(0 0 5px rgba(var(--tint), .55)); }
.linkcard:active .linkcard__ico { box-shadow: 0 0 20px rgba(var(--tint), .45), inset 0 0 10px rgba(var(--tint), .2); }

.linkcard__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.linkcard__txt b {
  font-size: 14px; font-weight: 600; letter-spacing: -.015em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.linkcard__txt small {
  margin-top: 2px;
  font-size: 11.5px; color: var(--tx-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Один калибр на все контакты. Раньше канал с YouTube были крупнее
   остальных, и блок читался как два разных списка. */
.linkcard { gap: 10px; padding: 11px 12px; border-radius: var(--r-md); }
.linkcard__ico { width: 32px; height: 32px; flex-basis: 32px; border-radius: 10px; }
.linkcard__ico svg { width: 16px; height: 16px; }
.linkcard__txt b { font-size: 13px; }
.linkcard__txt small { font-size: 11px; }
.linkcard__go { display: none; }

/* ------------------------------------------------------------
   empty
   ------------------------------------------------------------ */

/* Пауза — сноска в ленте, а не событие: значок слева, текст справа,
   ссылка вместо кнопки во всю ширину. Столбик (--stack) остаётся для
   экранов, где пустое состояние и есть всё содержимое. */
.empty {
  position: relative;
  overflow: hidden;
  display: flex;
  /* Значок центрируется по всему тексту блока. Прижатый к верху
     (flex-start) он висел на уровне заголовка и заваливал строку. */
  align-items: center;
  gap: 13px;
  padding: 14px 15px;
}
/* Ожидание — не пустота, а режим ожидания: по плашке медленно проходит
   ледяное северное сияние. Луч уходит за края, поэтому overflow скрыт. */
.empty::before {
  content: "";
  position: absolute;
  inset: -60% -20%;
  background:
    radial-gradient(46% 60% at 18% 40%, rgba(44,182,255,.22), transparent 70%),
    radial-gradient(38% 52% at 62% 60%, rgba(123,92,255,.16), transparent 72%);
  filter: blur(14px);
  opacity: .9;
  pointer-events: none;
  animation: empty-aurora 14s ease-in-out infinite;
}
@keyframes empty-aurora {
  0%, 100% { transform: translate3d(-8%, 0, 0) scale(1); }
  50%      { transform: translate3d(12%, 2%, 0) scale(1.12); }
}
.empty__body { position: relative; min-width: 0; }
.empty__mark {
  position: relative;
  flex: 0 0 auto;
  width: 38px; height: 38px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(44,182,255,.1);
  border: 1px solid rgba(125,216,255,.28);
  color: var(--ice-2);
}
/* Маяк в ожидании: от значка расходится кольцо — знак, что канал живой
   и розыгрыш включат, а не что всё выключено. */
.empty__mark--fill::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid rgba(125,216,255,.55);
  animation: empty-ping 2.8s cubic-bezier(.22,.61,.36,1) infinite;
  pointer-events: none;
}
@keyframes empty-ping {
  0%        { transform: scale(1);    opacity: .75; }
  70%, 100% { transform: scale(1.55); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .empty::before, .empty__mark--fill::after { animation: none; }
}
.empty__mark svg { width: 16px; height: 16px; }
.empty__mark--fill svg { fill: currentColor; stroke: none; }
.empty__mark--line svg {
  fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.empty b { font-size: 14.5px; font-weight: 700; letter-spacing: -.015em; }
.empty p { margin-top: 2px; font-size: 12.5px; color: var(--tx-3); line-height: 1.45; }

/* ссылка-действие: подчёркнута снизу, тянет ровно на свою длину */
.empty__cta {
  display: inline-block;
  margin-top: 7px;
  padding: 0 0 2px;
  border: 0; border-bottom: 1px solid rgba(125,216,255,.5);
  background: transparent;
  color: var(--ice-2);
  font-size: 13px; font-weight: 600;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.empty__cta:active { color: var(--ice-1); border-color: var(--ice-2); }

/* столбик: пустота как единственное содержимое экрана */
.empty--stack {
  flex-direction: column; align-items: center;
  text-align: center;
  padding: 26px 22px 22px;
  gap: 6px;
}
.empty--stack .empty__mark { width: 52px; height: 52px; border-radius: 16px; margin-bottom: 6px; }
.empty--stack .empty__mark svg { width: 22px; height: 22px; }
.empty--stack b { font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
.empty--stack p { font-size: 13.5px; line-height: 1.55; max-width: 280px; }

/* ------------------------------------------------------------
   tickets
   ------------------------------------------------------------ */

.trow { display: flex; align-items: center; gap: 14px; margin-top: 9px; padding: 14px 16px; }
.trow__num {
  min-width: 58px; height: 52px;
  padding: 0 10px;
  border-radius: 14px;
  display: grid; place-items: center;
  font-family: var(--num);
  font-size: 19px; font-weight: 700;
  letter-spacing: -.03em;
  background: rgba(62,133,181,.16);
  border: 1px solid rgba(127,197,242,.26);
  color: var(--ice-2);
}
.trow--win .trow__num {
  background: rgba(217,185,121,.14);
  border-color: rgba(217,185,121,.4);
  color: var(--gold-2);
}
.trow__body { flex: 1; min-width: 0; }
.trow__title { font-size: 14.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trow__sub { margin-top: 3px; font-size: 12px; color: var(--tx-3); }
.trow__go svg { width: 18px; height: 18px; stroke: var(--tx-3); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ------------------------------------------------------------
   profile
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   profile
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   админка: сводка, действия, карточки розыгрышей
   ------------------------------------------------------------ */

/* Сводка одной плитой: три отдельные карточки создавали три рамки
   на треть экрана и спорили с карточками розыгрышей ниже. */
.astat {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-radius: var(--r-lg);
  border: 1px solid var(--line-1);
  background:
    radial-gradient(120% 180% at 0% 0%, rgba(44,182,255,.14), transparent 64%),
    var(--glass-1);
  box-shadow: var(--e-1);
  overflow: hidden;
}
.astat__c {
  padding: 15px 8px 13px;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  transition: background .25s var(--ease);
}
.astat__c + .astat__c { border-left: 1px solid var(--line-1); }
.astat__c:active { background: var(--glass-2); }
.astat__c b {
  display: block;
  font-family: var(--num);
  font-size: 21px; font-weight: 800; letter-spacing: -.04em;
  color: var(--tx-1);
}
.astat__c span {
  display: block; margin-top: 4px;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--tx-3);
}
.astat__c--ice b { color: var(--ice-3); }
.astat__c--gold b { color: var(--gold); }
.astat__c .pblur { min-width: 30px; }

/* Строка-действие: иконка + название + подпись + шеврон.
   Заменяет разнобой из «кнопка-призрак» разной ширины. */
.arow {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  padding: 13px 14px;
  border-radius: var(--r-md);
  background: var(--glass-1);
  border: 1px solid var(--line-1);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .3s var(--spring), background .25s var(--ease),
              border-color .25s var(--ease);
}
.arow:active { transform: scale(.982); background: var(--glass-2); border-color: var(--line-2); }
.arow:disabled { opacity: .5; pointer-events: none; }
/* setBusy() подкладывает .btn__spin — у строки он ложится справа, на месте шеврона */
.arow { position: relative; }
.arow.is-busy .arow__go,
.arow.is-busy .arow__state { opacity: 0; }
.arow .btn__spin { position: absolute; inset: 0 14px 0 auto; width: 20px; display: grid; place-items: center; }
.arow .btn__spin i {
  width: 17px; height: 17px;
  border-radius: 50%;
  border: 2.2px solid rgba(125,216,255,.22);
  border-top-color: var(--ice-2);
  animation: spin .7s linear infinite;
}
.arow__ic {
  flex: 0 0 38px; width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: rgba(44,182,255,.12);
  border: 1px solid rgba(125,216,255,.2);
}
.arow__ic svg {
  width: 18px; height: 18px;
  stroke: var(--ice-2); fill: none;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.arow__tx { flex: 1; min-width: 0; }
.arow__tx b {
  display: block;
  font-size: 14px; font-weight: 650; letter-spacing: -.01em;
  color: var(--tx-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.arow__tx small {
  display: block; margin-top: 2px;
  font-size: 11.5px; color: var(--tx-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.arow__go {
  flex: 0 0 16px;
  width: 16px; height: 16px;
  stroke: var(--tx-3); fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  opacity: .7;
}
/* акцентные варианты строк */
.arow--gold .arow__ic { background: rgba(255,194,75,.13); border-color: rgba(255,194,75,.26); }
.arow--gold .arow__ic svg { stroke: var(--gold); }
.arow--green .arow__ic { background: rgba(43,227,138,.13); border-color: rgba(43,227,138,.26); }
.arow--green .arow__ic svg { stroke: var(--green); }
.arow--danger { border-color: rgba(255,90,120,.24); }
.arow--danger .arow__ic { background: rgba(255,90,120,.12); border-color: rgba(255,90,120,.26); }
.arow--danger .arow__ic svg { stroke: var(--red); }
.arow--danger .arow__tx b { color: #FF8A9E; }

/* состояние строки-переключателя (вкл/выкл интеграции) */
.arow__state {
  flex: 0 0 auto;
  padding: 4px 9px;
  border-radius: var(--r-pill);
  font-size: 9.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid var(--line-1);
  color: var(--tx-3);
  background: var(--glass-2);
}
.arow__state.is-on {
  color: var(--green);
  border-color: rgba(43,227,138,.34);
  background: rgba(43,227,138,.12);
}

/* Карточка розыгрыша в списке админки: слева индекс, справа мета. */
.agw { display: flex; gap: 12px; align-items: flex-start; }
.agw__id {
  flex: 0 0 42px;
  display: grid; place-items: center;
  height: 42px;
  border-radius: 13px;
  font-family: var(--num);
  font-size: 13px; font-weight: 800; letter-spacing: -.03em;
  color: var(--ice-2);
  background: rgba(44,182,255,.1);
  border: 1px solid rgba(125,216,255,.2);
}
.agw--done .agw__id { color: var(--gold-2); background: rgba(255,194,75,.1); border-color: rgba(255,194,75,.24); }
.agw--hidden .agw__id { color: var(--tx-3); background: var(--glass-2); }
.agw__body { flex: 1; min-width: 0; }
.agw__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.agw__title {
  font-size: 15px; font-weight: 650; letter-spacing: -.02em;
  line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.agw__meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }

/* Шапка карточки розыгрыша в детальном экране */
.adet {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  border: 1px solid var(--line-2);
  padding: 18px;
  background:
    radial-gradient(130% 160% at 0% 0%, rgba(44,182,255,.16), transparent 62%),
    radial-gradient(120% 150% at 100% 100%, rgba(123,92,255,.13), transparent 66%),
    var(--glass-1);
  box-shadow: var(--e-1);
}

/* шапка: аватар из Telegram + имя */
.phead {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 16px;
  border-radius: var(--r-xl);
  border: 1px solid var(--line-2);
  overflow: hidden;
  background:
    radial-gradient(120% 150% at 0% 0%, rgba(44,182,255,.2), transparent 62%),
    radial-gradient(110% 140% at 100% 100%, rgba(123,92,255,.18), transparent 64%),
    var(--glass-1);
  box-shadow: var(--e-1);
}
.phead__glow {
  position: absolute;
  top: -40%; left: -10%;
  width: 62%; height: 180%;
  background: radial-gradient(circle at 50% 50%, rgba(125,216,255,.22), transparent 66%);
  filter: blur(22px);
  pointer-events: none;
  animation: hero-glow 5s var(--ease) infinite alternate;
}
.phead__ava {
  position: relative;
  width: 72px; height: 72px; flex: 0 0 72px;
  border-radius: 24px;
  display: grid; place-items: center;
  background: var(--g-ice);
  color: var(--ink-0);
  box-shadow: var(--glow-ice);
  overflow: hidden;
  animation: in-pop .6s var(--spring) both;
}
/* с фото фон не нужен: иначе просвечивает по краям при прозрачном png */
.phead__ava--img { background: var(--g-ice); }
.phead__img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity .18s var(--ease);
}
.phead__img.is-on { opacity: 1; }
.phead__ini { font-size: 27px; font-weight: 700; letter-spacing: -.02em; }

.phead__id { position: relative; flex: 1; min-width: 0; }
.phead__name {
  font-size: 19px; font-weight: 700; letter-spacing: -.03em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  animation: in-up .5s var(--spring) .1s both;
}
.phead__tag {
  margin-top: 3px;
  font-size: 12.5px; color: var(--ice-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  animation: in-up .5s var(--spring) .16s both;
}

/* Статус участника под ником: обычный — стекло, командный — фиолет.
   Раньше здесь висела статичная надпись «участник розыгрышей», которая
   не несла информации — теперь строка говорит о реальном уровне доступа. */
.phead__rank {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 7px;
  max-width: 100%;
  padding: 4px 11px 4px 8px;
  border-radius: var(--r-pill);
  background: rgba(125,216,255,.1);
  border: 1px solid var(--line-1);
  color: var(--pt-2);
  font-size: 11px; font-weight: 650; letter-spacing: -.005em;
  animation: in-up .5s var(--spring) .16s both;
}
.phead__rank span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.phead__rankIco {
  width: 13px; height: 13px; flex: 0 0 13px;
  stroke: currentColor; fill: none;
  stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round;
}
.phead__rank--team {
  background: linear-gradient(120deg, rgba(123,92,255,.3), rgba(167,139,255,.14));
  border-color: rgba(167,139,255,.5);
  color: #E3DAFF;
  box-shadow: 0 0 20px rgba(123,92,255,.28);
}
/* Мягкое дыхание ореола — статус читается как «живой», а не как наклейка. */
@media (prefers-reduced-motion: no-preference) {
  .phead__rank--team { animation: in-up .5s var(--spring) .16s both, rank-breathe 3.6s var(--ease) 1s infinite; }
}
@keyframes rank-breathe {
  0%, 100% { box-shadow: 0 0 20px rgba(123,92,255,.28); }
  50%      { box-shadow: 0 0 30px rgba(123,92,255,.5); }
}
/* Командный профиль: шапка уходит в фиолетовую тему тех же розыгрышей. */
.phead--team {
  border-color: rgba(167,139,255,.34);
  background:
    radial-gradient(120% 150% at 0% 0%, rgba(123,92,255,.26), transparent 62%),
    radial-gradient(110% 140% at 100% 100%, rgba(44,182,255,.14), transparent 64%),
    var(--glass-1);
}
.phead--team .phead__glow {
  background: radial-gradient(circle at 50% 50%, rgba(167,139,255,.26), transparent 66%);
}
/* Бейдж админа вынесен из потока в угол: в строке он съедал ширину,
   и статус «Командный участник» обрезался многоточием у админов. */
.phead__badge {
  position: absolute;
  top: 12px; right: 12px;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  background: rgba(255,194,75,.14);
  border: 1px solid rgba(255,194,75,.4);
  color: var(--gold);
  font-size: 9.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}
/* Чтобы длинный ник не уехал под бейдж, первая строка уже на его ширину.
   Класс вешает JS, а не :has() — в WebView старых Android его нет. */
.phead--badged .phead__name { padding-right: 68px; }

/* стата */
.pstats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 10px;
}
.pstat {
  padding: 14px 8px 12px;
  border-radius: var(--r-lg);
  background: var(--glass-1);
  border: 1px solid var(--line-1);
  text-align: center;
}
.pstat b {
  display: block;
  font-family: var(--num);
  font-size: 22px; font-weight: 700; letter-spacing: -.04em;
  color: var(--ice-2);
}
/* только прямой потомок: вложенный счётчик в <b> не должен ловить эти стили */
.pstat > span {
  display: block; margin-top: 3px;
  font-size: 10.5px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--tx-3);
}
.pstat b i { font-style: normal; }
.pstat--gold b { color: var(--gold); }

/* ------------------------------------------------------------
   карточка команды в профиле

   Два состояния одного блока: --in для своих (доступ есть) и --out
   для остальных (приглашение). Оба в фиолетовой теме team-розыгрышей,
   чтобы цвет читался как «то же самое, что закрытые карточки на главной».
   ------------------------------------------------------------ */

.tcard {
  position: relative;
  overflow: hidden;
  margin-top: 14px;
  padding: 18px 17px 17px;
  border-radius: var(--r-xl);
  border: 1px solid rgba(167,139,255,.32);
  background:
    radial-gradient(130% 150% at 0% 0%, rgba(123,92,255,.28), transparent 60%),
    radial-gradient(120% 160% at 100% 100%, rgba(44,182,255,.14), transparent 62%),
    linear-gradient(180deg, rgba(20,12,48,.6), rgba(8,10,26,.5));
  box-shadow:
    0 1px 0 rgba(200,180,255,.12) inset,
    0 0 30px rgba(123,92,255,.16),
    0 18px 44px rgba(0,2,6,.5);
}
/* Живой ореол внутри карточки: без него блок выглядит плоским прямоугольником. */
.tcard__aura {
  position: absolute;
  top: -60%; left: -18%;
  width: 72%; height: 220%;
  background: radial-gradient(circle at 50% 50%, rgba(167,139,255,.3), transparent 66%);
  filter: blur(26px);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .tcard__aura { animation: hero-glow 6s var(--ease) infinite alternate; }
}
/* Лучи только у приглашения: добавляют движения тому экрану, где нужно действие. */
.tcard__rays {
  position: absolute; inset: -50% -20%;
  pointer-events: none;
  opacity: .3;
  background: conic-gradient(
    from 0deg at 50% 50%,
    transparent 0deg, rgba(167,139,255,.24) 12deg, transparent 26deg,
    transparent 90deg, rgba(125,216,255,.18) 104deg, transparent 120deg,
    transparent 200deg, rgba(167,139,255,.2) 214deg, transparent 230deg,
    transparent 360deg);
  mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 68%);
  -webkit-mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 68%);
}
@media (prefers-reduced-motion: no-preference) {
  .tcard__rays { animation: rays-spin 26s linear infinite; }
}
@keyframes rays-spin { to { transform: rotate(360deg); } }

.tcard__top {
  position: relative;
  display: flex; align-items: center; gap: 12px;
}
.tcard__seal {
  flex: 0 0 44px;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 15px;
  background: linear-gradient(135deg, #C9B8FF 0%, #8B6CFF 52%, #5B3CE0 100%);
  box-shadow: 0 8px 26px rgba(123,92,255,.5);
  animation: in-pop .55s var(--spring) both;
}
.tcard__seal svg {
  width: 21px; height: 21px;
  stroke: #150B33; fill: none;
  stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round;
}
.tcard__seal--locked {
  background: linear-gradient(135deg, rgba(201,184,255,.24), rgba(91,60,224,.3));
  border: 1px solid rgba(167,139,255,.5);
  box-shadow: 0 8px 26px rgba(123,92,255,.24);
}
.tcard__seal--locked svg { stroke: #D9CCFF; }

.tcard__head { flex: 1; min-width: 0; }
.tcard__kicker {
  display: block;
  font-size: 9.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(201,184,255,.72);
}
.tcard__title {
  display: block; margin-top: 3px;
  font-size: 17.5px; font-weight: 750; letter-spacing: -.03em;
  color: var(--tx-1);
}
/* Зелёная галочка справа — мгновенное «доступ подтверждён». */
.tcard__pulse {
  flex: 0 0 26px;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(43,227,138,.16);
  border: 1px solid rgba(43,227,138,.44);
}
.tcard__pulse svg {
  width: 13px; height: 13px;
  stroke: var(--green); fill: none;
  stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
}
@media (prefers-reduced-motion: no-preference) {
  .tcard__pulse { animation: tpulse 2.8s var(--ease) infinite; }
}
@keyframes tpulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(43,227,138,.34); }
  60%      { box-shadow: 0 0 0 9px rgba(43,227,138,0); }
}

.tcard__text {
  position: relative;
  margin-top: 13px;
  font-size: 13px; line-height: 1.6;
  color: var(--tx-2);
}

.tcard__perks {
  position: relative;
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 13px;
}
.tperk {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 10px;
  border-radius: var(--r-pill);
  background: rgba(123,92,255,.14);
  border: 1px solid rgba(167,139,255,.26);
  color: #DDD3FF;
  font-size: 11px; font-weight: 600;
}
.tperk svg {
  width: 12px; height: 12px;
  stroke: currentColor; fill: none;
  stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round;
}

.tcard__live {
  position: relative;
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 13px;
  font-size: 11.5px; font-weight: 600;
  color: rgba(217,204,255,.9);
}
.tcard__live i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 10px rgba(43,227,138,.8);
}
@media (prefers-reduced-motion: no-preference) {
  .tcard__live i { animation: tlive 2.2s var(--ease) infinite; }
}
@keyframes tlive {
  0%   { box-shadow: 0 0 0 0 rgba(43,227,138,.5); }
  70%  { box-shadow: 0 0 0 7px rgba(43,227,138,0); }
  100% { box-shadow: 0 0 0 0 rgba(43,227,138,0); }
}

.tcard__cta { position: relative; margin-top: 15px; }
.tcard__cta .btn__text { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.tcard__cta svg.bico { flex: 0 0 16px; width: 16px; height: 16px; margin: 0; }

.tcard--out { padding: 16px; }
.tcard--out .tcard__text { margin-top: 12px; }
.tcard--out .tcard__cta { min-height: 48px; margin-top: 16px; }

.tcard--in { padding: 14px; }
.tcard--in .tcard__top { gap: 10px; }
.tcard--in .tcard__seal { flex-basis: 36px; width: 36px; height: 36px; border-radius: 12px; }
.tcard--in .tcard__title { margin-top: 0; }
.tcard--in .tcard__text { margin-top: 9px; font-size: 12.5px; line-height: 1.5; }
.tcard--in .tcard__cta { margin-top: 10px; }

/* Перепроверка статуса — вторичное действие, поэтому без фона и рамки. */
.tcard__recheck {
  position: relative;
  display: block;
  width: 100%;
  min-height: 44px;
  margin-top: 4px;
  padding: 8px 0;
  background: none; border: 0;
  color: var(--tx-3);
  font-family: inherit;
  font-size: 12px; font-weight: 600;
  line-height: 1.5;
  cursor: pointer;
  transition: color .18s var(--ease);
}
.tcard__recheck:active { color: #D9CCFF; }
.tcard__recheck:focus-visible { outline: 2px solid var(--ice-2); outline-offset: 2px; border-radius: var(--r-sm); }
.tcard__recheck:disabled { opacity: .55; }

/* ------------------------------------------------------------
   шторка «Войти в Команду»
   ------------------------------------------------------------ */

.tsheet { position: relative; text-align: center; }
.tsheet__glow {
  position: absolute;
  top: -90px; left: 50%;
  width: 260px; height: 200px;
  transform: translateX(-50%);
  background: radial-gradient(circle at 50% 50%, rgba(139,108,255,.42), transparent 68%);
  filter: blur(28px);
  pointer-events: none;
}
.tsheet__crest {
  position: relative;
  display: grid; place-items: center;
  width: 56px; height: 56px;
  margin: 4px auto 0;
  border-radius: 19px;
  background: linear-gradient(135deg, #C9B8FF 0%, #8B6CFF 52%, #5B3CE0 100%);
  box-shadow: 0 12px 34px rgba(123,92,255,.5);
  animation: in-pop .5s var(--spring) both;
}
.tsheet__crest svg {
  width: 27px; height: 27px;
  stroke: #150B33; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.tsheet__kicker {
  position: relative;
  margin-top: 13px;
  font-size: 9.5px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: rgba(201,184,255,.74);
  animation: in-up .45s var(--spring) .06s both;
}
.tsheet__title {
  position: relative;
  margin-top: 5px;
  font-size: 20px; font-weight: 750; letter-spacing: -.035em;
  animation: in-up .45s var(--spring) .1s both;
}

/* Готовая фраза: крупно и с копированием — главный объект экрана.
   Человек не должен думать, что написать в личку незнакомому. */
.tphrase {
  position: relative;
  display: block; width: 100%;
  margin-top: 17px;
  padding: 14px 16px;
  border-radius: var(--r-lg);
  border: 1px dashed rgba(167,139,255,.5);
  background: linear-gradient(180deg, rgba(123,92,255,.2), rgba(123,92,255,.07));
  color: inherit; font-family: inherit;
  text-align: left; cursor: pointer;
  animation: in-up .45s var(--spring) .16s both;
  transition: transform .2s var(--spring), border-color .2s var(--ease);
}
.tphrase:active { transform: scale(.985); }
.tphrase.is-copied { border-style: solid; border-color: rgba(43,227,138,.55); }
.tphrase__label {
  display: block;
  font-size: 9.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(201,184,255,.7);
}
.tphrase__row {
  display: flex; align-items: center; gap: 10px;
  margin-top: 6px;
}
.tphrase__text {
  flex: 1; min-width: 0;
  font-size: 19px; font-weight: 750; letter-spacing: -.03em;
  color: #EDE7FF;
}
.tphrase__copy {
  flex: 0 0 32px;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 11px;
  background: rgba(167,139,255,.18);
  border: 1px solid rgba(167,139,255,.36);
}
.tphrase__copy svg {
  width: 15px; height: 15px;
  stroke: #D9CCFF; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.tphrase.is-copied .tphrase__copy {
  background: rgba(43,227,138,.18);
  border-color: rgba(43,227,138,.5);
}
.tphrase.is-copied .tphrase__copy svg { stroke: var(--green); stroke-width: 2.6; }

.tsheet__hint {
  position: relative;
  margin-top: 12px;
  font-size: 13.5px; line-height: 1.6;
  color: var(--tx-2);
  animation: in-up .45s var(--spring) .2s both;
}

/* Разделитель с подписью: вторая часть шторки — уже выбор адресата. */
.tsheet__split {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  margin-top: 20px;
  animation: in-fade .45s var(--ease) .24s both;
}
.tsheet__split::before,
.tsheet__split::after {
  content: "";
  flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(167,139,255,.34), transparent);
}
.tsheet__split span {
  font-size: 9.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--tx-3);
}

.tcontacts { margin-top: 12px; display: flex; flex-direction: column; gap: 9px; }
.tcontact {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  padding: 12px 13px;
  border-radius: var(--r-lg);
  border: 1px solid rgba(167,139,255,.28);
  background: linear-gradient(180deg, rgba(123,92,255,.16), rgba(255,255,255,.02));
  color: inherit; font-family: inherit;
  text-align: left; cursor: pointer;
  animation: in-up .45s var(--spring) both;
  transition: transform .2s var(--spring), border-color .2s var(--ease), background .2s var(--ease);
}
.tcontact:active {
  transform: scale(.985);
  border-color: rgba(167,139,255,.6);
  background: linear-gradient(180deg, rgba(123,92,255,.26), rgba(255,255,255,.03));
}
.tcontact__ava {
  flex: 0 0 38px;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 13px;
  background: linear-gradient(135deg, rgba(201,184,255,.28), rgba(91,60,224,.34));
  border: 1px solid rgba(167,139,255,.36);
}
.tcontact__ava svg {
  width: 18px; height: 18px;
  stroke: #E3DAFF; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.tcontact__body { flex: 1; min-width: 0; }
.tcontact__body b {
  display: block;
  font-size: 14.5px; font-weight: 700; letter-spacing: -.02em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tcontact__body small {
  display: block; margin-top: 2px;
  font-size: 11.5px; color: var(--tx-3);
}
.tcontact__go {
  flex: 0 0 22px;
  width: 22px; height: 22px;
  display: grid; place-items: center;
}
.tcontact__go svg {
  width: 18px; height: 18px;
  stroke: rgba(201,184,255,.8); fill: none;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}

.tsheet__close {
  display: block; width: 100%;
  margin-top: 14px; padding: 10px;
  background: none; border: 0;
  color: var(--tx-3);
  font-family: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer;
}
.tsheet__close:active { color: var(--tx-1); }

/* история участий: плотный список */
.phist {
  margin-top: 2px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-1);
  overflow: hidden;
  background: var(--glass-1);
}
.phist__row {
  width: 100%;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--line-1);
  animation: in-up .5s var(--spring) both;
  transition: background .25s var(--ease);
}
.phist__row:last-child { border-bottom: 0; }
.phist__row:active { background: var(--glass-2); }
.phist__num {
  flex: 0 0 44px;
  height: 38px;
  display: grid; place-items: center;
  border-radius: 12px;
  font-family: var(--num);
  font-size: 15px; font-weight: 700; letter-spacing: -.03em;
  background: rgba(62,133,181,.16);
  border: 1px solid rgba(127,197,242,.24);
  color: var(--ice-2);
}
.phist__row.is-win .phist__num {
  background: rgba(255,194,75,.14);
  border-color: rgba(255,194,75,.38);
  color: var(--gold);
}
.phist__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.phist__body b {
  font-size: 13.5px; font-weight: 600; letter-spacing: -.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.phist__body small { margin-top: 2px; font-size: 11.5px; color: var(--tx-3); }
.phist__mark {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px;
  border-radius: var(--r-pill);
  background: var(--glass-2);
  border: 1px solid var(--line-1);
  font-size: 10px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--tx-3);
}
.phist__mark--win {
  background: rgba(255,194,75,.14);
  border-color: rgba(255,194,75,.38);
  color: var(--gold);
}
.phist__mark--live {
  background: rgba(43,227,138,.13);
  border-color: rgba(43,227,138,.34);
  color: var(--green);
}
.phist__mark--live i {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--green);
  animation: live-g 2s var(--ease) infinite;
}

/* сворачиваемые пояснения */
.fold {
  margin-top: 8px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-1);
  background: var(--glass-1);
  overflow: hidden;
  animation: in-up .5s var(--spring) both;
}
.fold__head {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 15px;
  text-align: left;
}
.fold__head b { font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; color: var(--tx-1); }
.fold__ico {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 9px;
  background: var(--glass-2);
  border: 1px solid var(--line-1);
  transition: transform .35s var(--spring);
}
/* базовый chevron смотрит вправо — доворачиваем вниз */
.fold__ico svg { width: 15px; height: 15px; stroke: var(--tx-2); fill: none; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; transform: rotate(90deg); }
.fold.is-open .fold__ico { transform: rotate(180deg); }
/* grid-rows 0fr→1fr даёт плавное раскрытие без фиксированной высоты */
.fold__wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .42s var(--spring);
}
.fold.is-open .fold__wrap { grid-template-rows: 1fr; }
.fold__body { overflow: hidden; }
.fold__body > * { padding: 0 15px 15px; }
.fold__body .howto { padding: 0 15px 16px; }

.howto { display: flex; flex-direction: column; gap: 16px; }
.howto__step { display: flex; gap: 13px; align-items: flex-start; }
.howto__n {
  width: 25px; height: 25px; flex: 0 0 25px;
  border-radius: 8px;
  display: grid; place-items: center;
  font-family: var(--num);
  font-size: 12px; font-weight: 700;
  background: rgba(62,133,181,.16);
  border: 1px solid rgba(127,197,242,.26);
  color: var(--ice-2);
}
.howto__step p { font-size: 13px; line-height: 1.6; color: var(--tx-2); }
.howto__step b { color: var(--tx-1); font-weight: 600; }

/* ------------------------------------------------------------
   tabbar
   ------------------------------------------------------------ */

/* iOS-style: плавающая пилюля со стеклом */
.tabbar {
  position: fixed;
  bottom: calc(var(--sab) + 10px);
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 24px); max-width: 420px;
  padding: 5px;
  display: flex;
  gap: 2px;
  z-index: 40;
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.1);
  /* плотнее стекла: при .62 текст контента читался сквозь панель */
  background: rgba(9,20,35,.86);
  box-shadow:
    0 1px 0 rgba(255,255,255,.07) inset,
    0 18px 44px rgba(0,0,0,.5);
  backdrop-filter: blur(26px) saturate(180%);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  /* панель статична: никакого въезда при переходах между вкладками */
}

/* Растворение контента под плавающей пилюлей.
   Отдельный слой на .stage: внутрь .tabbar его класть нельзя —
   ::before попал бы под собственное стекло панели. z-index 37 держит
   скрим ниже .actionbar (38), чтобы не гасить кнопки на экране розыгрыша. */
.stage--tabbar::after {
  content: "";
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: calc(var(--sab) + var(--tabbar-h) + 30px);
  background: linear-gradient(
    180deg,
    rgba(0,4,9,0) 0%, rgba(0,4,9,.52) 44%,
    rgba(0,4,9,.88) 74%, rgba(0,4,9,.97) 100%);
  pointer-events: none;
  z-index: 37;
}

.tab {
  position: relative;
  flex: 1;
  min-height: 46px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  border-radius: 21px;
  color: var(--tx-3);
  /* переключение вкладок — без анимации, состояние меняется сразу */
}
.tab svg {
  width: 20px; height: 20px;
  stroke: currentColor; fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.tab span {
  font-size: 10.5px; font-weight: 600; letter-spacing: .01em;
}

/* активный таб — светлая «таблетка» под иконкой */
.tab[aria-selected="true"] {
  color: var(--ice-1);
  background: rgba(125,216,255,.13);
  box-shadow: 0 1px 0 rgba(255,255,255,.08) inset;
}
.tab[aria-selected="true"] svg {
  filter: drop-shadow(0 3px 9px rgba(127,197,242,.5));
}
/* отклик на палец оставляем: это обратная связь, а не переход */
.tab:active { opacity: .6; }

.tab__mark {
  position: absolute;
  top: 3px; right: calc(50% - 20px);
  min-width: 16px; height: 16px;
  padding: 0 4px;
  border-radius: var(--r-pill);
  display: grid; place-items: center;
  font-family: var(--num);
  font-size: 9.5px; font-weight: 700;
  background: var(--g-ice);
  color: var(--ink-0);
}

/* ------------------------------------------------------------
   fields
   ------------------------------------------------------------ */

.field { margin-top: 14px; }
.field label {
  display: block; margin-bottom: 7px;
  font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--tx-3);
}
.input, .textarea {
  width: 100%;
  min-height: 50px;
  padding: 13px 15px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-2);
  background: rgba(255,255,255,.04);
  color: var(--tx-1);
  font-size: 15px;
  outline: none;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease), background .3s;
}
.textarea { min-height: 96px; resize: vertical; }
.input:focus, .textarea:focus {
  border-color: rgba(127,197,242,.55);
  background: rgba(62,133,181,.08);
  box-shadow: 0 0 0 3px rgba(62,133,181,.18);
}
.input::placeholder, .textarea::placeholder { color: var(--tx-3); }
input[type="datetime-local"] { color-scheme: dark; }

.seg {
  display: flex;
  gap: 6px;
  padding: 4px;
  border-radius: var(--r-md);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line-1);
}
.seg__btn {
  flex: 1;
  min-height: 40px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--tx-3);
  font-size: 13px;
  font-weight: 600;
}
.seg__btn.is-on {
  background: var(--glass-2);
  color: var(--tx-1);
  border: 1px solid var(--line-2);
}
.seg--sm .seg__btn { min-height: 34px; font-size: 12px; }

.role-row .input { text-align: left; }

.prize-edit .inline { align-items: stretch; }
.prize-edit [data-role="winnum"] {
  margin-top: 6px;
  min-height: 44px;
}

/* ------------------------------------------------------------
   Форма нового розыгрыша

   Раньше это была сплошная лента ~800px: восемь одинаковых полей
   подряд без пауз, глазу не за что зацепиться. Делим на три
   смысловых блока с разделителями — «что разыгрываем», «кто
   участвует», «призовые места».
   ------------------------------------------------------------ */
.nform__grp { padding-top: 16px; }
.nform__grp + .nform__grp {
  margin-top: 18px;
  border-top: 1px solid var(--line-1);
}
/* Подпись группы должна читаться старше подписей полей, иначе
   «ОСНОВНОЕ» и «НАЗВАНИЕ» спорят за внимание. Поэтому светлее и
   без uppercase — контраст по стилю, а не по размеру. */
.nform__cap {
  font-size: 13.5px; font-weight: 700;
  letter-spacing: -.01em;
  color: var(--tx-1);
}
.nform__hint {
  margin-top: 5px;
  font-size: 12px; line-height: 1.5;
  color: var(--tx-3);
}
/* первое поле группы не должно добавлять отступ к отступу заголовка */
.nform__grp .field:first-of-type { margin-top: 10px; }
.nform__grp .nprize { margin-top: 10px; }

/* строка призового места: медаль + поля + удаление */
.nprize {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 10px;
  border-radius: var(--r-md);
  background: rgba(255,255,255,.028);
  border: 1px solid var(--line-1);
}
.nprize + .nprize { margin-top: 8px; }
.nprize__medal {
  flex: 0 0 auto;
  width: 26px; height: 26px; margin-top: 6px;
  display: grid; place-items: center;
  border-radius: 9px;
  font-family: var(--num);
  font-size: 12.5px; font-weight: 800;
  background: var(--glass-2); color: var(--tx-2);
}
/* те же медали, что и в результатах розыгрыша — единый язык */
.nprize__medal--1 { background: var(--g-gold); color: #241802; }
.nprize__medal--2 { background: linear-gradient(135deg, #E6ECF2, #A9B7C4); color: #131A22; }
.nprize__medal--3 { background: linear-gradient(135deg, #D6A882, #A0693F); color: #1E0F03; }
.nprize__fields { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.input--sm { min-height: 42px; padding: 10px 13px; font-size: 14px; }
.nprize__fields [data-role="winnum"] { font-size: 13px; }
.nprize__del {
  flex: 0 0 auto;
  width: 38px; height: 38px; margin-top: 1px;
  display: grid; place-items: center;
  border: 0; padding: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--tx-3);
  transition: color .2s var(--ease), background .2s var(--ease);
}
.nprize__del svg {
  width: 17px; height: 17px;
  stroke: currentColor; fill: none;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.nprize__del:active { background: rgba(255,107,107,.14); color: #FF8A8A; }
.nprize__del[hidden] { display: none; }

.nprize__add {
  width: 100%; margin-top: 9px;
  min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border-radius: var(--r-md);
  border: 1px dashed var(--line-2);
  background: transparent;
  color: var(--ice-3);
  font-size: 13.5px; font-weight: 600;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.nprize__add svg {
  width: 15px; height: 15px;
  stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.nprize__add:active {
  background: rgba(62,133,181,.1);
  border-color: rgba(127,197,242,.5);
}

/* Невидимая зона в шапке админки — без подписи и без визуального следа. */
.ghosttap {
  width: 28px;
  height: 28px;
  border: 0;
  padding: 0;
  background: transparent;
  opacity: 0;
  -webkit-tap-highlight-color: transparent;
}

/* ------------------------------------------------------------
   draw screen
   ------------------------------------------------------------ */

/* Название розыгрыша теперь в шапке, здесь остался только статус. */
.draw__head { margin: 2px 2px 14px; }
/* во время спина статус поджимается: место отдаём ленте */
.draw__head--tight { margin-bottom: 8px; }
.draw__status {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px;
  border-radius: var(--r-pill);
  background: rgba(62,133,181,.14);
  border: 1px solid rgba(127,197,242,.28);
  color: var(--ice-2);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
}
/* countdown */
.count {
  padding: 22px 16px 18px;
  border-radius: var(--r-xl);
  background: var(--glass-1);
  border: 1px solid var(--line-1);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  text-align: center;
}
.count__grid { display: flex; align-items: flex-start; justify-content: center; gap: 8px; }
.count__unit { min-width: 66px; }
.count__val {
  font-family: var(--num);
  font-size: 38px; font-weight: 700;
  letter-spacing: -.045em; line-height: 1;
  padding: 15px 6px;
  border-radius: var(--r-md);
  background: rgba(255,255,255,.045);
  border: 1px solid var(--line-1);
  color: var(--ice-1);
  font-variant-numeric: tabular-nums;
}
.count__cap { margin-top: 8px; font-size: 9.5px; font-weight: 700; letter-spacing: .18em; color: var(--tx-3); }
.count__sep { font-size: 26px; font-weight: 300; color: var(--tx-3); padding-top: 18px; }
.count__hint { margin-top: 16px; font-size: 12.5px; color: var(--tx-2); line-height: 1.55; }
.count.is-urgent .count__val {
  color: var(--red);
  border-color: rgba(241,104,126,.36);
  animation: urgent 1s var(--ease) infinite;
}
@keyframes urgent { 50% { transform: scale(1.04); } }

/* ------------------------------------------------------------
   Вертикальная рулетка
   ------------------------------------------------------------ */

/* Экран спина: лента — главный объект, вокруг неё живые метрики.
   Раньше по бокам было пустое место, а подписи дублировали шапку. */
.spin {
  padding: 12px 12px 14px;
  border-radius: var(--r-xl);
  background: var(--glass-1);
  border: 1px solid var(--line-1);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  overflow: hidden;
}

.spin__top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  margin-bottom: 11px;
}

/* Шаги по местам — единственный индикатор «какое место сейчас».
   Раньше это дублировалось текстом в шапке карточки. */
.spin__steps {
  display: flex; align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.spin__steps i {
  display: grid; place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  font-style: normal;
  font-family: var(--num);
  font-size: 11px; font-weight: 800;
  background: rgba(125,216,255,.1);
  border: 1px solid rgba(125,216,255,.18);
  color: var(--tx-3);
  transition: background .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease), transform .3s var(--spring);
}
.spin__steps i.is-done {
  background: rgba(255,194,75,.16);
  border-color: rgba(255,224,138,.4);
  color: var(--gold-2);
}
.spin__steps i.is-now {
  background: linear-gradient(180deg, rgba(44,182,255,.3), rgba(44,182,255,.14));
  border-color: rgba(125,216,255,.6);
  color: var(--ice-1);
  transform: scale(1.14);
  box-shadow: 0 0 14px rgba(44,182,255,.4);
}

/* Приз текущего круга: одна строка справа от шагов. */
.spin__prizewrap { flex: 1; min-width: 0; text-align: right; }
.spin__prize {
  display: block;
  font-size: 13px; font-weight: 700;
  color: var(--gold-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.spin__stage { display: flex; justify-content: center; }
.spin__reel { min-width: 0; width: 100%; }

/* Метрики под лентой: в колонках по бокам они схлопывались в 13px,
   потому что широкая лента забирала всю ширину сетки. */
.spin__rail {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--line-1);
}

.spin__stat {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 0;
}
.spin__stat b {
  font-family: var(--num);
  font-size: 19px; font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.03em;
  color: var(--ice-1);
}
.spin__stat i {
  font-style: normal;
  font-size: 9.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--tx-3);
}
/* число в окне: живая метрика, поэтому золотом и моноширинно */
.spin__stat--live b { color: var(--gold-2); font-variant-numeric: tabular-nums; }
.spin__stat--me b { color: var(--ice-2); }

/* Лог выпавших мест: чипы в ряд, старые остаются на экране. */
.spin__result {
  margin-top: 12px;
  min-height: 26px;
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 6px;
  font-size: 13.5px; font-weight: 500; color: var(--tx-2);
  text-align: center;
}
.spin__hit {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px 4px 5px;
  border-radius: var(--r-pill);
  background: rgba(255,194,75,.1);
  border: 1px solid rgba(255,224,138,.24);
  animation: in-up .4s var(--spring) both;
}
.spin__hit i {
  display: grid; place-items: center;
  width: 17px; height: 17px;
  border-radius: 50%;
  font-style: normal;
  font-family: var(--num);
  font-size: 10px; font-weight: 800;
  background: rgba(255,194,75,.2);
  color: var(--gold-2);
}
.spin__hit b { font-family: var(--num); color: var(--gold-2); font-size: 15px; font-weight: 800; }
.spin__hit em {
  font-style: normal;
  font-size: 9.5px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ice-2);
}
.spin__hit.is-me {
  background: rgba(44,182,255,.12);
  border-color: rgba(125,216,255,.4);
}
.spin__hit.is-me i { background: rgba(44,182,255,.24); color: var(--ice-1); }

.spin__wait { display: inline-flex; align-items: center; gap: 8px; color: var(--tx-3); font-size: 12px; }
.spin__wait i {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--ice-3);
  animation: live 2s var(--ease) infinite;
}

.sndbtn {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: var(--glass-2);
  color: var(--ice-3);
  transition: opacity .16s var(--ease), transform .16s var(--ease);
}
.sndbtn svg {
  width: 17px; height: 17px;
  stroke: currentColor; fill: none;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.sndbtn.is-off { color: var(--tx-3); }
/* Звук включён, но браузер ждёт жеста: мягкая пульсация — приглашение
   нажать. Без этого иконка врёт: говорит «звук есть», а его не слышно. */
.sndbtn.is-blocked {
  color: var(--gold-2);
  border-color: rgba(255,224,138,.42);
  animation: snd-wait 1.8s var(--ease) infinite;
}
@keyframes snd-wait {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,194,75,.34); }
  55%      { box-shadow: 0 0 0 7px rgba(255,194,75,0); }
}
.sndbtn:active { transform: scale(.9); opacity: .7; }

/* Лента занимает почти всю высоту экрана.
   Высота ведущая, ширина следует из пропорций viewBox. */
/* Высота от остатка экрана, ширина — из пропорций viewBox.
   Раньше лента была 150/520 и оставляла пустые боковины. */
/* Геометрия ленты. Замеренная обвязка вокруг неё — 376px
   (шапка 111 + карточка 169 + низ 96), на низких экранах 313px.
   Раньше потолок 386px бился раньше, чем кончался экран, и внизу
   оставалось до 170px пустоты. Ширина карточки — второй ограничитель:
   лента 5:7, поэтому высота не больше 100%×7/5 от доступной ширины. */
.reel {
  position: relative;
  height: 320px;
  height: min(
    calc(var(--tg-vh, 100vh) - 376px),
    calc((min(100vw, 480px) - 2 * var(--pad) - 28px) * 1.4),
    520px
  );
  height: min(
    calc(var(--tg-vh, 100svh) - 376px),
    calc((min(100vw, 480px) - 2 * var(--pad) - 28px) * 1.4),
    520px
  );
  height: min(
    calc(var(--tg-vh, 100dvh) - 376px),
    calc((min(100vw, 480px) - 2 * var(--pad) - 28px) * 1.4),
    520px
  );
  min-height: 190px;
  aspect-ratio: 300 / 420;
  margin: 0 auto;
  animation: reel-in .6s var(--spring) both;
}

/* Низкие экраны (SE и подобные): ужимаем обвязку, чтобы карточка
   спина влезала целиком и страница не начинала скроллиться. */
@media (max-height: 700px) {
  /* заголовок розыгрыша во время спина не нужен: он есть в шапке */
  .draw__head--tight { display: none; }
  /* обвязка здесь меньше — ленте можно больше */
  .reel { height: 280px; height: min(calc(var(--tg-vh, 100vh) - 313px), calc((min(100vw, 480px) - 2 * var(--pad) - 20px) * 1.4), 460px); }
  .reel { height: min(calc(var(--tg-vh, 100svh) - 313px), calc((min(100vw, 480px) - 2 * var(--pad) - 20px) * 1.4), 460px); }
  .reel { height: min(calc(var(--tg-vh, 100dvh) - 313px), calc((min(100vw, 480px) - 2 * var(--pad) - 20px) * 1.4), 460px); }
  .spin { padding: 10px 10px 12px; }
  .spin__top { margin-bottom: 8px; }
  .spin__rail { margin-top: 10px; padding-top: 9px; gap: 4px; }
  .spin__stat b { font-size: 16px; }
  .spin__stat i { font-size: 8.5px; letter-spacing: .08em; }
  .spin__steps { margin-top: 10px; }
  .spin__result { margin-top: 9px; min-height: 20px; font-size: 12.5px; }
}
@keyframes reel-in { from { opacity: 0; transform: scale(.9) translateY(14px); } }

.reel__svg {
  width: 100%; height: 100%;
  display: block;
  overflow: visible;   /* «ушки» по бокам не режем */
  filter: drop-shadow(0 18px 44px rgba(0,0,0,.55));
}
.reel__strip { will-change: transform; }

/* строки */
.reel__cell {
  fill: rgba(10,39,64,.5);
  stroke: rgba(125,216,255,.14);
  stroke-width: 1;
}
.reel__num {
  font-family: var(--num);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  letter-spacing: -.04em;
  fill: var(--tx-2);
}
/* Строка в окне: подложка непрозрачная и тёмная.
   Полупрозрачная давала грязный оливковый оттенок — золотое
   свечение снизу просвечивало через синеватую ячейку. */
.reel__row.is-mid .reel__cell {
  fill: #08192B;
  stroke: rgba(255,224,138,.4);
}
.reel__row.is-mid .reel__num { fill: #FFFFFF; }

.reel.is-done .reel__row.is-mid .reel__num {
  fill: var(--gold);
  animation: reel-hit .5s var(--spring) both;
}
@keyframes reel-hit {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}
.reel__row.is-mid .reel__num { transform-box: fill-box; transform-origin: 50% 50%; }

/* окно победителя: пульс на остановке */
.reel__win { pointer-events: none; }
.reel__glow { opacity: .55; }
.reel.is-done .reel__glow { opacity: 1; }
.reel.is-done .reel__win { animation: reel-win 1.1s var(--ease) 2; }
@keyframes reel-win { 50% { opacity: .55; } }

/* метки по бокам */
.reel__ticks { opacity: .9; }
.reel.is-spinning .reel__ticks { animation: reel-tick 1.1s var(--ease) infinite; }
@keyframes reel-tick { 50% { opacity: .45; } }

/* зубчатая шкала: во время спина бежит вместе с лентой */
.reel__rails { fill: rgba(125,216,255,.26); }
.reel.is-spinning .reel__rails { animation: reel-rails .28s linear infinite; }
@keyframes reel-rails { to { transform: translateY(26px); } }
.reel.is-done .reel__rails { fill: rgba(255,224,138,.3); }

/* уголки окна победителя */
.reel__corners {
  fill: none;
  stroke: #FFE08A;
  stroke-width: 2.4;
  stroke-linecap: round;
  opacity: .75;
}
.reel.is-done .reel__corners { opacity: 1; animation: reel-corners .9s var(--ease) 2; }
@keyframes reel-corners { 50% { opacity: .4; } }

/* внешнее свечение окна: разгорается к финалу */
.reel__halo { opacity: .3; transition: opacity .3s var(--ease); }
.reel.is-spinning .reel__halo { opacity: .5; }
.reel.is-done .reel__halo { opacity: 1; animation: reel-halo 1.2s var(--ease) 2; }
@keyframes reel-halo { 50% { opacity: .55; } }

/* блик по стеклу: медленно проходит, пока лента крутится */
.reel__gloss { opacity: .8; }
.reel.is-spinning .reel__gloss { animation: reel-gloss 2.6s var(--ease) infinite; }
@keyframes reel-gloss { 50% { opacity: .35; } }

/* ---- Финальная прямая (is-tense) ----
   С 72% спина лента едва ползёт. Чтобы это читалось как интрига,
   а не как подвисание, корпус начинает дышать и светиться сильнее. */
.reel.is-tense .reel__halo {
  opacity: .8;
  animation: tense-halo 1.05s var(--ease) infinite;
}
@keyframes tense-halo { 50% { opacity: .45; } }

.reel.is-tense .reel__corners {
  opacity: 1;
  animation: tense-corners .85s var(--ease) infinite;
}
@keyframes tense-corners { 50% { opacity: .45; } }

.reel.is-tense .reel__glow { opacity: .85; }

/* лёгкое дрожание всего барабана — без смещения макета */
.reel.is-tense { animation: tense-shake 1.6s var(--ease) infinite; }
@keyframes tense-shake {
  0%, 100% { transform: translate3d(0, 0, 0); }
  25%      { transform: translate3d(-.6px, .4px, 0); }
  50%      { transform: translate3d(.5px, -.5px, 0); }
  75%      { transform: translate3d(-.4px, -.3px, 0); }
}

/* шкала тормозит вместе с лентой */
.reel.is-tense .reel__rails {
  fill: rgba(255,224,138,.34);
  animation-duration: 1.1s;
}

/* вспышка на финале */
.reel__flash {
  position: absolute; inset: 0;
  border-radius: 34px;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at 50% 50%, rgba(255,224,138,.4), transparent 66%);
}
.reel.is-done .reel__flash { animation: reel-flash .7s var(--ease) both; }
@keyframes reel-flash {
  0%   { opacity: 0; }
  22%  { opacity: 1; }
  100% { opacity: 0; }
}

/* Шаги по местам: сколько кругов уже прошло и какой идёт сейчас. */
.reel::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 320px; height: 300px;
  margin: -150px 0 0 -160px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(44,182,255,.16), transparent 68%);
  filter: blur(26px);
  pointer-events: none;
  z-index: -1;
}
/* тень-опора под лентой */
.reel::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -12px;
  width: 190px; height: 16px;
  margin-left: -95px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,.6), transparent 70%);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .reel, .reel__flash, .reel__win, .reel__ticks,
  .reel__rails, .reel__corners, .reel__halo, .reel__gloss { animation: none; }
  .reel.is-tense { animation: none; }
}

/* ------------------------------------------------------------
   result
   ------------------------------------------------------------ */

.result { text-align: center; padding: 4px 2px 0; }

/* Победа. Иерархия: факт победы → место → приз → номер.
   Маскот — отдельная колонка грида, а не absolute: в ассете кулаки
   разведены почти на всю ширину кадра, и любое наложение текста
   рано или поздно режет буквы о руку. */
.win {
  position: relative;
  /* Геометрия фигуры. Ассет 373×560, непрозрачный кадр — строки 87..476,
     то есть 15.5% пустоты сверху и 14.8% снизу; ширина видимой части
     0.659 от высоты. */
  --hero-h: clamp(178px, 60vw, 262px);
  --hero-out: 18px;   /* вынос за правый край карточки */
  /* Фигура может вылезти сверху — overflow её бы срезал.
     Фон и блики скругляем через отдельный слой .win__bg. */
  overflow: visible;
  display: grid;
  /* Вторая колонка — пустой резерв под фигуру: сама фигура вынута из потока
     (position: absolute), иначе её ширина тянула бы за собой высоту карточки
     и любое увеличение ассета ломало бы вёрстку текста. */
  grid-template-columns: minmax(0, 1fr) calc(var(--hero-h) * .659 - var(--hero-out));
  align-items: end;
  column-gap: 8px;
  /* Чуть воздуха над «ТЫ ВЫИГРАЛ», без нижней подушки. */
  padding: 16px 0 0 17px;
  border-radius: var(--r-xl);
  border: 1px solid rgba(255,224,138,.3);
  background:
    radial-gradient(115% 125% at 100% 8%, rgba(255,194,75,.24), transparent 56%),
    radial-gradient(90% 120% at 0% 100%, rgba(44,182,255,.13), transparent 62%),
    var(--glass-1);
  text-align: left;
  animation: in-up .5s var(--spring) both;
}
.win::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,224,138,.7), transparent);
}
/* Подложка карточки: держит фон и свечение в границах скругления,
   пока сама карточка остаётся overflow: visible ради фигуры. */
.win__bg {
  position: absolute;
  /* inset: 0 отсчитывается от padding-box — подложка была на 2px короче
     карточки (толщина рамки сверху и снизу) — свечение не доходило до края. */
  inset: -1px;
  z-index: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}
/* Свет за маскотом: без него фигура висит в пустоте. */
.win__bg::after {
  content: "";
  position: absolute;
  right: -14px; bottom: -18px;
  width: 178px; height: 178px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,194,75,.19), transparent 68%);
}

/* Фигура в полный рост: визуальный низ (ступни) на нижней грани карточки.
   В кадре 14.8% пустого поля под ногами — без компенсации фигура висит выше края.
   Вылет вверх допустим — overflow: visible. */
.win__hero {
  /* Вне потока: высоту карточки задаёт только текст, поэтому фигуру можно
     увеличивать сколько угодно — вёрстка не поедет. В гриде под неё стоит
     пустая колонка-резерв, чтобы текст не заходил под ноги. */
  position: absolute;
  /* поверх подложки и верхней световой линии */
  z-index: 3;
  /* Ступни на нижней грани: опускаем кадр на его нижнее прозрачное поле. */
  bottom: calc(var(--hero-h) * -.148);
  right: calc(var(--hero-out) * -1 - var(--hero-h) * .0088);
  /* высота ведёт, ширина подстраивается: фиксировать обе нельзя — ассет 373:560 */
  width: auto;
  height: var(--hero-h);
  object-fit: contain; object-position: bottom right;
  pointer-events: none;
  animation: win-in .8s var(--spring) both;
}
@keyframes win-in { from { opacity: 0; transform: translateX(26px) scale(.92); } }

/* Текстовая колонка. */
.win__main {
  position: relative; z-index: 2;
  grid-column: 1; grid-row: 1;
  min-width: 0;
  padding-bottom: 8px;
  display: flex; flex-direction: column; justify-content: flex-start;
}

/* «ТЫ ВЫИГРАЛ» — главная новость экрана. */
.win__won {
  display: flex; align-items: baseline; gap: 6px;
  /* Оба слова одного размера — строка широкая. На 320px до фигуры
     остаётся 5px, поэтому запрещаем перенос: с ним «ТЫ» уехало бы
     на отдельную строку и развалило композицию. */
  flex-wrap: nowrap; white-space: nowrap;
  animation: in-up .5s var(--spring) .06s both;
}
/* «ТЫ» такого же роста, что и «ВЫИГРАЛ», но приглушённое:
   акцент держит цвет, а не размер. */
.win__won span,
.win__won b {
  /* Стало надзаголовком над призом: два крупных блока подряд
     спорили бы за внимание. */
  font-size: clamp(17px, 5.4vw, 22px);
  line-height: 1.02;
  text-transform: uppercase;
}
.win__won span {
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--tx-3);
}
.win__won b {
  font-weight: 800; letter-spacing: -.03em;
  background: var(--g-gold);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* Место — справка под призом, а не главный герой: человеку важнее
   «что я выиграл», чем номер позиции в таблице. */
.win__place {
  display: inline-flex; align-items: baseline; gap: 5px;
  /* родитель — flex-колонка, поэтому inline-flex растягивался на всю ширину;
     чип должен быть по содержимому */
  align-self: flex-start;
  margin-top: 7px;
  padding: 4px 10px 5px;
  border-radius: var(--r-pill);
  background: rgba(255,194,75,.13);
  border: 1px solid rgba(255,224,138,.3);
  animation: in-up .5s var(--spring) .26s both;
}
.win__pnum {
  font-family: var(--num);
  font-size: 15px; font-weight: 800; line-height: 1;
  letter-spacing: -.03em;
  color: var(--gold-2);
}
.win__pword {
  font-size: 9.5px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold-2);
}

/* Приз — главный акцент карточки. Длинные названия призов бывают
   в две-три строки, поэтому размер тянем от ширины экрана, а не фиксируем. */
.win__prize {
  margin-top: 6px;
  font-size: clamp(19px, 6vw, 25px);
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -.025em;
  color: var(--tx-1);
  text-wrap: balance;
  /* Крупным кеглем длинное название расползалось на 4 строки (109px)
     и раздувало карточку. Ограничиваем двумя строками с многоточием:
     полное название всё равно есть в списке мест ниже. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  animation: in-up .5s var(--spring) .16s both;
}
/* Нет конкретного приза — это не название, а пояснение: не кричим им. */
.win__prize.is-tbd {
  font-size: clamp(15px, 4.6vw, 18px);
  font-weight: 700;
  color: var(--tx-2);
}

/* Корешок живёт внутри левой колонки: на всю ширину он уходил под маскота. */
.win__stub {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px;
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px dashed rgba(255,224,138,.3);
  animation: in-up .5s var(--spring) .34s both;
}
.win__cell { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.win__cell--r { align-items: flex-end; text-align: right; flex: 0 0 auto; }
.win__cell i {
  font-style: normal;
  font-size: 9.5px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--tx-3);
}
.win__cell b {
  font-family: var(--num);
  font-size: 15px; font-weight: 800;
  letter-spacing: -.02em;
  color: var(--gold-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 100%;
}
.win__cell--r b { color: var(--ice-2); }

/* админ — итог победителя: главный акцент номер, под ним имя, под ним заблюренный @ */
.awin {
  position: relative;
  overflow: hidden;
  padding: 22px 18px 18px;
  border-radius: var(--r-xl);
  border: 1px solid rgba(255,224,138,.30);
  background:
    radial-gradient(115% 125% at 100% 8%, rgba(255,194,75,.24), transparent 56%),
    radial-gradient(90% 120% at 0% 100%, rgba(44,182,255,.13), transparent 62%),
    var(--glass-1);
  text-align: center;
  animation: in-up .5s var(--spring) both;
}
.awin::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,224,138,.7), transparent);
}
.awin__label {
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--tx-3);
  animation: in-up .45s var(--spring) both;
}
.awin__num {
  margin-top: 10px;
  font-family: var(--num);
  font-size: clamp(36px, 12vw, 52px);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--gold);
  text-shadow: 0 0 24px rgba(255,194,75,.35);
  animation: in-up .5s var(--spring) .08s both;
}
.awin__name {
  margin-top: 10px;
  font-size: clamp(16px, 5vw, 20px);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--tx-1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  animation: in-up .5s var(--spring) .14s both;
}
.awin__tag {
  margin-top: 8px;
  display: flex; justify-content: center;
  animation: in-up .5s var(--spring) .20s both;
}
.awin__tag .pblur { font-size: 13.5px; }
.awin__meta {
  margin-top: 14px;
  display: flex; justify-content: center; gap: 8px; flex-wrap: wrap;
  animation: in-up .5s var(--spring) .26s both;
}
.awin__meta span {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: var(--r-pill);
  background: rgba(18,52,86,.45); border: 1px solid var(--line-1);
  font-size: 11.5px; font-weight: 600; color: var(--tx-2);
}
.awin__meta b { color: var(--ice-2); font-family: var(--num); }
.awin__lab {
  margin: 16px 2px 8px;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--tx-3);
  text-align: left;
  animation: in-up .45s var(--spring) .32s both;
}
.result--admin .result__places { margin-top: 0; }
.result--admin .prize__text .pblur { margin-left: 6px; vertical-align: middle; }

/* проигрыш: акцент на фразе, потом на своём номере.
   Победные номера живут только в списке мест — без гигантского дубля. */
.rlose {
  position: relative;
  overflow: hidden;
  padding: 22px 18px 18px;
  border-radius: var(--r-xl);
  border: 1px solid rgba(125, 216, 255, .28);
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(44,182,255,.22), transparent 58%),
    radial-gradient(90% 80% at 100% 100%, rgba(123,92,255,.16), transparent 62%),
    var(--glass-1);
  text-align: center;
}
.rlose__glow {
  position: absolute;
  left: 50%; top: -28px;
  width: 220px; height: 140px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(44,182,255,.28), transparent 68%);
  pointer-events: none;
}
.rlose__motes {
  position: absolute; inset: 0;
  pointer-events: none;
}
.rlose__motes i {
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--ice-2);
  box-shadow: 0 0 8px rgba(44,182,255,.7);
  opacity: .55;
}
.rlose__motes i:nth-child(1) { left: 14%; top: 28%; }
.rlose__motes i:nth-child(2) { left: 78%; top: 22%; width: 3px; height: 3px; }
.rlose__motes i:nth-child(3) { left: 22%; top: 72%; width: 5px; height: 5px; }
.rlose__motes i:nth-child(4) { left: 86%; top: 64%; }

.rlose__kicker {
  position: relative;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--tx-3);
  animation: in-up .5s var(--spring) both;
}
.rlose__title {
  position: relative;
  display: flex; align-items: baseline; justify-content: center;
  flex-wrap: wrap; gap: 8px;
  margin-top: 8px;
}
.rlose__title span,
.rlose__title b {
  font-size: clamp(26px, 8.4vw, 34px);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1.02;
  text-transform: uppercase;
}
.rlose__title span {
  color: var(--tx-1);
  animation: in-up .55s var(--spring) .06s both;
}
.rlose__title b {
  background: var(--g-ice);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  animation: in-up .55s var(--spring) .12s both;
  background-size: 200% 100%;
}
.rlose__sub {
  position: relative;
  margin-top: 8px;
  font-size: 14px; font-weight: 500;
  color: var(--tx-2);
  animation: in-up .5s var(--spring) .2s both;
}

.rlose__ticket {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: max-content;
  margin: 16px auto 0;
  padding: 10px 28px 11px;
  border-radius: 16px;
  border: 1px dashed rgba(125, 216, 255, .34);
  background: rgba(44, 182, 255, .08);
  animation: rlose-ticket .7s var(--spring) .28s both;
}
.rlose__ticket i {
  font-style: normal;
  font-size: 10px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--tx-3);
}
.rlose__ticket b {
  font-family: var(--num);
  font-size: clamp(28px, 9vw, 36px);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
  background: var(--g-ice);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.rlose__meta {
  position: relative;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  animation: in-up .5s var(--spring) .36s both;
}
.rlose__meta span {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  background: rgba(18, 52, 86, .45);
  border: 1px solid var(--line-1);
  font-size: 11.5px; font-weight: 600;
  color: var(--tx-2);
}
.rlose__meta b {
  font-family: var(--num);
  font-weight: 800;
  color: var(--ice-2);
}

.rlose__lab {
  margin: 16px 2px 8px;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--tx-3);
  text-align: left;
  animation: in-up .45s var(--spring) .4s both;
}

.result--lose .prize.is-reveal:nth-child(1) { animation-delay: .46s; }
.result--lose .prize.is-reveal:nth-child(2) { animation-delay: .56s; }
.result--lose .prize.is-reveal:nth-child(3) { animation-delay: .66s; }
.result--lose .prize.is-reveal:nth-child(4) { animation-delay: .76s; }
.result--lose .prize.is-reveal:nth-child(5) { animation-delay: .86s; }

@keyframes rlose-ticket {
  from { opacity: 0; transform: translateY(12px) scale(.92); }
}
@keyframes rlose-sheen {
  from { background-position: 0% 0; }
  to   { background-position: 200% 0; }
}
@keyframes rlose-mote {
  0%, 100% { transform: translate3d(0, 0, 0); opacity: .35; }
  50%      { transform: translate3d(6px, -10px, 0); opacity: .8; }
}

@media (prefers-reduced-motion: no-preference) {
  .rlose__title b { animation: in-up .55s var(--spring) .12s both, rlose-sheen 7s linear 1s infinite; }
  .rlose__motes i { animation: rlose-mote 5.4s var(--ease) infinite; }
  .rlose__motes i:nth-child(2) { animation-duration: 6.2s; animation-delay: .4s; }
  .rlose__motes i:nth-child(3) { animation-duration: 4.8s; animation-delay: .9s; }
  .rlose__motes i:nth-child(4) { animation-duration: 5.8s; animation-delay: .2s; }
  .rlose__ticket b { animation: breathe 2.6s var(--ease) 1s infinite alternate; }
  .rlose::after {
    content: "";
    position: absolute; inset: 0;
    border-radius: inherit;
    background: linear-gradient(100deg, transparent 30%, rgba(125,216,255,.1) 50%, transparent 70%);
    background-size: 260% 100%;
    background-repeat: no-repeat;
    animation: hero-sheen 8s var(--ease) 1.2s infinite;
    pointer-events: none;
  }
}

.result__places { margin-top: 18px; text-align: left; border-radius: var(--r-md); border: 1px solid var(--line-1); overflow: hidden; }
.result--lose .result__places { margin-top: 0; }

/* Перевыбор победителей — действие, а не справка, поэтому у него
   свой вес: золотая иконка и подпись. Раньше кнопка выглядела как
   строка «Честность розыгрыша» под ней и терялась. */
.reroll { margin-top: 16px; text-align: left; }
.reroll__btn {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  padding: 13px 14px;
  border-radius: var(--r-md);
  border: 1px solid rgba(255,194,75,.28);
  background:
    linear-gradient(135deg, rgba(255,194,75,.13), rgba(255,194,75,.05)),
    var(--glass-1);
  box-shadow: 0 1px 0 rgba(255,224,138,.12) inset, 0 8px 24px rgba(0,0,0,.34);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .3s var(--spring), border-color .25s var(--ease),
              box-shadow .3s var(--ease);
}
.reroll__btn:active {
  transform: scale(.982);
  border-color: rgba(255,194,75,.46);
  box-shadow: 0 1px 0 rgba(255,224,138,.16) inset, 0 4px 16px rgba(0,0,0,.4);
}
.reroll__btn:disabled { opacity: .55; pointer-events: none; }
.reroll__ic {
  flex: 0 0 38px; width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: rgba(255,194,75,.15);
  border: 1px solid rgba(255,194,75,.3);
}
.reroll__ic svg {
  width: 19px; height: 19px;
  stroke: var(--gold); fill: none;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .5s var(--spring);
}
.reroll__btn:active .reroll__ic svg { transform: rotate(-180deg); }
.reroll__tx { flex: 1; min-width: 0; }
.reroll__tx b {
  display: block;
  font-size: 14px; font-weight: 650; letter-spacing: -.01em;
  color: var(--gold-2);
}
.reroll__tx small {
  display: block; margin-top: 2px;
  font-size: 11.5px; color: var(--tx-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.reroll__go {
  flex: 0 0 16px; width: 16px; height: 16px;
  stroke: rgba(255,194,75,.6); fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.reroll__btn.is-busy .reroll__go { opacity: 0; }
.reroll__btn .btn__spin { position: absolute; inset: 0 14px 0 auto; width: 20px; display: grid; place-items: center; }
.reroll__btn .btn__spin i {
  width: 17px; height: 17px;
  border-radius: 50%;
  border: 2.2px solid rgba(255,194,75,.24);
  border-top-color: var(--gold);
  animation: spin .7s linear infinite;
}

/* Доказательство честности свёрнуто в строку: текст нужен редко,
   а места абзацем занимал как целый блок контента. */
.proof { margin-top: 14px; text-align: left; }
.proof__btn {
  display: flex; align-items: center; gap: 9px;
  width: 100%;
  padding: 11px 13px;
  border-radius: var(--r-md);
  background: rgba(62,133,181,.07);
  border: 1px solid rgba(127,197,242,.18);
  color: var(--tx-3);
  font-size: 12px; font-weight: 600;
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.proof__btn:active { background: rgba(62,133,181,.14); }
.proof__btn.is-open { color: var(--tx-2); }
.proof__btn span { flex: 1; min-width: 0; text-align: left; }
.proof__btn svg {
  width: 15px; height: 15px; flex: 0 0 15px;
  stroke: var(--ice-3); fill: none;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
/* шеврон — вторая иконка, крутится при раскрытии */
.proof__btn svg:last-child {
  stroke: var(--tx-3);
  transform: rotate(90deg);
  transition: transform .3s var(--spring);
}
.proof__btn.is-open svg:last-child { transform: rotate(-90deg); }
.proof__body {
  padding: 11px 13px 2px;
  animation: in-up .35s var(--out) both;
}
.proof__body[hidden] { display: none; }
.proof__body p { font-size: 12.5px; line-height: 1.6; color: var(--tx-2); }
.proof__body code {
  font-family: var(--num);
  color: var(--ice-2);
  letter-spacing: .02em;
}

/* ------------------------------------------------------------
   overlays
   ------------------------------------------------------------ */

.overlay { position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-end; justify-content: center; }
.overlay--center { align-items: center; padding: 24px; }
.overlay__scrim {
  position: absolute; inset: 0;
  background: rgba(0, 2, 6, .72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: in-fade .3s var(--ease) both;
}
.sheet {
  position: relative;
  width: 100%; max-width: 480px;
  padding: 14px 20px calc(var(--sab) + 22px);
  border-radius: 28px 28px 0 0;
  background: linear-gradient(180deg, #0C141D, #050A11);
  border: 1px solid var(--line-2);
  border-bottom: 0;
  box-shadow: var(--e-2);
  animation: sheet-up .45s var(--out) both;
}
.overlay--center .sheet {
  max-width: 330px;
  border-radius: var(--r-xl);
  border-bottom: 1px solid var(--line-2);
  padding: 26px 22px 22px;
  text-align: center;
  animation: in-pop .45s var(--spring) both;
}
@keyframes sheet-up { from { transform: translateY(100%); } }
.overlay.is-closing .overlay__scrim { animation: fade-out .24s var(--ease) both; }
.overlay.is-closing .sheet { animation: sheet-down .26s var(--ease) both; }
.overlay--center.is-closing .sheet { animation: shrink .22s var(--ease) both; }
@keyframes fade-out { to { opacity: 0; } }
@keyframes sheet-down { to { transform: translateY(100%); } }
@keyframes shrink { to { opacity: 0; transform: scale(.9); } }

.sheet__grip { width: 38px; height: 4px; margin: 0 auto 16px; border-radius: var(--r-pill); background: var(--line-2); }
.sheet__title { font-size: 18px; font-weight: 700; letter-spacing: -.025em; }
.sheet__text { margin-top: 9px; font-size: 13.5px; line-height: 1.6; color: var(--tx-2); white-space: pre-line; }
.sheet__actions { margin-top: 20px; display: flex; flex-direction: column; gap: 9px; }

/* ---------- ticket reveal: слот-машина из цифр ---------- */

.reveal__label {
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--tx-3);
}

/* световой ореол за числом */
.reveal__stage {
  position: relative;
  margin-top: 14px;
  display: flex;
  justify-content: center;
}
.reveal__stage::before {
  content: "";
  position: absolute; inset: -46% -22%;
  background: radial-gradient(circle at 50% 50%, rgba(44,182,255,.42), transparent 62%);
  filter: blur(10px);
  animation: halo 2.6s var(--ease) infinite alternate;
}
@keyframes halo {
  from { opacity: .55; transform: scale(.92); }
  to   { opacity: 1; transform: scale(1.06); }
}

/* барабаны */
.slots { position: relative; display: flex; gap: 6px; }

.slot {
  position: relative;
  width: 46px; height: 76px;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(10,27,46,.94), rgba(4,16,32,.94));
  border: 1px solid var(--line-2);
  box-shadow: inset 0 12px 20px -12px rgba(0,0,0,.9), inset 0 -12px 20px -12px rgba(0,0,0,.9);
  animation: slot-in .5s var(--spring) both;
}
.slot:nth-child(2) { animation-delay: .06s; }
.slot:nth-child(3) { animation-delay: .12s; }
.slot:nth-child(4) { animation-delay: .18s; }
@keyframes slot-in { from { opacity: 0; transform: translateY(16px) scale(.85); } }

.slot__strip {
  display: flex;
  flex-direction: column;
  will-change: transform;
}
.slot__strip i {
  height: 76px;
  display: grid; place-items: center;
  font-family: var(--num);
  font-style: normal;
  font-size: 44px; font-weight: 800;
  letter-spacing: -.05em;
  color: var(--ice-1);
  text-shadow: 0 0 20px rgba(44,182,255,.5);
}

/* блик стекла поверх барабана */
.slot::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(125,216,255,.16), transparent 42%, transparent 62%, rgba(0,0,0,.34));
  pointer-events: none;
}
.slot.is-locked { border-color: rgba(44,182,255,.6); }
.slot.is-locked .slot__strip i { color: #fff; }
.slot.is-locked::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 2px rgba(44,182,255,.5), 0 0 24px rgba(44,182,255,.55);
  animation: lock .45s var(--out) both;
  pointer-events: none;
  z-index: 2;
}
@keyframes lock {
  from { opacity: 0; transform: scale(1.16); }
  to   { opacity: 1; transform: scale(1); }
}

.reveal__text { margin-top: 18px; font-size: 13px; line-height: 1.55; color: var(--tx-2); }
.reveal__text b { color: var(--ice-2); font-weight: 600; }
.reveal__meta {
  margin-top: 14px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: var(--glass-1);
  border: 1px solid var(--line-1);
  font-size: 11.5px;
  color: var(--tx-3);
}
.reveal__meta svg { width: 14px; height: 14px; stroke: var(--ice-3); fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.reveal__btn { margin-top: 18px; }

/* ------------------------------------------------------------
   toast
   ------------------------------------------------------------ */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--tabbar-h) + var(--sab) + 18px);
  transform: translateX(-50%);
  z-index: 95;
  max-width: min(88vw, 400px);
  padding: 13px 20px;
  border-radius: var(--r-pill);
  background: rgba(10, 17, 25, .96);
  border: 1px solid var(--line-2);
  box-shadow: var(--e-2);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  font-size: 13.5px; font-weight: 500;
  text-align: center;
  animation: toast-in .4s var(--spring) both;
}
.toast--ok  { border-color: rgba(74,222,128,.4); color: var(--green); }
.toast--err { border-color: rgba(241,104,126,.44); color: var(--red); }
.toast.is-closing { animation: toast-out .24s var(--ease) both; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 16px) scale(.94); } }

/* Тост поверх открытой шторки уезжает наверх: внизу он ложился на кнопки
   самой шторки и перекрывал то, ради чего её открыли.
   Правила стоят после базовых — специфичность равная, выигрывает позднее. */
.toast--sheet {
  z-index: 99;
  bottom: auto;
  top: calc(var(--sat) + 16px);
  animation: toast-in-top .3s var(--spring) both;
}
.toast--sheet.is-closing { animation: toast-out-top .24s var(--ease) both; }
@keyframes toast-in-top  { from { opacity: 0; transform: translate(-50%, -16px) scale(.94); } }
@keyframes toast-out-top { to   { opacity: 0; transform: translate(-50%, -10px) scale(.96); } }
@keyframes toast-out { to { opacity: 0; transform: translate(-50%, 10px) scale(.96); } }

/* ------------------------------------------------------------
   fx
   ------------------------------------------------------------ */

.fx { position: fixed; inset: 0; z-index: 80; pointer-events: none; overflow: hidden; }
.fx__p { position: absolute; will-change: transform, opacity; }
.confetti { position: fixed; inset: 0; z-index: 85; pointer-events: none; }

/* ------------------------------------------------------------
   gate: обязательная подписка
   ------------------------------------------------------------ */

.gate {
  position: relative;
  /* Экран-заглушка: центрируем по вертикали, чтобы блок не висел
     в верхней трети с пустотой под кнопками. */
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100svh - var(--sat) - 180px);
  padding: 0 18px 22px;
  text-align: center;
}

.gate__mask {
  position: relative;
  width: 168px;
  height: 168px;
  margin: 0 auto 4px;
  animation: float-soft 5.2s var(--ease) infinite;
}

.gate__mask img {
  position: absolute;
  left: 50%; bottom: 0;
  width: 200px;
  max-width: none;
  height: auto;
  margin-left: -100px;
  /* низ растворяем, чтобы фигура не обрывалась кромкой */
  -webkit-mask-image: linear-gradient(180deg, #000 74%, rgba(0,0,0,.5) 90%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 74%, rgba(0,0,0,.5) 90%, transparent 100%);
  filter: drop-shadow(0 10px 26px rgba(0,0,0,.5));
  animation: hero-in .8s var(--spring) both;
}

.gate__title {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.02em;
  background: var(--g-gold);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gate__text {
  margin: 10px auto 0;
  max-width: 30ch;
  font-size: 14px;
  line-height: 1.5;
  color: var(--tx-2);
}

.gate__acts {
  display: grid;
  gap: 10px;
  margin-top: 22px;
}

.gate__hint { margin-top: 12px; font-size: 12px; }

.devflag {
  position: fixed;
  top: calc(var(--sat) + 70px); left: 12px;
  z-index: 30;
  opacity: .55;
  pointer-events: none;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  font-size: 9.5px; font-weight: 700; letter-spacing: .14em;
  background: rgba(217,185,121,.14);
  border: 1px solid rgba(217,185,121,.44);
  color: var(--gold);
}

.loader { min-height: 44vh; display: grid; place-items: center; }
.loader__dot {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,.1);
  border-top-color: var(--ice-3);
  animation: spin .8s linear infinite;
}

/* Reward wallet: isolated from raffle-number cards and existing admin UI. */
.reward-wallet { margin-top: 16px; background: radial-gradient(100% 120% at 100% 0, rgba(123,92,255,.16), transparent 65%), var(--glass-1); }
.reward-heading { display: flex; align-items: center; gap: 10px; }
.reward-heading h2, .reward-user-detail h2 { font-size: 17px; line-height: 1.4; letter-spacing: -.02em; }
.reward-wallet svg, .reward-draw svg, .reward-admin svg, .reward-overlay svg {
  width: 20px; height: 20px; flex: 0 0 20px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.reward-heading > span { color: var(--ice-2); }
.reward-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 18px 0 12px; }
.reward-metrics > div { min-width: 0; }
.reward-metrics b { display: block; font-size: 30px; font-weight: 800; color: var(--ice-2); }
.reward-metrics b small { font-size: 15px; font-weight: 500; color: var(--tx-2); }
.reward-metrics span { display: block; margin-top: 4px; font-size: 11px; line-height: 1.5; color: var(--tx-2); }
.reward-note { margin: 10px 0; font-size: 12px; line-height: 1.6; color: var(--tx-2); overflow-wrap: anywhere; }
.reward-note:empty, .reward-error:empty { display: none; }
.reward-code { display: grid; gap: 6px; margin: 14px 0 10px; padding: 13px; border: 1px dashed var(--line-2); border-radius: var(--r-sm); background: rgba(0,4,9,.22); }
.reward-code > span { font-size: 11px; color: var(--tx-2); }
.reward-code code { color: var(--ice-2); font-size: 18px; font-weight: 700; }
.reward-wallet .reward-heading { gap: 8px; }
.reward-wallet .reward-heading .iconbtn { flex: 0 0 44px; margin-left: auto; }
.reward-wallet .reward-heading .iconbtn:disabled { opacity: .45; pointer-events: none; }
.reward-wallet .reward-metrics { margin: 12px 0 10px; }
.reward-wallet .reward-code { margin-top: 10px; padding: 10px 12px; }
.reward-code code, .reward-facts, .reward-ledger, .reward-user-detail code, .reward-overlay code { user-select: text; -webkit-user-select: text; overflow-wrap: anywhere; }
.reward-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.reward-actions > .btn { flex: 1 1 120px; min-width: 0; }
.reward-actions [aria-pressed="true"] { background: rgba(123,92,255,.23); border-color: #A78BFF; color: #D9CCFF; }
.reward-wallet .btn, .reward-admin .btn, .reward-overlay .btn, .reward-draw .btn { padding-top: 10px; padding-bottom: 10px; white-space: normal; }
.reward-faq { margin-top: 16px; border-top: 1px solid var(--line-1); }
.reward-faq summary { display: flex; align-items: center; gap: 8px; padding: 14px 0; min-height: 48px; cursor: pointer; font-size: 12px; font-weight: 600; color: var(--ice-2); list-style: none; }
.reward-faq summary::-webkit-details-marker { display: none; }
.reward-faq summary span { flex: 1; }
.reward-faq[open] summary > svg:last-child { transform: rotate(180deg); }
.reward-faq__body { font-size: 12px; line-height: 1.65; color: var(--tx-2); padding-bottom: 6px; }
.reward-faq__body p + p { margin-top: 12px; }
.reward-faq__body b { color: var(--tx-1); }
.reward-draw { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-1); min-width: 0; }
.reward-draw[hidden] { display: none; }
.reward-draw .btn { color: #D9CCFF; border-color: rgba(167,139,255,.3); background: rgba(123,92,255,.13); }
.reward-draw .btn:disabled { opacity: .85; }
.reward-draw .reward-note { margin: 7px 0 0; font-size: 11px; }
.reward-overlay { padding-top: max(12px, var(--sat)); }
.reward-overlay .sheet { max-height: calc(100dvh - max(12px, var(--sat))); max-height: calc(var(--tg-vh, 100dvh) - max(12px, var(--sat))); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.reward-dialog-content { min-width: 0; overflow-wrap: anywhere; }
.reward-dialog-content:focus { outline: none; }
.reward-overlay .sheet__title { font-size: 20px; }
.reward-overlay .sheet__actions { margin-bottom: 4px; }
.reward-overlay .input, .reward-overlay .textarea, .reward-admin .input { font-size: 16px; min-width: 0; }
.reward-overlay .textarea { min-height: 90px; max-height: 200px; }
.reward-stepper { display: flex; align-items: center; justify-content: center; gap: 24px; margin: 22px 0 16px; }
.reward-stepper .iconbtn { width: 48px; height: 48px; }
.reward-stepper output { min-width: 70px; text-align: center; font-size: 32px; font-weight: 800; color: var(--ice-2); }
.reward-stepper output small { font-size: 15px; font-weight: 500; color: var(--tx-2); }
.reward-boost { margin: 14px 0; padding: 15px; border: 1px solid rgba(167,139,255,.3); border-radius: var(--r-md); background: rgba(123,92,255,.12); color: #D9CCFF; font-size: 18px; line-height: 1.5; font-weight: 700; text-align: center; }
.reward-warning { margin: 14px 0; padding: 12px; border-left: 2px solid #A78BFF; color: var(--tx-1); background: rgba(123,92,255,.08); font-size: 13px; line-height: 1.65; }
.reward-error { margin: 12px 0; color: #FF9EAF; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.reward-wallet :is(button, summary):focus-visible, .reward-admin :is(button, input):focus-visible, .reward-overlay :is(button, summary, input, textarea):focus-visible { outline: 2px solid var(--ice-2); outline-offset: 3px; }
.reward-overlay button:disabled, .reward-admin button:disabled { opacity: .45; cursor: not-allowed; }
.reward-admin label { font-size: 12px; line-height: 1.5; color: var(--tx-2); }
.reward-search { display: flex; gap: 8px; margin: 10px 0 12px; }
.reward-search input { flex: 1; width: 0; }
.reward-user { display: flex; align-items: center; gap: 10px; width: 100%; padding: 14px; border: 1px solid var(--line-1); border-radius: var(--r-md); background: var(--glass-1); text-align: left; }
.reward-user[aria-pressed="true"] { border-color: #A78BFF; background: rgba(123,92,255,.16); }
.reward-user__identity { flex: 1; min-width: 0; display: grid; gap: 5px; overflow-wrap: anywhere; }
.reward-user__identity b { font-size: 13px; line-height: 1.45; font-weight: 600; }
.reward-user__identity small { font-size: 11px; line-height: 1.5; color: var(--tx-2); }
.reward-user__identity code { font-size: 11px; color: var(--ice-2); }
.reward-user__balance { color: var(--ice-2); font-size: 22px; font-weight: 700; }
.reward-user__balance small { display: block; font-size: 11px; text-align: right; font-weight: 500; }
.reward-admin [data-detail] { scroll-margin-top: 90px; }
.reward-user-detail { margin-top: 24px; }
.reward-user-detail > .btn + .btn { margin-top: 8px; }
.reward-user-detail h2 { overflow-wrap: anywhere; }
.reward-section-title { margin: 24px 0 12px; font-size: 14px; }
.reward-section-title[tabindex] { scroll-margin-top: 90px; }
.reward-ledger { padding: 13px 0; border-top: 1px solid var(--line-1); font-size: 12px; line-height: 1.5; }
.reward-ledger > b { font-size: 13px; }
.reward-ledger .reward-heading { align-items: baseline; }
.reward-delta { color: var(--ice-2); font-size: 22px; }
.reward-facts { display: grid; grid-template-columns: minmax(0, 105px) minmax(0, 1fr); gap: 8px 12px; margin-top: 12px; font-size: 11px; line-height: 1.6; }
.reward-facts dt { color: var(--tx-2); }
.reward-facts dd { min-width: 0; color: var(--tx-1); white-space: pre-wrap; }
.reward-pager { margin-bottom: 16px; }
@media (max-width: 360px) {
  .reward-wallet, .reward-user-detail { padding: 14px; }
  .reward-metrics { gap: 12px; }
  .reward-user { padding: 12px; gap: 8px; }
  .reward-user > svg { display: none; }
  .reward-facts { grid-template-columns: minmax(0, 85px) minmax(0, 1fr); gap: 8px; }
}

/* ------------------------------------------------------------
   captcha «ты живой» — лёгкий пример после «Участвовать»
   Стекло + лёд как везде, оператор — золотом как победа:
   пример читается главным объектом шторки.
   ------------------------------------------------------------ */

.captcha { text-align: center; }
.captcha__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.captcha__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ice-2);
}
.captcha__badge svg {
  width: 15px; height: 15px;
  fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.captcha__badge i { font-style: normal; }
.captcha__refresh {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--glass-2);
  border: 1px solid var(--line-2);
  color: var(--tx-2);
  cursor: pointer;
  transition: transform .3s var(--spring), color .2s;
}
.captcha__refresh:active { transform: rotate(-40deg) scale(.94); }
.captcha__refresh svg {
  width: 17px; height: 17px;
  fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.captcha__expr {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 18px 0 14px;
}
.captcha__num {
  min-width: 62px; height: 70px;
  padding: 0 12px;
  display: grid; place-items: center;
  font-family: var(--num);
  font-size: 38px; font-weight: 800;
  letter-spacing: -.04em;
  color: var(--tx-1);
  background: linear-gradient(180deg, rgba(10,27,46,.94), rgba(4,16,32,.94));
  border: 1px solid var(--line-2);
  border-radius: 16px;
  box-shadow: inset 0 12px 20px -12px rgba(0,0,0,.9), 0 0 24px rgba(44,182,255,.18);
  animation: slot-in .45s var(--spring) both;
}
.captcha__num:nth-of-type(1) { animation-delay: .02s; }
.captcha__op {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  font-size: 25px; font-weight: 800;
  color: #241802;
  background: var(--g-gold);
  border-radius: 50%;
  box-shadow: var(--glow-gold);
  animation: slot-in .45s var(--spring) both;
  animation-delay: .08s;
}
.captcha__eq {
  font-size: 26px; font-weight: 700;
  color: var(--tx-3);
}
.captcha__ans {
  min-width: 62px; height: 70px;
  padding: 0 12px;
  display: grid; place-items: center;
  font-family: var(--num);
  font-size: 38px; font-weight: 800;
  color: var(--ice-2);
  background: rgba(44,182,255,.1);
  border: 1.5px dashed rgba(125,216,255,.45);
  border-radius: 16px;
  animation: slot-in .45s var(--spring) both;
  animation-delay: .14s;
}
.captcha__ans.is-filled {
  border-style: solid;
  border-color: var(--ice-3);
  box-shadow: 0 0 26px rgba(44,182,255,.35);
  background: rgba(44,182,255,.16);
}
.captcha__field { margin-top: 2px; }
.captcha__input {
  width: 120px;
  height: 52px;
  text-align: center;
  font-family: var(--num);
  font-size: 24px; font-weight: 800;
  color: var(--tx-1);
  background: var(--glass-1);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  outline: none;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.captcha__input:focus { border-color: var(--ice-3); box-shadow: 0 0 0 3px rgba(44,182,255,.22); }
.captcha__input::placeholder { color: var(--tx-3); }
.captcha__keys {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 12px;
}
.captcha__key {
  min-height: 48px;
  border-radius: var(--r-sm);
  font-family: var(--num);
  font-size: 19px; font-weight: 700;
  color: var(--tx-1);
  background: var(--glass-2);
  border: 1px solid var(--line-1);
  cursor: pointer;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: transform .2s var(--spring), background .2s;
}
.captcha__key:active { transform: scale(.94); background: var(--glass-3); }
.captcha__key--ghost { color: var(--tx-3); font-size: 17px; }
.captcha__err {
  min-height: 20px;
  margin: 10px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--red);
}
.captcha--shake { animation: captcha-shake .4s var(--ease); }
@keyframes captcha-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-7px); }
  50% { transform: translateX(6px); }
  75% { transform: translateX(-3px); }
}

/* ------------------------------------------------------------
   reduced motion
   ------------------------------------------------------------ */

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