/* Тёмная тема брокерского приложения. Мобильная вёрстка: крупные строки,
   тап-зоны от 48px, никаких эмодзи — только векторные иконки. */

:root {
  --bg: #08080a;
  --bg-2: #101013;
  --card: #141417;
  --card-2: #1b1b1f;
  --line: rgba(255, 255, 255, 0.07);
  --fg: #ffffff;
  --fg-2: #8d8d96;
  --fg-3: #5c5c66;
  --accent: #ffd60a;
  --green: #32d778;
  --green-dim: rgba(50, 215, 120, 0.14);
  --red: #ff453a;
  --red-dim: rgba(255, 69, 58, 0.14);
  --orange: #e9a33e;
  /* кривые как в iOS: плавный выход и лёгкая пружина */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --spring: cubic-bezier(0.34, 1.42, 0.64, 1);
  --tab-h: 66px;
  --pad: 16px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, system-ui, sans-serif;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input { font: inherit; }

#app { height: 100%; }

.screen {
  position: absolute;
  inset: 0;
  bottom: var(--tab-h);
  display: flex;
  flex-direction: column;
  padding-top: env(safe-area-inset-top);
  opacity: 0;
  visibility: hidden;
  transform: translateX(calc(var(--dir, 1) * 18px)) scale(0.99);
  transition: opacity 0.2s ease, transform 0.34s var(--ease);
}
.screen.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.scroll {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0 var(--pad) 34px;
}

/* ---------- шапка счёта ---------- */

.acc {
  padding: 20px var(--pad) 4px;
  background: radial-gradient(120% 90% at 50% -20%, rgba(255, 214, 10, 0.09), transparent 62%);
}
/* сумма и плашка прибыли делят строку; если не влезают — плашка уходит вниз */
.acc-row { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
/* Справа в углу висит аватарка (position:absolute) — от неё уклоняется
   только сумма. Валюты идут ниже её нижнего края и места не просят. */
.acc-main { flex: 1 1 60%; min-width: 0; padding-right: 54px; }
.acc-value {
  font-size: 32px;
  white-space: nowrap;
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.acc-label { color: var(--fg-2); font-size: 15px; margin-top: 3px; }
/* Валюты занимают свою строку и прижаты вправо: сверху справа висит
   аватарка, и на одной строке с суммой им места уже нет. */
#pf-currency { flex: 1 0 100%; justify-content: flex-end; margin-left: auto; }

/* Компактные валюты: знака достаточно, название занимало целый ряд. */
.periods-mini { padding: 0; gap: 4px; }
.periods-mini .period { padding: 4px 9px; font-size: 12.5px; min-width: 0; }

.acc-spark { width: 100%; height: 54px; display: block; margin: 0; }

/* Шапка при листании: график и периоды уезжают, сумма мельчает. Так устроены
   брокерские приложения — сверху остаётся ровно то, что нужно на ходу. */
.acc, .acc-value, .acc-spark-wrap, #pf-range {
  transition: padding 0.22s var(--ease), height 0.22s var(--ease), opacity 0.18s ease,
    margin 0.22s var(--ease), font-size 0.22s var(--ease);
}
/* Сворачивание привязано к самой прокрутке через --collapse (0..1), а не
   щёлкает по порогу: шапка сжимается плавно, в такт пальцу. Чисто визуальные
   величины — шрифт, высоты, прозрачность — интерполируются через calc().
   Изменения раскладки (перенос строки, ширина колонки) так не анимируются,
   поэтому для них остаётся один переключатель класса, но он срабатывает уже
   на почти сжатой шапке — скачок получается почти незаметным. */
/* Аватарка-вход в свой аккаунт. Сжимается вместе с шапкой, но не исчезает:
   это кнопка, и она должна оставаться нажимаемой в свёрнутом виде. */
.acc { position: relative; }
.acc-ava {
  position: absolute;
  top: calc(16px - 4px * var(--collapse));
  right: var(--pad);
  z-index: 3;
  width: calc(44px - 10px * var(--collapse));
  height: calc(44px - 10px * var(--collapse));
  border-radius: 50%;
  padding: 0;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(150deg, #1f4f6b, #4fb0e0);
  background-size: cover;
  background-position: center;
  display: grid;
  place-items: center;
  overflow: hidden;
  transition: transform 0.16s var(--ease);
}
.acc-ava:active { transform: scale(0.93); }
/* активна, когда открыт раздел «Мой аккаунт»: вкладки такой нет,
   и без этого непонятно, где ты находишься */
.acc-ava.is-active { box-shadow: 0 0 0 2px var(--accent), 0 4px 12px rgba(255, 214, 10, 0.35); }
.acc-ava:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.acc-ava svg {
  width: 55%; height: 55%;
  stroke: #fff; fill: none; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
/* с фото фон рисует сама картинка, иконка не нужна */
.acc-ava.has-photo { background-image: var(--photo); }

.acc { --collapse: 0; }
.acc-value {
  font-size: calc(32px - 11px * var(--collapse));
  letter-spacing: calc(-1px + 0.5px * var(--collapse));
}
.acc-label { opacity: calc(1 - var(--collapse)); max-height: calc(20px - 20px * var(--collapse)); overflow: hidden; }
/* Сжимается обёртка, а не сам канвас: fitCanvas() читает размер именно
   канваса, поэтому его буфер должен оставаться стабильным всегда — иначе
   уже нарисованная картинка растягивается под каждый кадр скролла. */
.acc-spark-wrap {
  overflow: hidden;
  height: calc(54px - 54px * var(--collapse));
  opacity: calc(1 - var(--collapse));
  margin: calc(10px - 10px * var(--collapse)) 0 2px;
}
#pf-range { height: calc(39px - 39px * var(--collapse)); opacity: calc(1 - var(--collapse)); overflow: hidden; padding: calc(6px - 6px * var(--collapse)) 0 2px; }
.periods-mini { opacity: calc(1 - var(--collapse)); }
.acc { padding-top: calc(20px - 8px * var(--collapse)); }

/* при листании сумма и прибыль встают в одну строку, а выбор валюты прячется:
   это настройка, а не то, на что смотрят, пролистывая бумаги. Переключается
   классом на середине хода — к этому моменту шрифт уже уменьшился, поэтому
   перестройка строки не бросается в глаза. */
.acc.is-compact .acc-row { flex-wrap: nowrap; align-items: center; }
.acc.is-compact .acc-main { flex: 0 0 auto; }
.acc.is-compact .periods-mini { display: none; pointer-events: none; }
/* в строке остаётся прибыль в рублях: процент из десяти знаков занимает
   больше места, чем сама сумма, и в свёрнутом виде только мешает */

/* ---------- переключатели периодов ---------- */

.periods { display: flex; gap: 6px; padding: 6px 0 2px; }
.period {
  padding: 7px 12px;
  border-radius: 9px;
  font-size: 13px;
  color: var(--fg-2);
  background: transparent;
}
.period.is-active { background: var(--card-2); color: var(--fg); font-weight: 600; }

.range { display: flex; gap: 6px; padding: 8px 0 14px; }
.range-wide { padding: 0 var(--pad) 12px; }
.range-btn {
  flex: 1;
  padding: 10px 4px;
  border-radius: 11px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--fg-2);
  background: var(--card);
  border: 1px solid transparent;
}
.range-btn { transition: background 0.22s var(--ease), color 0.2s ease, transform 0.16s var(--ease); }
.range-btn:active { transform: scale(0.96); }
.range-btn.is-active { background: var(--card-2); color: var(--fg); border-color: var(--line); }

/* Аватарка в заголовке экрана «Люди» — тот же вход в аккаунт, что и на
   счёте. В ряду из шести вкладок ровно по центру её поставить нельзя, а
   сбоку она терялась, поэтому она вынесена в угол. */
.head-ava { position: relative; }
.head-ava-btn { position: absolute; top: 50%; right: var(--pad); margin-top: -22px; width: 44px; height: 44px; }

/* Вкладки с иконкой над подписью: пять разделов подряд плохо читаются
   одним текстом, значок ловится взглядом быстрее слова. */
.range-icons .range-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 2px;
  font-size: 11px;
  letter-spacing: 0;
}
.range-icons .range-btn i { display: block; width: 20px; height: 20px; }
.range-icons .range-btn svg {
  width: 100%; height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.range-icons .range-btn i { transition: transform 0.34s var(--spring); }
.range-icons .range-btn.is-active i { transform: translateY(-1px) scale(1.08); }

.segments { display: flex; gap: 15px; padding: 14px 0 0; overflow-x: auto; scrollbar-width: none; }
.segments::-webkit-scrollbar { display: none; }
.seg {
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 0 12px;
  color: var(--fg-2);
  font-size: 15px;
  white-space: nowrap;
}
.seg i { width: 17px; height: 17px; display: block; flex-shrink: 0; opacity: 0.85; }
.seg i svg { width: 100%; height: 100%; display: block; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.seg.is-active i { opacity: 1; }
.seg.is-active { color: var(--fg); }
.seg.is-active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 4px;
  height: 2px;
  border-radius: 2px;
  background: var(--fg);
}

.head { padding: 20px var(--pad) 12px; }
.head h1 { margin: 0; font-size: 30px; font-weight: 700; letter-spacing: -0.8px; }
.head-sub { color: var(--fg-2); font-size: 14px; margin-top: 4px; }

/* ---------- карточки и строки ---------- */

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 12px;
}
.card-title {
  padding: 15px 16px 8px;
  color: var(--fg-2);
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.7px;
}

.row {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 12px 14px;
  min-height: 70px;
  position: relative;
  width: 100%;
  text-align: left;
}
.row + .row::before {
  content: '';
  position: absolute;
  left: 72px; right: 0; top: 0;
  height: 1px;
  background: var(--line);
}
.row { transition: background 0.18s ease, transform 0.18s var(--ease); }
.row:active { background: var(--card-2); transform: scale(0.988); }

.screen.is-active .card .row { animation: row-in 0.32s var(--ease) backwards; }
/* Перерисовка списка без смены экрана (котировки, новости) не должна заново
   проигрывать появление: иначе живой список почти всё время прозрачный. */
.no-anim .row, .no-anim .card .row { animation: none !important; }
.card .row:nth-child(2) { animation-delay: 0.02s; }
.card .row:nth-child(3) { animation-delay: 0.04s; }
.card .row:nth-child(4) { animation-delay: 0.06s; }
.card .row:nth-child(5) { animation-delay: 0.08s; }
.card .row:nth-child(6) { animation-delay: 0.1s; }
.card .row:nth-child(7) { animation-delay: 0.12s; }
.card .row:nth-child(n + 8) { animation-delay: 0.14s; }
@keyframes row-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.row[disabled] { opacity: 0.42; }
.row[disabled]:active { background: none; }

.ava {
  width: 46px; height: 46px;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
  display: grid;
  place-items: center;
  position: relative;
}
/* Фото профиля вместо иконки: квадрат уже обрезан на клиенте, здесь только
   вписываем его в круг и слегка обводим, чтобы светлое фото не сливалось. */
.ava-photo {
  background-size: cover; background-position: center;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.ava::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.22), transparent 55%);
  pointer-events: none;
}
.ava svg { width: 74%; height: 74%; display: block; }
.ava svg.full { width: 100%; height: 100%; }

.row-main { flex: 1; min-width: 0; }
/* названия у бумаг длинные — показываем целиком, с переносом, без многоточия */
.row-name {
  font-size: 15.5px;
  line-height: 1.22;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.row-sub { font-size: 13px; color: var(--orange); margin-top: 4px; line-height: 1.35; overflow-wrap: anywhere; }
.row-sub.muted { color: var(--fg-2); }

.row-right { text-align: right; flex-shrink: 0; max-width: 42%; font-variant-numeric: tabular-nums; }
.row-val { font-size: 16.5px; white-space: nowrap; }
.row-chg { font-size: 13px; margin-top: 3px; white-space: nowrap; }

.spark { width: 42px; height: 26px; flex-shrink: 0; opacity: 0.9; }

.up { color: var(--green); }
.down { color: var(--red); }
.dim { color: var(--fg-2); }

.empty { padding: 32px 22px; color: var(--fg-2); font-size: 15px; text-align: center; line-height: 1.5; }

.rank-no {
  width: 46px; height: 46px;
  border-radius: 50%;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  font-size: 17px;
  font-weight: 700;
  background: var(--card-2);
  color: var(--fg-2);
}
.rank-no.gold { background: rgba(255, 214, 10, 0.16); color: var(--accent); }

/* ---------- плитки ---------- */

.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 12px; }
.tile {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px;
}
.tile-l { color: var(--fg-2); font-size: 12.5px; }
.tile-v { font-size: 20px; font-weight: 600; margin-top: 5px; font-variant-numeric: tabular-nums; }
.tiles-3 { grid-template-columns: repeat(3, 1fr); }
.tiles-3 .tile { padding: 13px 8px; text-align: center; }
.tiles-3 .tile-v { font-size: 17px; }

/* ---------- кнопки ---------- */

.btn {
  display: block;
  width: 100%;
  padding: 17px;
  border-radius: 17px;
  font-size: 17px;
  font-weight: 600;
  text-align: center;
  background: var(--card-2);
  border: 1px solid var(--line);
}
.btn { transition: transform 0.18s var(--ease), opacity 0.18s ease; }
.btn:active { opacity: 0.8; transform: scale(0.975); }
.btn-green { background: var(--green); border-color: transparent; color: #04240f; }
.btn-red { background: var(--red); border-color: transparent; color: #2b0402; }
.btn[disabled] { opacity: 0.4; }
.btn + .btn { margin-top: 10px; }

.pills { display: flex; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 4px; gap: 4px; margin: 16px 0 14px; }
.pill { flex: 1; padding: 12px 6px; border-radius: 12px; text-align: center; font-size: 15px; color: var(--fg-2); }
.pill { transition: background 0.24s var(--ease), color 0.2s ease; }
.pill.is-active { background: var(--card-2); color: var(--fg); font-weight: 600; }
.pill.is-active[data-side='long'] { background: var(--green); color: #04240f; }
.pill.is-active[data-side='short'] { background: var(--red); color: #2b0402; }

.chips { display: flex; gap: 7px; flex-wrap: wrap; }
.chip {
  flex: 1;
  min-width: 54px;
  padding: 11px 8px;
  border-radius: 13px;
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--fg-2);
  font-size: 14.5px;
  text-align: center;
}
.chip { transition: background 0.2s ease, color 0.2s ease, transform 0.18s var(--ease); }
.chip:active { transform: scale(0.95); }
.chip.is-active { background: var(--accent); border-color: transparent; color: #191500; font-weight: 700; }

/* ---------- поля и ползунки ---------- */

.field { margin-bottom: 16px; }
.field-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 9px; }
.field-label { font-size: 13.5px; color: var(--fg-2); }
.field-value { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }

.input {
  width: 100%;
  padding: 16px;
  border-radius: 16px;
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--fg);
  font-size: 19px;
  font-variant-numeric: tabular-nums;
}
.input:focus { outline: none; border-color: rgba(255, 214, 10, 0.55); }

.slider { position: relative; height: 44px; display: flex; align-items: center; --track: var(--accent); --fill: 50%; touch-action: none; overscroll-behavior: contain; }
.slider input[type='range'] {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  height: 44px;
  margin: 0;
  touch-action: none;
}
.slider input[type='range']::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--track) 0 var(--fill), rgba(255, 255, 255, 0.12) var(--fill) 100%);
}
.slider input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 28px; height: 28px;
  margin-top: -10px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--track);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.6);
}
.slider input[type='range']::-moz-range-track { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.12); }
.slider input[type='range']::-moz-range-progress { height: 8px; border-radius: 4px; background: var(--track); }
.slider input[type='range']::-moz-range-thumb { width: 22px; height: 22px; border: 3px solid var(--track); border-radius: 50%; background: #fff; }
.slider.green { --track: var(--green); }
.slider.red { --track: var(--red); }

.summary { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 2px 15px; margin-bottom: 14px; }
.summary-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.summary-row + .summary-row { border-top: 1px solid var(--line); }
.summary-row > span { color: var(--fg-2); }

/* ---------- кликер ---------- */

.clicker-top { text-align: center; padding: 20px 0 2px; }
.clicker-balance { font-size: 40px; font-weight: 700; letter-spacing: -1.2px; font-variant-numeric: tabular-nums; }
.clicker-hint { color: var(--fg-2); font-size: 13.5px; margin-top: 6px; }

.coin {
  position: relative;
  width: min(60vw, 240px);
  aspect-ratio: 1;
  margin: 22px auto 6px;
  border-radius: 50%;
  user-select: none;
  filter: drop-shadow(0 18px 40px rgba(255, 200, 40, 0.24));
  transition: transform 0.07s ease;
}
.coin svg { width: 100%; height: 100%; display: block; pointer-events: none; }
.coin.is-tapped { transform: scale(0.94); }
.coin.is-dead { filter: grayscale(1) brightness(0.45); }

.pop {
  position: absolute;
  pointer-events: none;
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
  animation: pop 0.85s ease-out forwards;
}
@keyframes pop {
  0% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -78px) scale(1.3); }
}

.energy { display: flex; align-items: center; gap: 10px; margin: 16px 0 14px; font-size: 13.5px; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.energy .ico { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.9; }
.energy .ico svg { width: 100%; height: 100%; display: block; }
.energy-bar { flex: 1; height: 9px; border-radius: 5px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.energy-fill { height: 100%; border-radius: 5px; background: linear-gradient(90deg, #f0b90b, #ffe873); transition: width 0.2s linear; }

/* ---------- нижнее меню ---------- */

.tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: calc(var(--tab-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  display: flex;
  background: rgba(14, 14, 17, 0.92);
  backdrop-filter: blur(24px);
  border-top: 1px solid var(--line);
  z-index: 40;
}
.tab-glow {
  position: absolute;
  top: 6px;
  left: 0;
  width: 25%;
  height: calc(var(--tab-h) - 12px);
  padding: 0 12px;
  transition: transform 0.42s var(--spring);
  pointer-events: none;
}
.tab-glow::before {
  content: '';
  display: block;
  height: 100%;
  border-radius: 16px;
  background: linear-gradient(180deg, var(--accent-soft), var(--accent-soft-2));
  box-shadow: inset 0 0 0 1px var(--accent-line);
}
.tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--fg-3);
  font-size: 10.5px;
  position: relative;
  z-index: 1;
  transition: color 0.2s;
}
.tab i { display: block; width: 25px; height: 25px; }
.tab svg {
  width: 100%; height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tab i { transition: transform 0.34s var(--spring); }
.tab.is-active { color: var(--accent); }
.tab.is-active i { transform: translateY(-2px) scale(1.08); }
.tab.is-active span { font-weight: 600; }

/* ---------- карточка бумаги ---------- */

.sheet-wrap { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; }
.sheet-wrap.is-hidden { display: none; }
.sheet-back { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.68); animation: fade 0.2s ease; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.sheet {
  position: relative;
  width: 100%;
  max-height: 94vh;
  background: var(--bg-2);
  border-radius: 24px 24px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  display: flex;
  flex-direction: column;
  animation: rise 0.42s var(--ease);
  touch-action: none;
}
@keyframes rise { from { transform: translateY(100%); } to { transform: translateY(0); } }
.sheet.is-dragging { animation: none; transition: none; }
.sheet.is-settling { animation: none; transition: transform 0.4s var(--ease); }

.sheet-grab { padding: 11px 0 5px; display: flex; justify-content: center; flex-shrink: 0; }
.sheet-grab::before { content: ''; width: 42px; height: 4px; border-radius: 2px; background: #46464c; }
.sheet-body { padding: 6px 16px calc(26px + env(safe-area-inset-bottom)); overflow-y: auto; }

.sheet-head { display: flex; align-items: center; gap: 13px; }
.sheet-name { font-size: 18px; line-height: 1.25; }
.sheet-tick { font-size: 13px; color: var(--fg-2); margin-top: 3px; }
.sheet-price { font-size: 34px; font-weight: 700; letter-spacing: -1px; margin-top: 14px; font-variant-numeric: tabular-nums; }
.sheet-chg { font-size: 14px; margin-top: 3px; font-variant-numeric: tabular-nums; }

/* шесть таймфреймов полными словами не влезают в строку — раскладываем в две по три */
.tf { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 8px; }
.tf-btn {
  flex: 1 1 calc(33.333% - 4px);
  padding: 9px 6px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--fg-2);
  background: var(--card);
  border: 1px solid transparent;
  white-space: nowrap;
}
.tf-btn.is-active { background: var(--card-2); color: var(--accent); border-color: rgba(255, 214, 10, 0.28); }

.chart-box {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 8px 6px 4px;
  margin-bottom: 12px;
}
.chart { width: 100%; height: 210px; display: block; cursor: grab; touch-action: none; }
.chart:active { cursor: grabbing; }
.chart-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px 2px; font-size: 12px; color: var(--fg-3); font-variant-numeric: tabular-nums; }
.chart-reset {
  margin-left: auto;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--card-2);
  border: 1px solid var(--line);
  color: var(--fg-2);
  font-size: 11px;
  white-space: nowrap;
}

/* ---------- чат: команда и личные сообщения, общий стиль ---------- */
.chat-box { display: flex; flex-direction: column; gap: 8px; padding: 10px; max-height: 320px; overflow-y: auto; }
.chat-empty { padding: 20px 10px; text-align: center; color: var(--fg-3); font-size: 14px; }
.chat-row { display: flex; flex-direction: column; max-width: 78%; }
.chat-row.own { align-self: flex-end; align-items: flex-end; }
.chat-row.other { align-self: flex-start; align-items: flex-start; }
.chat-meta { font-size: 11px; color: var(--fg-3); margin: 0 4px 3px; }
.chat-bubble {
  padding: 8px 12px;
  border-radius: 16px;
  font-size: 15px;
  line-height: 1.35;
  word-break: break-word;
  white-space: pre-wrap;
}
.chat-row.own .chat-bubble { background: var(--accent); color: #111; border-bottom-right-radius: 4px; }
.chat-row.other .chat-bubble { background: var(--card-2); color: var(--fg); border-bottom-left-radius: 4px; }
.chat-input-row { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--line); }
.chat-input-row .input { flex: 1; }
.chat-send {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 14px;
  background: var(--accent);
  color: #111;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chat-send svg { width: 20px; height: 20px; fill: currentColor; }
.dm-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px 10px; }
.dm-head .row-name { font-size: 17px; font-weight: 600; }
.friend-item + .friend-item { margin-top: 2px; }
.friend-actions {
  display: flex;
  gap: 8px;
  padding: 2px 15px 12px;
}
.fa-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 6px;
  border-radius: 12px;
  font-size: 12.5px;
  font-weight: 500;
  background: var(--card-2);
  border: 1px solid var(--line);
  color: var(--fg-2);
}
.fa-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.fa-btn:active { opacity: 0.7; }
.fa-btn.fa-primary { background: rgba(255, 214, 10, 0.12); border-color: rgba(255, 214, 10, 0.32); color: var(--accent); }
.fa-btn.fa-danger { background: rgba(255, 69, 58, 0.1); border-color: rgba(255, 69, 58, 0.28); color: #ff6b62; }

.chat-role {
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(255, 214, 10, 0.14);
  color: var(--accent);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.card-team-chat {
  border: 1px solid rgba(255, 214, 10, 0.28);
  background: linear-gradient(180deg, rgba(255, 214, 10, 0.05), rgba(255, 214, 10, 0) 40%), var(--card);
}
.team-chat-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--accent);
}
.team-chat-title i, .team-chat-title svg { width: 18px; height: 18px; }

.friend-unread {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent);
  color: #111;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ---------- лента ---------- */

.note { padding: 13px 15px; font-size: 14.5px; line-height: 1.42; position: relative; display: flex; gap: 10px; }
.note + .note::before {
  content: '';
  position: absolute;
  left: 15px; right: 0; top: 0;
  height: 1px;
  background: var(--line);
}
.note-dot { width: 7px; height: 7px; border-radius: 50%; margin-top: 6px; flex-shrink: 0; background: var(--fg-3); }
.note-dot.pump, .note-dot.win, .note-dot.div { background: var(--green); }
.note-dot.dump, .note-dot.loss, .note-dot.liq, .note-dot.rob, .note-dot.tax { background: var(--red); }
.note-dot.star { background: var(--accent); }
.note-time { color: var(--fg-3); font-size: 12.5px; margin-top: 4px; }

/* Закреплённый редкий дроп. Выделяем ровно настолько, чтобы взгляд зацепился:
   тёплая подложка с затуханием, тонкая полоса слева и ореол у точки. Размер
   шрифта и высоту строки не трогаем — иначе лента начнёт «прыгать». */
.note.is-pinned {
  background: linear-gradient(90deg, rgba(255, 214, 10, 0.075), rgba(255, 214, 10, 0));
  box-shadow: inset 2px 0 0 var(--accent);
}
.note.is-pinned > div:last-child { font-weight: 500; }
.note.is-pinned .note-dot { box-shadow: 0 0 0 3px rgba(255, 214, 10, 0.16); }

/* Выпуск собственной бумаги — самое редкое, что бывает: 500 звёзд и считаные
   случаи за всё время. Подсветка та же по духу, но заметно плотнее, чтобы
   читалась старше дропа: шире полоса, гуще заливка, жирнее текст. */
.note.is-pinned-top {
  background: linear-gradient(90deg, rgba(255, 214, 10, 0.17), rgba(255, 214, 10, 0.02));
  box-shadow: inset 3px 0 0 var(--accent);
}
.note.is-pinned-top > div:last-child { font-weight: 650; }
.note.is-pinned-top .note-dot { box-shadow: 0 0 0 4px rgba(255, 214, 10, 0.26); }

/* ---------- рулетка ---------- */

.rl-hero {
  border-color: rgba(255, 69, 58, 0.28);
  background: radial-gradient(120% 120% at 50% 0%, rgba(255, 69, 58, 0.16), transparent 65%), var(--card);
}

/* Переключатель зала — сегментный, а не большие жёлтые кнопки: рядом с
   переключателем видимости стола («Публичный/По приглашению») те выглядели
   как повторяющийся ряд одинаковых плашек без подписей. Форма и размер тут
   намеренно другие, чтобы два переключателя не путались друг с другом. */
.zal-toggle { display: flex; gap: 4px; padding: 3px; border-radius: 14px; background: var(--card-2); margin-top: 8px; }
.zal-toggle button { flex: 1; padding: 9px 6px; border-radius: 11px; font-size: 13px; font-weight: 600; color: var(--fg-2); }
.zal-toggle button.is-active { background: var(--card); color: var(--fg); }
.zal-toggle button.vip { color: var(--accent); }
.zal-toggle button.vip.is-active { background: var(--accent); color: #1a1400; }

/* Колесо: настоящая раскладка секторов через conic-gradient, номера расставлены
   тем же порядком по кругу. Указатель наверху неподвижен — крутится колесо.
   Шарик — отдельный слой поверх, крутится в противоход и садится точно
   в момент, когда выпавшее число оказывается под указателем. */
/* Обод — золотое кольцо с бликом и тёмной каймой, нарисованное одним
   radial-gradient на самой обёртке: тарелка с числами (152px) сидит по
   центру и закрывает всё, что внутри 80% радиуса, снаружи остаётся
   19-пиксельная золотая рама с ромбами, как на референсе.
   Центрируем тарелку через flex, а не transform: JS крутит .rl-wheel через
   style.transform, и если бы центрирование тоже жило в transform, вращение
   стирало бы его при каждом кадре. */
.rl-wheel-wrap {
  margin: 8px auto 18px; position: relative;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle,
    transparent 0 80%,
    #b8860b 80% 84%,
    #f5d576 84% 86%,
    #b8860b 86% 92%,
    #8a6206 92% 96%,
    #0c0c0e 96% 100%);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5);
}
.rl-wheel-stud {
  position: absolute; top: 50%; left: 50%;
  width: 9px; height: 9px;
  background: linear-gradient(135deg, #f5d576, #b8860b);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.rl-wheel-ptr {
  position: absolute; top: 2px; left: 50%; transform: translateX(-50%);
  width: 0; height: 0; z-index: 3;
  border-left: 7px solid transparent; border-right: 7px solid transparent;
  border-top: 13px solid var(--accent);
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5));
}
.rl-wheel {
  border-radius: 50%; position: relative;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), inset 0 0 0 3px #0b0b0d;
  transform: rotate(0deg);
}
/* Колесо выросло, и на сектор приходится 17 px дуги: числа снова стоят
   горизонтально и читаются с любого места, без наклона головы. */
.rl-wheel-num {
  position: absolute; top: 50%; left: 50%;
  font-size: 12px; font-weight: 800; line-height: 1; color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.3px;
}

/* Бесконечное ровное вращение между спинами: колесо никогда не замирает. */
@keyframes rl-turn { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes rl-turn-back { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
/* Ступица — вне вращающейся тарелки, как настоящий неподвижный шпиндель:
   крутятся только цветные сектора под ней, крестовина стоит на месте. */
.rl-wheel-hub {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 54px; height: 54px; border-radius: 50%; z-index: 1;
  background: radial-gradient(circle at 35% 30%, #3a3a42, #0e0e10 70%);
  box-shadow: inset 0 0 0 2px rgba(255, 214, 10, 0.35), 0 2px 6px rgba(0, 0, 0, 0.5);
  display: flex; align-items: center; justify-content: center;
}
.rl-wheel-hub-svg { width: 34px; height: 34px; }

/* Шарик орбитой поверх колеса: сам не двигается, крутится его обёртка.
   top/left:50% ставит шарик в ЦЕНТР узла, а не на его край — раньше было
   top:0, из-за чего translateY(-80px) уносил шарик на 80px ВЫШЕ верхней
   кромки обода вместо того, чтобы просто отступить от центра на радиус
   дорожки, и шарик оказывался невидим за пределами колеса. */
.rl-ball-orbit { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.rl-ball-dot {
  position: absolute; top: 50%; left: 50%;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #c9c9d2 55%, #86868f);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), 0 0 4px rgba(255, 255, 255, 0.5);
  transition: transform 0.25s ease;
}
/* Пока колесо крутится, шарик идёт по внешней дорожке. Когда всё
   останавливается, он сваливается внутрь — в цветную лунку, как в жизни.
   Радиус вынесен в переменную, чтобы прыжок был одним движением. */
.rl-ball-dot { --r: 138px; transform: translate(-50%, calc(-50% - var(--r))); }
.rl-ball-dot.is-drop {
  --r: 117px;
  animation: rl-ball-drop 0.55s cubic-bezier(0.3, 0.9, 0.4, 1) both;
}
@keyframes rl-ball-drop {
  0% { transform: translate(-50%, calc(-50% - 138px)) scale(1); }
  45% { transform: translate(-50%, calc(-50% - 121px)) scale(0.82); filter: brightness(1.35); }
  70% { transform: translate(-50%, calc(-50% - 113px)) scale(1.05); }
  100% { transform: translate(-50%, calc(-50% - 117px)) scale(1); filter: brightness(1); }
}

.rl-hist { display: flex; gap: 6px; padding: 0 14px 12px; overflow-x: auto; scrollbar-width: none; }
.rl-hist::-webkit-scrollbar { display: none; }
.rl-ball {
  flex-shrink: 0;
  min-width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: 12.5px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.rl-ball.big { min-width: 42px; height: 42px; font-size: 18px; animation: rl-ball-pop 0.4s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes rl-ball-pop { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.rl-ball.red { background: #c62828; color: #fff; }
.rl-ball.black { background: #2a2a31; color: #fff; border: 1px solid var(--line); }
.rl-ball.zero { background: #1b8f4d; color: #fff; }

.rl-result { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-top: 1px solid var(--line); }
.rl-result b { margin-left: auto; font-size: 16px; }

/* Фаза стола — цветная плашка, а не мелкая серая строка: видно с одного
   взгляда, идёт приём ставок, крутится колесо или уже известен результат. */
.rl-phase {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px;
  font-size: 14px; font-weight: 600;
  border-top: 1px solid var(--line);
}
.rl-phase b { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }
.rl-phase.is-bets { color: var(--green); }
.rl-phase.is-spin { color: var(--accent); animation: rl-phase-pulse 1s ease-in-out infinite; }
.rl-phase.is-payout { color: var(--fg); background: rgba(255, 214, 10, 0.08); }
@keyframes rl-phase-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

/* Поле: сукно с лёгким бликом сверху и внутренней тенью, как настоящий стол,
   а не плоский список кнопок. Ряд — улица, столбец — колонка, квадрат
   два на два — угол: те же наборы, что проверяет сервер. */
.rl-table {
  padding: 12px 10px 14px;
  border-radius: 16px;
  background: radial-gradient(120% 100% at 50% 0%, #0f3d24, #082415 72%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), inset 0 2px 16px rgba(0, 0, 0, 0.4);
  display: grid; gap: 6px;
}
.rl-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.rl-row.rl-three { grid-template-columns: repeat(3, 1fr); }
.rl-zero-row { grid-template-columns: 1fr; }

.rl-cell {
  position: relative;
  height: 42px;
  border-radius: 10px;
  font-size: 15px; font-weight: 700;
  color: #fff;
  font-variant-numeric: tabular-nums;
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -3px 5px rgba(0, 0, 0, 0.3);
  transition: transform 0.14s var(--ease), box-shadow 0.18s ease;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.rl-cell:active { transform: scale(0.93); }
.rl-cell.red { background: #c62828; }
.rl-cell.black { background: #2a2a31; border: 1px solid #3a3a44; }
.rl-cell.zero { background: #1b8f4d; }
.rl-cell.rl-out { background: var(--card-2); color: var(--fg-2); font-size: 13px; font-weight: 600; }
.rl-cell.rl-out.red { background: #c62828; color: #fff; }
.rl-cell.rl-out.black { background: #2a2a31; color: #fff; border: 1px solid #3a3a44; }
.rl-cell.has-bet {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -3px 5px rgba(0, 0, 0, 0.3), inset 0 0 0 2px var(--accent);
}
.rl-cell.is-win {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -3px 5px rgba(0, 0, 0, 0.3),
    0 0 0 3px var(--accent), 0 0 18px rgba(255, 214, 10, 0.55);
  animation: rl-win-pulse 0.9s ease-in-out 2;
}
@keyframes rl-win-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }

/* Фишка лежит поверх клетки, как за настоящим столом: круглый жетон с
   зубчатым краем, а не просто подписанная плашка. Край — тот же приём
   repeating-conic-gradient, что и в выборе номинала снизу, только меньше. */
/* Фишка сидит ВНУТРИ клетки, а не свисает с её угла: у .card стоит
   overflow:hidden, и у крайнего правого столбца свисающий край обрезался. */
.rl-chip {
  position: absolute; right: 2px; bottom: 2px;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  /* --bg лежит отдельным нижним слоем, а не цветом внутри conic-gradient:
     у мифических скинов --bg — сам по себе градиент (радуга), а градиент
     нельзя подставить цветом в другой градиент. Зубцы рисуются поверх и
     обрезаются радиальной маской, чтобы центр фишки остался чистым. */
  background:
    repeating-conic-gradient(transparent 0deg 16deg, var(--edge, rgba(0, 0, 0, 0.3)) 16deg 32deg) padding-box,
    var(--bg);
  color: var(--fg);
  font-size: 7.5px; font-weight: 800; letter-spacing: -0.3px;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}
/* Чистая серединка поверх зубцов; номинал живёт в <b> над ней. */
.rl-chip-core {
  position: absolute; inset: 4px; border-radius: 50%;
  background: var(--bg);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}
.rl-chip b { position: relative; z-index: 1; font-weight: 800; }

/* Выбор фишки: круглые жетоны с зубчатым краем, как у настоящих покерных
   фишек, — цвет узнаётся издалека, надпись только подтверждает номинал. */
/* padding-top держит запас под приподнятую (translateY(-4px) scale(1.08))
   активную фишку — иначе overflow-x:auto заодно клипает и overflow-y,
   и верх увеличенной фишки обрезался прямо в ряду. */
/* Без scroll-snap: он тянул ленту к ближайшей фишке и мешал добраться до
   крупных номиналов. Плавную прокрутку тоже убрали — она конфликтовала с
   восстановлением позиции после обновления стола. */
.rl-chip-picker { display: flex; gap: 9px; overflow-x: auto; overflow-y: visible; padding: 10px 2px 6px; scrollbar-width: none; }
.rl-chip-picker::-webkit-scrollbar { display: none; }
.rl-chip-btn {
  flex-shrink: 0; width: 52px; height: 52px; border-radius: 50%;
  background:
    repeating-conic-gradient(transparent 0deg 18deg, var(--edge, rgba(0, 0, 0, 0.22)) 18deg 36deg),
    var(--bg);
  border: none; position: relative;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.16s var(--ease), box-shadow 0.16s ease;
}
.rl-chip-btn::after {
  content: ''; position: absolute; inset: 6px; border-radius: 50%;
  background: var(--bg); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), inset 0 2px 4px rgba(255, 255, 255, 0.15);
}
.rl-chip-face { position: relative; z-index: 1; font-size: 11px; font-weight: 800; color: var(--fg); }
.rl-chip-btn.is-active { transform: translateY(-4px) scale(1.08); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4), 0 0 0 2px var(--accent); }
.rl-chip-btn:active { transform: scale(0.92); }

/* Витрина скинов фишек. Свой класс, а не .skin-card: у карты жёстко заданы
   прямоугольные размеры в .skin-card.tiny/.big, и фишка становилась картой. */
.chip-skin-card {
  position: relative; flex-shrink: 0;
  width: 52px; height: 52px; border-radius: 50%;
  background:
    repeating-conic-gradient(transparent 0deg 18deg, var(--edge, rgba(0, 0, 0, 0.25)) 18deg 36deg),
    var(--bg);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
  display: flex; align-items: center; justify-content: center;
}
.chip-skin-card.tiny { width: 38px; height: 38px; }
.chip-skin-card.big { width: 96px; height: 96px; }
.case-item .chip-skin-card { width: 60px; height: 60px; box-shadow: 0 0 12px var(--rar); }
.chip-skin-card::after {
  content: ''; position: absolute; inset: 14%; border-radius: 50%;
  background: var(--bg); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}
.chip-skin-face {
  position: relative; z-index: 1;
  font-size: 13px; font-weight: 800; color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.chip-skin-card.tiny .chip-skin-face { font-size: 8px; }
.chip-skin-card.big .chip-skin-face { font-size: 22px; }

.rl-mybet { display: flex; align-items: center; gap: 9px; padding: 10px 14px; font-size: 14px; border-bottom: 1px solid var(--line); }
.rl-mybet:last-child { border-bottom: 0; }
.rl-mybet-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); }
.rl-mybet b { margin-left: auto; font-variant-numeric: tabular-nums; }

.rl-picks { display: grid; gap: 6px; max-height: 46vh; overflow-y: auto; }
.rl-pick {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 13px;
  border-radius: 11px;
  background: var(--card-2);
  color: var(--fg);
  font-size: 14px;
  text-align: left;
}
.rl-pick b { margin-left: auto; color: var(--accent); font-variant-numeric: tabular-nums; }
.rl-pick:active { transform: scale(0.98); }

/* ---------- уведомления ---------- */

.toast-wrap {
  position: fixed;
  left: 10px; right: 10px;
  top: calc(10px + env(safe-area-inset-top));
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.toast {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 11px;
  background: rgba(32, 32, 36, 0.97);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 13px 15px;
  font-size: 14.5px;
  line-height: 1.35;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.6);
  animation: toast-in 0.42s var(--spring);
}
.toast .bar { width: 3px; align-self: stretch; border-radius: 2px; background: var(--fg-3); flex-shrink: 0; }
.toast.ok .bar { background: var(--green); }
.toast.err .bar { background: var(--red); }
.toast.warn .bar { background: var(--accent); }
.toast b { display: block; font-size: 13px; margin-bottom: 2px; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }

.disclaimer { color: var(--fg-3); font-size: 12.5px; line-height: 1.5; text-align: center; padding: 12px 10px 0; }

/* ---------- подсветка изменения цены ---------- */

@keyframes flash-up { from { color: var(--green); } to { color: var(--fg); } }
@keyframes flash-down { from { color: var(--red); } to { color: var(--fg); } }
.flash-up { animation: flash-up 0.75s ease-out; }
.flash-down { animation: flash-down 0.75s ease-out; }

/* ---------- ежедневная награда и приглашения ---------- */

.card-pad { padding: 0 14px 14px; }

.dots { display: flex; gap: 6px; margin: 2px 0 12px; }
.dot {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.1);
}
.dot.is-done { background: var(--accent); }
.dot.is-next { background: rgba(255, 214, 10, 0.4); animation: dot-pulse 1.4s ease-in-out infinite; }
@keyframes dot-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.dot-lg { height: 9px; border-radius: 5px; }

/* ---------- ежедневная награда: крупная карточка наверху «Наград» ---------- */
.card-daily {
  border: 1px solid rgba(255, 214, 10, 0.24);
  background: linear-gradient(180deg, rgba(255, 214, 10, 0.06), var(--card) 45%);
}
.daily-title { font-size: 15.5px; font-weight: 700; }
.daily-amount {
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  margin-bottom: 4px;
}
.btn-daily { font-size: 15px; font-weight: 600; padding: 13px; }

/* ---------- расписание ежедневки: видно, что даст каждый день ---------- */
.daily-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
  margin: 12px 0 14px;
}
.daily-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 7px 2px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid transparent;
}
.daily-day-n {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--fg-3);
  background: rgba(255, 255, 255, 0.06);
}
.daily-day-n svg { width: 11px; height: 11px; fill: #191500; stroke: none; }
.daily-day-amt { font-size: 9.5px; color: var(--fg-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.daily-day.is-done .daily-day-n { background: var(--accent); }
.daily-day.is-done .daily-day-amt { color: var(--fg-2); }
.daily-day.is-current {
  background: rgba(255, 214, 10, 0.1);
  border-color: rgba(255, 214, 10, 0.35);
}
.daily-day.is-current .daily-day-n { background: rgba(255, 214, 10, 0.4); color: #191500; animation: dot-pulse 1.4s ease-in-out infinite; }
.daily-day.is-current .daily-day-amt { color: var(--accent); font-weight: 700; }

.row-chg .sep { opacity: 0.5; margin: 0 4px; }

/* ---------- перевод денег и золотой статус ---------- */

.gold-banner { border-color: rgba(255, 214, 10, 0.32); background: linear-gradient(180deg, rgba(255, 214, 10, 0.08), var(--card) 60%); }
.btn-gold { background: var(--accent); border-color: transparent; color: #191500; }

.mini {
  margin-top: 6px;
  padding: 6px 11px;
  border-radius: 9px;
  font-size: 12.5px;
  color: var(--fg-2);
  background: var(--card-2);
  border: 1px solid var(--line);
}
.mini:active { opacity: 0.7; }

/* Ответы на заявку: две кнопки одной ширины, но разного смысла — согласие
   зелёное, отказ красный. Иконка читается быстрее слова. */
.req-actions { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.req-actions .mini {
  margin-top: 0;
  width: 118px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-weight: 600;
}
.req-actions .mini svg {
  width: 14px; height: 14px; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.req-yes { color: var(--green); background: rgba(50, 215, 120, 0.14); border-color: rgba(50, 215, 120, 0.4); }
.req-no { color: var(--red); background: rgba(255, 69, 58, 0.12); border-color: rgba(255, 69, 58, 0.34); }

/* семь вкладок: подписи и иконки мельче, иначе не помещаются */
.tabbar .tab { font-size: 8.5px; gap: 3px; }
.tabbar .tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabbar .tab i { width: 21px; height: 21px; }
.tab-glow { padding: 0 4px; }

/* подсказка-ссылка внутри карточки бумаги */
.hint-row {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 14px;
  border-radius: 15px;
  background: var(--card);
  border: 1px dashed rgba(255, 214, 10, 0.3);
  color: var(--fg-2);
  font-size: 13.5px;
  line-height: 1.4;
  text-align: center;
}
.hint-row:active { opacity: 0.7; }

/* монета кликера пружинит */
.coin { transition: transform 0.34s var(--spring); }
.coin.is-tapped { transform: scale(0.93); transition: transform 0.07s ease; }

/* карточка бумаги подъезжает мягко */
.sheet-back { transition: opacity 0.3s ease; }

/* если в системе выключены анимации — уважаем настройку */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- налог на крупный капитал ---------- */

.tax-line {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--red-dim);
  color: var(--red);
  font-size: 13.5px;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}
.tax-line b { font-weight: 600; }
.tax-line .dim { color: var(--red); opacity: 0.72; }
.tax-line.is-hidden { display: none; }

/* Свёрнутая налоговая строка: сумма и срок в одну строку, остальное по тапу.
   Игрок про налог знает, ежеминутно занимать этим четверть экрана незачем. */
.tax-line { cursor: pointer; }
.tax-head { display: flex; align-items: center; gap: 8px; }
.tax-chev { margin-left: auto; opacity: 0.6; transition: transform 0.2s var(--ease); }
.tax-line.is-open .tax-chev { transform: rotate(90deg); }
.tax-more { display: none; margin-top: 6px; }
.tax-line.is-open .tax-more { display: block; }

/* ---------- модальное окно ---------- */

/* Общее правило: раньше .is-hidden был описан только для конкретных блоков,
   и на любом другом элементе класс ничего не делал. */
.range-btn.is-hidden { display: none; }

.modal-wrap { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 22px; }
.modal-wrap.is-hidden { display: none; }
.modal-back { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.72); backdrop-filter: blur(3px); }
.modal {
  position: relative;
  width: 100%;
  max-width: 360px;
  padding: 24px 20px 18px;
  border-radius: 24px;
  background: var(--card);
  border: 1px solid var(--line);
  text-align: center;
  /* Длинный текст (например «Что нового») раньше просто уезжал за экран:
     у окна не было ни предела высоты, ни прокрутки. dvh — чтобы панель
     Telegram не съедала низ окна на телефоне. */
  max-height: calc(100vh - 44px);
  max-height: calc(100dvh - 44px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  animation: modal-in 0.34s var(--spring) both;
}
@keyframes modal-in {
  from { opacity: 0; transform: translateY(16px) scale(0.94); }
  to { opacity: 1; transform: none; }
}
.modal-ava { width: 64px; height: 64px; margin: 0 auto 14px; }
.modal h3 { margin: 0 0 8px; font-size: 20px; font-weight: 700; letter-spacing: -0.4px; }
.modal p { margin: 0 0 6px; color: var(--fg-2); font-size: 14.5px; line-height: 1.45; }
.modal .modal-sum { font-size: 27px; font-weight: 700; color: var(--red); margin: 12px 0 4px; font-variant-numeric: tabular-nums; }
.modal .btn { margin-top: 16px; }

/* ---------- выбор лого компании ---------- */

.pickers { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 10px; }
.picker {
  width: 46px; height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 2px solid transparent;
  transition: transform 0.16s var(--ease), border-color 0.16s ease;
}
.picker svg { width: 24px; height: 24px; }
.picker svg path, .picker svg circle, .picker svg rect { fill: #fff; }
.picker:active { transform: scale(0.92); }
.picker.is-active { border-color: var(--fg); }

/* ---------- рулетка взлома ---------- */

.wheel { display: flex; gap: 10px; justify-content: center; margin: 18px 0 6px; }
.wheel-slot {
  flex: 1;
  max-width: 96px;
  padding: 18px 8px;
  border-radius: 16px;
  background: var(--card-2);
  border: 2px solid transparent;
  text-align: center;
  font-size: 21px;
  font-weight: 700;
  color: var(--fg-2);
  font-variant-numeric: tabular-nums;
  transition: transform 0.14s var(--ease), border-color 0.14s ease, color 0.14s ease, background 0.14s ease;
}
.wheel-slot.is-lit { color: var(--fg); background: var(--card); border-color: var(--fg-3); transform: scale(1.06); }
.wheel-slot.is-win { color: var(--green); border-color: var(--green); background: var(--green-dim); transform: scale(1.12); }
.wheel-slot.is-zero { color: var(--red); border-color: var(--red); background: var(--red-dim); transform: scale(1.12); }

.pin-input {
  width: 100%;
  margin-top: 14px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--card-2);
  color: var(--fg);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 14px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.pin-input::placeholder { letter-spacing: 10px; color: var(--fg-3); font-weight: 500; }
.pin-err { margin-top: 10px; color: var(--red); font-size: 14px; min-height: 18px; }

/* ---------- две кнопки в окне ---------- */

/* Имущество в карточке игрока: строкой, с ценой справа. Цена тут не деталь,
   а главное — покупали ради того, чтобы её было видно. */
.prof-estate { display: flex; flex-direction: column; gap: 1px; }
.estate-row {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 0; border-bottom: 1px solid var(--line);
}
.estate-row:last-child { border-bottom: 0; }
.estate-row .ava { width: 34px; height: 34px; }
.estate-main { flex: 1; min-width: 0; }
.estate-main b { display: block; font-size: 13.5px; font-weight: 600; }
.estate-main span { font-size: 11.5px; color: var(--fg-2); }
.estate-price {
  flex-shrink: 0; font-size: 13px; font-weight: 700;
  color: var(--accent); font-variant-numeric: tabular-nums;
}

/* Витрина предметов в магазине. */
.item-card { padding-bottom: 14px; }
.item-card.is-own { border-color: rgba(255, 214, 10, 0.32); }
.item-row { display: flex; align-items: flex-start; gap: 12px; padding: 14px var(--pad) 10px; }
.item-main { flex: 1; min-width: 0; }
.item-name { font-size: 15.5px; font-weight: 700; }
.item-desc { font-size: 12.5px; color: var(--fg-2); margin-top: 2px; line-height: 1.35; }
.item-buff { font-size: 12.5px; color: var(--accent); margin-top: 5px; font-weight: 600; }
.item-price { flex-shrink: 0; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.item-have { flex-shrink: 0; font-size: 12px; color: var(--accent); font-weight: 600; }
.item-card .btn { margin: 0 var(--pad); width: calc(100% - var(--pad) * 2); }

/* Закрепление бумаги: звезда в шапке карточки и пометка в списке рынка. */
.pin-btn {
  flex-shrink: 0; width: 34px; height: 34px; padding: 0;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.06); color: var(--fg-2);
}
.pin-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.pin-btn.is-on { background: rgba(255, 214, 10, 0.16); color: var(--accent); }
.pin-btn.is-on svg { fill: currentColor; }
.pin-btn:active { transform: scale(0.92); }
/* Закреплённая строка рынка: тонкая полоска слева, без лишнего шума. */
.row.is-pin { box-shadow: inset 3px 0 0 var(--accent); }

/* Отдельное предложение среди кейсов: не рулетка, а прямая покупка, поэтому
   и выглядит иначе — золотая рамка и сам предмет крупно слева. */
.offer-card {
  border: 1px solid rgba(255, 214, 10, 0.35);
  background:
    radial-gradient(110% 90% at 12% 0%, rgba(255, 214, 10, 0.12), transparent 62%),
    var(--card);
}
.offer-row { display: flex; align-items: center; gap: 14px; padding: 14px var(--pad) 10px; }
.offer-main { min-width: 0; }
.offer-tag {
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 3px;
}
.offer-card .btn { margin: 0 var(--pad) 14px; width: calc(100% - var(--pad) * 2); }

/* Карточка игрока: открывается тапом по человеку в друзьях, команде и рейтинге. */
.row.is-tappable { cursor: pointer; }
.row.is-tappable:active { background: rgba(255, 255, 255, 0.04); }

.modal-x {
  position: absolute; top: 10px; right: 12px;
  width: 30px; height: 30px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.08); color: var(--fg-2);
  font-size: 19px; line-height: 1;
}
.prof-top { display: flex; align-items: center; gap: 13px; text-align: left; padding-right: 34px; }
.prof-top .ava { width: 58px; height: 58px; }
.prof-who { min-width: 0; }
.prof-who h3 { margin: 0 0 2px; font-size: 19px; font-weight: 700; letter-spacing: -0.3px; }
.prof-sub { font-size: 13px; color: var(--fg-2); }
.prof-team { display: flex; align-items: center; gap: 5px; margin-top: 5px; font-size: 12.5px; color: var(--accent); }
.prof-team svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.6; }

/* Карточка выросла — даём ей прокрутку, но не на весь экран: под ней должно
   быть видно, что это окно поверх списка, а не отдельная страница. */
#profile .modal { max-height: 84vh; overflow-y: auto; }

.prof-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.prof-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px; border-radius: 999px;
  background: rgba(255, 214, 10, 0.1); color: var(--accent);
  font-size: 11.5px; font-weight: 600;
}
.prof-badge svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.7; }

/* Деньги: общий счёт крупно, под ним — как он разложен. */
.prof-money {
  margin-top: 14px; padding: 13px 14px;
  background: rgba(255, 255, 255, 0.04); border-radius: 14px;
  text-align: left;
}
.prof-money-main { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.prof-money-main span { font-size: 12.5px; color: var(--fg-2); }
.prof-money-main b { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.5px; }
.prof-money-split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line);
}
.prof-money-split i { display: block; font-style: normal; font-size: 11px; color: var(--fg-2); }
.prof-money-split b { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Секции карточки — общий заголовок, чтобы блоки не сливались. */
.prof-sec { margin-top: 16px; text-align: left; }
.prof-sec-t {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--fg-2); margin-bottom: 8px;
}

.prof-inc { display: flex; flex-direction: column; gap: 1px; }
.prof-inc-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--line);
}
.prof-inc-row:last-child { border-bottom: 0; }
.prof-inc-row span { font-size: 13px; color: var(--fg-2); }
.prof-inc-row b { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Предметы: сетка, куда потом лягут и новые виды вещей. */
.prof-items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.prof-item {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 6px 9px; border-radius: 13px;
  background: rgba(255, 255, 255, 0.04);
}
.prof-item b { font-size: 11.5px; font-weight: 600; text-align: center; line-height: 1.2; }
.prof-item > span { font-size: 10px; font-weight: 600; }
.prof-item i { font-style: normal; font-size: 9.5px; color: var(--fg-2); font-variant-numeric: tabular-nums; }

.prof-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin: 16px 0 4px;
}
.prof-stat {
  background: rgba(255, 255, 255, 0.04); border-radius: 12px;
  padding: 9px 6px; text-align: center;
}
.prof-stat b { display: block; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.prof-stat span { font-size: 11px; color: var(--fg-2); }

.prof-coins { margin-top: 12px; text-align: left; }
.prof-coins .row { width: 100%; background: none; border: 0; border-top: 1px solid var(--line); }

/* Фигуры предметов разной формы и высоты, поэтому под каждую отведён
   одинаковый бокс — иначе подписи стоят на разной высоте и ряд разваливается.
   Обёртка вместо правки размеров самих фигур: у карты и фишки свои классы со
   своей высотой, и подпирать их отсюда — значит драться селекторами. */
.prof-gear-box { height: 52px; display: flex; align-items: center; justify-content: center; }
.prof-gear-gun > svg { width: 62px; height: 44px; }

.modal-row { display: flex; gap: 10px; margin-top: 16px; }
.modal-row .btn { margin-top: 0; flex: 1; }

/* ---------- уровень перерождения в топе ---------- */

/* Плашка основателя команды. Заметнее уровня: она редкая, и это статус,
   а не число. Заливка вместо подсветки, чтобы не путалась с «ур. N». */
/* корона золотого статуса рядом с ником в рейтинге */
.gold-crown {
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-left: 5px;
  vertical-align: -1px;
}
.gold-crown svg { width: 100%; height: 100%; display: block; }
/* презентационный fill="#fff" внутри иконки слабее любого правила CSS */
.gold-crown svg path,
.gold-crown svg rect { fill: var(--accent); }

.ceo {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: 7px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.6px;
  color: #1a1400;
  background: linear-gradient(135deg, #ffd60a, #e9a33e);
  vertical-align: 1px;
}

.lvl {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--accent);
  background: rgba(255, 214, 10, 0.13);
  vertical-align: 1px;
}

/* ---------- витрина: выпуск своей компании ---------- */

.promo {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  margin-bottom: 12px;
  padding: 20px 18px 18px;
  border: 1px solid rgba(255, 214, 10, 0.34);
  background:
    radial-gradient(120% 130% at 15% 0%, rgba(255, 214, 10, 0.2), transparent 60%),
    linear-gradient(180deg, rgba(255, 214, 10, 0.09), var(--card) 65%);
}
/* блик, который раз в несколько секунд проезжает по карточке */
.promo::after {
  content: '';
  position: absolute;
  top: -60%;
  bottom: -60%;
  width: 44%;
  left: -60%;
  transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
  animation: promo-shine 4.6s var(--ease) infinite;
  pointer-events: none;
}
@keyframes promo-shine {
  0%, 62% { left: -60%; }
  100% { left: 130%; }
}

.promo-top { display: flex; align-items: center; gap: 12px; }
.promo-badge {
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #191500;
  background: var(--accent);
}
.promo h3 { margin: 14px 0 6px; font-size: 21px; font-weight: 700; letter-spacing: -0.4px; }
.promo p { margin: 0; color: var(--fg-2); font-size: 14.5px; line-height: 1.45; }

.promo-list { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.promo-list li { display: flex; gap: 9px; align-items: flex-start; font-size: 14px; line-height: 1.35; }
.promo-list i {
  flex-shrink: 0;
  width: 18px; height: 18px;
  margin-top: 1px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 214, 10, 0.16);
}
.promo-list i svg { width: 11px; height: 11px; }
.promo-list i svg path { stroke: var(--accent); }

.promo-price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
}
.promo-stars {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 21px;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.promo-stars span { width: 19px; height: 19px; display: block; }
.promo .btn { margin: 0; flex: 1; max-width: 62%; }
.promo-owned { margin-top: 14px; color: var(--green); font-size: 14px; font-weight: 600; }

/* ---------- закрытие позиции по частям ---------- */

.part-close {
  display: flex;
  gap: 8px;
  padding: 0 14px 13px;
  margin-top: -4px;
}
.part-close button {
  flex: 1;
  padding: 9px 4px;
  border-radius: 11px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-2);
  background: var(--card-2);
  border: 1px solid var(--line);
  transition: transform 0.16s var(--ease), color 0.16s ease, border-color 0.16s ease;
}
.part-close button:active { transform: scale(0.95); }
.part-close button.all { color: var(--red); border-color: rgba(255, 69, 58, 0.32); }

/* ---------- меню действий по бумаге ---------- */

.menu-wrap { position: fixed; inset: 0; z-index: 55; display: flex; align-items: flex-end; }
.menu-wrap.is-hidden { display: none; }
.menu-back { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.62); backdrop-filter: blur(2px); }
.menu {
  position: relative;
  width: 100%;
  max-height: 86%;
  overflow-y: auto;
  padding: 10px 12px calc(14px + env(safe-area-inset-bottom));
  border-radius: 22px 22px 0 0;
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  animation: menu-in 0.32s var(--ease) both;
}
@keyframes menu-in {
  from { transform: translateY(24px); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.menu-head { display: flex; align-items: center; gap: 12px; padding: 8px 6px 14px; }
.menu-head .ava { width: 44px; height: 44px; }
.menu-title { font-size: 17px; font-weight: 600; line-height: 1.2; }
.menu-sub { color: var(--fg-2); font-size: 13.5px; margin-top: 3px; font-variant-numeric: tabular-nums; }
.menu-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 14px;
  border-radius: 14px;
  background: var(--card);
  border: 1px solid var(--line);
  margin-bottom: 8px;
  text-align: left;
  font-size: 15.5px;
  transition: transform 0.16s var(--ease), background 0.16s ease;
}
.menu-item:active { transform: scale(0.985); background: var(--card-2); }
.menu-item b { font-weight: 600; font-variant-numeric: tabular-nums; }
.menu-item .menu-note { color: var(--fg-2); font-size: 13px; margin-top: 2px; }
.menu-item.danger { color: var(--red); border-color: rgba(255, 69, 58, 0.3); }
.menu-cancel { width: 100%; padding: 15px; border-radius: 14px; background: var(--card-2); font-size: 15.5px; margin-top: 4px; }

/* ---------- дивидендный сезон ---------- */

.season-banner {
  margin-bottom: 12px;
  padding: 13px 15px;
  border-radius: 16px;
  border: 1px solid rgba(50, 215, 120, 0.32);
  background: linear-gradient(180deg, rgba(50, 215, 120, 0.13), var(--card) 70%);
  font-size: 14px;
  line-height: 1.4;
}
.season-banner b { color: var(--green); }

/* ---------- контракт на исход ---------- */

.bet-row { display: flex; gap: 9px; margin-top: 12px; }
.bet-row button { flex: 1; padding: 13px 6px; border-radius: 13px; font-size: 15px; font-weight: 600; border: 1px solid var(--line); }
.bet-yes { color: var(--green); background: var(--green-dim); }
.bet-no { color: var(--red); background: var(--red-dim); }
.bet-bar { display: flex; height: 7px; border-radius: 4px; overflow: hidden; margin-top: 12px; background: var(--card-2); }
.bet-bar i { display: block; height: 100%; }
.bet-bar .y { background: var(--green); }
.bet-bar .n { background: var(--red); }
.bet-legend { display: flex; justify-content: space-between; margin-top: 6px; font-size: 12.5px; color: var(--fg-2); font-variant-numeric: tabular-nums; }

/* ---------- зазывалка в списке бумаг ---------- */

.promo-slim {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 15px 14px;
  margin-bottom: 12px;
  border-radius: 20px;
  text-align: left;
  border: 1px solid rgba(255, 214, 10, 0.34);
  background:
    radial-gradient(120% 140% at 12% 0%, rgba(255, 214, 10, 0.18), transparent 62%),
    linear-gradient(180deg, rgba(255, 214, 10, 0.07), var(--card) 70%);
  transition: transform 0.16s var(--ease);
}
.promo-slim:active { transform: scale(0.988); }
.promo-slim::after {
  content: '';
  position: absolute;
  top: -60%; bottom: -60%;
  width: 40%;
  left: -60%;
  transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.11), transparent);
  animation: promo-shine 5.2s var(--ease) infinite;
  pointer-events: none;
}
.promo-slim .promo-slim-main { flex: 1; min-width: 0; }
.promo-slim .promo-slim-name { font-size: 15.5px; font-weight: 600; }
.promo-slim .promo-slim-sub { color: var(--fg-2); font-size: 13px; margin-top: 3px; line-height: 1.35; }
.promo-slim .promo-slim-price {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--accent);
}
.promo-slim .promo-slim-price span { width: 16px; height: 16px; display: block; }

/* ---------- окно приглашения в канал и чат ---------- */

.join-total {
  margin: 12px 0 4px;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -1px;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.join-list { display: grid; gap: 9px; margin-top: 16px; text-align: left; }
.join-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 13px;
  border-radius: 14px;
  background: var(--card-2);
  border: 1px solid var(--line);
}
.join-item .ava { width: 38px; height: 38px; }
.join-item-main { flex: 1; min-width: 0; }
.join-item-name { font-size: 15px; font-weight: 600; }
.join-item-sub { color: var(--fg-2); font-size: 12.5px; margin-top: 2px; }
.join-item-sum { color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.join-item.is-done { opacity: 0.5; }
.join-item.is-done .join-item-sum { color: var(--green); }
.join-later { width: 100%; margin-top: 10px; padding: 13px; border-radius: 14px; color: var(--fg-2); font-size: 15px; background: none; }

/* ---------- центральная кнопка доната ---------- */

.tab-gold { color: var(--accent); }
.tab-gold i {
  width: 42px !important;
  height: 42px !important;
  margin-top: -14px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #191500;
  background: linear-gradient(180deg, #ffe873, var(--accent));
  box-shadow: 0 6px 18px rgba(255, 214, 10, 0.28);
}
.tab-gold i svg { width: 23px; height: 23px; stroke-width: 1.9; }
.tab-gold span { margin-top: 1px; font-weight: 600; }
.tab-gold.is-active i { transform: translateY(-3px) scale(1.06); }

/* ---------- стакан цен ---------- */

.book { margin-top: 12px; }
.book-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  border-radius: 7px;
  overflow: hidden;
}
.book-row .fill {
  position: absolute;
  top: 0; bottom: 0; right: 0;
  opacity: 0.16;
  pointer-events: none;
}
.book-row.ask .fill { background: var(--red); }
.book-row.bid .fill { background: var(--green); }
.book-row.ask .book-price { color: var(--red); }
.book-row.bid .book-price { color: var(--green); }
.book-price { position: relative; font-weight: 600; }
.book-vol { position: relative; color: var(--fg-2); }
.book-vol b { color: var(--accent); font-weight: 600; }
.book-mid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 10px;
  margin: 3px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.book-mid span { font-size: 12px; font-weight: 500; color: var(--fg-2); }

/* ---------- лента сделок ---------- */

.tape-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 10px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid var(--line);
}
.tape-row:last-child { border-bottom: 0; }
.tape-who { flex: 1; min-width: 0; color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tape-qty { color: var(--fg); }
.tape-price.buy { color: var(--green); }
.tape-price.sell { color: var(--red); }

/* ---------- цветные ники ---------- */

.nick-plain { font-weight: 600; }
.nick-rainbow {
  font-weight: 700;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  background-size: 200% 100%;
  animation: nick-flow 4s linear infinite;
}
@keyframes nick-flow {
  from { background-position: 0% 50%; }
  to { background-position: 200% 50%; }
}

/* ---------- карты блэкджека ---------- */

.bj-hand { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
/* карта: белый прямоугольник с рангом по углам и мастью в центре */
.card-face {
  position: relative;
  width: 46px;
  height: 66px;
  border-radius: 7px;
  background: linear-gradient(180deg, #ffffff, #e9e9ee);
  color: #16161a;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
}
/* лёгкое появление только у свежесданных карт, иначе рука дёргается */
.card-face.is-new { animation: card-deal 0.42s var(--spring) both; }
@keyframes card-deal {
  from { opacity: 0; transform: translate(26px, -30px) rotate(-14deg) scale(0.9); }
  to { opacity: 1; transform: none; }
}
.card-face .card-rank {
  position: absolute;
  top: 4px; left: 5px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}
.card-face .card-rank.bottom {
  top: auto; left: auto;
  right: 5px; bottom: 4px;
  transform: rotate(180deg);
}
.card-face .card-pip {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 24px;
  line-height: 1;
}
.card-face { color: var(--ink, #16161a); }
.card-face.red { color: var(--ink-red, #d3302a); }
.card-face.back {
  background: repeating-linear-gradient(45deg, #2a2a33 0 6px, #383842 6px 12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.card-face.back .card-pip { color: rgba(255, 255, 255, 0.25); font-size: 20px; }

/* лобби блэкджека */
.bj-lobby { display: grid; gap: 12px; }
.bj-lobby-hero {
  padding: 22px 18px;
  border-radius: 20px;
  text-align: center;
  border: 1px solid rgba(50, 215, 120, 0.28);
  background: radial-gradient(120% 120% at 50% 0%, rgba(50, 215, 120, 0.16), transparent 65%), var(--card);
}
.bj-lobby-hero .bj-cards { display: flex; justify-content: center; gap: 8px; margin-bottom: 14px; }
.bj-lobby-hero h3 { margin: 0 0 6px; font-size: 21px; font-weight: 700; letter-spacing: -0.4px; }
.bj-lobby-hero p { margin: 0; color: var(--fg-2); font-size: 14px; line-height: 1.45; }
.bj-rules { display: grid; gap: 8px; margin-top: 14px; text-align: left; }
.bj-rules div { display: flex; gap: 9px; font-size: 13.5px; color: var(--fg-2); }
.bj-rules b { color: var(--fg); font-weight: 600; white-space: nowrap; flex-shrink: 0; min-width: 74px; }
.bj-rules span { min-width: 0; }
/* Переключатель игр прячется на витрине: выбирать нечего, пока игра не выбрана.
   Глобального .is-hidden в проекте нет, он везде привязан к своему блоку. */
#casino-scope.is-hidden { display: none; }

/* Витрина игр: плитки в две колонки. Первая — во всю ширину, потому что
   блэкджек самый ходовой и его удобно жать не целясь. Картинка занимает почти
   всю плитку, подпись лежит поверх затемнения снизу: игру выбирают глазами,
   а не вчитываясь в описание. Само описание переехало внутрь игры. */
.game-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.game-tile {
  position: relative;
  display: block;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  background: var(--card);
  color: var(--fg);
  text-align: left;
  aspect-ratio: 1 / 1;
  transition: transform 0.16s var(--ease);
}
.game-tile:first-child { grid-column: 1 / -1; aspect-ratio: 2.1 / 1; }
.game-tile:active { transform: scale(0.975); }
.game-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Подложка плитки: диагональная заливка своими цветами у каждой игры.
   Раньше все три были почти одинаково тёмными и различались только слабым
   пятном, из-за чего рулетка и русская рулетка сливались. */
.game-tile::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(145deg, var(--bg1) 0%, var(--bg2) 62%, #0b0b0e 100%);
}
/* Лучи из-за фигуры — немного «сцены», чтобы плитка не была плоской заливкой. */
.game-tile::after {
  content: '';
  position: absolute; inset: 0;
  background: repeating-conic-gradient(from 200deg at 50% 30%,
    rgba(255, 255, 255, 0.05) 0deg 7deg, transparent 7deg 20deg);
  -webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000, transparent 72%);
  mask-image: radial-gradient(70% 60% at 50% 30%, #000, transparent 72%);
  opacity: 0.6;
}

/* Фигура центрируется в свободной части плитки, а не во всей плитке целиком:
   снизу подпись, и без этого отступа картинка съезжала ей под низ. */
.game-art {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding-bottom: 54px;
}
.game-tile:first-child .game-art { padding-bottom: 59px; }
/* Пятно света за фигурой: поднимает её над подложкой. */
.game-glow {
  position: absolute; inset: 0;
  background: radial-gradient(58% 48% at 50% 32%, var(--tint, transparent), transparent 72%);
}
.game-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 28px 13px 12px;
  display: flex; flex-direction: column; gap: 1px;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.55) 45%, rgba(0, 0, 0, 0.88) 100%);
}
.game-cap b {
  font-size: 15px; font-weight: 700; letter-spacing: -0.3px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.game-cap span { font-size: 11.5px; color: rgba(255, 255, 255, 0.68); }
.game-tile:first-child .game-cap b { font-size: 20px; }
.game-tile:first-child .game-cap span { font-size: 13px; }

/* Фигуры на плитках: карты веером, револьвер и фишка. Тень под каждой —
   иначе на цветной подложке они выглядят наклейками. */
.game-art > *:not(.game-glow) {
  position: relative;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.55));
}
.game-cards { display: flex; gap: 6px; }
.game-cards > *:first-child { transform: rotate(-12deg) translateX(7px); }
.game-cards > *:last-child { transform: rotate(12deg) translateX(-7px); }

/* Револьвер рисуется в viewBox 220×140, а сам рисунок внутри него сдвинут
   вправо и вниз (центр чернил 116.8×89.5 вместо 110×70). Поэтому,
   во-первых, высоту не задаём — иначе квадратная рамка добавляет пустые поля
   сверху и снизу; во-вторых, сдвигаем на долю собственного размера, чтобы по
   центру плитки оказался сам револьвер, а не его рамка. */
.game-gun { transform: rotate(-8deg); }
.game-gun svg { width: 142px; height: auto; transform: translate(-3.1%, -13.9%); }
.game-chip { transform: scale(1.35); }

/* Блэкджек — зелёное сукно. */
.game-tile.is-bj {
  --bg1: #0e5138; --bg2: #06301f;
  --tint: rgba(64, 255, 160, 0.3);
  border-color: rgba(50, 215, 120, 0.42);
}
/* Русская рулетка — оружейная сталь с холодной синевой: главное, чтобы она
   не была ещё одной красной плиткой рядом с рулеткой. */
.game-tile.is-rr {
  --bg1: #263a56; --bg2: #131c2c;
  --tint: rgba(130, 190, 255, 0.26);
  border-color: rgba(120, 165, 220, 0.4);
}
/* Рулетка — красное с золотым ободом, как само колесо. */
.game-tile.is-rl {
  --bg1: #6d1220; --bg2: #380a12;
  --tint: rgba(255, 190, 90, 0.26);
  border-color: rgba(255, 90, 80, 0.42);
}
.game-tile.is-rl .game-chip svg { stroke: var(--red); }

@media (prefers-reduced-motion: reduce) {
  .game-tile { transition: none; }
}

/* Старая витрина карточками — оформление осталось для лобби блэкджека. */
.game-card {
  display: block;
  width: 100%;
  text-align: center;
  padding: 24px 18px 20px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--fg);
}
.game-card:active { transform: scale(0.985); }
.game-card h3 { margin: 12px 0 6px; font-size: 21px; font-weight: 700; letter-spacing: -0.4px; }
.game-card p { margin: 0; color: var(--fg-2); font-size: 14px; line-height: 1.45; }
.game-ico { display: flex; justify-content: center; align-items: center; gap: 8px; height: 62px; }
.game-ico svg { width: 58px; height: 58px; fill: none; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.game-go { margin-top: 14px; font-size: 14px; font-weight: 600; }

.game-card.is-bj {
  border-color: rgba(50, 215, 120, 0.28);
  background: radial-gradient(120% 120% at 50% 0%, rgba(50, 215, 120, 0.16), transparent 65%), var(--card);
}
.game-card.is-bj .game-go { color: var(--green); }

.game-card.is-rl {
  border-color: rgba(255, 69, 58, 0.3);
  background: radial-gradient(120% 120% at 50% 0%, rgba(255, 69, 58, 0.16), transparent 65%), var(--card);
}
.game-card.is-rl .game-go { color: var(--red); }
.game-card.is-rl .game-ico svg { stroke: var(--red); }

.bj-seat { padding: 12px 14px; border-bottom: 1px solid var(--line); }
.bj-seat:last-child { border-bottom: 0; }
.bj-seat.me { background: rgba(255, 214, 10, 0.05); }
.bj-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bj-name { font-size: 15px; font-weight: 600; }
.bj-bet { color: var(--fg-2); font-size: 13px; font-variant-numeric: tabular-nums; }
.bj-val { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.bj-res { font-size: 13px; margin-top: 4px; }
.bj-timer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  font-size: 14px;
  color: var(--fg-2);
}
.bj-timer b { color: var(--accent); font-size: 17px; font-variant-numeric: tabular-nums; }
.bj-actions { display: flex; gap: 9px; padding: 12px 14px; }
.bj-actions .btn { margin: 0; flex: 1; }

/* ---------- метки у бумаг в списке ---------- */

.tag {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: 7px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  vertical-align: 1px;
}
.tag-new { color: #191500; background: var(--accent); }
.tag-hot { color: var(--green); background: var(--green-dim); }


/* ---------- переливающийся контур у кнопки магазина ---------- */

.tab-shop { position: relative; }
.tab-shop i {
  position: relative;
  width: 42px !important;
  height: 42px !important;
  margin-top: -14px;
  border-radius: 50%;
  padding: 3px;
  z-index: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(155deg, #B9A2FF, #8B6BFF 45%, #6339E0);
  box-shadow: 0 6px 16px rgba(91, 63, 212, 0.5), inset 0 -3px 6px rgba(43, 20, 130, 0.4);
  color: #fff;
}
/* тот же глянцевый блик сверху-слева, что и у аватарок в приложении —
   без него плоский градиент на маленьком кружке смотрится дёшево */
.tab-shop i::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.4), transparent 55%);
  pointer-events: none;
}
.tab-shop i svg {
  width: 20px;
  height: 20px;
  position: relative;
  z-index: 1;
  stroke-width: 2.1;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
}
.tab-shop span { margin-top: 1px; font-weight: 600; }
.tab-shop.is-active i { transform: translateY(-3px) scale(1.06); }
/* градиент крутится под иконкой, середина вырезана маской — остаётся кольцо */
.tab-shop i::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  padding: 2px;
  background: linear-gradient(90deg, #ff453a, #ff9f0a, #ffd60a, #32d778, #0a84ff, #a86bff, #ff453a);
  background-size: 300% 100%;
  animation: shop-glow 3.4s linear infinite;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: -1;
}
@keyframes shop-glow {
  from { background-position: 0% 50%; }
  to { background-position: 300% 50%; }
}


/* ================= скины карт и кейсы ================= */

/* Анимации скинов. Градиент в разметке, движение здесь: одному инлайн-стилю
   такое не поручишь. */
.skin-neon { box-shadow: 0 0 10px rgba(94, 242, 255, 0.45), 0 3px 8px rgba(0, 0, 0, 0.4); }
.skin-pulse-red { animation: skin-pulse 2.6s ease-in-out infinite; --pulse: rgba(255, 92, 92, 0.55); }
.skin-pulse-violet { animation: skin-pulse 2.6s ease-in-out infinite; --pulse: rgba(168, 107, 255, 0.55); }
.skin-pulse-blue { animation: skin-pulse 2.6s ease-in-out infinite; --pulse: rgba(94, 242, 255, 0.5); }
@keyframes skin-pulse {
  0%, 100% { box-shadow: 0 0 4px var(--pulse), 0 3px 8px rgba(0, 0, 0, 0.4); }
  50% { box-shadow: 0 0 16px var(--pulse), 0 3px 8px rgba(0, 0, 0, 0.4); }
}

/* «Порванный туз»: карта, разорванная пополам и склеенная обратно.
   Разрыв — ломаная линия поперёк карты, сделанная clip-path у двух половин,
   поэтому она масштабируется вместе с картой и одинаково выглядит и в ленте,
   и в окне выигрыша. Сверху — полоска скотча, которая держит половины. */
.skin-torn { position: relative; overflow: hidden; }
.skin-torn::before,
.skin-torn::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}
/* сам разрыв: ломаная щель сверху донизу. Задаётся долями, поэтому зигзаг
   одинаков на карте любого размера. */
.skin-torn::before {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.82) 45%, rgba(255, 255, 255, 0.28));
  clip-path: polygon(
    47% 0%, 56% 10%, 45% 22%, 57% 34%, 46% 47%,
    58% 59%, 45% 71%, 56% 84%, 46% 100%,
    54% 100%, 63% 84%, 52% 71%, 65% 59%, 53% 47%,
    64% 34%, 52% 22%, 63% 10%, 55% 0%
  );
}
/* сам скотч: мутная полоса поперёк разрыва, чуть отражающая свет */
.skin-torn::after {
  inset: auto -16% auto -16%;
  top: 39%;
  height: 22%;
  transform: rotate(-13deg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.32), rgba(214, 214, 200, 0.22));
  border-top: 1px solid rgba(255, 255, 255, 0.45);
  border-bottom: 1px solid rgba(0, 0, 0, 0.18);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
/* рваный край самой карты: выкусываем два клина сверху и снизу по линии разрыва */
.skin-torn .skin-pip { text-shadow: 1px 0 0 rgba(0, 0, 0, 0.35); }

/* блик, пробегающий по металлу */
.skin-shine, .skin-flame, .skin-ice, .skin-success { position: relative; overflow: hidden; }
.skin-shine::after, .skin-flame::after, .skin-ice::after, .skin-success::after {
  content: '';
  position: absolute;
  inset: -40%;
  background: linear-gradient(70deg, transparent 42%, rgba(255, 255, 255, 0.75) 50%, transparent 58%);
  animation: skin-sweep 3.2s linear infinite;
  pointer-events: none;
}
.skin-ice::after { animation-duration: 4.4s; }
.skin-success::after { animation-duration: 2.4s; }
@keyframes skin-sweep {
  from { transform: translateX(-120%); }
  to { transform: translateX(120%); }
}
.skin-flame { box-shadow: 0 0 14px rgba(255, 123, 0, 0.5), 0 3px 8px rgba(0, 0, 0, 0.4); }
.skin-success { box-shadow: 0 0 16px rgba(255, 207, 63, 0.55), 0 3px 8px rgba(0, 0, 0, 0.4); }

/* радуга едет по самой карте */
.skin-rainbow {
  background-size: 300% 100% !important;
  animation: skin-rainbow 3.4s linear infinite;
}
@keyframes skin-rainbow {
  from { background-position: 0% 50%; }
  to { background-position: 300% 50%; }
}

/* ---------- витрина ---------- */

.case-card { padding: 14px; }
.case-row { display: flex; align-items: flex-start; gap: 12px; }
.case-main { flex: 1; min-width: 0; }
.case-name { font-size: 16px; font-weight: 700; }
.case-desc { margin-top: 3px; font-size: 12px; color: var(--muted); line-height: 1.35; }
.case-price {
  flex-shrink: 0;
  font-size: 15px;
  font-weight: 800;
  color: var(--green);
  white-space: nowrap;
}
.case-price.stars { color: var(--accent); }

.case-pool {
  display: flex;
  gap: 6px;
  margin: 12px 0 10px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}
.case-pool::-webkit-scrollbar { display: none; }

.odds {
  display: flex;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
}
.odds-seg { height: 100%; }
.odds-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 8px 0 12px;
  font-size: 11px;
  color: var(--muted);
}
.odds-legend span { display: inline-flex; align-items: center; gap: 5px; }
.odds-legend i { width: 7px; height: 7px; border-radius: 2px; }

/* ---------- сама карта-скин ---------- */

.skin-card {
  position: relative;
  width: 46px;
  height: 66px;
  border-radius: 7px;
  flex-shrink: 0;
  color: var(--ink, #16161a);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
}
.skin-card.tiny { width: 34px; height: 48px; border-radius: 5px; }
.skin-card.big { width: 84px; height: 120px; border-radius: 11px; }
.skin-rank {
  position: absolute;
  top: 3px; left: 4px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}
.skin-card.tiny .skin-rank { font-size: 8px; }
.skin-card.big .skin-rank { font-size: 18px; top: 6px; left: 8px; }
.skin-pip {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 22px;
  line-height: 1;
}
.skin-card.tiny .skin-pip { font-size: 15px; }
.skin-card.big .skin-pip { font-size: 44px; }

/* ---------- инвентарь ---------- */

.skin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 12px;
  padding: 4px 14px 14px;
}
.skin-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 10px 4px 8px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid transparent;
  transition: transform 0.18s var(--spring), border-color 0.18s ease;
}
.skin-item:active { transform: scale(0.96); }
.skin-item.is-on { border-color: var(--green); background: rgba(50, 215, 120, 0.09); }
.skin-item.locked { opacity: 0.42; filter: grayscale(0.7); }
.skin-name { font-size: 11px; font-weight: 600; text-align: center; line-height: 1.2; }
.skin-rar { font-size: 10px; font-weight: 700; }
.skin-on { font-size: 10px; color: var(--green); font-weight: 700; }

/* ---------- рулетка ---------- */

.case-wrap {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
}
.case-wrap.is-hidden { display: none; }
.case-back { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.82); backdrop-filter: blur(3px); }
.case-stage {
  position: relative;
  width: min(94vw, 460px);
  text-align: center;
}
.case-title { font-size: 17px; font-weight: 800; margin-bottom: 14px; }
.case-hint { margin-top: 14px; font-size: 14px; color: var(--muted); min-height: 20px; }

.case-strip-wrap {
  position: relative;
  overflow: hidden;
  padding: 14px 0;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  /* края ленты растворяются, чтобы взгляд держался на середине */
  -webkit-mask: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  mask: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
.case-strip { display: flex; gap: 20px; padding-left: 0; will-change: transform; }
.case-item { flex: 0 0 64px; display: grid; place-items: center; }
.case-item .skin-card { width: 60px; height: 86px; box-shadow: 0 0 12px var(--rar); }
.case-marker {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
  z-index: 2;
}

/* ---------- окно выигрыша ---------- */

.prize-glow {
  display: grid;
  place-items: center;
  margin-bottom: 12px;
  filter: drop-shadow(0 0 18px var(--rar));
  animation: prize-in 0.5s var(--spring) both;
}
@keyframes prize-in {
  from { opacity: 0; transform: scale(0.6) rotate(-8deg); }
  to { opacity: 1; transform: none; }
}
.prize-rar { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; }


/* карта игрока в правом углу строки топа: видно, кто чем играет */
.top-right { display: flex; align-items: center; gap: 9px; }
.skin-card.mini { width: 22px; height: 31px; border-radius: 4px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.45); }
.skin-card.mini .skin-rank { font-size: 6px; top: 2px; left: 2px; }
.skin-card.mini .skin-pip { font-size: 11px; }
/* Класс mini совпадает с маленькой кнопкой (.mini выше): её отступы 6px 11px
   съедали карту до трёх пикселей. У карты кнопочных отступов быть не должно. */
.skin-card.mini { padding: 0; margin-top: 0; border: 0; font-size: 0; }
.skin-card.mini svg { width: 100%; height: auto; display: block; }
.top-money { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.top-dub { font-size: 11.5px; font-weight: 700; color: var(--accent); opacity: .85; white-space: nowrap; }

/* ---------- вкладка «Аукцион» в городе (13.09.2026) ---------- */
.city-auc-help .row-sub { color: var(--fg-2); margin-top: 4px; line-height: 1.35; }
.city-auc-filters { display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; margin: 10px 0 4px; padding-bottom: 2px; scrollbar-width: none; }
.city-auc-filters::-webkit-scrollbar { display: none; }
.city-auc-filters .chip { flex: 0 0 auto; white-space: nowrap; }

/* ---------- новости как браузер (13.09.2026) ----------
   Экран нарочно не похож на игру: светлая «страница сайта» внутри браузера с
   адресной строкой и вкладками. Цвета свои, от тем игры не зависят. */
.screen[data-screen="news"] { padding-top: 0; }
.nb { display: flex; flex-direction: column; height: 100%; min-height: 0; background: #dfe3ea; color: #15171c; border-radius: 0; }
.nb-bar { display: flex; align-items: center; gap: 8px; padding: 10px 10px 6px; background: #dfe3ea; }
.nb-btn { flex: 0 0 34px; height: 34px; border-radius: 50%; border: 0; background: transparent; color: #3a3f4a; display: flex; align-items: center; justify-content: center; }
.nb-btn:active { background: rgba(0, 0, 0, .08); }
.nb-btn svg, .nb-address svg, .nb-tab svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nb-address { flex: 1; min-width: 0; height: 36px; display: flex; align-items: center; gap: 7px; padding: 0 12px; border-radius: 999px; background: #fff; color: #5b616e; font: 500 14px/1 -apple-system, "Segoe UI", Roboto, sans-serif; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
.nb-address svg { width: 14px; height: 14px; color: #1d8a4e; flex: 0 0 auto; }
.nb-address span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-tabs { display: flex; gap: 2px; padding: 0 8px; background: #dfe3ea; overflow-x: auto; scrollbar-width: none; }
.nb-tabs::-webkit-scrollbar { display: none; }
.nb-tab { flex: 1 0 auto; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 12px; border: 0; border-radius: 10px 10px 0 0; background: transparent; color: #4a505c; font: 600 13px/1 -apple-system, "Segoe UI", Roboto, sans-serif; }
.nb-tab svg { width: 15px; height: 15px; }
.nb-tab.is-active { background: #f6f7f9; color: #111; }
.nb-page { flex: 1; min-height: 0; overflow-y: auto; background: #f6f7f9; padding: 0 12px 110px; color: #15171c; transition: opacity .18s ease, filter .18s ease; }
/* плавное переключение вкладок и аккаунтов */
.nb-page.nb-loading { opacity: .45; filter: saturate(.6); pointer-events: none; }
.nb-page.nb-enter > * { animation: nb-in .28s cubic-bezier(.2, .7, .2, 1) both; }
.nb-page.nb-enter > *:nth-child(2) { animation-delay: .04s; }
.nb-page.nb-enter > *:nth-child(3) { animation-delay: .08s; }
.nb-page.nb-enter > *:nth-child(n+4) { animation-delay: .12s; }
@keyframes nb-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.nb-skel i { display: block; border-radius: 8px; background: linear-gradient(90deg, #e9ebef 0%, #f4f5f8 50%, #e9ebef 100%); background-size: 200% 100%; animation: nb-shimmer 1.2s linear infinite; }
.nb-skel-title { height: 22px; width: 55%; margin: 18px 4px 14px; }
.nb-skel-row { display: flex; gap: 10px; padding: 10px 0; }
.nb-skel-row > div { flex: 1; }
.nb-skel-ava { width: 40px; height: 40px; border-radius: 50% !important; flex: none; }
.nb-skel-line { height: 12px; margin: 4px 0 8px; }
.nb-skel-line.is-short { width: 60%; }
@keyframes nb-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  .nb-page { transition: none; }
  .nb-page.nb-enter > *, .nb-skel i { animation: none; }
}
.nb-mast { padding: 16px 4px 10px; border-bottom: 2px solid #15171c; margin-bottom: 12px; }
.nb-logo { font: 800 13px/1 -apple-system, "Segoe UI", Roboto, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #b3261e; }
.nb-logo span { color: #15171c; margin: 0 2px; }
.nb-date { margin-top: 4px; font: 500 12px/1.2 -apple-system, "Segoe UI", Roboto, sans-serif; color: #6b7280; }
.nb-h { margin: 10px 0 2px; font: 800 26px/1.15 -apple-system, "Segoe UI", Roboto, sans-serif; color: #111; }
.nb-sub { font: 400 13.5px/1.3 -apple-system, "Segoe UI", Roboto, sans-serif; color: #5b616e; }
.nb-card { background: #fff; border-radius: 14px; padding: 12px 14px; margin-bottom: 12px; box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 0 0 1px rgba(0, 0, 0, .04); }
.nb-card-title { font: 700 12px/1.2 -apple-system, "Segoe UI", Roboto, sans-serif; letter-spacing: .04em; text-transform: uppercase; color: #6b7280; margin-bottom: 8px; }
.nb-empty { padding: 18px 4px; text-align: center; color: #6b7280; font-size: 14px; }
.nb-foot { font-size: 12px; line-height: 1.4; color: #6b7280; padding: 0 4px 12px; }
.nb-time { font-size: 11.5px; color: #8a909b; margin-top: 2px; }
.nb-mine { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid #eceef2; }
.nb-mine:last-child { border-bottom: 0; }
.nb-mine-text { font-size: 14px; line-height: 1.35; color: #15171c; }
.nb-dot { flex: 0 0 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: #9aa1ad; }
.nb-dot.win, .nb-dot.div, .nb-dot.star, .nb-dot.pump { background: #1d8a4e; }
.nb-dot.loss, .nb-dot.liq, .nb-dot.rob, .nb-dot.dump { background: #d23b30; }
.nb-ava { display: flex; align-items: center; justify-content: center; color: #fff; }
.nb-ico { width: 58%; height: 58%; fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.nb-mono span { font: 700 15px/1 -apple-system, "Segoe UI", Roboto, sans-serif; color: #fff; letter-spacing: .02em; }
.nb-page .feed-item { border-bottom-color: #eceef2; }
.nb-page .feed-name, .nb-sheet .feed-name { color: #111; }
.nb-page .feed-text, .nb-sheet .feed-text { color: #1d2027; font-size: 15px; }
.nb-page .feed-label, .nb-sheet .feed-label { color: #b3261e; }
.nb-page .feed-time, .nb-sheet .feed-time { color: #8a909b; }
.nb-page .feed-badge, .nb-sheet .feed-badge { background: #eef0f4; color: #4a505c; }
.nb-page .feed-badge.is-official, .nb-sheet .feed-badge.is-official { background: #e3edfb; color: #1f5fb8; }
.nb-page .feed-badge.is-good, .nb-sheet .feed-badge.is-good { background: #e2f5ea; color: #1d8a4e; }
.nb-page .feed-badge.is-bad, .nb-sheet .feed-badge.is-bad { background: #fde8e6; color: #c0392b; }
.nb-page .feed-badge.is-company, .nb-sheet .feed-badge.is-company { background: #fff4d6; color: #9a6b00; }
.nb-page .feed-coin, .nb-sheet .feed-coin { background: #eef4ff; border-color: #d6e3fb; color: #1f5fb8; }
.nb-page .feed-compose .input { background: #f3f4f7; color: #111; border-color: #e3e6ec; }
.nb-page .feed-compose .input::placeholder { color: #8a909b; }
.nb-page .feed-compose .btn[disabled] { background: #e6e8ee; color: #5b616e; opacity: 1; }
.nb-page .feed-compose .btn-green { color: #0b2a17; }
.nb-page .feed-hint { color: #6b7280; }
.nb-page .feed-link { color: #1f5fb8; }
.nb-page .feed-compose .chip { background: #eef0f4; color: #2a2e36; border-color: #e3e6ec; }
.nb-page .feed-compose .chip.is-active { background: #111; color: #fff; }
.nb-page .feed-source { background: #f6f7f9; border-color: #e6e8ee; color: #15171c; }
.nb-page .feed-source.is-on { border-color: #1d8a4e; }
.nb-page .feed-source span { color: #6b7280; }
.modal:has(.nb-sheet) { background: #fff; color: #15171c; }
.nb-sheet p, .nb-sheet .muted, .nb-sheet .row-sub { color: #5b616e; }
.nb-sheet h3 { color: #111; font-family: -apple-system, "Segoe UI", Roboto, sans-serif; }
.nb-sheet .feed-prof-stats span { color: #6b7280; }
.nb-sheet .feed-item { border-bottom-color: #eceef2; }
.nb-sheet .input { background: #f3f4f7; color: #111; border-color: #e3e6ec; }
.nb-sheet .btn-flat { color: #4a505c; }
/* аккаунт источника как в Твиттере */
.nb-back { padding: 12px 4px 8px; color: #1f5fb8; font: 600 14px/1 -apple-system, "Segoe UI", Roboto, sans-serif; cursor: pointer; }
.nb-profile { background: #fff; border-radius: 16px; overflow: hidden; margin-bottom: 10px; box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 0 0 1px rgba(0, 0, 0, .04); }
.nb-cover { height: 96px; }
.nb-prow { display: flex; align-items: flex-end; justify-content: space-between; padding: 0 14px; margin-top: -38px; }
.nb-pava .ava { width: 76px; height: 76px; border: 4px solid #fff; box-sizing: content-box; }
.nb-pava .nb-mono span { font-size: 24px; }
.nb-follow { margin-bottom: 4px; padding: 8px 16px; border-radius: 999px; border: 0; background: #111; color: #fff; font: 700 14px/1 -apple-system, "Segoe UI", Roboto, sans-serif; }
.nb-follow.is-on { background: #fff; color: #111; box-shadow: inset 0 0 0 1px #cfd4dc; }
.nb-follow.is-mine { background: #eef0f4; color: #4a505c; }
.nb-pname { padding: 10px 14px 0; font: 800 20px/1.2 -apple-system, "Segoe UI", Roboto, sans-serif; color: #111; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.nb-phandle { padding: 2px 14px 0; font-size: 14px; color: #6b7280; }
.nb-pbio { margin: 8px 14px 0; font-size: 15px; line-height: 1.4; color: #1d2027; }
.nb-pstats { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 10px 14px 14px; font-size: 14px; color: #6b7280; }
.nb-pstats b { color: #111; }
.nb-plink { padding: 0 14px 14px; color: #1f5fb8; font-weight: 600; font-size: 14px; cursor: pointer; }
.nb-ptabs { display: flex; padding: 0 4px; margin-bottom: 8px; border-bottom: 1px solid #e2e5eb; }
.nb-ptabs span { padding: 10px 12px; font: 700 14px/1 -apple-system, "Segoe UI", Roboto, sans-serif; color: #6b7280; }
.nb-ptabs span.is-active { color: #111; box-shadow: inset 0 -3px 0 #1f5fb8; }
.news-card-head { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0; margin-bottom: 8px; background: none; border: 0; color: inherit; }
.news-card-more { font-size: 13px; font-weight: 600; color: var(--accent); }

.nb-icons { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; width: 100%; margin-top: 8px; }
.nb-icon-pick { aspect-ratio: 1; border-radius: 10px; border: 2px solid transparent; background: #eef0f4; color: #2a2e36; display: flex; align-items: center; justify-content: center; }
.nb-icon-pick .nb-ico { stroke: #2a2e36; width: 60%; height: 60%; }
.nb-icon-pick.is-active { border-color: #111; background: #fff; }

/* ---------- лента-браузер (13.09.2026) ---------- */
.feed-compose textarea.input { resize: none; line-height: 1.35; min-height: 58px; font: inherit; font-size: 15px; }
.feed-compose-row { display: flex; gap: 8px; align-items: center; margin: 8px 0; }
.feed-compose-row select.input { flex: 1; min-width: 0; }
.feed-compose-row .chip { flex: 0 0 auto; max-width: 48%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-hint { margin-top: 6px; }
.feed-link { color: var(--accent); font-weight: 600; cursor: pointer; }
.feed-list { padding-top: 4px; padding-bottom: 4px; }
.feed-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.feed-item:last-child { border-bottom: 0; }
.feed-src { flex: 0 0 auto; align-self: flex-start; width: auto; padding: 0; background: none; border: 0; }
.feed-item .feed-name { width: auto; }
.feed-src .ava, .feed-source .ava, .feed-prof .ava { width: 40px; height: 40px; }
.feed-ava { display: flex; align-items: center; justify-content: center; }
.feed-ava span { font-size: 20px; line-height: 1; color: #fff; font-weight: 700; }
.feed-main { flex: 1; min-width: 0; }
.feed-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.feed-name { padding: 0; background: none; border: 0; color: var(--fg); font-weight: 700; font-size: 14px; text-align: left; }
.feed-badge { font-size: 10.5px; font-weight: 700; padding: 1px 6px; border-radius: 6px; background: var(--card-2); color: var(--fg-2); white-space: nowrap; }
.feed-badge.is-official { background: rgba(58, 120, 194, .22); color: #7fb2ec; }
.feed-badge.is-good { background: rgba(50, 215, 120, .16); color: #4bd88a; }
.feed-badge.is-bad { background: rgba(255, 69, 58, .16); color: #ff6b6b; }
.feed-badge.is-company { background: rgba(255, 214, 10, .14); color: var(--accent); }
.feed-time { font-size: 11.5px; color: var(--fg-2); margin-left: auto; white-space: nowrap; }
.feed-text { margin-top: 3px; font-size: 14px; line-height: 1.38; overflow-wrap: anywhere; }
.feed-label { color: var(--fg-2); font-weight: 700; }
.feed-coin { margin-top: 6px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); background: var(--card-2); color: var(--fg); font-size: 12px; font-weight: 600; }
.feed-sources { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 6px; scrollbar-width: none; }
.feed-sources::-webkit-scrollbar { display: none; }
.feed-source { flex: 0 0 92px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 6px; border-radius: 12px; border: 1px solid var(--line); background: var(--card-2); color: var(--fg); }
.feed-source.is-on { border-color: rgba(50, 215, 120, .55); }
.feed-source b { font-size: 11.5px; font-weight: 700; text-align: center; line-height: 1.2; max-height: 2.4em; overflow: hidden; }
.feed-source span { font-size: 10.5px; color: var(--fg-2); }
.feed-prof { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.feed-prof .ava { width: 64px; height: 64px; }
.feed-prof .feed-ava span { font-size: 32px; }
.feed-prof h3 { margin: 4px 0 0; }
.feed-prof p { margin: 2px 0; }
.feed-prof .input, .feed-prof .btn { width: 100%; }
.feed-prof-stats { display: flex; gap: 22px; margin: 6px 0; }
.feed-prof-stats div { display: flex; flex-direction: column; }
.feed-prof-stats b { font-size: 18px; }
.feed-prof-stats span { font-size: 11.5px; color: var(--fg-2); }
.feed-prof-list { max-height: 42vh; overflow-y: auto; margin-top: 10px; text-align: left; }
.chip.feed-color { flex: 0 0 34px; width: 34px; height: 30px; padding: 0; border: 2px solid transparent; }
.chip[data-feed-icon] { font-size: 20px; line-height: 1; padding: 6px 10px; }
.chip.feed-color.is-active { border-color: #fff; }


/* ---------- витрина казино и прокрутка фишек ---------- */

/* фишка на витрине — крупнее, чем в инвентаре: это иконка игры */
.chip-skin-card.preview { width: 58px; height: 58px; }
.chip-skin-card.preview .chip-skin-face { font-size: 15px; }

/* Своя полоска прокрутки под фишками. Системную мы прячем ради вида, но без
   подсказки игроки не догадываются, что номиналов больше, чем влезло. */
.rl-chip-rail {
  position: relative;
  height: 4px;
  margin: 2px 2px 0;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.07);
  touch-action: none;
  cursor: pointer;
}
.rl-chip-rail.is-hidden { display: none; }
.rl-chip-rail i {
  position: absolute;
  top: 0; bottom: 0;
  border-radius: 3px;
  background: var(--accent);
  opacity: 0.75;
  transition: left 0.08s linear;
}

/* Переход между витриной и игрой */
.is-unfolding { animation: casino-unfold 0.26s var(--ease) both; }
.is-folding { animation: casino-fold 0.18s ease-in both; }
@keyframes casino-unfold {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
@keyframes casino-fold {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateY(-6px) scale(0.985); }
}


/* Аватарка на месте номера в рейтинге. Номер не теряем — он уезжает
   маленькой плашкой в угол, иначе непонятно, какое у человека место. */
.rank-ava { position: relative; flex-shrink: 0; width: 38px; height: 38px; }
.rank-ava .ava { width: 38px; height: 38px; }
.rank-badge {
  position: absolute;
  right: -3px; bottom: -3px;
  min-width: 17px; height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--card-2);
  border: 1.5px solid var(--bg);
  color: var(--fg-2);
  font-size: 10px; font-weight: 800; line-height: 14px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.rank-badge.gold { background: var(--accent); color: #191500; border-color: var(--bg); }


/* Выбор валюты в шапке счёта. Раньше он терялся у правого края и его
   принимали за пропавший — теперь активная валюта подсвечена. */
#pf-currency { gap: 2px; }
#pf-currency .period {
  min-width: 28px;
  font-size: 14px;
  font-weight: 700;
  color: var(--fg-2);
}
#pf-currency .period.is-active {
  background: rgba(255, 214, 10, 0.16);
  color: var(--accent);
}


/* Уровни влияния команды: три ступеньки вместо строчки с цифрой. Пройденные
   горят золотом, следующая обведена — видно, что это лестница. */
.lvl-row { display: flex; gap: 8px; margin: 10px 0 8px; }
.lvl-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 4px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid transparent;
}
.lvl-step b { font-size: 15px; font-weight: 800; color: var(--fg-2); }
.lvl-step span { font-size: 11px; color: var(--fg-3); }
.lvl-step.is-done { background: rgba(255, 214, 10, 0.14); }
.lvl-step.is-done b, .lvl-step.is-done span { color: var(--accent); }
.lvl-step.is-next { border-color: rgba(255, 214, 10, 0.45); }


/* ---------- своя новость о бумаге ---------- */

.co-news textarea.input { resize: none; line-height: 1.35; }
.co-news-row { display: flex; gap: 8px; margin-top: 8px; }
.co-news-pic {
  display: block;
  width: 100%;
  max-height: 150px;
  object-fit: cover;
  border-radius: 12px;
  margin-top: 8px;
}

/* Тумблер разгона: цена решения слишком велика для галочки, поэтому это
   отдельная строка с описанием, что именно произойдёт. */
.switch {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 12px 0 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid transparent;
  text-align: left;
  color: var(--fg);
}
.switch.is-on { border-color: rgba(255, 214, 10, 0.45); background: rgba(255, 214, 10, 0.09); }
.switch-box {
  flex-shrink: 0;
  width: 42px; height: 25px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.12);
  position: relative;
  transition: background 0.18s ease;
}
.switch.is-on .switch-box { background: var(--accent); }
.switch-box i {
  position: absolute;
  top: 3px; left: 3px;
  width: 19px; height: 19px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.18s var(--spring);
}
.switch.is-on .switch-box i { transform: translateX(17px); }
.switch-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.switch-main b { font-size: 14px; font-weight: 600; }
.switch-main span { font-size: 12px; color: var(--fg-2); line-height: 1.3; }

/* картинка в ленте новостей */
.note-pic {
  display: block;
  width: 100%;
  max-height: 140px;
  object-fit: cover;
  border-radius: 10px;
  margin: 8px 0 4px;
}

/* Кнопка публикации на кулдауне: остаётся на месте, но не нажимается —
   так форму видно целиком и можно спокойно готовить текст. */
.btn.is-wait { background: rgba(255,255,255,0.05); color: var(--fg-2); border-color: transparent; }
.btn.is-wait b { color: var(--fg); font-variant-numeric: tabular-nums; }

/* ---------- русская рулетка ---------- */

.rr-svg { width: 100%; height: 100%; display: block; }
.rr-hero-gun { width: 190px; margin: 0 auto 10px; }
.game-card.is-rr .game-ico { width: 120px; }

/* Стол: круглое сукно с деревянным бортом, места по окружности, револьвер
   в центре. Размер задаётся одним --felt, чтобы стол одинаково жил на узком
   экране и не упирался в края. */
.rr-felt {
  --felt: min(92vw, 380px);
  position: relative;
  width: var(--felt);
  height: var(--felt);
  margin: 6px auto 20px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, #1f5e3a 0%, #14432a 55%, #0d2c1c 100%);
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.05),
    0 18px 40px rgba(0, 0, 0, 0.55),
    inset 0 0 60px rgba(0, 0, 0, 0.45);
}

/* Борт стола: отдельным слоем за сукном, иначе тень ложится поверх мест. */
.rr-felt::before {
  content: '';
  position: absolute;
  inset: -13px;
  border-radius: 50%;
  background: linear-gradient(150deg, #6b4423, #3a2413 58%, #55361d);
  z-index: -1;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55);
}

.rr-felt-ring {
  position: absolute;
  inset: 13%;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.13);
  pointer-events: none;
}

/* Банк лежит на сукне под револьвером, а не отдельной плашкой сбоку. */
.rr-bank {
  position: absolute;
  left: 50%;
  bottom: 11%;
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
}
.rr-bank span {
  display: block;
  font-size: 10.5px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.rr-bank b {
  display: block;
  font-size: 17px;
  color: #ffd60a;
  font-variant-numeric: tabular-nums;
}

/* Место игрока: карточка сидит центром на своей точке окружности. */
.rr-seat {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 78px;
  padding: 6px 4px;
  border-radius: 13px;
  text-align: center;
  background: rgba(8, 20, 14, 0.84);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: border-color 0.2s ease, opacity 0.25s ease, box-shadow 0.25s ease;
}
.rr-seat.is-me { border-color: rgba(255, 214, 10, 0.45); }
.rr-seat.is-turn {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(255, 214, 10, 0.28), 0 0 22px rgba(255, 214, 10, 0.35);
}
.rr-seat.is-out { opacity: 0.38; filter: grayscale(1); }
.rr-seat-gun { width: 54px; margin: 0 auto 2px; }
.rr-seat-name { font-size: 12px; font-weight: 600; color: #eaf3ee; line-height: 1.15; }
.rr-seat-state { font-size: 10.5px; color: rgba(255, 255, 255, 0.55); margin-top: 1px; }
.rr-seat.is-turn .rr-seat-state { color: var(--accent); }

/* Наводка. Крутится вся обойма целиком, ствол смотрит на того, чей ход.
   Отдача и щелчок живут на вложенном .rr-gun, чтобы два transform
   не дрались за один элемент. */
.rr-aim {
  position: absolute;
  /* Ставим так, чтобы центр барабана попал ровно в центр стола, и крутим
     вокруг него же — тогда револьвер вертится на месте, а не описывает дугу. */
  left: 36%;
  top: 40.1%;
  width: 35%;
  transform-origin: 40% 44.3%;
  transition: transform 1.05s cubic-bezier(0.16, 0.84, 0.24, 1);
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.55));
}
.rr-aim.is-spinning {
  transition-duration: 1.5s;
  transition-timing-function: cubic-bezier(0.12, 0.72, 0.18, 1);
}




/* Сам револьвер внутри наводки. Все его дёрганья — здесь, чтобы не спорить
   с поворотом ствола на внешнем слое. */
.rr-gun { width: 100%; }
.rr-svg { width: 100%; height: 100%; display: block; }
.rr-hero-gun { width: 190px; margin: 0 auto 10px; }
.game-card.is-rr .game-ico { width: 120px; }

/* Барабан крутится отдельной группой, корпус стоит на месте. */
.rr-cyl { transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1); }
.rr-gun.is-spin .rr-cyl { animation: rr-spin 0.9s cubic-bezier(0.15, 0.85, 0.25, 1); }
@keyframes rr-spin { from { transform: rotate(0deg); } to { transform: rotate(1080deg); } }

/* Щелчок: барабан проворачивается на одно гнездо, корпус вздрагивает. */
.rr-gun.is-click .rr-cyl { animation: rr-notch 0.3s ease-out; }
.rr-gun.is-click { animation: rr-tick 0.3s ease-out; }
@keyframes rr-notch { from { transform: rotate(0deg); } to { transform: rotate(60deg); } }
@keyframes rr-tick { 0%, 100% { transform: none; } 40% { transform: translateX(-3px) rotate(-1deg); } }

/* Выстрел: отдача назад и вверх, потом возврат. */
.rr-gun.is-bang { animation: rr-recoil 0.5s cubic-bezier(0.2, 0.8, 0.3, 1); }
@keyframes rr-recoil {
  0% { transform: none; }
  18% { transform: translateX(26px) translateY(-10px) rotate(9deg); }
  100% { transform: none; }
}

.rr-flash {
  position: fixed; inset: 0; z-index: 90; pointer-events: none;
  background: radial-gradient(circle at 50% 45%, rgba(255, 240, 200, 0.95), rgba(255, 60, 40, 0.5) 35%, transparent 70%);
  animation: rr-flash 0.6s ease-out forwards;
}
@keyframes rr-flash { 0% { opacity: 1; } 100% { opacity: 0; } }

body.rr-shake { animation: rr-shake 0.45s ease-out; }
@keyframes rr-shake {
  0%, 100% { transform: none; }
  15% { transform: translate(-7px, 4px); }
  35% { transform: translate(6px, -5px); }
  55% { transform: translate(-4px, 2px); }
  75% { transform: translate(3px, -2px); }
}

.rr-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
.rr-meta div { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 9px 6px; text-align: center; }
.rr-meta b { display: block; font-size: 15px; font-variant-numeric: tabular-nums; }
.rr-meta span { display: block; font-size: 11px; color: var(--fg-2); margin-top: 2px; }

.rr-result { border-radius: 13px; padding: 12px; margin-bottom: 12px; font-size: 14px; line-height: 1.45; }
.rr-result.is-win { background: var(--green-dim); color: var(--green); }
.rr-result.is-loss { background: var(--red-dim); color: var(--red); }

.rr-actions { display: flex; gap: 8px; margin-bottom: 12px; }
.rr-actions .btn { flex: 1; }

.rr-invite {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 13px; color: var(--fg-2); margin-bottom: 14px;
}
.rr-invite b { color: var(--accent); font-size: 15px; letter-spacing: 1px; }
.rr-invite .btn { flex: 1; min-width: 140px; }

.rr-log { font-size: 12.5px; color: var(--fg-2); padding: 6px 14px; border-top: 1px solid var(--line); }
.rr-log:first-of-type { border-top: none; }

.rr-shop { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 12px; }
.rr-shop-item {
  background: var(--bg-2, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--line); border-radius: 13px; padding: 10px 8px; text-align: center;
}
.rr-shop-item.is-on { border-color: var(--accent); }
.rr-shop-gun { width: 92px; margin: 0 auto 4px; }
.rr-shop-name { font-size: 13px; font-weight: 600; }
.rr-shop-rar { font-size: 11px; margin-bottom: 6px; }
.rr-shop-on { font-size: 12px; color: var(--accent); padding: 6px 0; }

/* Анимированные скины: то, за что платят звёздами. */
.gun-ice { animation: gun-ice 2.6s ease-in-out infinite; }
@keyframes gun-ice { 0%, 100% { filter: none; } 50% { filter: brightness(1.25) drop-shadow(0 0 6px rgba(120, 200, 255, 0.7)); } }
.gun-neon { animation: gun-neon 1.8s ease-in-out infinite; }
@keyframes gun-neon { 0%, 100% { filter: drop-shadow(0 0 3px rgba(255, 59, 212, 0.6)); } 50% { filter: drop-shadow(0 0 10px rgba(168, 107, 255, 0.9)); } }
.gun-plasma { animation: gun-plasma 3s linear infinite; }
@keyframes gun-plasma { from { filter: hue-rotate(0deg) saturate(1.3); } to { filter: hue-rotate(360deg) saturate(1.3); } }

/* Вкладки магазина: у каждой свой цвет, чтобы раздел узнавался до чтения
   подписи. Красится только активная — иначе полоса рябит. */
#rewards-scope .range-btn.is-active { border-color: transparent; }

#rewards-scope .range-btn[data-rscope="donate"].is-active {
  background: linear-gradient(150deg, rgba(255, 214, 10, 0.22), rgba(233, 163, 62, 0.16));
  color: var(--accent);
}
#rewards-scope .range-btn[data-rscope="rewards"].is-active {
  background: linear-gradient(150deg, rgba(50, 215, 120, 0.22), rgba(30, 160, 90, 0.14));
  color: var(--green);
}
#rewards-scope .range-btn[data-rscope="coin"].is-active {
  background: linear-gradient(150deg, rgba(74, 158, 255, 0.24), rgba(40, 110, 200, 0.15));
  color: #6fb3ff;
}
#rewards-scope .range-btn[data-rscope="nicks"].is-active,
#rewards-scope .range-btn[data-rscope="skins"].is-active {
  background: linear-gradient(150deg, rgba(168, 107, 255, 0.24), rgba(120, 70, 200, 0.15));
  color: #b98bff;
}

/* Неактивная вкладка держит тонкий намёк на свой цвет — полоской снизу. */
#rewards-scope .range-btn { position: relative; overflow: hidden; }
#rewards-scope .range-btn::after {
  content: '';
  position: absolute;
  left: 22%; right: 22%; bottom: 4px; height: 2px;
  border-radius: 2px;
  opacity: 0.5;
  transition: opacity 0.2s ease;
}
#rewards-scope .range-btn.is-active::after { opacity: 0; }
#rewards-scope .range-btn[data-rscope="donate"]::after { background: var(--accent); }
#rewards-scope .range-btn[data-rscope="rewards"]::after { background: var(--green); }
#rewards-scope .range-btn[data-rscope="coin"]::after { background: #6fb3ff; }
#rewards-scope .range-btn[data-rscope="nicks"]::after,
#rewards-scope .range-btn[data-rscope="skins"]::after { background: #b98bff; }

/* Карточка револьвера в кейсах и инвентаре: тот же ствол, что и за столом. */
.gun-card { width: 100%; aspect-ratio: 220 / 140; display: flex; align-items: center; }
.gun-card.tiny { width: 46px; flex: 0 0 46px; }
.case-pool .gun-card { margin-right: 2px; }

/* Выбор типа кейса — главный переключатель витрины: крупный, с золотой рамкой. */
.case-kind-label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); margin: 2px 2px 6px; }
#case-kind-tabs { margin: 0 0 14px; padding: 4px; background: rgba(255, 214, 10, .07); border: 1px solid rgba(255, 214, 10, .35); box-shadow: 0 0 16px rgba(255, 214, 10, .08); }
#case-kind-tabs button { font-size: 13.5px; font-weight: 700; padding: 11px 4px; white-space: nowrap; }
#case-kind-tabs button.is-active { background: var(--accent); color: #1a1400; box-shadow: 0 2px 10px rgba(255, 214, 10, .3); }

/* Номиналы ставки: те, что не по карману, гасим, но не убираем —
   так видно, до чего можно дорасти. */
.rr-bets { gap: 6px; }
.rr-bets .chip { flex: 0 0 auto; min-width: 62px; padding: 9px 10px; font-size: 13px; }
.rr-bets .chip.is-off { opacity: 0.4; }

/* Перечёркнутая старая цена в наборе: без неё скидка не читается. */
.promo-stars s { opacity: 0.5; font-size: 0.7em; margin-right: 6px; font-weight: 500; }
.promo-duo { border-color: rgba(255, 214, 10, 0.28); }


/* ---------- рамки в рейтинге ---------- */

/* Рамка живёт на самой аватарке: обводка плюс свечение, без лишних узлов.
   В списке из ста строк каждый лишний элемент — это лишняя работа телефона. */
.rank-ava .ava { position: relative; }
.rank-plain {
  display: grid;
  place-items: center;
  background: var(--card-2);
  color: var(--fg-2);
  font-size: 13px;
  font-weight: 800;
}

.fr-gold {
  box-shadow: 0 0 0 2px #d9ac3d, 0 0 8px rgba(217, 172, 61, 0.55);
}
.fr-neon {
  box-shadow: 0 0 0 2px #4fd8ff, 0 0 10px rgba(79, 216, 255, 0.6);
  animation: fr-pulse 2.2s ease-in-out infinite;
}
@keyframes fr-pulse {
  0%, 100% { box-shadow: 0 0 0 2px #4fd8ff, 0 0 6px rgba(79, 216, 255, 0.45); }
  50% { box-shadow: 0 0 0 2px #7ee6ff, 0 0 14px rgba(79, 216, 255, 0.85); }
}
.fr-fire {
  box-shadow: 0 0 0 2px #ff7b00, 0 0 10px rgba(255, 123, 0, 0.6);
  animation: fr-fire 0.9s ease-in-out infinite;
}
@keyframes fr-fire {
  0%, 100% { box-shadow: 0 0 0 2px #ff7b00, 0 0 8px rgba(255, 123, 0, 0.5); }
  40% { box-shadow: 0 0 0 2px #ffd166, 0 0 16px rgba(255, 145, 0, 0.85); }
  70% { box-shadow: 0 0 0 2px #ff4d00, 0 0 11px rgba(255, 77, 0, 0.7); }
}
/* Радужная: цветное кольцо крутится вокруг аватарки */
.fr-rainbow::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  padding: 3px;
  background: conic-gradient(#ff453a, #ff9f0a, #ffd60a, #32d778, #0a84ff, #a86bff, #ff453a);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: fr-spin 3s linear infinite;
}
@keyframes fr-spin { to { transform: rotate(360deg); } }

/* Витрина рамок в магазине */
.frame-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 12px;
  padding: 4px 14px 14px;
}
/* Плитка обведена золотом: рамки — витринный товар, и в магазине они
   должны бросаться в глаза, а не теряться среди тёмных карточек. */
.frame-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 4px 10px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 214, 10, 0.07), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 214, 10, 0.45);
  box-shadow: 0 0 10px rgba(255, 214, 10, 0.12), inset 0 0 12px rgba(255, 214, 10, 0.05);
}
.frame-item.is-on {
  border-color: var(--green);
  background: rgba(50, 215, 120, 0.09);
  box-shadow: 0 0 10px rgba(50, 215, 120, 0.18);
}
/* Некупленная тускнеет, но золото по контуру остаётся: это и есть приглашение */
.frame-item.locked { opacity: 0.72; }
.frame-item .mini {
  border: 1px solid rgba(255, 214, 10, 0.5);
  color: var(--accent);
}
.frame-item .ava { width: 44px; height: 44px; }
.frame-name { font-size: 11px; font-weight: 600; text-align: center; }

/* ---------- короткая витрина ---------- */

/* Тот же золотой блок, но заметно ниже: иконка, заголовок и выгоды плитками
   в одну-две строки. Кнопка почти всегда видна без прокрутки. */
.promo-lite { padding: 16px 16px 15px; }
.promo-head { display: flex; align-items: center; gap: 12px; }
.promo-head .ava { width: 42px; height: 42px; flex-shrink: 0; }
.promo-head-main { min-width: 0; }
.promo-lite .promo-badge { display: inline-block; margin-bottom: 5px; }
.promo-lite h3 { margin: 0; font-size: 18px; line-height: 1.15; letter-spacing: -0.3px; }
.promo-lite p { margin: 9px 0 0; font-size: 13.5px; line-height: 1.4; }
.promo-lite .btn { padding: 12px 10px; font-size: 15px; max-width: 56%; }

.promo-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.promo-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 6px 7px;
  border-radius: 10px;
  font-size: 12.5px;
  line-height: 1.2;
  color: var(--fg);
  background: rgba(255, 214, 10, 0.1);
  border: 1px solid rgba(255, 214, 10, 0.16);
}
.promo-chip i { width: 13px; height: 13px; display: block; flex-shrink: 0; }
.promo-chip i svg { width: 13px; height: 13px; }
.promo-chip i svg path { stroke: var(--accent); }
.promo-lite .promo-price { margin-top: 14px; }
.promo-lite .promo-owned { margin-top: 12px; font-size: 13px; }


/* ---------- город ---------- */

.city-wrap {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 14px 14px;
  margin-bottom: 4px;
}
.city-grid {
  display: grid;
  grid-template-columns: repeat(var(--n, 24), 26px);
  gap: 2px;
  width: max-content;
}
/* Клетка — простой прямоугольник с рамкой. Никаких box-shadow: на 576 узлах
   они заметно грузят прокрутку. */
.pl {
  width: 26px;
  height: 26px;
  border-radius: 4px;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-style: normal;
  line-height: 1;
  color: rgba(255, 255, 255, 0.75);
  border: 1px solid transparent;
  cursor: pointer;
}
.pl-outskirts { background: #24242a; }
.pl-sleeping { background: #172c1f; }
.pl-business { background: #14283a; }
.pl-center { background: #33290f; }

.pl.is-other { border-color: rgba(255, 255, 255, 0.18); }
.pl.is-mine { border-color: var(--green); }
.pl.is-built b { color: #d8f5e2; }
.pl.is-tower b { color: var(--accent); font-size: 12px; }
.pl.is-pick { outline: 2px solid var(--accent); outline-offset: -2px; }

.city-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 14px 10px;
  font-size: 11px;
  color: var(--fg-2);
}
.city-legend .lg { display: inline-flex; align-items: center; gap: 5px; }
.city-legend .lg::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 3px;
  display: block;
}
.city-legend .lg-outskirts::before { background: #24242a; }
.city-legend .lg-sleeping::before { background: #172c1f; }
.city-legend .lg-business::before { background: #14283a; }
.city-legend .lg-center::before { background: #33290f; }


/* Холст трёхмерного города. Высоту задаёт сам движок по ширине экрана. */
.city-scene {
  margin: 0 14px 6px;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(180deg, #0d1016, #05070a);
  border: 1px solid var(--line);
  min-height: 240px;
  touch-action: none;
}
.city-hint {
  padding: 0 16px 12px;
  color: var(--fg-2);
  font-size: 12px;
}


/* ================= темы приложения =================
   Тема — это только переменные. Ни одна разметка от неё не зависит, поэтому
   переключение мгновенное. Зелёный и красный не трогаем нигде: прибыль и
   убыток должны читаться одинаково в любой теме. */

:root {
  --accent-soft: rgba(255, 214, 10, 0.18);
  --accent-soft-2: rgba(255, 214, 10, 0.06);
  --accent-line: rgba(255, 214, 10, 0.22);
}

:root[data-app-theme="steel"] {
  --bg: #070809;
  --bg-2: #0d0f12;
  --card: #12151a;
  --card-2: #1b1f26;
  --line: rgba(175, 195, 215, 0.10);
  --fg-2: #8d97a4;
  --fg-3: #5a6472;
  --accent: #9fb4c7;
  --accent-soft: rgba(159, 180, 199, 0.18);
  --accent-soft-2: rgba(159, 180, 199, 0.06);
  --accent-line: rgba(159, 180, 199, 0.24);
}

:root[data-app-theme="wine"] {
  --bg: #0d0609;
  --bg-2: #140a0f;
  --card: #1a0d14;
  --card-2: #26141d;
  --line: rgba(255, 150, 175, 0.10);
  --fg-2: #a5838f;
  --fg-3: #71535e;
  --accent: #e2647a;
  --accent-soft: rgba(226, 100, 122, 0.18);
  --accent-soft-2: rgba(226, 100, 122, 0.06);
  --accent-line: rgba(226, 100, 122, 0.24);
}

:root[data-app-theme="teal"] {
  --bg: #04090a;
  --bg-2: #081114;
  --card: #0b171b;
  --card-2: #122228;
  --line: rgba(120, 225, 220, 0.10);
  --fg-2: #7e9a9c;
  --fg-3: #516769;
  --accent: #2fd4c4;
  --accent-soft: rgba(47, 212, 196, 0.18);
  --accent-soft-2: rgba(47, 212, 196, 0.06);
  --accent-line: rgba(47, 212, 196, 0.24);
}

:root[data-app-theme="indigo"] {
  --bg: #07060f;
  --bg-2: #0c0b19;
  --card: #121022;
  --card-2: #1b1832;
  --line: rgba(160, 155, 255, 0.10);
  --fg-2: #8e8ab0;
  --fg-3: #5c5880;
  --accent: #8f8bff;
  --accent-soft: rgba(143, 139, 255, 0.18);
  --accent-soft-2: rgba(143, 139, 255, 0.06);
  --accent-line: rgba(143, 139, 255, 0.24);
}

:root[data-app-theme="mono"] {
  --bg: #070707;
  --bg-2: #0d0d0d;
  --card: #141414;
  --card-2: #1e1e1e;
  --line: rgba(255, 255, 255, 0.09);
  --fg-2: #9a9a9a;
  --fg-3: #666;
  --accent: #e8e8e8;
  --accent-soft: rgba(232, 232, 232, 0.14);
  --accent-soft-2: rgba(232, 232, 232, 0.05);
  --accent-line: rgba(232, 232, 232, 0.20);
}

:root[data-app-theme="midnight"] {
  --bg: #06080f;
  --bg-2: #0a0e1a;
  --card: #0e1322;
  --card-2: #161d31;
  --line: rgba(140, 175, 255, 0.10);
  --fg-2: #8b94ad;
  --fg-3: #576080;
  --accent: #5aa9ff;
  --accent-soft: rgba(90, 169, 255, 0.18);
  --accent-soft-2: rgba(90, 169, 255, 0.06);
  --accent-line: rgba(90, 169, 255, 0.24);
}

:root[data-app-theme="plum"] {
  --bg: #0c0713;
  --bg-2: #120b1d;
  --card: #171021;
  --card-2: #221630;
  --line: rgba(216, 107, 255, 0.11);
  --fg-2: #9a8bab;
  --fg-3: #675a78;
  --accent: #d86bff;
  --accent-soft: rgba(216, 107, 255, 0.18);
  --accent-soft-2: rgba(216, 107, 255, 0.06);
  --accent-line: rgba(216, 107, 255, 0.24);
}

:root[data-app-theme="moss"] {
  --bg: #060b08;
  --bg-2: #0a120d;
  --card: #101a14;
  --card-2: #17261d;
  --line: rgba(58, 217, 138, 0.10);
  --fg-2: #83988c;
  --fg-3: #55685d;
  --accent: #3ad98a;
  --accent-soft: rgba(58, 217, 138, 0.18);
  --accent-soft-2: rgba(58, 217, 138, 0.06);
  --accent-line: rgba(58, 217, 138, 0.24);
}

:root[data-app-theme="ember"] {
  --bg: #0d0a08;
  --bg-2: #14100c;
  --card: #1a1411;
  --card-2: #251c16;
  --line: rgba(224, 135, 58, 0.11);
  --fg-2: #9c8b7c;
  --fg-3: #6a5c50;
  --accent: #e0873a;
  --accent-soft: rgba(224, 135, 58, 0.18);
  --accent-soft-2: rgba(224, 135, 58, 0.06);
  --accent-line: rgba(224, 135, 58, 0.24);
}

/* ================= вкладка «Город» =================
   Магазин в нижнем ряду уже кружком, а город терялся между ним и наградами.
   Даём ему такой же кружок, но своим зелёным — тем же, каким на карте помечены
   свои участки. */
.tab-city { position: relative; color: #4bd88a; }
.tab-city i {
  position: relative;
  width: 42px !important;
  height: 42px !important;
  margin-top: -14px;
  border-radius: 50%;
  padding: 3px;
  z-index: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(155deg, #7ef0b0, #34c97b 45%, #178f52);
  box-shadow: 0 6px 16px rgba(23, 143, 82, 0.45), inset 0 -3px 6px rgba(8, 66, 38, 0.4);
  color: #06301c;
}
/* тот же глянцевый блик, что у магазина: без него кружок выглядит плоско */
.tab-city i::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.42), transparent 55%);
  pointer-events: none;
}
.tab-city i svg { width: 20px; height: 20px; position: relative; z-index: 1; }
.tab-city.is-active { color: #4bd88a; }
.tab-city.is-active i { transform: translateY(-2px) scale(1.06); }

/* Кнопка настроек в шапке счёта. Стоит слева от аватарки и подписана словом:
   тему искали именно здесь и не находили. */
.acc-gear {
  position: absolute;
  top: calc(20px - 4px * var(--collapse));
  right: calc(var(--pad) + 52px);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 13.09.2026: слово «Настройки» накрывало крупный баланс — оставили круглую
     кнопку со значком, подпись живёт в aria-label. */
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--fg-2);
  opacity: calc(1 - var(--collapse));
}
.acc-gear span { display: none; }
.acc-gear i { display: block; width: 14px; height: 14px; }
.acc-gear i svg { width: 100%; height: 100%; display: block; }
.acc-gear:active { transform: scale(0.94); }

/* ================= экран города =================
   Переключатель цветовых тем сцены: полоска чипов над картой. */
.city-themes {
  display: flex;
  gap: 6px;
  padding: 0 14px 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.city-themes::-webkit-scrollbar { display: none; }
.city-themes .th {
  flex: 0 0 auto;
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--fg-2);
  font-size: 12px;
  font-weight: 600;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.city-themes .th.is-on {
  background: var(--accent);
  border-color: var(--accent);
  color: #14140a;
}

.city-hint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 var(--pad) 12px;
  color: var(--fg-2);
  font-size: 12px;
}
.city-help {
  flex: 0 0 auto;
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 12px;
  color: var(--accent);
  background: var(--card);
  border: 1px solid var(--line);
}

/* Доход одной строкой вместо карточки на пол-экрана. */
.cbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 var(--pad) 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--card);
  border: 1px solid var(--line);
}
.cbar-main { flex: 1; min-width: 0; }
.cbar-main b { display: block; font-size: 18px; font-weight: 700; }
.cbar-main span { display: block; margin-top: 2px; font-size: 11.5px; color: var(--fg-2); }
.cbar .btn { width: auto; margin: 0; padding: 10px 18px; flex: 0 0 auto; }

/* Плоские списки: одна строка — один товар. Значок, имя, приписка и цена.
   Ни круглых аватарок, ни описаний в три строки: тринадцать карточек подряд
   читались как свалка, тринадцать строк читаются как прайс. */
.clist-head {
  padding: 16px var(--pad) 7px;
  font-size: 11px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--fg-3);
}
.clist {
  margin: 0 var(--pad);
  border-radius: 14px;
  background: var(--card);
  border: 1px solid var(--line);
  overflow: hidden;
}
.crow {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 13px;
  text-align: left;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line);
  color: var(--fg);
}
.crow:first-child { border-top: 0; }
.crow:active { background: var(--card-2); }
.crow.is-on { background: var(--card-2); }
.crow:disabled { opacity: 0.5; }
.crow .dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; }
.crow .nm {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.crow .nm .sub { color: var(--fg-2); font-weight: 400; font-size: 12px; }
.crow .pr { flex: 0 0 auto; font-size: 13.5px; font-weight: 700; text-align: right; }
.crow .pr small { display: block; font-size: 11px; font-weight: 400; color: var(--fg-2); }
.crow .pr .ok { color: var(--green); font-weight: 400; font-size: 12px; }
/* Значок здания. Иконки нарисованы белым по прозрачному, поэтому просто гасим
   их до цвета текста: цветное пятно в каждой строке было бы перебором. */
.crow .ic {
  flex: 0 0 auto;
  display: block;
  width: 22px;
  height: 22px;
  opacity: 0.82;
}
.crow .ic svg { width: 100%; height: 100%; display: block; }
/* Цена в звёздах — золотом, чтобы донат отличался от рублей на глаз. */
.crow .pr.is-stars { color: var(--accent); }
/* «Смотреть»: строка открывает предпросмотр, а не списывает звёзды. Нарочно
   приглушённый — это подсказка под ценой, а не вторая кнопка. Под ценой, а не
   рядом с именем: сбоку ярлык съедал имя, и на узком экране «Башня
   Фуфелшмерца» превращалась в «Башня Фуфел…», а доход в час пропадал. */
.crow .pr .look {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  margin-top: 2px;
  color: var(--fg-2);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}
.crow .pr .look i { display: block; width: 12px; height: 12px; opacity: 0.9; }
.crow .pr .look svg { width: 100%; height: 100%; display: block; }

/* Карточка выбранного участка: та же плоская логика, без аватарки. */
.cpick {
  margin: 0 var(--pad) 12px;
  padding: 13px 14px 14px;
  border-radius: 14px;
  background: var(--card);
  border: 1px solid var(--line);
}
.cpick-top { display: flex; align-items: center; gap: 10px; }
.cpick-top .dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; }
.cpick-main { flex: 1; min-width: 0; }
.cpick-name { font-size: 15px; font-weight: 700; }
.cpick-sub { margin-top: 2px; font-size: 12px; color: var(--fg-2); }
.cpick-val { flex: 0 0 auto; font-size: 14px; font-weight: 700; text-align: right; }
.cpick-val small { display: block; font-size: 11px; font-weight: 400; color: var(--fg-2); }
.cpick .btn { margin-top: 10px; }
.cpick .btn-flat { margin-top: 4px; padding: 8px; }
.cpick-max {
  margin-top: 10px;
  text-align: center;
  font-size: 13px;
  color: var(--accent);
}

/* Чей участок: своё зелёным, чужое — ником обычным цветом. */
.who { color: var(--fg-2); }
.who.is-me { color: var(--green); font-weight: 600; }

/* Ряд из четырёх чипов на узком экране: подписи короткие, но всё же ужимаем. */
.range-wide .range-btn { padding: 9px 2px; font-size: 12px; }

/* Отделка кружками: выбирают цвет, а не читают названия. */
.fdots { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 12px; }
.fdot {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--fw, #3a3d46);
  box-shadow: inset 0 -11px 0 -7px var(--fn, #8a8f9c);
  border: 2px solid transparent;
}
.fdot.is-on { border-color: var(--accent); }
.fdot.is-lock::after {
  content: '★';
  position: absolute;
  right: -3px;
  bottom: -5px;
  font-size: 11px;
  line-height: 1;
  color: var(--accent);
  text-shadow: 0 0 3px var(--bg);
}

/* Закрытый город: место в рейтинге и сколько до порога. */
.lock-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 6px 0;
  font-size: 13px;
  color: var(--fg-2);
}
.lock-line b { color: var(--fg); font-size: 15px; }
.lock-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--card-2);
  overflow: hidden;
  margin: 4px 0 8px;
}
.lock-bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-soft), var(--accent));
}

/* Плитки отделки на экране «Мой аккаунт» и в старых местах города. */
.face-title {
  margin: 14px 0 8px;
  font-size: 12px;
  color: var(--fg-2);
}
.face-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.face-row::-webkit-scrollbar { display: none; }
.face {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--card-2);
  color: var(--fg);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.face i {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: var(--fw, #3a3d46);
  box-shadow: inset 0 -7px 0 -4px var(--fn, #8a8f9c);
}
.face.is-on {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.face.is-lock { color: var(--fg-2); }
.face b { color: var(--accent); font-weight: 700; }
.face-ava {
  background: var(--fw, #3a3d46) !important;
  box-shadow: inset 0 -12px 0 -7px var(--fn, #8a8f9c);
}

/* ================= мини-обучение =================
   Пять карточек поверх экрана при первом входе. Затемнение кликабельно и
   закрывает обучение: тому, кто уже всё понял, не надо дочитывать до конца. */
.teach {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(6px);
  animation: teach-in 0.22s var(--ease);
}
@keyframes teach-in { from { opacity: 0; } to { opacity: 1; } }
.teach-card {
  width: 100%;
  max-width: 340px;
  padding: 20px 18px 16px;
  border-radius: 20px;
  background: var(--card);
  border: 1px solid var(--line);
  text-align: center;
  animation: teach-up 0.28s var(--spring);
}
@keyframes teach-up { from { transform: translateY(14px) scale(0.97); } to { transform: none; } }
.teach-card .ava { margin: 0 auto 12px; }
.teach-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
}
.teach-text {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--fg-2);
  margin-bottom: 14px;
}
.teach-dots {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-bottom: 14px;
}
.teach-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--fg-3);
  transition: background 0.2s, width 0.2s var(--ease);
}
.teach-dots i.is-on { width: 18px; border-radius: 3px; background: var(--accent); }
.btn-flat {
  background: transparent;
  color: var(--fg-2);
  border: none;
}


/* Полоска «следующий шаг» на экране города. Стоит первой и подсвечена
   акцентом: это единственное место, куда должен смотреть человек, впервые
   открывший город. */
.cstep {
  display: flex;
  align-items: center;
  gap: 12px;
  width: calc(100% - var(--pad) * 2);
  margin: 0 var(--pad) 12px;
  padding: 12px 14px;
  border-radius: 14px;
  text-align: left;
  background: linear-gradient(135deg, var(--accent-soft), var(--accent-soft-2));
  border: 1px solid var(--accent-line);
  color: var(--fg);
}
.cstep:active { transform: scale(0.99); }
.cstep-num {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: #14140a;
  font-size: 13px;
  font-weight: 800;
  font-style: normal;
}
.cstep-main { flex: 1; min-width: 0; }
.cstep-main b { display: block; font-size: 14.5px; font-weight: 700; }
.cstep-main span {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--fg-2);
}
/* стрелка «дальше» — та же, что у строк перехода в остальном приложении */
.cstep-go {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}


/* Продажа своего участка: поле цены и кнопка в одну строку. */
.csale {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 13px;
  color: var(--fg-2);
}
.csale b { color: var(--fg); }
.csale .mini { margin-top: 0; flex: 0 0 auto; }
.csale .mini.is-go { color: #14140a; background: var(--accent); border-color: var(--accent); }
/* Выбор цены: крупная читаемая сумма, шаг по краям и готовые множители.
   Числовое поле со ста миллиардами внутри прочитать нельзя, а решение о цене
   должно выглядеть решением. */
.csale-head {
  margin-top: 12px;
  font-size: 12px;
  color: var(--fg-2);
}
.csale-pick {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.csale-step {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--card-2);
  border: 1px solid var(--line);
  color: var(--fg);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}
.csale-step:active { background: var(--accent); color: #14140a; }
/* Сумму и вписывают руками, и накручивают кнопками. Число в поле голое —
   отформатированное не поправишь, — а прописью оно подписано строкой ниже:
   по ней сразу видно лишний ноль. */
.csale-sum {
  flex: 1;
  min-width: 0;
  text-align: center;
  font-size: 19px;
  font-weight: 700;
  padding: 9px 6px;
  border-radius: 12px;
  background: var(--card-2);
  border: 1px solid var(--line);
  color: var(--fg);
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
}
.csale-sum:focus { outline: none; border-color: var(--accent); }
/* Знак валюты прямо у поля: цифры в нём — в той валюте, что выбрана сверху,
   и без подписи это единственное место, где об этом негде догадаться. */
.csale-cur {
  font-size: 15px;
  font-weight: 700;
  color: var(--dim);
  padding: 0 2px;
}
.csale-words {
  margin-top: 6px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
}
.csale-words.is-bad { color: var(--bad, #ff6b6b); }

/* Сколько обменов ждёт ответа. Висит прямо на «Моих»: другого места, где их
   видно, нет, а предложение — это вопрос, на который человек должен ответить. */
.scope-dot {
  display: inline-block;
  min-width: 16px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--accent);
  color: #0b0b10;
  font-size: 11px;
  font-weight: 800;
  line-height: 16px;
  vertical-align: middle;
}
.mini.is-no { color: var(--bad, #ff6b6b); }

/* Объявление о новой земле. Заметное, но не на весь экран: висит два часа и
   гаснет само, поэтому места под кнопку «закрыть» не занимаем. */
.cnew {
  margin: 0 0 10px;
  padding: 12px 14px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(60, 200, 120, .18), rgba(60, 200, 120, .06));
  border: 1px solid rgba(60, 200, 120, .35);
}
.cnew-top { font-size: 15px; font-weight: 800; margin-bottom: 4px; }
.cnew-txt { font-size: 13px; color: var(--dim); line-height: 1.4; }
.cnew-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.cnew-left { font-size: 12px; color: var(--dim); }

/* Окно предпросмотра. Здание крутится само: с одного ракурса непонятно, что
   покупаешь, а вертеть его пальцем в маленьком окошке неудобно. */
.cprev {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(6, 7, 11, 0.82);
}
.cprev-box {
  width: 100%;
  max-width: 340px;
  padding: 16px;
  border-radius: 22px;
  background: var(--card);
  border: 1px solid var(--line);
  text-align: center;
}
.cprev-scene {
  height: 240px;
  margin-bottom: 12px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(120,140,190,.16), rgba(20,22,30,.5));
  overflow: hidden;
}
.cprev-scene canvas { display: block; width: 100%; height: 100%; }
.cprev-name { font-size: 17px; font-weight: 800; }
.cprev-sub { margin-top: 4px; font-size: 13px; color: var(--dim); }
.cprev-btns { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.csale-mults {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.csale-mults::-webkit-scrollbar { display: none; }
.csale-mult {
  flex: 0 0 auto;
  padding: 6px 11px;
  border-radius: 999px;
  background: var(--card-2);
  border: 1px solid var(--line);
  color: var(--fg-2);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.csale-mult.is-on {
  background: var(--accent);
  border-color: var(--accent);
  color: #14140a;
}

/* ---------- рекламное задание AdsGram ----------
   Компонент чужой, внутрь не залезть — он настраивается только этими
   переменными. Значения ниже границ из документации он игнорирует. */
.ads-task {
  --adsgram-task-font-size: 15px;
  --adsgram-task-icon-size: 44px;
  --adsgram-task-icon-title-gap: 12px;
  --adsgram-task-button-width: 96px;
  --adsgram-task-icon-border-radius: 10px;

  display: block;
  width: 100%;
  padding: 10px 12px 10px 10px;
  border-radius: 14px;
  background: var(--card-2);
  color: var(--fg);
}
.ads-task-reward { color: var(--accent); font-size: 13px; font-weight: 700; }
.ads-task-btn {
  padding: 9px 12px;
  border-radius: 8px;
  background: var(--accent);
  color: #14100a;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}
.ads-task-btn.is-claim { background: var(--green); color: #06210f; }
.ads-task-btn.is-done { background: rgba(255, 255, 255, 0.1); color: var(--fg-2); }

/* Переезд участка: подсказка и кнопка отмены живут одним блоком, чтобы
   «идёт переезд» читалось как состояние, а не как ещё одна кнопка в ряду. */
.cmove { margin-top: 6px; }
.cmove.is-on {
  border: 1px solid var(--green);
  border-radius: 12px;
  padding: 8px 10px;
  background: var(--green-dim);
}
.cmove-hint { font-size: 13px; color: var(--fg-2); margin-bottom: 6px; line-height: 1.35; }
.cmove .btn-flat { margin-top: 0; }

/* ---------- сортировка рынка ----------
   Раньше это был ряд кнопок: пять помещалось, шестая уже не влезала на узкий
   экран. Выпадающий список вмещает сколько угодно и всегда показывает, что
   именно выбрано. */
.sort-box { position: relative; padding: 0 var(--pad) 8px; }
.sort-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  text-align: left;
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
}
.sort-trigger:active { transform: scale(0.99); }
.sort-label { color: var(--fg-3); font-size: 12px; }
.sort-trigger b { flex: 1 1 auto; font-size: 14px; font-weight: 600; }
.sort-chev { color: var(--fg-3); font-size: 20px; font-style: normal; transition: transform 0.18s var(--ease); }
.sort-box.is-open .sort-chev { transform: rotate(90deg); }

/* Меню перекрывает список бумаг, поэтому оно и непрозрачное, и с тенью:
   сквозь него не должно просвечивать то, что под ним. */
/* Правило скрытия обязано быть своим: глобального .is-hidden в проекте нет,
   он везде привязан к конкретному блоку. Без него меню висит открытым всегда. */
.sort-menu.is-hidden { display: none; }
.sort-menu {
  position: absolute;
  left: var(--pad);
  right: var(--pad);
  top: calc(100% - 4px);
  z-index: 30;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card-2);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
  max-height: 62vh;
  overflow-y: auto;
}
.sort-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 7px 10px;
  text-align: left;
  color: var(--fg);
  border: 0;
  border-radius: 9px;
  background: transparent;
}
.sort-item:active { background: rgba(255, 255, 255, 0.06); }
.sort-item.is-on { background: rgba(var(--accent-rgb), 0.12); }
.sort-item-main { display: grid; gap: 2px; flex: 1 1 auto; min-width: 0; }
.sort-item-main b { font-size: 14px; font-weight: 600; }
.sort-item-main i { color: var(--fg-3); font-size: 11.5px; font-style: normal; }
.sort-item-tick { color: var(--accent); font-size: 15px; font-weight: 700; }

/* ---------- выпуск бумаги и дефицит ----------
   Полоска, а не только проценты: «сколько осталось» человек считывает
   длиной, а не числом, и решение «брать сейчас» принимается по ней. */
.scarce {
  margin: 10px var(--pad) 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
}
.scarce-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13px; color: var(--fg-2); }
.scarce-head b { color: var(--fg); font-size: 13px; }
.scarce-bar { height: 6px; border-radius: 3px; background: rgba(255,255,255,0.08); margin: 8px 0 6px; overflow: hidden; }
.scarce-bar i { display: block; height: 100%; border-radius: 3px; background: var(--green); transition: width .3s var(--ease); }
.scarce-sub { font-size: 12px; color: var(--fg-2); line-height: 1.35; }
.scarce.is-hot { border-color: var(--orange); }
.scarce.is-hot .scarce-bar i { background: var(--orange); }
.scarce.is-hot .scarce-sub { color: var(--orange); }

/* ---------- сезонный пропуск ----------
   Плашка стоит первой на главном экране. Смысл её вида: уровень крупно,
   полоска до следующего и кружок с числом несобранных наград — три вещи,
   по которым решают, заходить сейчас или потом. */
.passbar {
  display: block;
  width: calc(100% - var(--pad) * 2);
  margin: 0 var(--pad) 12px;
  padding: 12px 14px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255,214,10,0.10), rgba(255,214,10,0.02));
  color: var(--fg);
  cursor: pointer;
}
.passbar.is-ready { border-color: var(--accent); }
.passbar-top { display: flex; justify-content: space-between; font-size: 12px; color: var(--fg-2); }
.passbar-name { font-weight: 600; color: var(--accent); }
.passbar-mid { display: flex; align-items: center; gap: 10px; margin: 8px 0 6px; }
.passbar-lvl { font-size: 22px; font-weight: 700; line-height: 1; }
.passbar-lvl small { font-size: 13px; color: var(--fg-3); font-weight: 500; }
.passbar-bar { flex: 1; height: 7px; border-radius: 4px; background: rgba(255,255,255,0.08); overflow: hidden; }
.passbar-bar i { display: block; height: 100%; border-radius: 4px; background: var(--accent); transition: width .3s var(--ease); }
.passbar-dot {
  min-width: 22px; height: 22px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 11px; background: var(--accent); color: #1a1500;
  font-size: 12px; font-weight: 700;
}
.passbar-sub { font-size: 12px; color: var(--fg-2); }

/* экран пропуска */
.pass-hero { margin: 12px var(--pad); padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.pass-hero-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.pass-hero-lvl { font-size: 20px; font-weight: 700; }
.pass-hero-lvl small { font-size: 13px; color: var(--fg-3); font-weight: 500; }
.pass-hero-sub { font-size: 12px; color: var(--fg-2); margin-top: 2px; }
.pass-hero-tok { text-align: right; }
.pass-hero-tok b { display: block; font-size: 20px; color: var(--accent); }
.pass-hero-tok small { font-size: 11px; color: var(--fg-2); }
.pass-hero-bar { height: 8px; border-radius: 4px; background: rgba(255,255,255,0.08); margin: 10px 0 8px; overflow: hidden; }
.pass-hero-bar i { display: block; height: 100%; border-radius: 4px; background: var(--accent); }
.pass-hero-note { font-size: 12px; color: var(--fg-2); line-height: 1.4; margin-bottom: 10px; }
.pass-paid { font-size: 13px; color: var(--green); font-weight: 600; }

.pass-head { display: grid; grid-template-columns: 44px 1fr 1fr; gap: 8px; padding: 0 var(--pad) 6px; font-size: 11px; color: var(--fg-3); text-transform: uppercase; letter-spacing: .04em; }
.pass-head .is-gold { color: var(--accent); }
.pass-ladder { padding: 0 var(--pad) 20px; }
.pass-row { display: grid; grid-template-columns: 44px 1fr 1fr; gap: 8px; margin-bottom: 8px; align-items: stretch; }
.pass-lvl { display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; color: var(--fg-3); }
.pass-row.is-open .pass-lvl { color: var(--fg); }
.pass-cell {
  padding: 10px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--card); color: var(--fg); text-align: left; min-height: 52px;
}
.pass-cell.is-gold { background: linear-gradient(135deg, rgba(255,214,10,0.08), transparent); }
.pass-cell.is-locked { opacity: .4; }
.pass-cell.is-ready { border-color: var(--green); box-shadow: 0 0 0 1px var(--green) inset; }
.pass-cell.is-done { opacity: .55; }
.pass-tok { display: block; font-size: 14px; font-weight: 600; }
.pass-tok i { font-style: normal; font-size: 11px; color: var(--fg-2); font-weight: 400; }
.pass-item { display: block; font-size: 12px; color: var(--accent); margin-top: 2px; line-height: 1.25; }
.pass-got { display: block; font-size: 11px; color: var(--fg-3); margin-top: 2px; }

/* Сезонная рамка: её не купить, поэтому и выглядеть она должна иначе — не
   ярче остальных, а узнаваемо. Зелёный контур с медленным ходом по кругу. */
.fr-season::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  padding: 3px;
  background: conic-gradient(#32d778, #0a84ff, #32d778, #ffd60a, #32d778);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: fr-spin 6s linear infinite;
}
.frame-lock { font-size: 11px; color: var(--fg-3); }

/* Цель недели: ради неё и существует запас в суточном потолке — заданий в
   дне три, а потолок пять. */
.pass-week { margin: 0 0 10px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-2); }
.pass-week.is-done { border-color: var(--green); }
.pass-week-top { display: flex; justify-content: space-between; font-size: 12px; color: var(--fg-2); }
.pass-week-top b { color: var(--fg); }
.pass-week-bar { height: 5px; border-radius: 3px; background: rgba(255,255,255,0.08); margin: 6px 0 5px; overflow: hidden; }
.pass-week-bar i { display: block; height: 100%; border-radius: 3px; background: var(--green); }
.pass-week-sub { font-size: 11px; color: var(--fg-3); }

/* ---------- пометка «новое» ----------
   На вкладке — точка: в ряду из семи кнопок слово не помещается, а точку
   видно сразу и она ничего не сдвигает. Слово живёт на плитке внутри. */
.tab.is-new { position: relative; }
.tab.is-new::after {
  content: '';
  position: absolute;
  top: 6px;
  left: 50%;
  margin-left: 9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 6px rgba(255, 69, 58, 0.8);
}
.tag-new {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--red);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .04em;
  vertical-align: middle;
}

/* ---------- аукцион ---------- */
.auc-sponsor {
  margin: 10px var(--pad) 0;
  padding: 9px 12px;
  border-radius: 12px;
  background: var(--green-dim);
  border: 1px solid var(--green);
  font-size: 13px;
}
.auc-lot {
  margin: 12px var(--pad);
  padding: 14px;
  border-radius: 16px;
  border: 1px solid var(--accent);
  background: linear-gradient(135deg, rgba(255,214,10,0.12), rgba(255,214,10,0.02));
}
.auc-when { font-size: 12px; color: var(--accent); font-weight: 600; }
.auc-name { font-size: 19px; font-weight: 700; margin-top: 4px; }
.auc-desc { font-size: 13px; color: var(--fg-2); margin-top: 4px; line-height: 1.4; }

.auc-bid { margin: 0 var(--pad) 14px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.auc-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--fg-2); }
.auc-head b { font-size: 17px; color: var(--fg); }
.auc-range { width: 100%; margin: 12px 0 6px; accent-color: var(--accent); }
.auc-cost { font-size: 13px; color: var(--fg-2); }
.auc-cost b { color: var(--fg); }
.auc-note { font-size: 12px; color: var(--fg-3); line-height: 1.4; margin: 10px 0; }
.auc-mine { font-size: 12px; color: var(--green); margin-top: 8px; }
.game-auc svg { display: block; }

/* ---------- дубли наверху магазина ---------- */
#shop-dub { padding: 0 var(--pad); }
#shop-dub .card { margin: 0 0 12px; }
.dub-wallet { padding: 14px; }
.dub-wallet-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.dub-wallet-label { font-size: 12px; color: var(--fg-2); text-transform: uppercase; letter-spacing: .06em; }
.dub-wallet-sum { font-size: 26px; font-weight: 800; color: var(--accent); line-height: 1.1; }
.dub-wallet-note { font-size: 11px; color: var(--fg-3); text-align: right; line-height: 1.35; }
.dub-packs { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 12px 6px; padding-top: 6px; }
.dub-pack { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 2px 8px; border-radius: 12px; background: rgba(255, 214, 10, .08); border: 1px solid rgba(255, 214, 10, .18); color: var(--fg); }
.dub-pack b { font-size: 13px; font-weight: 800; white-space: nowrap; }
.dub-pack span { font-size: 11px; color: var(--fg-2); }
/* Бонус — строкой внутри кнопки, а не бейджем на краю: на узком экране висящий
   бейдж налезал на метку «Хит» / «Лучший курс» соседнего ряда. */
.dub-pack i { font-style: normal; font-size: 10px; font-weight: 800; color: var(--green); line-height: 1.1; }
.dub-pack.is-best { border-color: var(--accent); background: rgba(255, 214, 10, .16); }
@media (max-width: 380px) { .dub-packs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.dub-pack em { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-style: normal; font-size: 9px; font-weight: 800; padding: 2px 6px; border-radius: 6px; background: var(--accent); color: #191500; letter-spacing: .02em; }
.dub-pack.is-hit { border-color: #ff9f0a; background: rgba(255, 159, 10, .14); }
.dub-pack.is-hit em { background: #ff9f0a; color: #1a0f00; }
.dub-pack.is-best { box-shadow: 0 0 0 1px var(--accent) inset, 0 0 18px rgba(255, 214, 10, .25); }
.dub-pack em + b { margin-top: 4px; }


/* Пропуск: вехи с предметами и дублями видно издалека. */
.pass-cell.has-item { border-color: rgba(255, 214, 10, .55); box-shadow: 0 0 0 1px rgba(255, 214, 10, .35) inset, 0 0 14px rgba(255, 214, 10, .12); }
.pass-cell.has-item.is-gold { background: linear-gradient(135deg, rgba(255, 214, 10, .22), rgba(255, 214, 10, .04)); }
.pass-cell.has-dub { border-color: rgba(90, 200, 250, .5); background: linear-gradient(135deg, rgba(90, 200, 250, .14), transparent); }
.pass-cell.has-item .pass-item, .pass-cell.has-dub .pass-item { font-size: 13px; font-weight: 700; margin-top: 4px; }
.pass-cell.has-dub .pass-item { color: #5ac8fa; }
.pass-item-tag { display: inline-block; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 1px 5px; margin: 0 6px 2px 0; border-radius: 5px; background: var(--accent); color: #191500; vertical-align: middle; }

/* ---------- дубли: строка в магазине и окно пополнения ---------- */
.dub-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; }
.dub-bar-main { display: flex; align-items: baseline; gap: 10px; }
.dub-bar-label { font-size: 12px; color: var(--fg-2); text-transform: uppercase; letter-spacing: .06em; }
.dub-bar-sum { font-size: 20px; font-weight: 800; color: var(--accent); }
.dub-bar-btn { width: auto; padding: 10px 18px; margin: 0; }
.dubshop-modal { max-height: 86vh; overflow-y: auto; }
.dubshop-sub { font-size: 13px; color: var(--fg-2); margin: 4px 0 12px; }
.dubshop-list { display: flex; flex-direction: column; gap: 8px; }
.dubshop-row { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); text-align: left; }
.dubshop-amt { flex: 1; display: flex; align-items: baseline; gap: 8px; }
.dubshop-amt b { font-size: 16px; font-weight: 800; }
.dubshop-amt i { font-style: normal; font-size: 12px; font-weight: 800; color: var(--green); }
.dubshop-row em { font-style: normal; font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 6px; background: var(--accent); color: #191500; white-space: nowrap; }
.dubshop-row em.is-hit { background: #ff9f0a; color: #1a0f00; }
.dubshop-row em.is-enough { background: var(--green); color: #04130a; }
.dubshop-price { font-size: 15px; font-weight: 700; color: var(--accent); white-space: nowrap; }
.dubshop-row.is-hit { border-color: #ff9f0a; background: rgba(255, 159, 10, .10); }
.dubshop-row.is-best { border-color: var(--accent); background: rgba(255, 214, 10, .10); box-shadow: 0 0 16px rgba(255, 214, 10, .18); }
.dubshop-row.is-enough { border-color: var(--green); box-shadow: 0 0 0 1px var(--green) inset; }

/* ---------- пропуск: шкала уровня и задания ---------- */
.pass-level-scale { margin: 10px 0 12px; }
.pass-level-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; margin-bottom: 6px; }
.pass-level-row span { color: var(--fg-2); font-size: 12px; }
.pass-level-ticks { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; margin-top: 6px; }
.pass-level-ticks span { text-align: center; font-size: 10px; color: var(--fg-3); padding: 3px 0; border-radius: 5px; background: rgba(255,255,255,.04); }
.pass-level-ticks span.is-done { color: #191500; background: var(--accent); font-weight: 700; }
.pass-level-ticks span.has-item { box-shadow: 0 0 0 1px var(--accent) inset; }
.pass-quests { padding: 6px 12px; margin: 0 var(--pad) 14px; }
.pass-quest { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.pass-quest:last-child { border-bottom: 0; }
.pass-quest-main { flex: 1; min-width: 0; }
.pass-quest-name { font-size: 14px; }
.pass-quest-bar { height: 4px; border-radius: 3px; background: rgba(255,255,255,.08); margin-top: 6px; overflow: hidden; }
.pass-quest-bar i { display: block; height: 100%; background: var(--accent); }
.pass-quest-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.pass-quest-pts { font-size: 11px; font-weight: 800; color: var(--accent); white-space: nowrap; }
.pass-quest-prog { font-size: 12px; color: var(--fg-2); }
.pass-quest.is-done { opacity: .55; }
.pass-quest.is-ready .pass-quest-bar i { background: var(--green); }

/* ---------- дубли в шапке счёта ---------- */
.acc-dub {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 6px;
  padding: 4px 10px; border-radius: 999px; font-size: 14px; font-weight: 700;
  color: var(--accent); background: rgba(255, 214, 10, .10); border: 1px solid rgba(255, 214, 10, .25);
  opacity: calc(1 - var(--collapse)); max-height: calc(30px - 30px * var(--collapse)); overflow: hidden;
}
.acc-dub b { font-weight: 800; color: var(--fg); }
.acc-dub:active { transform: scale(.96); }