/* ============================================================
   «Квартал» — дизайн-система «Город ночью» (23.08.2026)
   Токены, типографика, компоненты. Классы .row/.btn/.badge/.note
   сохранены — их использует app.js.
   ============================================================ */

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('vendor/fonts/manrope-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('vendor/fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #0B0F19;
  --panel: #141B2B;
  --card: #1C2538;
  --card2: #222D46;
  --border: rgba(255,255,255,0.07);
  --border-strong: rgba(255,255,255,0.13);
  --text: #F2F5FA;
  --muted: #93A0B8;
  --accent: #3ECF8E;
  --accent2: #1FA97A;
  --gold: #F5B942;
  --green: #2ECC71;
  --red: #E5484D;
  /* AI-акцент (02.09, «ИИ-орб»): фиолетово-синее свечение = «здесь ИИ» —
     отдельный от успеха/квестов/алертов цвет во всём UI */
  --ai: #8B7FFF;
  --ai-2: #5E4FD8;
  --grad: linear-gradient(135deg, #3ECF8E, #1FA97A);
  --grad-gold: linear-gradient(135deg, #F7C948, #E8A33D);
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-xxl: 24px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
  --shadow-md: 0 4px 18px rgba(0,0,0,.4);
  --shadow-lg: 0 -10px 40px rgba(0,0,0,.5);
  /* motion-токены: единые тайминги и кривые для всех переходов/анимаций */
  --t-fast: 120ms;
  --t-med: 240ms;
  --t-slow: 400ms;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-spring: cubic-bezier(.2,1.3,.3,1);
  --tr: var(--t-med) var(--ease);
}

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

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
}

.hidden { display: none !important; }

/* числа — моноширинные, не дёргаются при обновлении */
.num, .stat-value, .r-right, .prop-price b, .mkt-chg, .sector-chg { font-variant-numeric: tabular-nums; }

/* ============================================================
   ТОПБАР
   ============================================================ */
#topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px 8px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  z-index: 500;
}
#brand { display: flex; align-items: center; gap: 8px; flex: none; }
#brand svg { width: 26px; height: 26px; color: var(--gold); }
#brand .brand-logo { width: 27px; height: 27px; border-radius: 8px; display: block; flex: none; }

/* баланс — главный элемент шапки: крупно золотом, рента — мелкой подписью */
#stat-balance {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  align-items: flex-start;
}
#stat-balance .stat-value {
  font-size: 22px; font-weight: 800;
  letter-spacing: -.4px;
  color: var(--gold);
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#stat-balance .stat-value.pulse-up { animation: pulseUp .9s ease; }
#stat-balance .stat-value.pulse-down { animation: pulseDown .9s ease; }
.stat-sub { font-size: 10.5px; font-weight: 700; color: var(--green); white-space: nowrap; }
@keyframes pulseUp {
  0% { color: var(--green); text-shadow: 0 0 14px rgba(46,204,113,.55); }
  100% { color: var(--gold); text-shadow: none; }
}
@keyframes pulseDown {
  0% { color: var(--red); text-shadow: 0 0 14px rgba(229,72,77,.55); }
  100% { color: var(--gold); text-shadow: none; }
}

#top-chips { display: flex; flex-direction: column; gap: 5px; align-items: stretch; flex: none; }
.stat-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 4px 9px;
}
.stat-chip .ic { width: 14px; height: 14px; flex: none; }
.stat-chip-col { flex-direction: column; align-items: stretch; gap: 3px !important; }
.stat-chip .chip-val { font-size: 12px; font-weight: 800; white-space: nowrap; }
.stat-chip .chip-val.green { color: var(--green); }
.stat-chip .chip-val.blue { color: var(--accent); }
.stat-chip .chip-val.neon { color: #38c8ff; }
.chip-neon { font-size: 13px; line-height: 1; }
.xpbar {
  height: 2.5px; margin-top: 3px;
  background: rgba(255,255,255,.09);
  border-radius: 2px; overflow: hidden;
}
.xpbar-fill { height: 100%; background: var(--grad); border-radius: 2px; transition: width var(--t-slow) var(--ease); }

/* компактная шапка на узких экранах: город ужимается, баланс не теряется */
@media (max-width: 470px) {
  #topbar { gap: 7px; padding: 8px 10px 7px; }
  #brand .brand-logo { width: 24px; height: 24px; }
  #btn-city { padding: 6px 7px; gap: 4px; }
  .city-pin { font-size: 14px; }
  .city-name { max-width: 62px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #stat-balance .stat-value { font-size: 18px; }
  #top-chips { gap: 4px; }
  .stat-chip { padding: 3px 7px; }
  .stat-chip .chip-val { font-size: 11px; }
}
@media (max-width: 385px) {
  /* подпись ренты уходит, чтобы баланс не сжимался совсем */
  .stat-sub { display: none; }
}

/* баннер события дня */
#event-banner {
  padding: 7px 12px; font-size: 12px; font-weight: 600; text-align: center; z-index: 400;
  border-bottom: 1px solid var(--border);
}
#event-banner.up { background: rgba(16,185,129,.14); color: var(--green); }
#event-banner.down { background: rgba(239,68,68,.14); color: #ff8a8f; }
/* событие двора — ждёт решения игрока */
#event-banner.street { background: rgba(250,204,21,.12); color: #f5d76e; cursor: pointer; }
#event-banner.street .mini { margin-left: 6px; }
#event-banner.travel { background: rgba(59,130,246,.15); color: #93c5fd; }

/* лицей: оценки и цель «первый капитал» */
.marks-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.mark-chip {
  min-width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px; background: var(--card2); border: 1px solid var(--border); color: var(--text);
}
.mark-chip.m5 { color: var(--green); border-color: rgba(16,185,129,.4); }
.mark-chip.m4 { color: #7dd3fc; border-color: rgba(125,211,252,.35); }
.mark-chip.m3 { color: #f5d76e; border-color: rgba(250,204,21,.3); }
.mark-chip.m2 { color: #ff8a8f; border-color: rgba(239,68,68,.4); }
.goal-bar { height: 8px; border-radius: 6px; background: var(--card2); overflow: hidden; margin: 2px 0 8px; }
.goal-fill { height: 100%; border-radius: 6px; background: linear-gradient(90deg, #38c8ff, #7dd3fc); transition: width var(--t-slow) var(--ease); }
.bio-list { display: flex; flex-direction: column; }
.bio-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.bio-row:last-child { border-bottom: none; }
.bio-row .ic { color: var(--accent); }

/* ============================================================
   КАРТА
   ============================================================ */
#map { flex: 1; min-height: 0; z-index: 1; background: #0D1320; }
.leaflet-container { background: #0D1320; font-family: inherit; }

/* тёмная подложка = тайлы ESRI World Dark Gray от нашего прокси (29.08, CARTO стал требовать
   API-ключ и слал водяной знак). ESRI сероватая → тонировка под тёмно-синюю тему игры:
   sepia даёт тон, hue-rotate разворачивает его в синий; только базовый pane kvbase —
   слой подписей (tilePane) и игровые полигоны не затронуты */
.leaflet-kvbase-pane { filter: brightness(.45) sepia(.55) hue-rotate(194deg) saturate(2.2) contrast(1.2); }

/* панель «Вид» (24.08.2026): одна кнопка вместо ряда фильтров + кнопки 🏛.
   25.08: ровная сетка фильтров, иконки, свитч достопримечательностей, бейдж фильтра */
.map-view { box-shadow: var(--shadow-md); border-radius: 12px; }
.mv-btn {
  position: relative;
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px;
  background: rgba(11,15,25,.82);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  font-family: inherit; font-size: 12px; font-weight: 800;
  cursor: pointer;
  transition: all .15s;
}
.mv-btn:active { filter: brightness(1.25); }
.mv-btn.on { color: #F5B942; border-color: rgba(245,185,66,.5); }
.mv-btn svg { width: 14px; height: 14px; }
/* золотая точка: фильтр карты активен (не «Всё») */
.mv-dot { position: absolute; top: 5px; right: 5px; width: 8px; height: 8px;
  border-radius: 50%; background: #F5B942; box-shadow: 0 0 6px rgba(245,185,66,.8); }
.map-view-panel {
  margin-top: 6px;
  background: rgba(11,15,25,.88);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  padding: 8px;
  transform-origin: top left;
  animation: mvIn .16s ease;
}
@keyframes mvIn { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: scale(1); } }
/* ровная сетка: «Всё»+«Моё» / «Свободно»+«Выкупается» / «По бюджету» во всю ширину */
.mv-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 224px; }
.mv-sep { height: 1px; background: var(--border-strong); margin: 8px 2px; }
.mv-lm {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  color: var(--muted);
  font-family: inherit; font-size: 12px; font-weight: 700;
  padding: 7px 10px;
  cursor: pointer;
  transition: all .15s;
}
.mv-lm:active { background: var(--card2); }
.mv-lm.on { color: #F5B942; border-color: rgba(245,185,66,.45); background: rgba(245,185,66,.1); }
.mf-btn {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  background: var(--panel);
  color: var(--muted);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 7px 4px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
  box-shadow: var(--shadow-md);
  white-space: nowrap; overflow: hidden;
}
.mf-btn:nth-child(1), .mf-btn:nth-child(7) { grid-column: 1 / -1; }
.mf-btn svg { width: 13px; height: 13px; flex: none; }
.mf-btn.on {
  background: var(--grad);
  color: #0B0F19;
  border-color: transparent;
}
/* значимые места: маркер-бейдж с эмодзи и подписью (поверх зданий) */
.lm-wrap { background: transparent; border: none; }
.lm-marker { display: flex; flex-direction: column; align-items: center; width: 110px; }
.lm-badge {
  width: 34px; height: 34px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #263450, #0B0F19 72%);
  border: 2px solid #43D9C3;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; line-height: 1;
  box-shadow: 0 2px 10px rgba(0,0,0,.7);
  transition: border-color .2s, box-shadow .2s;
}
/* 25.08: тинты групп достопримечательностей (класс t-* на .lm-badge) —
   карта перестаёт быть одноцветной; статусные .mine/.free ниже перебивают */
.lm-badge.t-transport { border-color: #7DC4FF; }
.lm-badge.t-culture { border-color: #9B7BFF; }
.lm-badge.t-faith { border-color: #F5B942; }
.lm-badge.t-memory { border-color: #E5484D; }
.lm-badge.t-nature { border-color: #3DDC84; }
.lm-badge.t-water { border-color: #43D9C3; }
.lm-badge.t-admin { border-color: #8A94A6; }
.lm-badge.t-fun { border-color: #FF7AC3; }
.lm-badge.t-city { border-color: #FF8A3D; }
.lm-badge.t-land { border-color: #C9A87C; }
/* дальний зум: компактный бейдж без подписи (меньше DOM-нагрузки) */
.lm-mini .lm-name { display: none; }
.lm-mini .lm-badge { width: 26px; height: 26px; }
.lm-mini .lm-badge svg.ic { width: 15px; height: 15px; }
.lm-badge.mine { border-color: #F5B942; box-shadow: 0 0 12px rgba(245,185,66,.8); }
.lm-badge.free { border-color: #3DDC84; }
.lm-name {
  margin-top: 2px; max-width: 112px;
  color: #E2E9F4; font-size: 10px; line-height: 1.2; text-align: center;
  text-shadow: 0 1px 3px rgba(0,0,0,.95), 0 0 6px rgba(0,0,0,.8);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* зум и атрибуция */
.leaflet-bar {
  border: none !important;
  box-shadow: var(--shadow-md) !important;
  border-radius: 12px !important;
  overflow: hidden;
}
.leaflet-bar a {
  background: var(--panel) !important;
  color: var(--text) !important;
  border-bottom: 1px solid var(--border) !important;
  width: 34px; height: 34px; line-height: 34px;
  transition: background .15s;
}
.leaflet-bar a:last-child { border-bottom: none !important; }
.leaflet-bar a:hover { background: var(--card2) !important; color: var(--text) !important; }
.leaflet-control-attribution {
  background: rgba(11,15,25,.72) !important;
  color: #5D6B85 !important;
  font-size: 9px !important;
}
.leaflet-control-attribution a { color: #7D8CAB !important; }

/* попапы — тёмные карточки */
.leaflet-popup-content-wrapper {
  background: var(--panel);
  color: var(--text);
  border-radius: 16px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-strong);
}
.leaflet-popup-tip { background: var(--panel); box-shadow: none; }
.leaflet-popup-content { margin: 14px 16px; font-size: 14px; line-height: 1.45; }
.leaflet-container a.leaflet-popup-close-button { color: var(--muted); font-size: 18px; padding: 6px 8px 0 0; }
.leaflet-container a.leaflet-popup-close-button:hover { color: var(--text); }

.prop-popup { font-size: 14px; line-height: 1.45; max-height: 340px; overflow-y: auto; scrollbar-width: thin; }
.prop-popup .prop-name { font-weight: 800; font-size: 14.5px; letter-spacing: -.2px; }
.pop-lm-icon .ic { vertical-align: -2px; }
.prop-popup .prop-type { color: var(--muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; margin-top: 3px; }
.prop-popup .prop-price { margin: 8px 0; }
.prop-popup .prop-price b { color: var(--gold); }
.prop-popup .prop-owner { font-size: 12px; color: var(--muted); margin: 3px 0; }
.prop-popup .prop-owner b { color: var(--text); }
.prop-popup button:not(.org-btn) { margin-top: 8px; padding: 11px; font-size: 13.5px; border-radius: 12px; }
.prop-popup button:not(.org-btn):disabled { background: var(--card2); color: #5D6B85; box-shadow: none; }

/* организации внутри здания */
.prop-popup .org-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 12px;
}
.prop-popup .org-row:last-of-type { border-bottom: none; }
.prop-popup .org-info { display: flex; flex-direction: column; min-width: 0; }
.prop-popup .org-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prop-popup .org-sub { color: var(--muted); font-size: 11px; }
.prop-popup .org-btn {
  flex: 0 0 auto; width: auto; margin: 0; padding: 6px 10px; font-size: 12px; border-radius: 8px;
}

/* ============================================================
   НИЖНЕЕ МЕНЮ
   ============================================================ */
#bottombar {
  display: flex;
  flex-wrap: wrap;
  background: var(--panel);
  border-top: 1px solid var(--border);
  padding: 7px 6px calc(7px + env(safe-area-inset-bottom));
  z-index: 500;
  /* разделов 4 (+скрытый Админ) — на узких экранах ряды переносятся (регламент: без overflow-x) */
}
.action {
  flex: 1 0 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 2px 4px;
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  border-radius: 12px;
  transition: color var(--tr), background var(--tr);
  min-width: 0;
}
.action .ic { width: 21px; height: 21px; flex: none; }
.action-text { font-size: 10.5px; font-weight: 700; letter-spacing: .2px; color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.action:active { background: var(--card2); color: var(--text); }
.action.active { color: var(--accent); }

/* главное действие «На смену» — градиентная кнопка */
#btn-work {
  background: var(--grad);
  color: #fff;
  box-shadow: 0 3px 12px rgba(31,169,122,.38);
  border-radius: 14px;
  padding: 6px 2px;
}
#btn-career .action-text { color: #fff; font-weight: 800; }
#btn-career .ic { color: #fff; }
#btn-career:active { background: var(--grad); filter: brightness(1.1); }
#btn-career .action-text.on-shift { font-variant-numeric: tabular-nums; }

/* колокольчик ленты новостей в топбаре */
.top-icon-btn {
  position: relative;
  flex: none;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
}
.top-icon-btn:active { background: var(--card2); color: var(--text); }
.top-icon-btn .ic { width: 18px; height: 18px; }

/* переключатель города в топбаре (мульти-город) */
.top-city-btn {
  flex: none;
  max-width: 130px;
  height: 34px;
  display: flex; align-items: center; gap: 5px;
  padding: 0 9px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--muted);
  cursor: pointer;
  overflow: hidden;
}
.top-city-btn:active { background: var(--card2); color: var(--text); }
.top-city-btn .city-pin { font-size: 14px; flex: none; }
.top-city-btn .city-name {
  font-size: 12px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--text);
}
/* шит выбора города */
.city-list { display: flex; flex-direction: column; gap: 8px; }
.city-row {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  width: 100%;
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}
.city-row.on { border-color: var(--gold); background: rgba(245,185,66,.07); }
.city-row-name { font-size: 15px; font-weight: 800; }
.city-row-name .city-cur { font-size: 11px; font-weight: 700; color: var(--gold); margin-left: 4px; }
.city-row-sub { font-size: 11.5px; color: var(--muted); line-height: 1.35; }

.news-badge {
  position: absolute; top: -4px; right: -5px; min-width: 15px; height: 15px;
  padding: 0 3px; border-radius: 8px;
  background: var(--red); color: #fff; font-size: 9px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.45);
  pointer-events: none;
}

/* ============================================================
   ТОСТЫ
   ============================================================ */
#bonus-toast, .toast {
  position: fixed; left: 50%; top: calc(58px + env(safe-area-inset-top));
  transform: translateX(-50%);
  background: #0D1424;
  color: var(--text);
  border: 1px solid var(--border-strong);
  font-weight: 700; font-size: 12.5px;
  padding: 10px 16px;
  border-radius: 14px;
  z-index: 950;
  box-shadow: var(--shadow-md);
  max-width: 88vw;
  text-align: center;
  animation: toastIn .25s ease, toastPulse 1.6s ease-in-out .35s 2;
  transition: opacity .25s;
}
/* 25.08: системные уведомления пульсируют золотым свечением (категория «события») */
@keyframes toastPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 185, 66, 0), var(--shadow-md); }
  50% { box-shadow: 0 0 18px rgba(245, 185, 66, .38), var(--shadow-md); }
}
#bonus-toast { background: var(--grad-gold); color: #241a06; border-color: rgba(255,255,255,.2); }
.toast.success { border-color: rgba(46,204,113,.45); }
.toast.error { border-color: rgba(229,72,77,.5); color: #FF9BA0; }
/* 08.09: SVG-иконка в тосте — отдельный узел (текст больше не содержит разметки) */
.toast .toast-ico { display: inline-flex; align-items: center; vertical-align: -3px; margin-right: 7px; }
.toast .toast-ico .ic { width: 15px; height: 15px; }
@keyframes toastIn {
  from { transform: translate(-50%, -8px); opacity: 0; }
  to { transform: translate(-50%, 0); opacity: 1; }
}

/* ============================================================
   ШИТ (bottom sheet)
   ============================================================ */
#sheet { position: fixed; inset: 0; z-index: 800; }
#sheet-backdrop {
  position: absolute; inset: 0;
  background: rgba(5,8,14,.62);
  backdrop-filter: blur(2px);
  animation: fadeIn .22s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
#sheet-body {
  position: absolute; left: 0; right: 0; bottom: 0;
  max-height: 84%;
  background: var(--panel);
  border-radius: var(--r-xxl) var(--r-xxl) 0 0;
  border-top: 1px solid var(--border-strong);
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; overflow: hidden;
  animation: sheetUp .3s cubic-bezier(.22,.9,.3,1);
}
@keyframes sheetUp {
  from { transform: translateY(48px); opacity: .35; }
  to { transform: translateY(0); opacity: 1; }
}
#sheet-handle {
  width: 40px; height: 4px; border-radius: 2px;
  background: rgba(255,255,255,.16);
  margin: 9px auto 3px; flex: none;
}
#sheet-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 16px 12px; flex: none;
}
#sheet-title { font-weight: 800; font-size: 16.5px; letter-spacing: -.2px; }
#sheet-close {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--card2); border: none;
  color: var(--muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
#sheet-close:hover { background: var(--card); color: var(--text); }
#sheet-close svg { width: 13px; height: 13px; }
#sheet-content {
  padding: 4px 16px calc(20px + env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

/* ============================================================
   КАРТОЧКИ / СТРОКИ
   ============================================================ */
.row {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  margin-bottom: 8px;
  transition: background .15s, border-color .15s;
}
.row:active { background: var(--card2); }
.row .r-left { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.row .r-title { font-weight: 700; font-size: 14.5px; letter-spacing: -.1px; }
.row .r-sub { font-size: 12px; color: var(--muted); line-height: 1.5; }
.row .r-sub b { color: var(--text); }
.row .r-right { text-align: right; font-weight: 700; white-space: nowrap; font-size: 13.5px; }

/* единый вид чипов-бейджей (29.08): pill 999px, один размер; .chip в казино — кнопка, не бейдж */
.badge {
  font-size: 10.5px; font-weight: 800; padding: 3px 9px; border-radius: 999px;
  background: rgba(62,207,142,.14); color: var(--accent);
  border: 1px solid rgba(62,207,142,.35);
}
.badge-amber {
  background: rgba(245,185,66,.14); color: #F5B942;
  border-color: rgba(245,185,66,.4);
}
.badge-gray {
  background: rgba(147,160,184,.12); color: var(--muted);
  border-color: rgba(147,160,184,.3);
}
.badge-chip {
  font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--border-strong); white-space: nowrap;
}

/* заголовки секций */
h3 {
  font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .8px;
  color: var(--muted);
  margin: 18px 0 8px;
  display: flex; align-items: center; gap: 6px;
}
h3:first-child { margin-top: 8px; }

.note { font-size: 12.5px; color: var(--muted); line-height: 1.55; margin: 8px 0; }
.note b { color: var(--text); }
.sep { height: 1px; background: var(--border); margin: 14px 0; }

/* ============================================================
   СПРАВКА (вкладка «Справка», help.js — аккордеон)
   ============================================================ */
.help-item {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  margin-bottom: 8px;
  overflow: hidden;
}
.help-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  background: none;
  border: none;
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  letter-spacing: -.1px;
  cursor: pointer;
  transition: background .15s;
}
.help-q:active { background: var(--card2); }
.help-q-text { flex: 1; min-width: 0; }
.help-arrow {
  flex: none;
  color: var(--muted);
  font-size: 11px;
  transition: transform .15s;
}
.help-item.open .help-arrow { transform: rotate(180deg); }
.help-a {
  display: none;
  padding: 0 14px 13px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text);
  line-height: 1.6;
}
.help-item.open .help-a { display: block; }
.help-a b { color: var(--text); }
.help-a ul { margin: 6px 0; padding-left: 18px; }
.help-a li { margin: 4px 0; }

/* ============================================================
   КНОПКИ
   ============================================================ */
.btn {
  display: block; width: 100%;
  padding: 13px;
  border: none;
  border-radius: 14px;
  background: var(--grad);
  color: #fff;
  font-family: inherit;
  font-weight: 800; font-size: 14.5px;
  cursor: pointer;
  margin-top: 6px;
  box-shadow: 0 3px 12px rgba(31,169,122,.32);
  transition: transform .12s ease, filter .15s ease;
}
.btn:active { transform: scale(.985); filter: brightness(1.12); }
.btn.ghost { background: var(--card); color: var(--text); box-shadow: none; border: 1px solid var(--border-strong); }
.btn.danger { background: var(--red); box-shadow: 0 3px 12px rgba(229,72,77,.3); }
.btn:disabled { background: var(--card2); color: #5D6B85; box-shadow: none; transform: none; }

button.mini {
  display: inline-flex; align-items: center; gap: 5px;
  margin: 2px 0; padding: 7px 11px;
  border: none; border-radius: 10px;
  background: var(--card2);
  color: var(--text);
  font-family: inherit;
  font-size: 11.5px; font-weight: 700;
  cursor: pointer;
  transition: background .15s;
}
button.mini:active { background: var(--accent); }
button.mini:disabled { opacity: .5; }
button.mini.danger { background: rgba(229,72,77,.14); color: #ff8080; }
button.mini.danger:active { background: rgba(229,72,77,.3); color: #fff; }

/* ============================================================
   ИНПУТЫ / СЕЛЕКТЫ / ПЕРЕКЛЮЧАТЕЛИ
   ============================================================ */
#sheet-content input, .row input {
  background: #0D1424;
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  padding: 11px 13px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  min-width: 0;
  transition: border-color .15s, box-shadow .15s;
}
#sheet-content input:focus, .row input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(62,207,142,.16);
}
#sheet-content select {
  width: 100%;
  background: #0D1424;
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  padding: 11px 13px;
  font-size: 14px;
  font-family: inherit;
  margin: 4px 0;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2393A0B8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

/* переключатель (switch) */
.switch {
  position: relative;
  width: 46px; height: 27px;
  border-radius: 14px;
  background: var(--card2);
  border: 1px solid var(--border-strong);
  cursor: pointer;
  padding: 0;
  transition: background .2s ease;
  flex: none;
}
.switch::after {
  content: '';
  position: absolute; top: 2px; left: 2px;
  width: 21px; height: 21px;
  border-radius: 50%;
  background: #E8EDF7;
  transition: transform .2s ease;
}
.switch.on { background: var(--green); border-color: rgba(46,204,113,.5); }
.switch.on::after { transform: translateX(19px); background: #fff; }

/* ============================================================
   БИРЖА
   ============================================================ */
.index-row { background: var(--card); border: 1px solid var(--border); }
/* подвкладки биржи (Рынок/Портфель) липнут под вкладками раздела */
.sub-tabs { position: sticky; top: 34px; z-index: 3; display: flex; flex-wrap: wrap; gap: 4px;
  background: var(--bg); padding: 6px 0 8px; margin: 4px -12px 0; padding-left: 12px; padding-right: 12px; }
.mkt-tools { margin: 4px 0 8px; }
.mkt-tools .input { width: 100%; }
.mkt-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.mkt-chips .chip { flex: none; min-width: 0; padding: 5px 12px; border-radius: 999px; }
.mkt-chips .chip.on { background: var(--grad); color: #0B0F19; border-color: transparent; }
.sector-head {
  display: flex; align-items: center; gap: 8px;
  margin-top: 10px; padding: 8px 12px;
  background: var(--card2);
  border-radius: 10px;
  font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .5px;
}
.sector-icon { font-size: 14px; }
.sector-name { flex: 1; }
.sector-chg { font-weight: 800; }
.mkt-row { align-items: stretch; cursor: pointer; }
.mkt-row:active { background: var(--card2); }
.mkt-row.mkt-owned { border-left: 3px solid rgba(245,185,66,.75); }
.mkt-row .r-title { font-size: 14px; }
/* 01.09: правая часть строки — спарк + быстрые кнопки ±1 столбиком */
.mkt-row .r-right { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.mkt-quick { display: flex; gap: 4px; }
.qbtn { padding: 3px 10px; font-size: 11px; border-radius: 8px; }
.mkt-cash { font-size: 11.5px; color: var(--muted); margin: -2px 0 6px; }
.mkt-buyout { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 11px; color: var(--muted); }
.mkt-bar { flex: 0 0 74px; height: 5px; background: rgba(255,255,255,.1); border-radius: 3px; overflow: hidden; }
.mkt-bar-fill { height: 100%; background: var(--grad); border-radius: 3px; }
.trade-panel {
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  padding: 10px 12px; display: flex; flex-direction: column; gap: 8px;
}
.trade-panel .bet-input { width: 100%; }
.ev-row { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; }
.ev-txt { color: var(--text); }
.spark { display: block; margin: 2px 0 0 auto; }

/* ---------- Биржа v3 (01.09): Обзор/Рынок/Портфель ---------- */
/* шапка биржи: события и справка — компактные сворачиваемые строки */
.ev-det { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; margin: 6px 0; font-size: 12px; }
.ev-det summary { display: flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; font-weight: 700; color: var(--text); }
.ev-det summary::-webkit-details-marker { display: none; }
.ev-det .acc-chev { margin-left: auto; color: var(--muted); }
.ev-det[open] .acc-chev { transform: rotate(90deg); }
.ev-det .ev-rows { margin-top: 6px; }
.ev-det .note { margin: 6px 0 0; }
.ev-det.muted-line { background: none; border: none; padding: 2px 0; color: var(--muted); font-size: 11.5px; font-weight: 600; }
/* 10.09: раскрывающийся навык (тап по навыку — «Навыки» игрока и карточка бойца):
   имя+уровень+мини-бар в шапке, детали (влияет/прокачка) под раскрытием */
.sk-det > summary { flex-wrap: wrap; font-weight: 600; }
.sk-det .sk-name { white-space: nowrap; }
.sk-det .sk-bar { flex: 1 1 100%; margin: 3px 0 0; }
.sk-det .sk-body { margin-top: 6px; display: grid; gap: 3px; }
.sk-det .sk-body .r-sub { margin: 0; }
/* карточка индекса в «Обзоре» */
.mkt-idx-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 10px 12px; margin: 6px 0 10px; }
.mkt-chart .spark { width: 100%; height: auto; margin: 4px 0 0; }
/* плитки секторов: тап = рынок с фильтром по сектору */
.mkt-sectors { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 6px 0 4px; }
.mkt-sector { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 8px 10px; cursor: pointer; }
.mkt-sector:active { background: var(--card2); }
.mkt-sector .s-name { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }
.mkt-sector .s-chg { font-size: 16px; font-weight: 800; margin-top: 3px; }
.mkt-sector .s-cnt { font-size: 10.5px; color: var(--muted); margin-top: 1px; }
/* сводка «Капитал на бирже» в портфеле */
.alloc-box { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 8px 12px; margin: 6px 0 10px; }
.alloc { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 12px; }
.alloc .a-name { flex: 0 0 84px; color: var(--muted); }
.alloc .a-bar { flex: 1; height: 6px; background: rgba(255,255,255,.08); border-radius: 3px; overflow: hidden; }
.alloc .a-fill { display: block; height: 100%; border-radius: 3px; }
.alloc .a-val { flex: 0 0 auto; font-weight: 700; text-align: right; font-size: 11.5px; }

/* Финтех-UI биржи (Этап 1: интерактивный график, скраббинг, калькулятор, облигации) */
.mkt-row-main { display: flex; align-items: center; gap: 9px; }
.mkt-row-icon {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 9px;
  font-size: 16px; flex-shrink: 0;
}
.mkt-row-info { display: flex; flex-direction: column; gap: 2px; }
.mkt-chart-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  padding: 10px 12px; margin: 6px 0 10px;
}
.mkt-chart-live-header {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 4px;
}
.mkt-chart-live-price { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.mkt-chart-live-meta { font-size: 12px; font-weight: 700; }
.mkt-interactive-chart {
  position: relative; width: 100%; height: 130px;
  cursor: crosshair; touch-action: none; user-select: none; -webkit-user-select: none;
}
.mkt-svg-chart { width: 100%; height: 100%; display: block; overflow: visible; }
.mkt-scrub-hint { font-size: 10.5px; text-align: center; margin-top: 4px; }
.mkt-status-banner {
  border-radius: 10px; padding: 7px 11px; margin: 6px 0;
  font-size: 11.5px; font-weight: 600; display: flex; align-items: center; gap: 6px;
}
.mkt-status-banner.down { background: rgba(239,68,68,.12); color: #fca5a5; border: 1px solid rgba(239,68,68,.25); }
.mkt-status-banner.up { background: rgba(16,185,129,.12); color: #6ee7b7; border: 1px solid rgba(16,185,129,.25); }
.mkt-status-banner.muted { background: var(--card2); color: var(--muted); border: 1px solid var(--border); }
.mkt-deal-calc-wrap { margin-top: 2px; }
.mkt-deal-calc {
  background: rgba(0,0,0,.2); border: 1px dashed var(--border); border-radius: 10px;
  padding: 8px 10px; font-size: 12px; display: flex; flex-direction: column; gap: 5px;
}
.mkt-calc-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mkt-calc-tag {
  font-size: 10px; font-weight: 800; text-transform: uppercase;
  padding: 2px 6px; border-radius: 5px; letter-spacing: .3px;
}
.mkt-calc-tag.buy { background: rgba(58,160,255,.2); color: #93c5fd; }
.mkt-calc-tag.sell { background: rgba(16,185,129,.2); color: #86efac; }
.mkt-calc-tag.short { background: rgba(239,68,68,.2); color: #fca5a5; }
.mkt-calc-sub { font-size: 11px; line-height: 1.35; margin-top: 3px; }
.mkt-order-row { background: var(--card); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 6px; padding: 8px 10px; }
.mkt-cancel-btn { background: rgba(239,68,68,.15); color: #fca5a5; border: 1px solid rgba(239,68,68,.3); font-size: 10.5px; cursor: pointer; }
.mkt-short-row { background: var(--card); border: 1px solid rgba(239,68,68,.2); border-radius: 10px; margin-bottom: 6px; padding: 8px 10px; cursor: pointer; }
.mkt-my-short-banner { background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.25); border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; }
.mkt-deal-row { background: var(--card); border: 1px solid var(--border); border-radius: 8px; margin-bottom: 4px; padding: 7px 10px; font-size: 11.5px; }
.mkt-realized-bar { display: flex; justify-content: space-between; align-items: center; background: rgba(255,255,255,.04); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; margin-bottom: 8px; font-size: 12px; font-weight: 600; }
.bond-track { margin-top: 6px; }
.bond-bar { width: 100%; height: 5px; background: rgba(255,255,255,.08); border-radius: 3px; overflow: hidden; }
.bond-fill { height: 100%; background: linear-gradient(90deg, #3aa0ff, #10b981); border-radius: 3px; }
.bond-timer { font-size: 10.5px; margin-top: 3px; font-weight: 600; }
.mkt-sentiment-box {
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  padding: 10px 12px; margin: 6px 0 10px;
}
.mkt-sentiment-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 7px; font-size: 12px; font-weight: 700; }
.mkt-sentiment-track { height: 7px; display: flex; border-radius: 4px; overflow: hidden; background: rgba(255,255,255,.08); }
.mkt-sent-fill.up { background: var(--green); }
.mkt-sent-fill.down { background: var(--danger); }
.mkt-sentiment-sub { display: flex; justify-content: space-between; font-size: 11px; margin-top: 5px; font-weight: 600; }

/* ============================================================
   ЛИДЕРБОРД / ТОП
   ============================================================ */
/* 28.08: wrap вместо скрытого горизонтального скролла — скролл-контейнер со скрытым
   скроллбаром на мобильных неочевиден (вкладки обрезались и «прятались»), а sticky
   на элементе с overflow-x в части WebKit не работает (вкладки уезжали из вида) */
.top-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.top-tab {
  flex: 1 0 auto; padding: 8px 10px;
  border: 1px solid var(--border-strong); border-radius: 10px; cursor: pointer;
  background: var(--card); color: var(--muted);
  font-family: inherit; font-weight: 700; font-size: 12px;
  white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
}
.top-tab.active { background: var(--grad); color: #fff; border-color: transparent; }
/* на узких экранах вкладки ужимаются, чтобы ряд помещался без переноса (до ~5 вкладок) */
@media (max-width: 420px) {
  .top-tab { padding: 7px 6px; font-size: 11px; }
  .top-tab svg.ic { width: 13px; height: 13px; }
}
/* Торговля 02.09 (таб-сплит): подпись действия в строке склада + точка активного контракта */
.kv-lbl { flex: 0 0 auto; font-size: 10px; text-transform: uppercase; letter-spacing: .3px; color: var(--muted); }
.kv-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #e5484d; margin-right: 4px; vertical-align: 1px; }

.rank-1 { color: #F5C542; }
.rank-2 { color: #C9D4E6; }
.rank-3 { color: #D99A5B; }

/* ============================================================
   ПРОФИЛЬ / АВАТАРЫ
   ============================================================ */
.profile-head { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.avatar {
  width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0; object-fit: cover;
  border: 2px solid var(--border-strong);
  box-shadow: var(--shadow-sm);
}
.avatar-sm { width: 34px; height: 34px; border-width: 1px; }
.avatar-emoji, .avatar-initial { display: flex; align-items: center; justify-content: center; font-size: 30px; }
.avatar-sm.avatar-emoji, .avatar-sm.avatar-initial { font-size: 17px; }
.avatar-initial { color: #fff; font-weight: 800; }
.profile-head-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.profile-name { font-weight: 800; font-size: 17px; letter-spacing: -.2px; word-break: break-word; }
.profile-title { font-size: 12.5px; color: var(--gold); font-weight: 700; }
.profile-meta { font-size: 12px; color: var(--muted); }
.profile-bio { font-size: 13px; color: var(--text); margin-top: 4px; }
.profile-status { font-size: 12px; color: var(--muted); font-weight: 600; }
/* профиль 13.09: бейдж уровня + XP-прогресс в шапке профиля */
.profile-lvl { display: flex; align-items: center; gap: 8px; margin-top: 1px; }
.profile-lvl .lvl-badge {
  font-size: 11.5px; font-weight: 800; color: var(--gold); white-space: nowrap;
  padding: 2px 8px; border-radius: 10px; background: rgba(245, 185, 66, .12);
}
.profile-lvl .profile-xp { flex: 1 1 60px; min-width: 48px; max-width: 140px; margin-top: 0; height: 4px; }
.profile-lvl .muted { font-size: 11px; white-space: nowrap; }

/* ---- магазин статуса: рамки аватара / цвет ника / карточки ---- */
.pf-frame { position: relative; z-index: 0; }
/* обёртка аватара с рамкой: фото-аватары (<img>) псевдоэлементы не рисуют — рамка на span (28.08) */
.avatar-box { display: inline-block; position: relative; z-index: 0; line-height: 0; border-radius: 50%; }
.pf-frame::after {
  content: ''; position: absolute; inset: -3px; border-radius: 50%; z-index: -1;
  border: 2.5px solid var(--gold); pointer-events: none;
}
.pf-frame-gold::after { border-color: #F5B942; box-shadow: 0 0 8px rgba(245, 185, 66, .55); }
.pf-frame-neon::after { border-color: #00E5FF; box-shadow: 0 0 10px rgba(0, 229, 255, .6); }
.pf-frame-diamond::after {
  border: 2px solid #B8E4FF;
  box-shadow: 0 0 4px rgba(184, 228, 255, .8), inset 0 0 0 2px rgba(11, 15, 25, .9), 0 0 10px rgba(184, 228, 255, .35);
}
.pf-frame-silver::after { border-color: #E8EDF7; box-shadow: 0 0 7px rgba(200, 214, 235, .5); }
.pf-frame-ruby::after { border-color: #FF5C6E; box-shadow: 0 0 9px rgba(255, 60, 90, .6); }
.pf-frame-emerald::after { border-color: #3FE58C; box-shadow: 0 0 9px rgba(62, 229, 140, .55); }
.pf-frame-sapphire::after { border-color: #5FA8FF; box-shadow: 0 0 9px rgba(93, 168, 255, .6); }
.pf-frame-amethyst::after { border-color: #B48CFF; box-shadow: 0 0 9px rgba(160, 120, 255, .55); }
.pf-frame-rose::after { border-color: #FF8FC4; box-shadow: 0 0 9px rgba(255, 143, 196, .55); }
.pf-frame-ice::after { border-color: #9BEBFF; box-shadow: 0 0 10px rgba(155, 235, 255, .6), inset 0 0 3px rgba(155, 235, 255, .3); }
.pf-frame-sunset::after {
  border: 2.5px solid transparent;
  background: linear-gradient(#101626, #101626) padding-box, linear-gradient(120deg, #FFC46B, #FF8A3D 55%, #E5484D) border-box;
  box-shadow: 0 0 10px rgba(255, 138, 61, .5);
}
.pf-frame-obsidian::after { border-color: #3A3F4B; box-shadow: 0 0 8px rgba(229, 72, 77, .5), 0 0 2px rgba(229, 72, 77, .8); border-width: 2.5px; }
/* рамки-паттерны (02.09): форма обводки, а не только цвет */
.pf-frame-duo::after {
  border: 3px solid #F5B942;
  box-shadow: 0 0 0 2px #101626, 0 0 0 3.5px #E8EDF7, 0 0 10px rgba(245, 185, 66, .45);
}
.pf-frame-dash::after { border: 2px dashed #00E5FF; box-shadow: 0 0 10px rgba(0, 229, 255, .5); }
.pf-frame-flame::after {
  border: 2.5px solid transparent;
  background: linear-gradient(#101626, #101626) padding-box, linear-gradient(120deg, #FFC46B, #FF5C6E 50%, #FF8A3D) border-box;
  box-shadow: 0 0 12px rgba(255, 92, 110, .5);
  animation: frameFlame 2.6s ease-in-out infinite;
}
@keyframes frameFlame {
  0%, 100% { box-shadow: 0 0 12px rgba(255, 92, 110, .5); }
  50% { box-shadow: 0 0 6px rgba(255, 140, 66, .35), 0 0 18px rgba(255, 92, 110, .75); }
}
.pf-frame-glitch::after {
  border: 2.5px solid #B8C2D8;
  box-shadow: -2px 0 0 rgba(255, 45, 85, .75), 2px 0 0 rgba(0, 229, 255, .75), 0 0 10px rgba(255, 45, 85, .35);
  animation: frameGlitch 3.2s steps(2, end) infinite;
}
@keyframes frameGlitch {
  0%, 86%, 100% { box-shadow: -2px 0 0 rgba(255, 45, 85, .75), 2px 0 0 rgba(0, 229, 255, .75), 0 0 10px rgba(255, 45, 85, .35); }
  88% { box-shadow: -3px 0 0 rgba(0, 229, 255, .8), 3px 0 0 rgba(255, 45, 85, .8), 0 0 14px rgba(255, 45, 85, .5); }
  94% { box-shadow: 2px 0 0 rgba(255, 45, 85, .8), -2px 0 0 rgba(0, 229, 255, .8), 0 0 10px rgba(0, 229, 255, .4); }
}
.pf-frame-cosmic::after {
  border: 2.5px solid transparent;
  background: linear-gradient(#101626, #101626) padding-box, linear-gradient(120deg, #9B7BFF, #00E5FF 40%, #FF7AC3 70%, #F5B942) border-box;
  box-shadow: 0 0 14px rgba(155, 123, 255, .55);
  animation: frameCosmic 6s ease-in-out infinite;
}
@keyframes frameCosmic { 0%, 100% { filter: hue-rotate(0deg); } 50% { filter: hue-rotate(40deg); } }
.nick-rainbow {
  background: linear-gradient(90deg, #E5484D, #FF8A3D, #F5B942, #2ECC71, #3ECF8E, #9B7BFF, #FF7AC3);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: nick-hue 6s linear infinite;
}
@keyframes nick-hue { to { filter: hue-rotate(360deg); } }
/* эффекты ника (02.09): работают везде, где сидит nickCss — чат, профиль, топы, бутик */
.nick-grad {
  background: linear-gradient(90deg, #2ECC71, #4DA3FF);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.nick-glow { color: #7DF9FF; text-shadow: 0 0 6px rgba(0,229,255,.9), 0 0 14px rgba(0,229,255,.45); }
.nick-outline {
  color: #F7C948; -webkit-text-stroke: 1px rgba(11,15,25,.85);
  text-shadow: 0 0 8px rgba(245,185,66,.35);
}
.nick-cursive {
  font-style: italic; font-weight: 700; letter-spacing: .3px;
  background: linear-gradient(90deg, #E8EDF7, #9AA7BD);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.muted { color: var(--muted); }
.shop-item .r-right { display: flex; flex-direction: column; gap: 4px; align-items: stretch; }
.shop-item .r-right .mini { margin: 0; white-space: nowrap; }
/* монета «Неоны»: неоновый круг/точка (внутриигровая премиум-валюта, 1 ● = 1 ⭐) */
.cur-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  vertical-align: -1px; margin: 0 2px;
  background: radial-gradient(circle at 35% 35%, #8ff7ff, #00E5FF 55%, #007a8a);
  box-shadow: 0 0 6px rgba(0, 229, 255, .9), 0 0 12px rgba(0, 229, 255, .45);
}

.badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }

.seg { display: flex; gap: 6px; }
.seg-btn {
  flex: 1; padding: 10px;
  border: 1px solid var(--border-strong); border-radius: 12px;
  background: var(--card); color: var(--text);
  font-family: inherit; font-weight: 700; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.seg-btn.on { background: rgba(62,207,142,.16); border-color: var(--accent); color: var(--accent); }

/* уведомления v2: категория с выбором канала (Выкл/Push/TG/Оба) */
.notif-cat {
  padding: 10px 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  margin-bottom: 8px;
}
.notif-cat .r-title { font-weight: 700; font-size: 13.5px; letter-spacing: -.1px; display: flex; align-items: center; gap: 8px; }
.seg-ch { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 9px; }
.seg-ch .seg-btn { flex: none; padding: 8px 0; font-size: 12px; border-radius: 10px; }
.quiet-row .r-left { flex-direction: row; align-items: center; flex-wrap: wrap; }
.quiet-sel {
  background: var(--card2); color: var(--text); border: 1px solid var(--border-strong);
  border-radius: 10px; padding: 6px 8px; font-family: inherit; font-weight: 700; font-size: 13px;
}

/* промо-плашка установки PWA (низ экрана, поверх карты) */
#pwa-promo {
  position: fixed; left: 12px; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom));
  z-index: 900;
  background: var(--card2);
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  padding: 12px 14px;
  display: flex; align-items: center; gap: 12px;
  box-shadow: 0 8px 28px rgba(0,0,0,.45);
  animation: pwaPromoIn .25s ease;
}
#pwa-promo.hidden { display: none; }
.pwa-promo-icon { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 10px; }
.pwa-promo-body { flex: 1 1 auto; min-width: 0; }
.pwa-promo-title { font-weight: 700; font-size: 13.5px; }
.pwa-promo-sub { font-size: 11.5px; color: var(--muted); line-height: 1.45; }
.pwa-promo-actions { display: flex; gap: 6px; flex: 0 0 auto; }
.pwa-promo-actions .btn, .pwa-promo-actions .mini { white-space: nowrap; }
@keyframes pwaPromoIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* свотчи палитры бренда компании */
.c-color { flex: 0 0 auto; width: 34px; height: 34px; padding: 0; border-radius: 50%; border: 2px solid transparent; }
.c-color.on { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(62,207,142,.25); }

.emoji-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.emoji-pick {
  font-size: 22px; padding: 6px 0;
  border: 1px solid transparent; border-radius: 10px;
  background: var(--card); cursor: pointer;
}
.emoji-pick.on { border-color: var(--accent); background: var(--card2); }

/* ============================================================
   СКЕЛЕТОНЫ (загрузка шитов)
   ============================================================ */
.skel {
  background: linear-gradient(90deg, var(--card) 25%, var(--card2) 50%, var(--card) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite linear;
  border-radius: 8px;
}
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* пустое состояние: иконка-плитка + заголовок + подпись + кнопка действия */
.empty-state {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 28px 16px;
  background: var(--card);
  border: 1px dashed var(--border-strong);
  border-radius: 16px;
  text-align: center;
}
.empty-state .es-icon {
  width: 46px; height: 46px; border-radius: 14px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--card2); border: 1px solid var(--border);
  color: var(--accent);
}
.empty-state .es-icon svg, .empty-state .es-icon .ic { width: 24px; height: 24px; }
.empty-state .es-title { font-weight: 800; font-size: 14.5px; }
.empty-state .es-sub { font-size: 12px; color: var(--muted); max-width: 280px; line-height: 1.5; }
.empty-state .es-btn { margin-top: 4px; }

/* ============================================================
   WEB-LOGIN (браузер)
   ============================================================ */
#offline-screen {
  position: fixed; inset: 0; z-index: 1001;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(900px 480px at 50% -12%, #18233C 0%, rgba(11,15,25,0) 60%),
    var(--bg);
  padding: 24px;
}
.offline-ico { width: 64px; height: 64px; margin: 0 auto 10px; color: var(--muted); }
.offline-ico .ic { width: 64px; height: 64px; }
#web-login {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(900px 480px at 50% -12%, #18233C 0%, rgba(11,15,25,0) 60%),
    var(--bg);
  padding: 24px;
}
.web-login-card {
  width: 100%; max-width: 360px; text-align: center;
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-xxl);
  padding: 30px 24px 26px;
  box-shadow: var(--shadow-md);
}
.web-login-logo svg { width: 62px; height: 62px; color: var(--gold); }
.web-login-logo-img { display: block; width: 168px; max-width: 72%; height: auto; margin: 2px auto 4px; border-radius: 16px; box-shadow: var(--shadow-md); }
.web-login-title { font-size: 26px; font-weight: 800; letter-spacing: -.5px; margin: 10px 0 4px; }
.web-login-sub { color: var(--muted); font-size: 13.5px; margin-bottom: 20px; }
.web-login-code-label { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .6px; margin-top: 16px; font-weight: 700; }
.web-login-code {
  font-size: 32px; font-weight: 800; letter-spacing: 8px;
  color: var(--gold); margin: 6px 0 14px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.web-login-status { color: var(--muted); font-size: 12.5px; margin-top: 14px; line-height: 1.5; }
#web-login-steps .btn { text-decoration: none; margin-top: 12px; }
.web-login-widget-title { color: var(--muted); font-size: 11.5px; text-align: center; margin: 14px 0 8px; text-transform: uppercase; letter-spacing: .5px; }
.web-login-tg-note { color: #e8b04b; font-size: 12px; text-align: center; margin-top: 10px; line-height: 1.5; }
#web-login-widget { display: flex; justify-content: center; margin-bottom: 6px; }
.web-login-divider { color: var(--muted); font-size: 11.5px; margin: 4px 0 12px; text-transform: uppercase; letter-spacing: .5px; }
.web-login-oauth { display: flex; gap: 8px; margin-top: 2px; }
.web-login-oauth .btn { flex: 1; display: flex; align-items: center; justify-content: center; text-decoration: none; margin-top: 0; padding: 12px 8px; }

/* ============================================================
   ОНБОРДИНГ (первая сессия) — пошаговая обучалка
   ============================================================ */
/* плавающий Quest HUD новичка (14.09): компактный бар над нижним меню */
#quest-hud {
  position: fixed;
  left: 14px;
  right: 14px;
  bottom: calc(72px + env(safe-area-inset-bottom));
  z-index: 1050;
  pointer-events: none;
  animation: fadeIn .3s ease;
}
#quest-hud-card {
  pointer-events: auto;
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-xl);
  padding: 10px 14px;
  box-shadow: 0 4px 18px rgba(0,0,0,.45);
  backdrop-filter: blur(8px);
}
.quest-hud-top {
  display: flex;
  align-items: center;
  gap: 8px;
}
.quest-hud-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--card2);
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
}
.quest-hud-reward {
  margin-left: auto;
  font-size: 12px;
  font-weight: 700;
  color: var(--green);
}
.quest-hud-btn-icon {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 2px 6px;
  font-size: 14px;
  line-height: 1;
}
#quest-hud-body {
  margin-top: 6px;
}
#quest-hud.collapsed #quest-hud-body {
  display: none;
}
.quest-hud-title {
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 2px;
}
.quest-hud-text {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
  margin-bottom: 8px;
}
.quest-hud-actions {
  display: flex;
  gap: 8px;
}
.quest-hud-actions .btn {
  padding: 5px 12px;
  font-size: 12px;
}

#onboard {
  position: fixed; inset: 0; z-index: 1100;
  background: rgba(5,8,14,.62);
  backdrop-filter: blur(3px);
  display: flex; flex-direction: column; justify-content: flex-end;
  /* карточка висит НАД нижним меню, чтобы подсвеченные кнопки были видны и кликабельны */
  padding: 16px 18px calc(84px + env(safe-area-inset-bottom));
  animation: fadeIn .3s ease;
  /* затемнение не ловит клики — игрок может сразу потыкать то, что видит за карточкой */
  pointer-events: none;
}
#onboard-card {
  pointer-events: auto;
  position: relative;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-xxl);
  padding: 16px 20px 18px;
  box-shadow: var(--shadow-md);
  animation: sheetUp .3s cubic-bezier(.22,.9,.3,1);
}
/* арт-хедер онбординга (31.08): ночной город-сцена под шапкой карточки */
#onboard-hero {
  height: 104px; margin: -16px -20px 12px;
  border-radius: calc(var(--r-xxl) - 2px) calc(var(--r-xxl) - 2px) 0 0;
  overflow: hidden; position: relative;
}
#onboard-hero .art-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
/* обложки живых событий (31.08): чип-сцена в строке календаря */
.art-chip {
  width: 44px; height: 30px; border-radius: 8px; overflow: hidden;
  display: inline-flex; flex: none; border: 1px solid rgba(122,140,178,.25);
}
.art-chip .art-svg { width: 100%; height: 100%; display: block; }
.live-row-ico .art-chip { margin: 0; }
#onboard-count {
  font-size: 11px; font-weight: 700; letter-spacing: .5px;
  color: var(--muted); text-align: center; margin-bottom: 8px;
  text-transform: uppercase;
}
#onboard-skip {
  position: absolute; top: 12px; right: 14px;
  background: none; border: none; padding: 4px 6px;
  font-size: 12px; color: var(--muted); cursor: pointer;
}
#onboard-icon { font-size: 36px; text-align: center; margin-bottom: 8px; }
#onboard-title { font-weight: 800; font-size: 17px; text-align: center; margin-bottom: 6px; }
#onboard-text { font-size: 13px; color: var(--muted); line-height: 1.55; text-align: center; margin-bottom: 14px; }
#onboard-dots { display: flex; justify-content: center; gap: 6px; margin-bottom: 12px; }
#onboard-dots .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--card2); transition: background .2s, width .2s; }
#onboard-dots .dot.on { background: var(--accent); width: 16px; border-radius: 3px; }
.onboard-actions { display: flex; gap: 8px; }
.onboard-actions .btn { flex: 1; }
.onboard-actions #onboard-btn { flex: 2; }
/* пульс-кольцо на цели шага: кнопка нижнего меню */
.tut-ring { animation: tutPulse 1.6s ease-out infinite; }
@keyframes tutPulse {
  0% { box-shadow: 0 0 0 0 rgba(255,214,89,.6); }
  70% { box-shadow: 0 0 0 10px rgba(255,214,89,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,214,89,0); }
}
/* пульс на карте — внутреннее свечение по краям */
#map.tut-ring { animation: tutPulseInset 1.6s ease-out infinite; }
@keyframes tutPulseInset {
  0% { box-shadow: inset 0 0 0 0 rgba(255,214,89,0); }
  50% { box-shadow: inset 0 0 0 4px rgba(255,214,89,.5); }
  100% { box-shadow: inset 0 0 0 0 rgba(255,214,89,0); }
}

/* конфетти */
#confetti-canvas { position: fixed; inset: 0; z-index: 1300; pointer-events: none; }

/* ============================================================
   ЧАТ (общий / районы / личка) — 23.08.2026, редизайн 25.08
   ============================================================ */
.action { position: relative; }
.chat-badge {
  position: absolute; top: 2px; right: 8px; min-width: 15px; height: 15px;
  padding: 0 3px; border-radius: 8px;
  background: var(--red); color: #fff; font-size: 9px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.45);
  pointer-events: none;
}
.chat-badge-mini {
  display: inline-flex; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 9px; background: var(--red); color: #fff;
  font-size: 10px; font-weight: 800; align-items: center; justify-content: center;
}
.chat-tabs { position: sticky; top: -4px; background: var(--panel); z-index: 3; padding: 4px 0 6px; }
.chat-tabs .chat-badge-mini { margin-left: 4px; }
/* 28.08: вкладки чата закреплены в шапке страницы, ВНЕ скролл-области (#page-content):
   sticky-закрепление на скролл-контейнере не работает в части мобильных WebKit —
   при автопрокрутке к низу чата вкладки «мелькали и прятались», переключение пропадало */
#page > #chat-tabs-root {
  flex: none; z-index: 5;
  background: var(--panel); border-bottom: 1px solid var(--border);
  padding: 6px 12px 8px;
}
#page > #chat-tabs-root .chat-tabs { position: static; padding: 0; background: none; }
#page > #chat-tabs-root .top-tabs { margin-bottom: 0; }
.chat-row { cursor: pointer; padding: 8px 6px; border-radius: 12px; }
.chat-row:active { background: var(--card2); }

/* сообщения (редизайн 24.08: аватары, колонка, разделители дат; 25.08: пузыри и реакции) */
#chat-list { padding: 4px 2px 8px; max-width: 100%; overflow-x: hidden; box-sizing: border-box; }
.msg { display: flex; gap: 8px; margin: 5px 0 9px; align-items: flex-start; max-width: 100%; min-width: 0; box-sizing: border-box; }
.msg.me { justify-content: flex-end; }
.chat-ava {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; overflow: hidden; border: 1px solid var(--border-strong);
  box-shadow: 0 1px 4px rgba(0,0,0,.35); margin-top: 15px;
}
/* аватар игрока в чате — кнопка профиля (фикс 01.09: «профиль из чата не открывается») */
.chat-ava-btn {
  flex: none; background: none; border: none; padding: 0; margin: 0;
  cursor: pointer; line-height: 0; align-self: flex-start;
}
.msg-col { display: flex; flex-direction: column; max-width: 84%; min-width: 0; box-sizing: border-box; }
.msg.me .msg-col { align-items: flex-end; }
.msg-name {
  background: none; border: none; cursor: pointer; font: inherit;
  font-size: 12px; font-weight: 800; padding: 0; margin: 0 2px 3px;
  text-align: left; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--muted);
}
.msg-name.nick-rainbow { color: transparent; }
.msg-name.nick-grad, .msg-name.nick-cursive { color: transparent; }
.msg-name.nick-glow { color: #7DF9FF; }
/* титул-бог и статус у имени в чате (салон 27.08) */
.msg-title { font-weight: 800; white-space: nowrap; }
.msg-title .ic { width: 13px; height: 13px; vertical-align: -2px; }
.msg-status { font-size: 10.5px; font-weight: 700; opacity: .8; white-space: nowrap; }
.profile-title-perks { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; font-size: 11.5px; margin-top: 2px; }
.profile-title-perks .mini { padding: 2px 8px; font-size: 11px; }

/* ---- темы интерфейса (магазин статуса, слот theme) ---- */
[data-theme="sunset"] {
  --bg: #16100B; --panel: #201812; --card: #2A2018; --card2: #33281F;
  --border: rgba(255, 190, 120, 0.10); --border-strong: rgba(255, 190, 120, 0.20);
  --text: #FFF6EC; --muted: #B89A82;
  --accent: #FF9F45; --accent2: #E07B2E;
  --grad: linear-gradient(135deg, #FF9F45, #E07B2E);
}
[data-theme="neon"] {
  --bg: #071018; --panel: #0C1B26; --card: #122634; --card2: #16303F;
  --border: rgba(0, 229, 255, 0.10); --border-strong: rgba(0, 229, 255, 0.20);
  --text: #EAFBFF; --muted: #7FA8B8;
  --accent: #00E5FF; --accent2: #00A8CC;
  --grad: linear-gradient(135deg, #00E5FF, #00A8CC);
}
[data-theme="aurora"] {
  --bg: #0B0A1A; --panel: #141232; --card: #1B1840; --card2: #221E4E;
  --border: rgba(155, 123, 255, 0.12); --border-strong: rgba(155, 123, 255, 0.24);
  --text: #F3EFFF; --muted: #9A93C4;
  --accent: #9B7BFF; --accent2: #6D5AE8;
  --grad: linear-gradient(135deg, #9B7BFF, #5E4BD6);
}

/* ---- подарки: редкость и витрина ---- */
.g-rarity {
  font-size: 10px; font-weight: 800; border: 1px solid currentColor; border-radius: 6px;
  padding: 1px 5px; margin-left: 4px; vertical-align: 2px; white-space: nowrap;
}

/* ---- покраска здания: палитра ---- */
.paint-row { display: flex; flex-wrap: wrap; margin-top: 4px; }
.paint-swatch {
  width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.22);
  margin: 2px 4px 2px 0; cursor: pointer; padding: 0;
}
.paint-swatch.on { outline: 2px solid #fff; outline-offset: 1px; }

/* ---- вывеска компании на карте ---- */
.office-sign-wrap { background: none; border: none; }
.office-sign {
  display: flex; align-items: center; gap: 5px;
  border-radius: 18px; padding: 4px 10px;
  font-size: 11.5px; font-weight: 800; color: #fff;
  box-shadow: 0 0 10px rgba(0, 229, 255, 0.4), 0 0 22px rgba(0, 229, 255, 0.18), 0 2px 6px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.35);
  white-space: nowrap;
}
.office-sign-name { max-width: 130px; overflow: hidden; text-overflow: ellipsis; }
.msg-bubble {
  position: relative;
  padding: 6px 10px 5px 12px; border-radius: 6px 16px 16px 16px;
  background: var(--card); border: 1px solid var(--border);
  font-size: 13px; line-height: 1.4; word-break: break-word;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
  cursor: pointer; user-select: text;
  transition: transform .1s ease, filter .1s ease;
}
.msg-bubble:active { filter: brightness(1.08); }
.msg.me .msg-bubble {
  background: linear-gradient(135deg, #248f68, #186b4d);
  border-color: transparent; color: #fff; border-radius: 16px 6px 16px 16px;
}
/* сглаживание смежных углов при группировке подряд от одного автора */
.msg.grp .msg-bubble { border-top-left-radius: 16px; }
.msg.me.grp .msg-bubble { border-top-right-radius: 16px; }

/* текст внутри пузыря и встроенное время */
.msg-text { white-space: pre-wrap; }
.msg-meta-in {
  float: right; margin-left: 8px; margin-top: 4px;
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10px; color: var(--muted);
  vertical-align: bottom; user-select: none; pointer-events: none;
}
.msg.me .msg-meta-in { color: rgba(255, 255, 255, 0.72); }
.msg-time { font-variant-numeric: tabular-nums; }
.msg-tick { font-size: 10px; font-weight: 800; letter-spacing: -1.5px; opacity: .8; line-height: 1; }
.msg-tick.read { color: #8BF7C9; opacity: 1; }
.msg-menu-btn {
  background: none; border: none; padding: 0 1px; margin-left: 2px;
  cursor: pointer; color: var(--muted); opacity: 0.65;
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1; vertical-align: middle; border-radius: 4px;
  pointer-events: auto;
  transition: opacity .12s ease, transform .12s ease, color .12s ease;
}
.msg-menu-btn:hover, .msg-menu-btn:active { opacity: 1; transform: scale(1.15); color: var(--accent); }
.msg.me .msg-menu-btn { color: rgba(255, 255, 255, 0.72); }
.msg.me .msg-menu-btn:hover, .msg.me .msg-menu-btn:active { color: #fff; }
.msg-menu-btn svg.ic { width: 10px; height: 10px; vertical-align: 0; }

/* интерактивные @упоминания */
.chat-mention {
  color: var(--accent); font-weight: 800; cursor: pointer; text-decoration: none;
  border-radius: 4px; padding: 0 2px;
}
.chat-mention:hover, .chat-mention:active { background: rgba(62,207,142,0.18); }
.msg.me .chat-mention { color: #FFF; text-decoration: underline; text-underline-offset: 2px; }

/* реакции — компактный ряд под пузырём */
.msg-rx { display: inline-flex; gap: 4px; flex-wrap: wrap; margin-top: 3px; }
.msg.me .msg-rx { justify-content: flex-end; }
.rx-item {
  background: var(--card2); border: 1px solid var(--border); color: var(--text);
  font-size: 11.5px; font-weight: 700; padding: 2px 7px; border-radius: 10px; cursor: pointer;
  font-family: inherit; transition: transform .12s ease, filter .12s ease;
  display: inline-flex; align-items: center; gap: 3px;
}
.rx-item.me { box-shadow: inset 0 0 0 1.5px var(--accent); }
.rx-item:active { transform: scale(1.12); filter: brightness(1.3); }

/* всплывающее контекстное меню по тапу на сообщение (Telegram-style) */
.chat-pop-backdrop {
  position: fixed; inset: 0; z-index: 15;
  background: rgba(0, 0, 0, 0.28);
  animation: fadeIn .12s ease;
}
.msg.has-popover { position: relative; z-index: 20; }
.msg.has-popover .msg-bubble {
  box-shadow: 0 0 0 2px var(--accent), 0 4px 16px rgba(0,0,0,0.5);
}
.msg-popover-wrap {
  position: relative; width: 100%; max-width: 100%; display: flex; z-index: 25; margin-bottom: 6px;
}
.msg.me .msg-popover-wrap { justify-content: flex-end; }
.msg-popover {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--card2); border: 1px solid var(--border-strong);
  border-radius: 16px; padding: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.65);
  min-width: 175px; max-width: min(230px, 100%); width: max-content;
  box-sizing: border-box;
  animation: popIn .15s cubic-bezier(0, 0, 0.2, 1);
}
@keyframes popIn {
  0% { transform: scale(0.92); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.pop-rx {
  display: flex; align-items: center; justify-content: space-between; gap: 2px;
  padding: 2px 4px 6px; border-bottom: 1px solid var(--border);
}
.pop-rx-btn {
  background: none; border: none; font-size: 19px; padding: 3px 5px;
  border-radius: 8px; cursor: pointer; transition: transform .12s ease; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.pop-rx-btn:active { transform: scale(1.3); }
.pop-actions { display: flex; flex-direction: column; gap: 2px; padding-top: 2px; }
.pop-item {
  background: none; border: none; cursor: pointer; font: inherit;
  font-size: 12.5px; font-weight: 700; color: var(--text);
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: 10px; line-height: 1.2;
  text-align: left; width: 100%; box-sizing: border-box;
  transition: background .12s ease;
}
.pop-item .ic { width: 15px; height: 15px; color: var(--accent); flex: none; }
.pop-item:hover, .pop-item:active { background: var(--card); }
.pop-item.danger { color: #ff8080; }
.pop-item.danger .ic { color: #ff8080; }
/* разовая пульс-вспышка пузыря в цвет поставленной реакции (25.08) */
.msg.rx-flash .msg-bubble { animation: rxFlash .85s ease; }
@keyframes rxFlash {
  0% { border-color: var(--rx-flash); box-shadow: 0 0 0 0 color-mix(in srgb, var(--rx-flash) 55%, transparent); }
  100% { border-color: var(--border); box-shadow: 0 0 0 12px transparent; }
}
/* реакции на событиях ленты (25.08): ряд чипов под строкой + вспышка строки */
.news-rx { margin-top: 6px; }
.news-row { flex-wrap: wrap; }
.news-row.rx-flash { animation: newsFlash .85s ease; }
@keyframes newsFlash {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--rx-flash) 40%, transparent); }
  100% { box-shadow: 0 0 0 14px transparent; }
}
/* разделители дат и системные сообщения */
.chat-day {
  display: flex; align-items: center; gap: 10px;
  text-align: center; font-size: 10.5px; font-weight: 700; letter-spacing: .4px;
  text-transform: uppercase; color: var(--muted); margin: 12px 0 8px;
}
.chat-day::before, .chat-day::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.chat-sys {
  display: flex; justify-content: center; margin: 8px 0;
}
.chat-sys span {
  background: rgba(62,207,142,.1); border: 1px solid rgba(62,207,142,.3);
  color: var(--accent); font-size: 12px; line-height: 1.45;
  border-radius: 14px; padding: 7px 12px; max-width: 88%; text-align: center;
}
/* разделитель непрочитанных: «Новые сообщения» над пачкой свежих */
.chat-unread-sep {
  display: flex; align-items: center; gap: 10px;
  margin: 10px 0 6px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase;
  color: var(--accent);
}
.chat-unread-sep::before, .chat-unread-sep::after { content: ''; flex: 1; height: 1px; background: rgba(62,207,142,.45); }
/* карточка-сниппет «питомец» в сообщении */
.chat-pet-card {
  display: flex; align-items: center; gap: 9px; width: 100%; max-width: 240px;
  margin: 4px 0 2px; padding: 8px 10px; text-align: left;
  background: var(--card2); border: 1px solid var(--border-strong); border-radius: 12px;
  color: var(--text);
}
.chat-pet-card:active { border-color: var(--accent); }
.cpc-emoji { font-size: 26px; line-height: 1; flex: none; }
.cpc-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.cpc-name { font-size: 13px; font-weight: 800; }
.cpc-sub { font-size: 11px; color: var(--muted); }
.cpc-bar { height: 4px; border-radius: 3px; background: rgba(255,255,255,.12); overflow: hidden; }
.cpc-bar i { display: block; height: 100%; border-radius: 3px; }
/* чип «здание на карте» в сообщении */
.chat-bld-chip {
  display: inline-flex; align-items: center; gap: 5px;
  margin: 4px 0 2px; padding: 6px 10px;
  background: var(--card2); border: 1px solid var(--border-strong); border-radius: 10px;
  font-size: 12px; font-weight: 700; color: var(--text);
}
.chat-bld-chip:active { border-color: var(--accent); }
.chat-bld-chip .ic { width: 14px; height: 14px; color: var(--accent); }
/* список личек: аватар + превью */
.chat-dm-ava {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  background: var(--card2); border: 1px solid var(--border-strong);
  display: flex; align-items: center; justify-content: center; font-size: 19px;
  overflow: hidden;
}
.chat-dm-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chat-row.unread { background: rgba(62,207,142,.06); border-radius: 12px; }
.chat-row.unread .r-title { color: var(--text); font-weight: 800; }
.chat-row .r-sub {
  max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* закреп */
.chat-pinned {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  background: rgba(245,185,66,.1); border: 1px solid rgba(245,185,66,.3);
  color: var(--gold); border-radius: 10px; padding: 5px 9px; margin: 4px 0 8px;
  font-size: 12px;
}
.note-inline { color: var(--text); opacity: .9; }

/* шапка лички */
/* шапка комнаты / района / лички */
.chat-room-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 6px 10px; background: var(--card2); border: 1px solid var(--border);
  border-radius: 12px; margin: 2px 0 8px;
}
.chat-room-info { display: flex; flex-direction: column; min-width: 0; }
.chat-room-title {
  font-size: 13.5px; font-weight: 800; color: var(--text);
  display: flex; align-items: center; gap: 5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-room-sub {
  font-size: 11px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-back-btn {
  flex: none; display: inline-flex; align-items: center; gap: 4px;
  background: var(--card); border: 1px solid var(--border); color: var(--accent);
  font-size: 11.5px; font-weight: 700; padding: 5px 9px; border-radius: 10px;
  cursor: pointer;
}
.chat-back-btn:active { background: var(--card2); }

/* шапка лички */
.chat-dm-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 6px 10px; background: var(--card2); border: 1px solid var(--border);
  border-radius: 12px; margin: 2px 0 8px;
}
.chat-dm-clickable {
  display: flex; align-items: center; gap: 8px; background: none; border: none;
  cursor: pointer; text-align: left; padding: 0; min-width: 0; flex: 1;
}
.chat-dm-ava-mini {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: var(--card); border: 1px solid var(--border-strong);
  display: flex; align-items: center; justify-content: center; font-size: 15px;
  overflow: hidden; position: relative;
}
.chat-dm-ava-mini img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.chat-dm-name { font-weight: 800; font-size: 13.5px; color: var(--text); }
.chat-dm-sub { font-size: 10.5px; color: var(--muted); }

/* поле ввода + палитра смайлов + быстрые действия */
.chat-inputbar {
  position: sticky; bottom: -4px; display: flex; align-items: flex-end; gap: 7px;
  background: var(--panel); padding: 8px 12px 6px; margin: 0 -12px; z-index: 3;
  border-top: 1px solid var(--border);
}
.chat-box {
  flex: 1; min-width: 0; display: flex; align-items: flex-end; gap: 3px;
  background: var(--card2); border: 1px solid var(--border-strong);
  border-radius: 15px; padding: 3px 5px 3px 7px;
}
.chat-box textarea {
  flex: 1; min-width: 0; background: none; border: none; outline: none;
  color: var(--text); padding: 7px 4px; font: inherit; font-size: 13px;
  resize: none; max-height: 110px; line-height: 1.35; overflow-y: auto;
  box-sizing: border-box;
}
.chat-box textarea:focus { border-color: var(--accent); }
.chat-box textarea:disabled { opacity: .55; }
.chat-box:focus-within { border-color: var(--accent); }
.chat-action-btn, .chat-emoji-btn {
  background: none; border: none; border-radius: 10px;
  color: var(--muted); font-size: 16px; width: 32px; height: 32px;
  cursor: pointer; flex: none; display: flex; align-items: center; justify-content: center;
}
.chat-action-btn:active, .chat-emoji-btn:active { background: var(--card); color: var(--text); }
.chat-action-btn.active { color: var(--accent); }
.chat-send {
  width: 40px; height: 38px; padding: 0; border-radius: 14px; flex: none; font-size: 15px;
  background: var(--grad); border-color: transparent; color: #fff; box-shadow: none;
  display: flex; align-items: center; justify-content: center; margin-bottom: 1px;
}
.chat-send:disabled { opacity: .5; }
.chat-emoji-panel {
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  padding: 8px; margin-top: 2px; max-height: 200px; overflow-y: auto;
}
/* быстрые действия (кубик, локация) */
.chat-quick-actions {
  display: flex; gap: 8px; padding: 8px 10px; background: var(--card);
  border: 1px solid var(--border); border-radius: 12px; margin-bottom: 6px;
  animation: popIn .15s ease-out;
}
.chat-quick-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; background: var(--card2); border: 1px solid var(--border);
  border-radius: 16px; font-size: 12px; font-weight: 700; color: var(--text);
  cursor: pointer;
}
.chat-quick-chip:active { background: var(--accent); color: #000; border-color: transparent; }

/* плавающая кнопка «Вниз к свежим» */
#chat-scroll-btn {
  position: sticky; float: right; bottom: 58px; right: 8px; margin-top: -44px;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--panel); border: 1px solid var(--border-strong);
  color: var(--text); display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,.45); z-index: 5;
  transition: transform .18s ease, opacity .18s ease;
}
#chat-scroll-btn.hidden { opacity: 0; pointer-events: none; transform: translateY(8px) scale(0.85); }
.chat-scroll-badge {
  position: absolute; top: -5px; right: -5px; background: var(--accent); color: #000;
  font-size: 9px; font-weight: 800; min-width: 16px; height: 16px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; padding: 0 3px;
}

/* ============ ЧАТ v2 (01.09): фолбэк аватарок, ответы, группировка, «печатает» ============ */
/* аватар: подложка (эмодзи/буква на цвете) всегда под фото — битый файл сам убирает <img> */
.chat-ava { position: relative; }
.chat-ava-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border-radius: 50%; display: block;
}
.chat-dm-ava { position: relative; }
.chat-dm-ava .chat-dm-img { position: absolute; inset: 0; }
/* онлайн-точка в списке личек и шапке лички */
.chat-dm-ava.on::after, .chat-online {
  content: ''; position: absolute; width: 9px; height: 9px; border-radius: 50%;
  background: #3ECF8E; border: 2px solid var(--panel); right: -1px; bottom: -1px;
}
.chat-online { position: static; display: inline-block; margin-left: 6px; vertical-align: 1px; border-color: var(--card); }
/* группировка подряд от одного автора: без аватара/имени, плотнее */
.chat-ava-sp { flex: none; width: 34px; }
.msg.grp { margin: 1px 0 2px; }
/* цитата-ответ внутри сообщения */
.msg-quote {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  background: var(--card2); border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: 8px; padding: 3px 8px; margin: 0 2px 3px; max-width: 100%;
  cursor: pointer; text-align: left; font-family: inherit;
}
.msg.me .msg-quote { border-left-color: #7FE0BE; align-items: flex-end; text-align: right; }
.mq-name { font-size: 10.5px; font-weight: 800; color: var(--accent); }
.msg.me .mq-name { color: #7FE0BE; }
.mq-text {
  font-size: 11px; color: var(--muted); max-width: 260px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
/* подсветка при переходе к оригиналу по тапу на цитату */
.msg-flash .msg-bubble { animation: msgFlash 1.6s ease; }
@keyframes msgFlash {
  0%, 45% { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }
  100% { border-color: var(--border); box-shadow: 0 0 0 3px transparent; }
}
/* черновик ответа над полем ввода */
.chat-reply-bar {
  display: flex; align-items: center; gap: 7px;
  background: var(--card); border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: 10px; padding: 5px 9px; margin: 0 -2px 4px; font-size: 12px;
}
.chat-reply-bar .ic { flex: none; width: 15px; height: 15px; color: var(--accent); }
.crb-name { flex: none; font-weight: 800; color: var(--accent); }
.crb-text { flex: 1; min-width: 0; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crb-x { flex: none; background: none; border: none; color: var(--muted); font-size: 13px; cursor: pointer; padding: 2px 4px; }
/* «печатает…» над полем ввода */
.chat-typing {
  font-size: 11px; color: var(--muted); padding: 2px 4px 4px;
  display: flex; align-items: center; gap: 4px;
}
.ty-dots { display: inline-flex; gap: 2.5px; margin-left: 2px; }
.ty-dots i {
  width: 3.5px; height: 3.5px; border-radius: 50%; background: var(--muted);
  animation: tyDot 1.2s infinite ease-in-out;
}
.ty-dots i:nth-child(2) { animation-delay: .18s; }
.ty-dots i:nth-child(3) { animation-delay: .36s; }
@keyframes tyDot { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-3px); opacity: 1; } }
/* «Показать более старые сообщения» */
.chat-more {
  display: block; width: 100%; background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; color: var(--muted); font: inherit; font-size: 12px; font-weight: 700;
  padding: 8px; margin: 2px 0 10px; cursor: pointer;
}
.chat-more:active { background: var(--card2); color: var(--text); }
/* категории в палитре смайлов */
.emoji-cat {
  font-size: 10px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
  color: var(--muted); margin: 6px 2px 4px;
}
.emoji-cat:first-child { margin-top: 0; }
/* кнопка «Отправить» — SVG-самолётик вместо юникод-стрелки */
.chat-send .ic { width: 18px; height: 18px; }

/* ============ КАЗИНО + ПОДПОЛЬНЫЕ БОИ ============ */
/* витрина игр казино (вместо ряда вкладок, 24.08.2026) */
.casino-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.casino-game {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  padding: 12px; text-align: left;
  background: var(--card); border: 1px solid var(--border); border-radius: 16px;
  font-family: inherit; color: var(--text); cursor: pointer;
  transition: background .15s, border-color .15s;
}
.casino-game:active { background: var(--card2); border-color: var(--border-strong); }
.casino-game:disabled { opacity: .45; cursor: default; }

/* покерный стол (24.08.2026): 6 мест вокруг, общие карты, банк */
.pk-wrap { position: relative; }
.pk-table {
  position: relative; width: 100%; aspect-ratio: 1.45;
  background: radial-gradient(circle at 50% 38%, #1e8a5c, #0e4a30 75%);
  border: 7px solid #8a6a3a; border-radius: 50%; margin: 10px 0;
  box-shadow: inset 0 0 42px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.3);
}
.pk-community { position: absolute; left: 50%; top: 40%; transform: translate(-50%,-50%); display: flex; gap: 4px; z-index: 2; }
.pk-street { font-size: 10px; color: rgba(255,255,255,.75); font-weight: 700; letter-spacing: .5px; }
.pk-pot { position: absolute; left: 50%; top: 58%; transform: translateX(-50%); font-size: 11px; color: #ffe9b8; font-weight: 800; z-index: 2; text-shadow: 0 1px 3px rgba(0,0,0,.55); white-space: nowrap; }
.pk-seat { position: absolute; transform: translate(-50%,-50%); width: 78px; display: flex; flex-direction: column; align-items: center; gap: 1px; z-index: 3; transition: opacity .2s; }
.pk-seat.pk-fold { opacity: .32; }
.pk-seat.pk-turn .pk-avatar { box-shadow: 0 0 0 2px var(--gold); }
.pk-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--card2); display: flex; align-items: center; justify-content: center; font-size: 16px; border: 1px solid var(--border-strong); }
.pk-name { font-size: 9px; color: var(--text); max-width: 78px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-stack { font-size: 9.5px; font-weight: 700; color: #ffe9b8; font-variant-numeric: tabular-nums; }
.pk-bet { font-size: 8.5px; color: var(--green); font-weight: 800; }
.pk-allin { font-size: 7.5px; color: #ff6b6b; font-weight: 800; letter-spacing: .5px; }
.pk-dealer { position: absolute; top: -5px; right: 8px; width: 14px; height: 14px; border-radius: 50%; background: #fff; color: #000; font-size: 9px; font-weight: 800; display: flex; align-items: center; justify-content: center; z-index: 4; }
.pk-cards { display: flex; gap: 2px; }
.pk-card { width: 20px; height: 28px; border-radius: 3px; background: #fff; color: #111; font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; border: 1px solid #d8d8d8; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.pk-card.red { color: #d43; }
.pk-card.back { background: repeating-linear-gradient(45deg, #2a4a8f, #2a4a8f 3px, #1d3668 3px, #1d3668 6px); border-color: #16294e; }
.pk-actions { margin: 4px 0 2px; }
.cg-icon { font-size: 26px; }
.cg-name { font-weight: 800; font-size: 13.5px; }
.cg-sub { font-size: 10.5px; color: var(--muted); line-height: 1.4; }

/* кабинет компании: плитки разделов + квест-баннер (24.08.2026) */
.company-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.company-tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  padding: 12px; text-align: left;
  background: var(--card); border: 1px solid var(--border); border-radius: 16px;
  font-family: inherit; color: var(--text); cursor: pointer;
  transition: background .15s, border-color .15s;
}
.company-tile:active { background: var(--card2); border-color: var(--border-strong); }
.ct-icon { font-size: 24px; }
.ct-name { font-weight: 800; font-size: 13.5px; }
.ct-sub { font-size: 10.5px; color: var(--muted); line-height: 1.4; }
.company-quest {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px; margin-bottom: 10px;
  background: rgba(245,185,66,.07);
  border: 1px solid rgba(245,185,66,.32);
  border-radius: 16px;
  font-family: inherit; color: var(--text); cursor: pointer;
  transition: background .15s;
}
.company-quest:active { background: rgba(245,185,66,.14); }
.company-quest .r-left { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.company-quest .mkt-buyout { margin-top: 0; }
.company-quest .r-right { flex: none; }

.casino-header {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--card); border: 1px solid var(--border); border-radius: 16px;
  padding: 12px 14px; margin-bottom: 8px;
}
.casino-chips { font-size: 20px; font-weight: 800; color: var(--gold); font-variant-numeric: tabular-nums; }
.casino-actions { display: flex; gap: 8px; }
.roulette-board {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin: 8px 0;
}
.roulette-num {
  aspect-ratio: 1; border: 1px solid var(--border); border-radius: 8px;
  background: var(--card); color: var(--text); font-size: 11px; font-weight: 700;
  cursor: pointer; padding: 0;
}
.roulette-num.red { background: #7a1f1f; color: #fff; }
.roulette-num.black { background: #232a38; color: #fff; }
.roulette-num:active { transform: scale(.93); }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.chip {
  flex: 1; min-width: 86px; background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; color: var(--text); font: inherit; font-size: 11.5px;
  padding: 8px 6px; cursor: pointer; line-height: 1.35;
}
.chip small { color: var(--muted); }
.chip:active { background: var(--card2); }
/* выбранная категория тикета (31.08) */
.chip.on { background: rgba(62, 207, 142, .16); border-color: rgba(62, 207, 142, .5); color: var(--accent); font-weight: 800; }
.bet-row { display: flex; gap: 8px; align-items: center; margin: 8px 0; }
.bet-row .input { flex: 1; min-width: 0; }
.slot-reels {
  display: flex; gap: 8px; justify-content: center; margin: 12px 0;
}
.slot-reel {
  width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;
  font-size: 34px; background: var(--card); border: 1px solid var(--border);
  border-radius: 14px;
}
/* бои */
.fight-card, .fighter-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 16px;
  padding: 12px 14px; margin-bottom: 10px;
}
.fight-vs { display: flex; align-items: stretch; gap: 8px; }
.fighter-side { flex: 1; min-width: 0; }
.fighter-side.own { border: 1px solid rgba(245, 185, 66, .45); border-radius: 12px; padding: 8px; background: rgba(245, 185, 66, .05); }
.fighter-name { font-weight: 800; font-size: 13.5px; margin-bottom: 3px; }
.fight-vs-tag {
  align-self: center; font-size: 12px; font-weight: 900; color: var(--gold);
  background: var(--panel); border-radius: 20px; padding: 6px 8px; flex: none;
}
.fight-meta { font-size: 11px; color: var(--muted); margin: 8px 0 4px; }
.fight-pools {
  display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px;
  color: var(--muted); background: var(--panel); border-radius: 10px; padding: 6px 10px;
}
.fight-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.fight-result {
  margin-top: 8px; font-size: 12px; font-weight: 700; color: var(--gold);
  background: rgba(245, 185, 66, .08); border-radius: 10px; padding: 6px 10px;
}
.fighter-vitals { flex: none; font-size: 10.5px; color: var(--muted); text-align: right; line-height: 1.6; }

/* ============================================================
   ПОЛКИ (аккордеон) — 24.08.2026
   ============================================================ */
.shelf {
  border: 1px solid var(--border); border-radius: 14px;
  background: var(--panel); margin: 8px 0; overflow: hidden;
}
.shelf-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; padding: 11px 13px; background: none; border: none;
  font: inherit; font-weight: 800; font-size: 13px; color: var(--text);
  cursor: pointer; text-align: left;
}
.shelf-head:active { background: var(--card); }
.shelf-title { display: flex; align-items: center; gap: 7px; }
.shelf-arrow {
  color: var(--muted); font-size: 12px; transition: transform var(--tr);
}
.shelf.open .shelf-arrow { transform: rotate(180deg); }
.shelf-body { display: none; padding: 2px 13px 12px; }
.shelf.open .shelf-body { display: block; }

/* кнопки действий профиля — один ряд */
.profile-actions { display: flex; gap: 8px; margin: 10px 0 4px; flex-wrap: wrap; }

/* полка «Капитал»: сворачиваемые секции (нативный details-аккордеон, 01.09) */
.acc { border: 1px solid var(--border); border-radius: 14px; margin: 10px 0; background: var(--card); overflow: hidden; }
.acc > summary { display: flex; align-items: center; gap: 8px; padding: 12px 14px; cursor: pointer; list-style: none; font-weight: 600; font-size: 14px; }
.acc > summary::-webkit-details-marker { display: none; }
.acc .acc-t { display: flex; align-items: center; gap: 8px; min-width: 0; }
.acc .acc-sub { margin-left: auto; color: var(--muted); font-weight: 500; font-size: 12px; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc .acc-chev { color: var(--muted); display: flex; flex: none; }
.acc .acc-chev svg { transition: transform .18s ease; }
.acc[open] > summary .acc-chev svg { transform: rotate(90deg); }
.acc-body { padding: 0 14px 12px; }
.acc-body .row:first-child { margin-top: 0; }
.acc-body .note { margin: 8px 0 0; }
.acc-body .btn { margin-top: 10px; }
.acc-body .empty-state { margin: 4px 0 8px; }

/* «Карьера v2» (01.09): требования профессий — чипы; баннер «где ты и куда расти» */
.req-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.req-chip {
  display: inline-flex; align-items: center; gap: 5px; flex: none; max-width: 100%;
  font-size: 11.5px; font-weight: 600; line-height: 1.3; color: var(--text);
  background: var(--panel); border: 1px solid var(--border); border-radius: 999px; padding: 5px 10px;
}
.req-chip svg.ic { flex: none; }
button.req-chip { cursor: pointer; font: inherit; }
button.req-chip:active { background: var(--card2); }
.req-chip.ok { color: var(--accent); border-color: rgba(62,207,142,.4); background: rgba(62,207,142,.07); }
.req-chip.wait { color: var(--muted); }
.req-chip.need { color: #ffb347; border-color: rgba(255,179,71,.35); background: rgba(255,179,71,.06); }
button.req-chip.danger { color: #ff8a8f; border-color: rgba(239,68,68,.4); background: rgba(239,68,68,.16); }
.career-now {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; font: inherit; cursor: pointer;
  border: 1px solid rgba(62,207,142,.35); background: linear-gradient(135deg, rgba(62,207,142,.10), rgba(62,207,142,.03));
  border-radius: 14px; padding: 11px 13px; margin: 0 0 8px;
}
.career-now .cn-ico { color: var(--accent); display: flex; flex: none; }
.career-now .cn-body { min-width: 0; flex: 1; }
.career-now .cn-title { font-weight: 700; font-size: 14px; color: var(--text); }
.career-now .cn-sub { color: var(--muted); font-size: 12px; margin-top: 2px; }
.career-now .cn-go { color: var(--accent); font-weight: 700; font-size: 12px; display: flex; align-items: center; flex: none; }

/* подзаголовок группы строк внутри секции («Путь и вехи» в «Жизни») */
.r-group { margin: 14px 0 4px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.r-group svg.ic { vertical-align: -1px; }

/* ============================================================
   ФОТО ПРОФИЛЯ (2 слота) — 24.08.2026
   ============================================================ */
.profile-photos { display: flex; gap: 10px; margin: 8px 0; }
.profile-photos.public { max-width: 320px; }
.photo-wrap { flex: 1; min-width: 0; }
.photo-cap { font-size: 10.5px; font-weight: 700; color: var(--muted); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .4px; }
.photo-slot {
  position: relative; border: 1px dashed var(--border-strong); border-radius: 14px;
  aspect-ratio: 1 / 1; background: var(--card); display: flex; align-items: center;
  justify-content: center; overflow: hidden;
}
.photo-slot.has { border-style: solid; }
.photo-empty { font-size: 30px; opacity: .45; }
.photo-img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; display: block; }
.photo-add {
  position: absolute; left: 6px; right: 6px; bottom: 6px;
  background: rgba(11,15,25,.78); border: 1px solid var(--border-strong);
  color: var(--text); font-size: 11.5px; font-weight: 700; text-align: center;
  padding: 6px 0; border-radius: 9px; cursor: pointer; backdrop-filter: blur(3px);
}
.photo-del { position: absolute; top: 6px; right: 6px; }

/* ============================================================
   НУМПАД (ввод ID/сумм тапами — WebView-клавиатура ненадёжна)
   ============================================================ */
.numpad { margin: 6px 0 2px; }
.numpad-row { display: flex; gap: 6px; margin-bottom: 6px; }
.numpad-btn {
  flex: 1; height: 44px; border-radius: 12px; font: inherit; font-size: 16px;
  font-weight: 800; background: var(--card); border: 1px solid var(--border);
  color: var(--text); cursor: pointer;
}
.numpad-btn:active { background: var(--accent); border-color: transparent; color: #fff; }

/* ============================================================
   ТАП-ПАНЕЛЬ СТАВКИ КАЗИНО — 24.08.2026
   ============================================================ */
.bet-panel {
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  padding: 8px; margin: 8px 0;
}
.bet-step { min-width: 44px; height: 38px; font-weight: 800; font-size: 12px; flex: none; }
.bet-input { text-align: center; font-size: 16px; font-weight: 800; letter-spacing: .3px; }
.bet-go { width: 100%; margin-top: 2px; }

/* ============================================================
   АРТЕФАКТ В ПОПАПЕ МЕСТА — 24.08.2026
   ============================================================ */
.prop-artifact {
  display: flex; align-items: center; gap: 8px; margin: 6px 0;
  background: rgba(62,207,142,.07); border: 1px solid rgba(62,207,142,.25);
  border-radius: 10px; padding: 5px 8px; font-size: 12px;
}

/* ============================================================
   СТРОКА ВВОДА ID ИГРОКА (свидания/компания) — 24.08 фикс
   Кнопка .btn по умолчанию width:100% — внутри flex-строки она
   «ломала» ряд на узких экранах; здесь своя компактная вёрстка.
   ============================================================ */
.id-row { display: flex; gap: 8px; align-items: center; margin: 8px 0 2px; }
.id-row input {
  flex: 1; min-width: 0; background: #0D1424; color: var(--text);
  border: 1px solid var(--border-strong); border-radius: 12px;
  padding: 12px 13px; font: inherit; font-size: 15px; font-weight: 700;
  letter-spacing: .3px; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.id-row input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(62,207,142,.16); }
.id-send {
  flex: none; width: auto; margin: 0; padding: 12px 16px;
  font-size: 15px; min-width: 52px;
}

/* ============================================================
   АДМИН-ПАНЕЛЬ (config.admins): сводка / игроки / онлайн / сервер
   ============================================================ */
.admin-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 6px;
}
.admin-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.admin-card .ac-val { font-size: 17px; font-weight: 800; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-card .ac-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.admin-card .ac-sub { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-card.green .ac-val { color: var(--green); }
.admin-card.gold .ac-val { color: var(--gold); }
.admin-card.red .ac-val { color: var(--red); }
.admin-h { font-size: 13px; font-weight: 800; margin: 12px 0 6px; color: var(--text); }
.admin-city-row .bar {
  display: block; height: 7px; border-radius: 4px;
  min-width: 4px;
}
.admin-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.admin-filters input, .admin-filters select {
  flex: 1; min-width: 110px;
  background: #0D1424; color: var(--text);
  border: 1px solid var(--border-strong); border-radius: 10px;
  padding: 8px 10px; font: inherit; font-size: 13px; outline: none;
}
.admin-filters .mini.on { background: var(--green); color: #04120c; border-color: var(--green); }
.admin-act { display: flex; gap: 6px; margin: 6px 0; align-items: center; }
.admin-act input {
  flex: 1; min-width: 0;
  background: #0D1424; color: var(--text);
  border: 1px solid var(--border-strong); border-radius: 10px;
  padding: 8px 10px; font: inherit; font-size: 13px; outline: none;
}
.admin-act input:focus { border-color: var(--accent); }
.admin-facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 10px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  margin: 8px 0;
}
.admin-facts .af { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; }
.admin-facts .af span { color: var(--muted); }
.admin-facts .af b { color: var(--text); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-bar {
  flex: 1; height: 10px;
  background: rgba(255,255,255,.08);
  border-radius: 5px; overflow: hidden;
}
.admin-bline { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); margin: 5px 0; }
.admin-bline > span { width: 42px; flex: none; }
.spark-row { display: flex; align-items: flex-end; gap: 2px; height: 34px; margin: 4px 0 8px; }
.spark { flex: 1; min-width: 2px; border-radius: 2px 2px 0 0; }
.mini.danger { background: rgba(239,68,68,.16); color: #ff8a8f; border-color: rgba(239,68,68,.4); }

/* карточки кандидатов на найм бойца (24.08.2026) */
.hire-card { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 12px; margin-bottom: 8px; display: flex; flex-direction: column; gap: 4px; }
.hire-head { display: flex; align-items: center; gap: 10px; }
.hire-avatar { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; flex: none; box-shadow: 0 2px 6px rgba(0,0,0,.3); }
.hire-main { flex: 1; min-width: 0; }
.hire-price { text-align: right; font-size: 13px; font-weight: 800; white-space: nowrap; }
.hire-trait { font-size: 11.5px; color: var(--accent); }

/* ============================================================
   SVG-иконки интерфейса (замена эмодзи-«картинок», 24.08.2026)
   Базовый размер 14px; контекстные размеры — выше по приоритету
   ============================================================ */
svg.ic { width: 14px; height: 14px; flex: none; vertical-align: -2px; }
.es-icon svg.ic { width: 30px; height: 30px; }
.cg-icon svg.ic { width: 26px; height: 26px; }
.ct-icon svg.ic { width: 24px; height: 24px; }
.sector-icon svg.ic { width: 16px; height: 16px; }
.lm-badge svg.ic { width: 20px; height: 20px; }
#onboard-icon svg.ic { width: 36px; height: 36px; }
.city-pin svg.ic { width: 14px; height: 14px; vertical-align: -2px; }
.chip-neon svg { display: block; }
.avatar svg.ic { width: 24px; height: 24px; }
.photo-empty svg.ic { width: 26px; height: 26px; }
.top-tab svg.ic, .btn svg.ic, .mini svg.ic, .chip svg.ic, .msg-act svg.ic,
.shelf-title svg.ic, h3 svg.ic, .r-title svg.ic, .r-sub svg.ic, .note svg.ic { vertical-align: -2px; }
/* цветовые точки рулетки (замена 🔴/⚫) */
.dot-r, .dot-b { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: 1px; }
.dot-r { background: #e5484d; }
.dot-b { background: #1b2230; border: 1px solid #5a6478; }

/* ---------- полноэкранные страницы (стек навигации, 24.08) ---------- */
#page { position: fixed; inset: 0; z-index: 900; display: flex; flex-direction: column;
  background: var(--bg); transform: translateX(100%);
  transition: transform var(--t-slow) var(--ease), opacity var(--t-slow) var(--ease); }
#page.shown { transform: translateX(0); }
.page-head { flex: none; display: flex; align-items: center; gap: 10px;
  padding: calc(10px + env(safe-area-inset-top)) 12px 10px;
  border-bottom: 1px solid var(--border); background: var(--panel); }
.nav-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--card2); color: var(--text); display: flex; align-items: center;
  justify-content: center; cursor: pointer; flex: none;
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.nav-btn:active { transform: scale(.92); background: var(--card); }
.nav-btn.disabled { pointer-events: none; }
.nav-btn svg { width: 20px; height: 20px; }
.nav-btn img { width: 22px; height: 22px; border-radius: 6px; display: block; }
.page-title { flex: 1; min-width: 0; text-align: center; font-size: 17px; font-weight: 700;
  color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#page-content { flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
  padding: 12px; padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
#page-content .top-tabs { position: sticky; top: -12px; background: var(--panel);
  padding: 6px 0 8px; margin: -12px 0 6px; z-index: 3; }

/* ---------- правая рейка миров (24.08) ---------- */
#rail { position: fixed; right: 6px; top: 50%; transform: translateY(-50%);
  z-index: 700; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
/* 01.09 (решение юзера): панель с тёмной подложкой — кнопки читаются на любом фоне */
#rail-panel { display: flex; flex-direction: column; gap: 6px;
  padding: 6px; border-radius: 16px;
  background: rgba(10, 12, 16, .42);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .08);
  transition: transform .24s cubic-bezier(0.16, 1, 0.3, 1); }
#rail.collapsed #rail-panel { transform: translateX(130px); }
/* 25.08: в свёрнутом виде рейка не должна блокировать сдвиг карты —
   «уши» (видимая кромка панели) чисто декоративные; кликабелен только таб */
#rail.collapsed { width: 36px; }
#rail.collapsed #rail-panel { pointer-events: none; }
.rail-btn { position: relative; width: 146px; height: 44px; padding: 0 8px 0 10px;
  display: flex; align-items: center; gap: 10px; border-radius: 12px;
  background: linear-gradient(135deg, var(--wca, rgba(62, 207, 142, .30)), var(--wcb, rgba(62, 207, 142, .16)));
  border: 1px solid rgba(255, 255, 255, .14); color: var(--text);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .12);
  cursor: pointer; overflow: hidden;
  transition: transform .15s ease, background .15s ease, filter .15s ease; }
.rail-btn:active { transform: scale(.96); filter: brightness(1.18); }
/* 31.08 (план A): иконка мира — в цвете мира (--wc задаёт app.js из WORLDS) */
.rail-ico { width: 28px; height: 28px; border-radius: 8px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .32);
  border: 1px solid rgba(255, 255, 255, .08);
  color: var(--wc, var(--accent));
  box-shadow: 0 0 8px var(--wcb, rgba(0, 0, 0, .2)); }
.rail-ico svg { width: 16px; height: 16px; }
.rail-label { font-size: 13px; font-weight: 600; letter-spacing: -0.2px; white-space: nowrap;
  color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
/* «уши»: видимая кромка кнопок в свёрнутом виде + градиент-подсказка раскрытия (в цвет мира) */
.rail-btn::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 14px;
  background: linear-gradient(90deg, transparent, var(--wce, rgba(62, 207, 142, .45)));
  border-radius: 0 12px 12px 0; pointer-events: none; }
.rail-tab { width: 36px; height: 34px; border-radius: 12px 0 0 12px;
  background: rgba(18, 22, 30, .85);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .16); border-right: none;
  color: var(--text); opacity: 1; display: flex; align-items: center; justify-content: center;
  box-shadow: -2px 4px 12px rgba(0, 0, 0, .3);
  cursor: pointer; transition: color .15s ease, background .15s ease, transform .2s ease; }
.rail-tab:active { background: rgba(30, 36, 48, .95); transform: scale(.94); }
.rail-tab svg { width: 15px; height: 15px; transition: transform .22s ease; }
#rail.collapsed .rail-tab svg { transform: rotate(180deg); }
#rail:not(.collapsed) .rail-tab svg { transform: rotate(0deg); }
/* мягкое «дыхание» стрелки в свёрнутом виде: один вздох раз в ~9с (25.08),
   чтобы рейку было видно, но не назойливо; при раскрытии панели анимации нет */
#rail.collapsed .rail-tab { animation: railBreathe 9s ease-in-out infinite; }
@keyframes railBreathe {
  0%, 10%, 32%, 100% { color: var(--text); opacity: 1; transform: scale(1);
    box-shadow: 0 0 0 0 rgba(62, 207, 142, 0); }
  14% { color: var(--accent); opacity: 1; transform: scale(1.07);
    box-shadow: 0 0 12px rgba(62, 207, 142, .3); }
  26% { color: var(--text); opacity: 1; transform: scale(1);
    box-shadow: 0 0 0 0 rgba(62, 207, 142, 0); }
}
/* «уши» кнопок поддыхают синхронно со стрелкой */
#rail.collapsed .rail-btn::after { animation: railEdgeGlow 9s ease-in-out infinite; }
@keyframes railEdgeGlow {
  0%, 10%, 32%, 100% { opacity: 1; }
  14% { opacity: 1.7; filter: brightness(1.7); }
  26% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  #rail.collapsed .rail-tab, #rail.collapsed .rail-btn::after { animation: none; }
}

/* ============================================================
   ПУЛЬС-УВЕДОМЛЕНИЯ (25.08): 3 цветовые категории
   — клавиши (зелёный, разовая вспышка при нажатии на кнопку меню)
   — события  (золотой, «дыхание» колокольчика при непрочитанном)
   — чат      (синий, «дыхание» кнопки чата при новых сообщениях)
   ============================================================ */
@keyframes pulseKey {
  0% { box-shadow: 0 0 0 0 rgba(62, 207, 142, .5); }
  100% { box-shadow: 0 0 0 10px rgba(62, 207, 142, 0); }
}
.action.pulse-key { animation: pulseKey .45s ease; }
@keyframes pulseEvent {
  0%, 14%, 100% { color: var(--muted); box-shadow: 0 0 0 0 rgba(245, 185, 66, 0); transform: scale(1); }
  4% { color: #F5B942; box-shadow: 0 0 14px rgba(245, 185, 66, .55); transform: scale(1.09); }
  11% { color: var(--muted); box-shadow: 0 0 0 0 rgba(245, 185, 66, 0); transform: scale(1); }
}
.top-icon-btn.has-events { animation: pulseEvent 3.2s ease-in-out infinite; }
@keyframes pulseChat {
  0%, 40%, 100% { color: var(--muted); box-shadow: 0 0 0 0 rgba(56, 200, 255, 0); transform: scale(1); }
  8%, 18% { color: #38C8FF; box-shadow: 0 0 18px rgba(56, 200, 255, .5); transform: scale(1.05); }
  13% { box-shadow: 0 0 8px rgba(56, 200, 255, .3); }
}
#btn-chat.unread { animation: pulseChat 3.2s var(--ease) infinite; }
@media (prefers-reduced-motion: reduce) {
  .action.pulse-key, .top-icon-btn.has-events, #btn-chat.unread,
  .action--chat, .action--career, .action--biz, .action--profile, #btn-chat .cd, #ai-orb, #ai-orb.st-busy, #ai-orb.st-queue, #ai-orb.st-answer, #ai-orb.st-clarify::before, #ai-orb.orb-flash::after, #ai-orb .orb-ring, #ai-orb-badge.advice, .orb-dots i { animation: none !important; }
  #ai-orb { filter: none !important; }
}

/* ---------- витрины хабов миров (24.08) ---------- */
.hub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hub-card { display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  padding: 14px; border-radius: 16px; background: var(--card); border: 1px solid var(--border);
  color: var(--text); text-align: left; cursor: pointer;
  transition: transform .15s ease, background .15s ease; }
.hub-card:active { transform: scale(.97); background: var(--card2); }
.hub-ico { width: 40px; height: 40px; border-radius: 12px; flex: none;
  display: flex; align-items: center; justify-content: center; margin-bottom: 6px;
  background: linear-gradient(135deg, var(--card2), var(--card)); color: var(--accent); }
.hub-ico svg { width: 22px; height: 22px; }
.hub-name { font-size: 14px; font-weight: 700; }
.hub-sub { font-size: 11px; color: var(--muted); line-height: 1.35; }

/* единая кнопка «назад» в контенте страниц (вместо трёх разных «←») */
.back-chip { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 10px;
  padding: 7px 12px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--card2); color: var(--text); font-size: 12.5px; font-weight: 600;
  cursor: pointer; transition: transform .15s ease, background .15s ease; }
.back-chip:active { transform: scale(.96); background: var(--card); }
.back-chip svg { width: 14px; height: 14px; }

/* ---------- живой чат: анимации сообщений и реакции-жетоны (24.08) ---------- */
@keyframes msgIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes msgInMe { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
.msg.msg-in { animation: msgIn .28s ease both; }
.msg.me.msg-in { animation-name: msgInMe; }
#chat-list { background: radial-gradient(120% 55% at 50% 0%, rgba(62, 207, 142, .05), transparent 62%); }
.rx-ico { display: inline-flex; vertical-align: -3px; margin-right: 3px; }
.rx-ico .rx-svg { width: 16px; height: 16px; }
.rx-item .rx-n { font-size: 11px; font-weight: 700; }
.rx-menu-item { animation: rxPop .3s ease both; }
@keyframes rxPop { from { transform: scale(.55); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ---------- Подпольный ринг v6: редкость, HP, трофеи, трансляции, гардероб, спонсоры ---------- */
.rarity-tag { display: inline-block; padding: 1px 7px; border-radius: 8px; border: 1px solid;
  font-size: 10px; font-weight: 700; vertical-align: 2px; background: rgba(20,22,28,.5); }
.hp-bar { margin-top: 6px; display: flex; align-items: center; gap: 8px; max-width: 180px; }
.hp-bar .hp-fill { height: 7px; border-radius: 4px; background: var(--green); transition: width .4s ease; }
.hp-bar span { font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.hp-bar .hp-fill, .hp-bar > div { display: block; }
.hp-bar > div:first-child { flex: 1; background: var(--card2); border-radius: 4px; overflow: hidden; }
.hp-bar.small { max-width: 120px; }
.trophy-row { display: flex; flex-wrap: wrap; gap: 5px; margin: 4px 0; }
.trophy-chip { font-size: 15px; filter: drop-shadow(0 0 3px rgba(245,185,66,.35)); cursor: default; }
.fighter-avatar { border-radius: 14px; flex: none; display: block; }
.fighter-avatar.framed { filter: drop-shadow(0 0 6px rgba(255,215,0,.25)); }
.frame-anim { animation: framePulse 2s ease-in-out infinite; }
@keyframes framePulse { 0%,100% { stroke-opacity: 1; } 50% { stroke-opacity: .45; } }
.rep-bar { margin: 6px 0 4px; max-width: 240px; height: 7px; background: var(--card2); border-radius: 4px; overflow: hidden; }
.rep-fill { height: 100%; background: linear-gradient(90deg, var(--accent), #4da3ff); border-radius: 4px; }
.fight-card.live { border-color: rgba(62,207,142,.45); }
.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--danger); animation: liveBlink 1.1s ease-in-out infinite; margin-right: 6px; }
@keyframes liveBlink { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
.bcast-head { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 10px 0; }
.bcast-fighter { display: flex; flex-direction: column; align-items: center; gap: 4px; max-width: 110px; text-align: center; }
.bcast-root { min-height: 96px; display: flex; flex-direction: column; justify-content: center; }
.bcast-exchange { padding: 14px; border-radius: 14px; background: var(--card2);
  border: 1px solid var(--border); text-align: center; animation: msgIn .25s ease both; }
.bcast-exchange.ev { border-color: rgba(245,185,66,.5); }
.bcast-actor { font-size: 14px; font-weight: 700; }
.bcast-ev { margin-top: 4px; font-size: 13px; color: var(--accent); font-weight: 600; }
.bcast-round { text-align: center; font-size: 15px; font-weight: 800; letter-spacing: 2px;
  color: var(--accent); padding: 14px; animation: msgIn .3s ease both; }
.bcast-result { text-align: center; padding: 14px; border-radius: 14px; background: var(--card2);
  border: 1px solid var(--border); font-size: 15px; animation: msgIn .3s ease both; }
.bcast-result.win { border-color: rgba(62,207,142,.5); color: var(--green); }
.bcast-result.loss { color: var(--danger); }
.bcast-actions { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.arena-post { display: flex; justify-content: space-between; gap: 8px; padding: 7px 10px;
  border-radius: 10px; background: var(--card2); margin-bottom: 6px; }
.week-fight { border-left-color: var(--accent) !important; }
.rec-row { }
.sponsor-card { padding: 12px; border-radius: 14px; background: var(--card); border: 1px solid var(--border); margin-bottom: 10px; }
.sponsor-card.active { border-color: rgba(62,207,142,.5); }
.sponsor-card.locked { opacity: .55; }
.sponsor-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.sponsor-icon { width: 40px; height: 40px; border-radius: 12px; flex: none;
  display: flex; align-items: center; justify-content: center; font-size: 20px;
  background: linear-gradient(135deg, var(--card2), var(--card)); }
.wd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 8px; }
.wd-item { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px;
  border-radius: 12px; background: var(--card2); border: 1px solid var(--border); cursor: pointer; text-align: center; }
.wd-item:active { transform: scale(.96); }
.wd-item.wearing { border-color: var(--accent); }
.wd-item.previewing { border-color: #38bdf8 !important; box-shadow: 0 0 12px rgba(56, 189, 248, 0.4); background: rgba(56, 189, 248, 0.08); }
.wd-item.wearing.previewing { border-color: var(--accent) !important; box-shadow: 0 0 12px rgba(245, 185, 66, 0.45); }
.wd-item-svg { display: block; border-radius: 10px; }
.wd-diff-box { background: var(--card2); border: 1px solid var(--border); border-radius: 14px; padding: 10px 12px; margin-bottom: 12px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 4px 14px rgba(0,0,0,0.25); }
.wd-diff-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wd-diff-title { font-size: 13px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 6px; }
.wd-diff-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.wd-diff-chip { font-size: 11px; padding: 3px 8px; border-radius: 6px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.wd-diff-chip.up { background: rgba(34, 197, 94, 0.15); color: #22c55e; border: 1px solid rgba(34, 197, 94, 0.35); }
.wd-diff-chip.down { background: rgba(239, 68, 68, 0.15); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.35); }
.wd-diff-chip.same { background: rgba(255, 255, 255, 0.05); color: var(--muted); border: 1px solid var(--border); }
.wd-diff-chip.set { background: rgba(234, 179, 8, 0.15); color: #eab308; border: 1px solid rgba(234, 179, 8, 0.35); }
.wd-diff-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.07); }
.wd-prev { border-radius: 10px; overflow: hidden; }
.wd-name { font-size: 11px; font-weight: 600; line-height: 1.2; min-height: 24px; }
.wd-bonus { font-size: 9.5px; line-height: 1.25; color: var(--green); min-height: 12px; }
.wd-set { font-size: 9px; line-height: 1.2; color: var(--muted); }
.wd-price { font-size: 10px; color: var(--muted); }
.wd-preview { display: flex; justify-content: center; margin-bottom: 8px; }
.eq-bonus { border-left-color: var(--green); }
.mini-row { padding: 2px 0; }

/* тактика на бой («секундант») */
.tac-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
.tac-btn { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px;
  background: var(--card2); border: 1px solid var(--border); cursor: pointer; text-align: left; }
.tac-btn:active { transform: scale(.98); }
.tac-icon { font-size: 20px; }
.tac-btn small { color: var(--muted); font-size: 11px; }

/* ============================================================
   НЕОНОВЫЙ САЛОН (25.08): полки покупок за Неоны, ауры, таблички
   ============================================================ */
/* --- кошелёк-хиро --- */
.bq-hero {
  position: relative;
  border-radius: var(--r-lg);
  padding: 14px 14px 12px;
  margin-bottom: 10px;
  background:
    radial-gradient(120% 160% at 85% -20%, rgba(0,229,255,.16), transparent 55%),
    radial-gradient(120% 160% at 10% 120%, rgba(62,207,142,.12), transparent 55%),
    var(--card);
  border: 1px solid var(--border);
  overflow: hidden;
}
.bq-hero-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bq-hero-bal { display: flex; align-items: center; gap: 6px; font-size: 21px; font-weight: 800; letter-spacing: -.3px; }
.bq-hero-bal b { font-variant-numeric: tabular-nums; }
.bq-hero-cur { font-size: 12px; font-weight: 600; color: var(--muted); }
.bq-hero-sub { margin-top: 2px; font-size: 11px; color: var(--muted); }
.bq-spent { margin-top: 8px; font-size: 10.5px; color: var(--muted); opacity: .85; }
.bq-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 8px 2px rgba(62,207,142,.55);
  animation: bqDot 2.4s ease-in-out infinite; flex: none;
}
@keyframes bqDot { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.25); opacity: .75; } }
/* --- рейка полок (28.08: wrap вместо скрытого скролла — на мобильных крайние
   полки были недостижимы без неочевидного свайпа) --- */
.bq-rail {
  display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 2px 8px;
  margin-bottom: 4px;
}
.bq-rail-tab {
  flex: none; display: flex; align-items: center; gap: 5px;
  padding: 7px 11px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--card); color: var(--muted); font-size: 12px; font-weight: 600;
  transition: all var(--tr); min-height: 36px;
}
.bq-rail-tab .ic { width: 14px; height: 14px; }
.bq-rail-tab.active {
  color: #07100B; background: var(--grad); border-color: transparent;
  box-shadow: 0 2px 10px rgba(62,207,142,.3);
}
.bq-rail-tab.active .ic { color: #07100B; }
/* --- сегменты (подполки) --- */
.bq-segs { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.bq-seg {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--card); color: var(--muted); font-size: 12px; font-weight: 600; min-height: 34px;
}
.bq-seg svg.ic { width: 13px; height: 13px; }
.bq-seg.active { color: var(--text); border-color: var(--accent); background: rgba(62,207,142,.12); }
/* заголовок категории полки «Образ»: категория отделена от сетки (28.08) */
.bq-seg-title {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin: 2px 0 8px; padding: 8px 10px; border-radius: 10px;
  background: var(--card2); border: 1px solid var(--border);
}
.bq-seg-title-name { font-size: 13px; font-weight: 800; color: var(--text); }
.bq-seg-title-term { font-size: 11px; font-weight: 700; color: var(--accent); }
/* --- плитки товаров (сетка) --- */
.bq-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 560px) { .bq-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 800px) { .bq-grid { grid-template-columns: repeat(4, 1fr); } }
.bq-tile {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 8px 9px; border-radius: var(--r-md); border: 1px solid var(--border);
  background: var(--card); transition: border-color var(--tr), background var(--tr);
}
/* редкость плитки (02.09): цветная рамка по лестнице RARITY_META (3 Редкий / 4 Эпический / 5 Легендарный) */
.bq-tile.rar-3 { border-color: rgba(77, 163, 255, .45); }
.bq-tile.rar-4 { border-color: rgba(168, 85, 247, .5); }
.bq-tile.rar-5 { border-color: rgba(245, 185, 66, .55); box-shadow: 0 0 14px rgba(245, 185, 66, .14); }
.bq-rarity {
  position: absolute; top: 6px; left: 6px;
  font-size: 8.5px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase;
  padding: 2px 6px; border-radius: 999px; background: var(--card2);
  border: 1px solid currentColor; opacity: .95;
}
.bq-rarity.card { position: static; font-size: 9.5px; letter-spacing: .3px; margin-left: 2px; }
.bq-tile:active { background: var(--card2); border-color: var(--border-strong); }
.bq-tile-art { display: flex; align-items: center; justify-content: center; min-height: 58px; }
.bq-tile-ava .avatar { box-shadow: 0 2px 8px rgba(0,0,0,.4); }
.bq-tile-name { font-size: 11.5px; font-weight: 700; text-align: center; line-height: 1.25; min-height: 28px; display: flex; align-items: center; }
.bq-tile-price { font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 3px; }
.bq-tile-price .cur-dot { width: 7px; height: 7px; }
/* бейджи состояний */
.bq-badge {
  position: absolute; top: 6px; right: 6px;
  font-size: 9px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase;
  padding: 2px 6px; border-radius: 999px; background: var(--card2); color: var(--muted);
  border: 1px solid var(--border);
}
.bq-badge.on { background: rgba(46,204,113,.16); color: var(--green); border-color: rgba(46,204,113,.4); }
.bq-badge.owned { background: rgba(77,163,255,.14); color: #7DB8FF; border-color: rgba(77,163,255,.35); }
.bq-badge.rent { background: rgba(245,185,66,.13); color: var(--gold); border-color: rgba(245,185,66,.35); }
/* 04.09 (тикет #17): бейдж в строке имени Пантеона — static, иначе absolute улетает на крестик шторки */
.bq-badge.inline { position: static; margin-left: 4px; }
/* превью товаров */
.bq-big-art { color: var(--text); }
.bq-big-art .ic { width: 44px; height: 44px; }
.bq-big-art.big .ic { width: 64px; height: 64px; }
.bq-nick-sample { font-size: 14px; font-weight: 800; }
.bq-nick-sample.big { font-size: 21px; }
.bq-status-sample { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--text); }
.bq-status-sample .ic { width: 20px; height: 20px; }
/* --- «Твой образ» и подборки (Обзор) --- */
/* «Витрина себя» (02.09): крупное превью игрока — рамка+аура+ник+титул+статус разом */
.bq-showcase {
  display: flex; align-items: center; gap: 12px;
  padding: 12px; border-radius: var(--r-md); margin-bottom: 10px;
  border: 1px solid var(--border-strong);
  background: linear-gradient(135deg, rgba(0, 229, 255, .06), rgba(155, 123, 255, .06)), var(--card);
}
.bq-showcase-ava { flex: 0 0 auto; }
.bq-showcase-ava .avatar { width: 64px; height: 64px; font-size: 26px; box-shadow: 0 6px 18px rgba(0, 0, 0, .45); }
.bq-showcase-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.bq-showcase-name { font-weight: 800; font-size: 16px; letter-spacing: -.2px; word-break: break-word; }
.bq-showcase-title { font-size: 12px; font-weight: 700; color: var(--gold); }
.bq-showcase-title .ic { width: 14px; height: 14px; vertical-align: -2px; }
.bq-showcase-status { font-size: 12px; color: var(--muted); font-weight: 600; }
.bq-now { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; }
.bq-now-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 9px; border-radius: 999px; background: var(--card); border: 1px solid var(--border);
  font-size: 11.5px; font-weight: 600;
}
.bq-now-chip .ic { width: 14px; height: 14px; }
.bq-now-chip .cur-dot { width: 7px; height: 7px; }
.bq-feature {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 12px; border-radius: var(--r-md); border: 1px solid rgba(0,229,255,.3);
  background: linear-gradient(120deg, rgba(0,229,255,.1), rgba(155,123,255,.1)), var(--card);
  margin-bottom: 10px; text-align: left;
}
.bq-feature-art { flex: none; }
.bq-feature-art .ic { width: 34px; height: 34px; }
.bq-feature-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; font-size: 12px; }
.bq-feature-txt .muted { font-size: 11px; }
.bq-feature-go { flex: none; color: var(--accent); font-size: 15px; font-weight: 800; }
.bq-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; margin-bottom: 10px; }
.bq-pick {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 9px 6px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--card);
}
.bq-pick-name { font-size: 11px; font-weight: 700; text-align: center; line-height: 1.25; }
.bq-pick-price { font-size: 10.5px; color: var(--muted); }
/* --- лестница богов (Пантеон) --- */
.bq-ladder {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 10px 12px; margin-bottom: 7px; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--card); text-align: left;
  transition: border-color var(--tr);
}
.bq-ladder.active { border-color: rgba(245,185,66,.55); background: linear-gradient(120deg, rgba(245,185,66,.08), transparent 60%), var(--card); }
.bq-planet {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--gc, #F5B942) 55%, transparent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--gc, #F5B942) 35%, transparent);
}
.bq-planet svg.ic { width: 78%; height: 78%; }
.bq-ladder-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.bq-ladder-name { font-size: 13px; font-weight: 800; }
.bq-ladder-sub { font-size: 11px; color: var(--muted); }
.bq-ladder-go { flex: none; font-size: 12px; font-weight: 800; color: var(--accent); }
/* --- подарки: сетка вместо строки (25.08) --- */
.bq-gifts {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 4px 2px 8px;
}
@media (min-width: 560px) { .bq-gifts { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 800px) { .bq-gifts { grid-template-columns: repeat(4, 1fr); } }
.bq-gift {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 8px; border-radius: var(--r-md);
  border: 1px solid var(--border); border-top: 2px solid var(--gr, var(--border));
  background: var(--card);
}
.bq-gift-art { display: flex; align-items: center; justify-content: center; min-height: 42px; }
.bq-gift-art .ic { width: 32px; height: 32px; }
.bq-gift-name { font-size: 11px; font-weight: 700; text-align: center; line-height: 1.25; min-height: 27px; }
.bq-gift-sub { font-size: 10px; color: var(--muted); }
/* --- удобства --- */
.bq-pass {
  display: flex; align-items: center; gap: 10px;
  padding: 12px; border-radius: var(--r-md); margin-bottom: 8px;
  border: 1px solid rgba(245,185,66,.35);
  background: linear-gradient(120deg, rgba(245,185,66,.1), transparent 65%), var(--card);
}
.bq-pass.buy { border-color: rgba(62,207,142,.35); background: linear-gradient(120deg, rgba(62,207,142,.1), transparent 65%), var(--card); }
.bq-pass-txt { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; font-size: 12px; }
.bq-pass-txt .muted { font-size: 11px; }
.bq-extra {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--r-md); border: 1px solid var(--border);
  background: var(--card); margin-bottom: 7px;
}
.bq-extra-art { flex: none; color: var(--accent); }
.bq-extra-art .ic { width: 20px; height: 20px; }
.bq-extra-txt { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; font-size: 12px; }
.bq-extra-txt .muted { font-size: 11px; }
/* --- кошелёк: пакеты --- */
.bq-packs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 10px; }
@media (min-width: 560px) { .bq-packs { grid-template-columns: repeat(3, 1fr); } }
.bq-pack {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 14px 10px 12px; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--card);
}
.bq-pack.best { border-color: rgba(245,185,66,.5); background: linear-gradient(160deg, rgba(245,185,66,.1), transparent 60%), var(--card); }
.bq-pack-badge {
  position: absolute; top: -8px; right: 8px;
  font-size: 9px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px; color: #241A02; background: var(--grad-gold);
}
.bq-pack-amt { display: flex; align-items: center; gap: 5px; font-size: 19px; font-weight: 800; }
.bq-pack-sub { font-size: 10.5px; color: var(--muted); text-align: center; }
.bq-pack-btn { margin-top: 6px; padding: 7px 16px; font-size: 12px; }
.bq-rules { margin-top: 4px; }
.bq-rules summary { font-size: 11.5px; color: var(--muted); cursor: pointer; padding: 6px 0; }
.bq-rules[open] summary { color: var(--text); }
/* --- карточка товара --- */
.bq-card-art { display: flex; justify-content: center; padding: 10px 0 12px; }
.bq-card-ava .avatar { width: 72px; height: 72px; box-shadow: 0 6px 18px rgba(0,0,0,.45); }
.bq-card-name { display: flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 800; margin-bottom: 10px; }
.bq-card-name .ic { width: 20px; height: 20px; }
.bq-card-nick, .bq-card-badge { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 8px 0; }
/* «примерка»: сравнение «Сейчас» vs «Примерка» на карточке товара */
.bq-fit { display: flex; justify-content: center; gap: 16px; padding: 6px 0 2px; width: 100%; box-sizing: border-box; }
.bq-fit-col { display: flex; flex-direction: column; align-items: center; gap: 5px; flex: 1 1 0; min-width: 0; max-width: 100%; box-sizing: border-box; }
/* на экранах смартфонов колонки примерки складываем вертикально, чтобы не раздувать шторку */
@media (max-width: 520px) {
  .bq-fit { flex-direction: column; align-items: stretch; gap: 12px; }
  .bq-fit-col { max-width: 100%; width: 100%; }
}
.bq-fit-lbl { font-size: 10.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.bq-fit .bq-nick-sample.big { font-size: 17px; }
/* мини-сообщение в примерке: как выглядит в чате (реальный аватар + имя + титул/статус) */
.bq-chat {
  display: flex; align-items: flex-start; gap: 7px; width: 100%; min-width: 0; box-sizing: border-box;
  background: var(--card2); border: 1px solid var(--border); border-radius: 12px; padding: 8px;
}
.bq-chat-ava { flex: 0 0 auto; }
.bq-chat-ava .avatar { width: 30px; height: 30px; font-size: 13px; }
.bq-chat-col { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; overflow: hidden; }
.bq-chat-name { font-size: 11.5px; font-weight: 700; color: var(--text); line-height: 1.15; word-break: break-word; overflow-wrap: anywhere; }
.bq-chat-title { font-weight: 800; }
.bq-chat-title .ic { width: 13px; height: 13px; vertical-align: -2px; }
.bq-chat-status { font-size: 10.5px; font-weight: 600; opacity: .85; }
.bq-chat-bubble {
  font-size: 11px; color: var(--muted); background: var(--card); border-radius: 8px;
  padding: 4px 8px; width: max-content; max-width: 100%;
}
.bq-where { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.bq-where-chip {
  padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 600;
  background: var(--card2); border: 1px solid var(--border); color: var(--text);
}
/* --- табличка на здании --- */
.bq-plaque-b { cursor: pointer; }
.bq-plaque-b.sel { border-color: var(--accent); background: rgba(62,207,142,.08); }
/* --- ауры: свечение вокруг аватара (чистый CSS, WebView-safe) --- */
.aura { animation: auraBreathe 3.4s ease-in-out infinite; }
.aura-emerald { box-shadow: 0 0 0 2px rgba(46,204,113,.5), 0 0 13px 3px rgba(46,204,113,.3); }
.aura-plasma { box-shadow: 0 0 0 2px rgba(0,229,255,.55), 0 0 15px 4px rgba(155,123,255,.35); animation-name: auraPulse; }
.aura-sun { box-shadow: 0 0 0 2px #F5B942, 0 0 0 5px rgba(245,185,66,.22), 0 0 19px 7px rgba(245,185,66,.42); animation: auraGold 3.8s ease-in-out infinite; }
@keyframes auraBreathe {
  0%, 100% { box-shadow: 0 0 0 2px rgba(46,204,113,.5), 0 0 13px 3px rgba(46,204,113,.3); }
  50% { box-shadow: 0 0 0 2px rgba(46,204,113,.8), 0 0 21px 6px rgba(46,204,113,.5); }
}
@keyframes auraPulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(0,229,255,.55), 0 0 15px 4px rgba(155,123,255,.35); }
  50% { box-shadow: 0 0 0 2px rgba(0,229,255,.85), 0 0 22px 7px rgba(155,123,255,.55); }
}
@keyframes auraGold {
  0%, 100% { box-shadow: 0 0 0 2px #F5B942, 0 0 0 5px rgba(245, 185, 66, .22), 0 0 19px 7px rgba(245, 185, 66, .42); }
  50% { box-shadow: 0 0 0 2px #FFD97A, 0 0 0 6px rgba(245, 185, 66, .3), 0 0 26px 9px rgba(245, 185, 66, .55); }
}
/* ауры 02.09 (3 → 8): новые паттерны — пульс/мерцание/переливы */
.aura-crimson { box-shadow: 0 0 0 2px rgba(255, 77, 109, .55), 0 0 15px 4px rgba(255, 45, 85, .4); animation-name: auraCrimson; }
.aura-ember { box-shadow: 0 0 0 2px rgba(255, 140, 66, .55), 0 0 14px 4px rgba(255, 110, 40, .4); animation-name: auraEmber; }
.aura-royal { box-shadow: 0 0 0 2px rgba(77, 163, 255, .5), 0 0 15px 4px rgba(45, 110, 255, .35); animation-name: auraRoyal; }
.aura-void { box-shadow: 0 0 0 2px rgba(140, 90, 220, .55), 0 0 16px 5px rgba(90, 60, 180, .4); animation-name: auraVoid; }
.aura-aurora { box-shadow: 0 0 0 2px rgba(60, 220, 180, .5), 0 0 18px 5px rgba(155, 123, 255, .35); animation-name: auraAurora; }
@keyframes auraCrimson {
  0%, 100% { box-shadow: 0 0 0 2px rgba(255, 77, 109, .55), 0 0 15px 4px rgba(255, 45, 85, .4); }
  50% { box-shadow: 0 0 0 2px rgba(255, 77, 109, .9), 0 0 22px 7px rgba(255, 45, 85, .6); }
}
@keyframes auraEmber {
  0%, 100% { box-shadow: 0 0 0 2px rgba(255, 140, 66, .5), 0 0 10px 2px rgba(255, 110, 40, .3); }
  30% { box-shadow: 0 0 0 2px rgba(255, 170, 90, .85), 0 0 20px 6px rgba(255, 120, 40, .55); }
  60% { box-shadow: 0 0 0 2px rgba(255, 120, 50, .6), 0 0 12px 3px rgba(255, 110, 40, .35); }
}
@keyframes auraRoyal {
  0%, 100% { box-shadow: 0 0 0 2px rgba(77, 163, 255, .5), 0 0 15px 4px rgba(45, 110, 255, .35); }
  50% { box-shadow: 0 0 0 3px rgba(77, 163, 255, .85), 0 0 24px 8px rgba(45, 110, 255, .55); }
}
@keyframes auraVoid {
  0%, 100% { box-shadow: 0 0 0 2px rgba(140, 90, 220, .55), 0 0 16px 5px rgba(90, 60, 180, .4); }
  50% { box-shadow: 0 0 0 2px rgba(160, 110, 240, .9), 0 0 20px 8px rgba(120, 80, 220, .55); }
}
@keyframes auraAurora {
  0%, 100% { box-shadow: 0 0 0 2px rgba(60, 220, 180, .5), 0 0 18px 5px rgba(155, 123, 255, .35); }
  33% { box-shadow: 0 0 0 2px rgba(90, 180, 255, .75), 0 0 24px 8px rgba(77, 163, 255, .5); }
  66% { box-shadow: 0 0 0 2px rgba(255, 120, 190, .7), 0 0 22px 8px rgba(255, 122, 195, .45); }
}
@media (prefers-reduced-motion: reduce) {
  .aura, .bq-dot { animation: none; }
}
/* превью ауры в плитках/карточках */
.aura-preview {
  position: relative; display: inline-block; width: 54px; height: 54px; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #2A3040, #151B28 72%);
}
/* аура в мелких контекстах (чипы «Твой образ», заголовок карточки) */
.bq-now-chip .aura-preview { width: 16px; height: 16px; }
.bq-card-name .aura-preview { width: 18px; height: 18px; }
/* вспышка-фидбек покупки в бутике (02.09): поверх экрана, pointer-events none */
.bq-flash {
  position: fixed; left: 50%; top: 40%; z-index: 1200; pointer-events: none;
  font-size: 64px; line-height: 1; color: #7DF9FF;
  text-shadow: 0 0 18px rgba(0, 229, 255, .9), 0 0 40px rgba(155, 123, 255, .7);
  transform: translate(-50%, -50%);
  animation: bqFlashPop .75s ease-out forwards;
}
@keyframes bqFlashPop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.3); }
  22% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
  55% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.35); }
}

/* =====================================================================
   БОИ: анимационная сцена трансляции (26.08, визуальный апгрейд)
   ===================================================================== */
.bcast-stage {
  position: relative; height: 288px; overflow: hidden; border-radius: 16px;
  background: radial-gradient(ellipse at 50% 115%, #262c3b 0%, #12161f 75%);
  border: 1px solid var(--border);
}
.bcast-hud {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px;
  background: linear-gradient(180deg, rgba(10,13,20,.85), transparent);
}
.bcast-side { flex: 1; min-width: 0; }
.bcast-side.b { text-align: right; }
.bcast-name { font-weight: 800; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bcast-rec { font-size: 10px; color: var(--muted); }
.bcast-hpbar { height: 8px; border-radius: 5px; background: var(--card2); overflow: hidden; margin: 6px 0 2px; position: relative; }
.bcast-hptxt { position: absolute; right: 0; top: -13px; font-size: 9px; font-weight: 700; color: var(--muted); }
.bcast-side.b .bcast-hptxt { right: auto; left: 0; }
.bcast-hpfill {
  height: 100%; width: 100%; border-radius: 5px;
  background: linear-gradient(90deg, #23b26d, #3ecf8e);
  transition: width 1.6s cubic-bezier(.4,0,.2,1);
}
.bcast-hpfill.low { background: linear-gradient(90deg, #e5484d, #ff6b4a); animation: hpPulse 1s ease-in-out infinite; }
@keyframes hpPulse { 50% { opacity: .75; } }
.bcast-round {
  align-self: center; flex: none; font-size: 10.5px; font-weight: 900; color: var(--gold);
  letter-spacing: 1px; background: var(--panel); border-radius: 20px; padding: 4px 9px; white-space: nowrap;
}
.bcast-area { position: absolute; inset: 44px 0 0; }
/* 31.08 сцена трансляции: пол-канвас и софиты (только CSS, тёмно-navy токены,
   без растровых картинок; лёгкие градиенты — не дёргают перерисовку) */
.bcast-area::before {
  content: ''; position: absolute; left: -6%; right: -6%; bottom: 0; height: 76px; z-index: 0;
  background:
    radial-gradient(ellipse at 50% 118%, rgba(77, 163, 255, .16), transparent 64%),
    linear-gradient(180deg, transparent, rgba(8, 11, 17, .9) 78%);
  border-top: 1px solid rgba(122, 140, 178, .16);
}
.bcast-area::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(circle at 20% 8%, rgba(245, 185, 66, .12), transparent 40%),
    radial-gradient(circle at 80% 8%, rgba(77, 163, 255, .12), transparent 40%),
    radial-gradient(ellipse at 50% 60%, transparent 52%, rgba(4, 7, 12, .5) 100%);
}
/* HIT-STOP (31.08): фикс-кадр на точном попадании — короткий (~110мс) scale/сдвиг
   вместо полного фриза: таймеры шагов и такты трансляции не дёргаются */
.bcast-fighter.hitstop { animation: hitstopL .11s var(--ease) both; }
.bcast-fighter.fb.hitstop { animation-name: hitstopR; }
@keyframes hitstopL { 0% { transform: scale(1); } 30% { transform: scale(1.07) translateX(2px); } 100% { transform: scale(1); } }
@keyframes hitstopR { 0% { transform: scale(1); } 30% { transform: scale(1.07) translateX(-2px); } 100% { transform: scale(1); } }
.bcast-fighter { position: absolute; bottom: 10px; z-index: 2; transition: transform .55s cubic-bezier(.4,0,.2,1); will-change: transform; }
/* 30.08: бойцы ближе к центру (было 5% — били в воздух); fb БЕЗ scaleX(-1) —
   зеркало инвертировало направления анимаций (правый бил от соперника) */
.bcast-fighter.fa { left: 16%; }
.bcast-fighter.fb { right: 16%; }
/* 30.08: box-shadow вместо filter:drop-shadow — фильтр перерисовывается каждый кадр анимации */
.bcast-fighter .fighter-avatar { display: block; border-radius: 16px; box-shadow: 0 8px 14px rgba(0,0,0,.55); }
.bcast-inner { animation: bcastBob 2.8s ease-in-out infinite; will-change: transform; }
@keyframes bcastBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.bcast-fighter.in { animation: bcastWalkIn .9s cubic-bezier(.22,1,.36,1) both; }
.bcast-fighter.fb.in { animation: bcastWalkInR .9s cubic-bezier(.22,1,.36,1) both; }
@keyframes bcastWalkIn { from { transform: translateX(-160%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes bcastWalkInR { from { transform: translateX(160%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
/* клинч: оба сходятся в центр */
.bcast-fighter.fa.clinch { transform: translateX(42%); }
.bcast-fighter.fb.clinch { transform: translateX(-42%); }
.bcast-fighter.clinch .bcast-inner { animation: clinchWob .55s ease-in-out infinite; }
@keyframes clinchWob { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-4px) rotate(3deg); } }
/* атаки: выпад к центру (30.08: 64px вместо 46 — удар достаёт из новой стойки) */
.bcast-fighter.fa.punch .bcast-inner { animation: faPunch .5s cubic-bezier(.3,1.4,.5,1); }
@keyframes faPunch { 0% { transform: translateX(0) rotate(0); } 12% { transform: translateX(-10px) rotate(4deg); } 42% { transform: translateX(64px) rotate(-8deg) scale(1.04); } 100% { transform: translateX(0) rotate(0); } }
.bcast-fighter.fb.punch .bcast-inner { animation: fbPunch .5s cubic-bezier(.3,1.4,.5,1); }
@keyframes fbPunch { 0% { transform: translateX(0) rotate(0); } 12% { transform: translateX(10px) rotate(-4deg); } 42% { transform: translateX(-64px) rotate(8deg) scale(1.04); } 100% { transform: translateX(0) rotate(0); } }
.bcast-fighter.fa.series .bcast-inner { animation: faSeries .55s ease; }
@keyframes faSeries { 0%,100% { transform: translateX(0); } 10% { transform: translateX(-7px) rotate(3deg); } 26% { transform: translateX(54px) rotate(-6deg); } 46% { transform: translateX(6px); } 66% { transform: translateX(64px) rotate(-8deg); } 84% { transform: translateX(4px); } }
.bcast-fighter.fb.series .bcast-inner { animation: fbSeries .55s ease; }
@keyframes fbSeries { 0%,100% { transform: translateX(0); } 10% { transform: translateX(7px) rotate(-3deg); } 26% { transform: translateX(-54px) rotate(6deg); } 46% { transform: translateX(-6px); } 66% { transform: translateX(-64px) rotate(8deg); } 84% { transform: translateX(-4px); } }
/* реакции защиты */
.bcast-fighter.fa.hit .bcast-inner { animation: hitL .45s ease; }
@keyframes hitL { 0%,100% { transform: translateX(0) scale(1); } 25% { transform: translateX(-7px) scale(.95); } 55% { transform: translateX(3px) scale(.98); } }
.bcast-fighter.fb.hit .bcast-inner { animation: hitR .45s ease; }
@keyframes hitR { 0%,100% { transform: translateX(0) scale(1); } 25% { transform: translateX(7px) scale(.95); } 55% { transform: translateX(-3px) scale(.98); } }
.bcast-fighter.fa.hit-crit .bcast-inner { animation: hitCritL .55s ease; }
@keyframes hitCritL { 0%,100% { transform: translateX(0) scale(1); } 20% { transform: translateX(-11px) scale(.9) rotate(-6deg); } 50% { transform: translateX(4px) scale(.97); } }
.bcast-fighter.fb.hit-crit .bcast-inner { animation: hitCritR .55s ease; }
@keyframes hitCritR { 0%,100% { transform: translateX(0) scale(1); } 20% { transform: translateX(11px) scale(.9) rotate(6deg); } 50% { transform: translateX(-4px) scale(.97); } }
.bcast-fighter.fa.dodge .bcast-inner { animation: dodgeL .5s cubic-bezier(.3,1,.5,1); }
@keyframes dodgeL { 0% { transform: translateX(0); } 30% { transform: translateX(14px) translateY(-12px) rotate(12deg); } 100% { transform: translateX(0); } }
.bcast-fighter.fb.dodge .bcast-inner { animation: dodgeR .5s cubic-bezier(.3,1,.5,1); }
@keyframes dodgeR { 0% { transform: translateX(0); } 30% { transform: translateX(-14px) translateY(-12px) rotate(-12deg); } 100% { transform: translateX(0); } }
.bcast-fighter.fa.block .bcast-inner { animation: blockL .45s ease; }
@keyframes blockL { 0%,100% { transform: translateX(0) scale(1,1); } 30% { transform: translateX(-6px) scale(1.08,.94); } }
.bcast-fighter.fb.block .bcast-inner { animation: blockR .45s ease; }
@keyframes blockR { 0%,100% { transform: translateX(0) scale(1,1); } 30% { transform: translateX(6px) scale(1.08,.94); } }
/* нокдаун и нокаут: падение (остаётся лежать до следующего шага) */
.bcast-fighter.fa.kd .bcast-inner { animation: kdFallL .75s cubic-bezier(.5,0,.8,.4) forwards; }
.bcast-fighter.fb.kd .bcast-inner { animation: kdFallR .75s cubic-bezier(.5,0,.8,.4) forwards; }
@keyframes kdFallL { to { transform: translate(-10px, 30px) rotate(-72deg) scale(.94); } }
@keyframes kdFallR { to { transform: translate(10px, 30px) rotate(72deg) scale(.94); } }
.bcast-fighter.fa.ko .bcast-inner { animation: koFallL 1s cubic-bezier(.5,0,.8,.4) forwards; }
.bcast-fighter.fb.ko .bcast-inner { animation: koFallR 1s cubic-bezier(.5,0,.8,.4) forwards; }
@keyframes koFallL { 30% { transform: rotate(-14deg); } to { transform: translate(-14px, 38px) rotate(-84deg) scale(.9); filter: grayscale(.8); } }
@keyframes koFallR { 30% { transform: rotate(14deg); } to { transform: translate(14px, 38px) rotate(84deg) scale(.9); filter: grayscale(.8); } }
/* 01.09 (консультация 30.08, п.5): ПОДЪЁМ после нокдауна — встаёт из позы падения
   (обратная анимация kdFall с forwards), удар с задержкой — сначала подъём, потом выпад */
.bcast-fighter.kd-up .bcast-inner { animation: kdUpL .55s cubic-bezier(.4,0,.6,1) both; }
.bcast-fighter.fb.kd-up .bcast-inner { animation: kdUpR .55s cubic-bezier(.4,0,.6,1) both; }
@keyframes kdUpL { from { transform: translate(-10px, 30px) rotate(-72deg) scale(.94); } to { transform: translate(0,0) rotate(0) scale(1); } }
@keyframes kdUpR { from { transform: translate(10px, 30px) rotate(72deg) scale(.94); } to { transform: translate(0,0) rotate(0) scale(1); } }
.bcast-fighter.fa.kd-up-punch .bcast-inner { animation: kdUpL .55s cubic-bezier(.4,0,.6,1) both, faPunch .5s cubic-bezier(.3,1.4,.5,1) .55s; }
.bcast-fighter.fb.kd-up-punch .bcast-inner { animation: kdUpR .55s cubic-bezier(.4,0,.6,1) both, fbPunch .5s cubic-bezier(.3,1.4,.5,1) .55s; }
/* 01.09 (консультация 30.08, п.4): тень-эллипс под бойцом — сжимается в выпаде */
.bcast-shadow {
  position: absolute; bottom: 2px; width: 62px; height: 13px; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,.55), transparent 68%);
}
.bcast-shadow.sa { left: calc(16% + 16px); }
.bcast-shadow.sb { right: calc(16% + 16px); }
.bcast-fighter.fa.punch + .bcast-shadow.sa { animation: shadowSquash .5s ease; }
.bcast-fighter.fb.punch + .bcast-shadow.sb { animation: shadowSquash .5s ease; }
.bcast-fighter.fa.series + .bcast-shadow.sa { animation: shadowSquash .55s ease; }
.bcast-fighter.fb.series + .bcast-shadow.sb { animation: shadowSquash .55s ease; }
@keyframes shadowSquash { 0%,100% { transform: scale(1,1); opacity: 1; } 40% { transform: scale(.62,1.35); opacity: .7; } }
/* 01.09 (консультация 30.08, п.4): KO — медленный зум сцены */
.bcast-stage.ko-zoom { animation: koZoom 2.4s cubic-bezier(.4,0,.2,1); }
@keyframes koZoom { 0% { transform: scale(1); } 35% { transform: scale(1.05); } 100% { transform: scale(1); } }
/* 01.09 (консультация 30.08, п.3): вспышка защитника на точном попадании */
.bcast-fighter.hit .fighter-avatar, .bcast-fighter.hit-crit .fighter-avatar { animation: hitBright .45s ease; }
@keyframes hitBright { 0% { filter: brightness(2.1); } 100% { filter: brightness(1); } }
/* 01.09 (P1): скорость просмотра */
.bcast-speed { display: inline-flex; gap: 4px; margin-right: auto; }
.bcast-speed .spd { opacity: .55; }
.bcast-speed .spd.on { opacity: 1; background: rgba(245, 185, 66, .2); border-color: rgba(245, 185, 66, .55); color: var(--gold); }
/* событие под рингом */
.bcast-event {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); max-width: 92%;
  text-align: center; font-weight: 800; font-size: 13.5px; color: var(--text); z-index: 4;
  background: rgba(12,15,24,.72); border: 1px solid var(--border); border-radius: 12px;
  padding: 7px 14px; animation: evPop .3s cubic-bezier(.3,1.4,.5,1); /* 30.08: без backdrop-filter — дорогая перерисовка подложки */
}
.bcast-event.crit { color: #ffb3b3; border-color: rgba(255,92,92,.55); font-size: 15px; }
.bcast-event.ko { color: #ff5c5c; font-size: 17px; animation: evPop .35s cubic-bezier(.3,1.6,.5,1) .06s both; }
.bcast-event.round { color: var(--gold); letter-spacing: 2px; }
.bcast-event.entrance { color: var(--muted); font-weight: 600; }
@keyframes evPop { from { opacity: 0; transform: translateX(-50%) scale(.7); } to { opacity: 1; transform: translateX(-50%) scale(1); } }
/* всплывающий урон */
.bcast-pop { position: absolute; inset: 0; pointer-events: none; z-index: 5; overflow: hidden; }
.bcast-popup {
  position: absolute; font-size: 17px; font-weight: 900; pointer-events: none;
  text-shadow: 0 2px 6px rgba(0,0,0,.6); animation: popUp 1.25s ease-out forwards;
}
.bcast-popup.big { font-size: 23px; animation: popUpBig 1.35s cubic-bezier(.2,1.4,.4,1) forwards; }
@keyframes popUp { 0% { opacity: 0; transform: translateY(6px) scale(.6); } 12% { opacity: 1; transform: translateY(0) scale(1.15); } 28% { transform: translateY(-4px) scale(1); } 100% { opacity: 0; transform: translateY(-46px) scale(1); } }
@keyframes popUpBig { 0% { opacity: 0; transform: translateY(8px) scale(.5); } 15% { opacity: 1; transform: translateY(0) scale(1.3); } 100% { opacity: 0; transform: translateY(-60px) scale(1.1); } }
.bcast-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 6; }
.bcast-stage.shake { animation: stageShake .45s linear; }
@keyframes stageShake {
  0%,100% { transform: translate(0,0); }
  20% { transform: translate(calc(var(--shake-px,6px) * -1), 2px); }
  40% { transform: translate(var(--shake-px,6px), -2px); }
  60% { transform: translate(calc(var(--shake-px,6px) * -.6), 1px); }
  80% { transform: translate(calc(var(--shake-px,6px) * .6), -1px); }
}
.bcast-stage.flash-round::after, .bcast-stage.flash-ko::after, .bcast-stage.flash-win::after {
  content: ''; position: absolute; inset: 0; z-index: 7; pointer-events: none; animation: flashFade .8s ease-out forwards;
}
.bcast-stage.flash-round::after { background: radial-gradient(circle, rgba(255,255,255,.28), transparent 70%); }
.bcast-stage.flash-ko::after { background: radial-gradient(circle, rgba(255,60,60,.32), transparent 72%); }
.bcast-stage.flash-win::after { background: radial-gradient(circle, rgba(62,207,142,.3), transparent 72%); }
@keyframes flashFade { from { opacity: 1; } to { opacity: 0; } }

/* ===== 03.09: ринг (A), состояния HP (E), позы защиты (F), slow-mo повтор (G) ===== */
/* (A) тёмная толпа на фоне — статичные градиенты + две редкие «вспышки» opacity */
.bcast-crowd {
  position: absolute; top: 0; left: 0; right: 0; height: 64px; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at 50% -30%, rgba(77, 163, 255, .10), transparent 60%),
    repeating-radial-gradient(circle at 12% 100%, rgba(154, 164, 178, .10) 0 2px, transparent 2px 9px),
    repeating-radial-gradient(circle at 32% 100%, rgba(122, 140, 178, .08) 0 2px, transparent 2px 11px),
    repeating-radial-gradient(circle at 62% 100%, rgba(154, 164, 178, .09) 0 2px, transparent 2px 10px),
    repeating-radial-gradient(circle at 88% 100%, rgba(122, 140, 178, .08) 0 2px, transparent 2px 12px),
    linear-gradient(180deg, rgba(8, 11, 17, .2), rgba(8, 11, 17, .88));
}
.bcast-crowd::before, .bcast-crowd::after {
  content: ''; position: absolute; width: 26px; height: 26px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .5), transparent 70%);
  opacity: 0; animation: crowdFlash 7s ease-out infinite;
}
.bcast-crowd::before { left: 22%; top: 18%; animation-delay: 2.3s; }
.bcast-crowd::after { right: 18%; top: 34%; animation-delay: 5.1s; }
@keyframes crowdFlash { 0%, 100% { opacity: 0; } 2% { opacity: 1; } 8% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .bcast-crowd::before, .bcast-crowd::after { animation: none; }
}
/* (A) мат: эллипс прожектора под бойцами */
.bcast-mat {
  position: absolute; left: 6%; right: 6%; bottom: 0; height: 96px; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 108%, rgba(122, 163, 255, .20), transparent 58%),
    radial-gradient(ellipse at 50% 112%, rgba(0, 0, 0, .38), transparent 66%);
}
/* (A) канаты: 3 линии с провисом (SVG), задние — за бойцами, передние — перед */
.bcast-ropes { position: absolute; left: 2.5%; width: 95%; height: 26px; pointer-events: none; }
.bcast-ropes.back { top: 24px; z-index: 1; }
.bcast-ropes.front { bottom: 4px; height: 22px; z-index: 3; }
.bcast-ropes path { fill: none; stroke-width: 1; vector-effect: non-scaling-stroke; }
.bcast-ropes.back path:nth-child(1), .bcast-ropes.front path:nth-child(1) { stroke: rgba(223, 230, 240, .75); }
.bcast-ropes.back path:nth-child(2), .bcast-ropes.front path:nth-child(2) { stroke: rgba(245, 185, 66, .65); }
.bcast-ropes.back path:nth-child(3), .bcast-ropes.front path:nth-child(3) { stroke: rgba(223, 230, 240, .55); }
.bcast-ropes.front path { opacity: .85; }
/* (A) угловые столбы */
.bcast-post {
  position: absolute; width: 6px; border-radius: 3px; pointer-events: none;
  background: linear-gradient(180deg, #3a4356, #232a38); box-shadow: 0 0 0 1px rgba(122, 140, 178, .25);
}
.bcast-post.back { top: 22px; height: 46px; z-index: 1; }
.bcast-post.back.l { left: 2.5%; } .bcast-post.back.r { right: 2.5%; }
.bcast-post.front { bottom: 2px; height: 34px; z-index: 4; background: linear-gradient(180deg, #2c3444, #1a2029); }
.bcast-post.front.l { left: 1%; } .bcast-post.front.r { right: 1%; }
/* (C) плашка счёта раундов под HUD */
.bcast-score {
  position: absolute; top: 42px; left: 50%; transform: translateX(-50%); z-index: 3;
  font-size: 9.5px; font-weight: 800; color: var(--muted); background: rgba(12, 15, 24, .72);
  border: 1px solid var(--border); border-radius: 10px; padding: 2px 8px; white-space: nowrap;
}
.bcast-score:empty { display: none; }
/* (E) overlay состояния бойца: SVG капель пота и царапины поверх аватара */
.bcast-wear { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }
.bcast-wear .bw-sweat, .bcast-wear .bw-hurt { opacity: 0; transition: opacity .5s ease; }
.bcast-fighter.bcast-tired .bw-sweat { opacity: .85; }
.bcast-fighter.bcast-hurt .bw-hurt { opacity: .95; }
.bcast-fighter.bcast-hurt .bw-sweat { opacity: .85; }
.bcast-fighter.bcast-tired .fighter-avatar { filter: saturate(.74) brightness(.97); }
.bcast-fighter.bcast-hurt .fighter-avatar { filter: saturate(.55) brightness(.93) sepia(.1); }
/* (F) позы блока и уворота на .bcast-fighter (НЕ на svg, БЕЗ scaleX(-1));
   самовозвратные keyframes — корпус уходит назад и возвращается без таймеров */
.bcast-fighter.fa.bd-block { animation: bdBlockL .8s var(--ease) both; }
.bcast-fighter.fb.bd-block { animation: bdBlockR .8s var(--ease) both; }
@keyframes bdBlockL { 0%, 100% { transform: translateX(0) rotate(0); } 30% { transform: translateX(-8px) rotate(-4deg); } 75% { transform: translateX(-6px) rotate(-3deg); } }
@keyframes bdBlockR { 0%, 100% { transform: translateX(0) rotate(0); } 30% { transform: translateX(8px) rotate(4deg); } 75% { transform: translateX(6px) rotate(3deg); } }
.bcast-fighter.fa.bd-dodge { animation: bdDodgeL .9s var(--ease) both; }
.bcast-fighter.fb.bd-dodge { animation: bdDodgeR .9s var(--ease) both; }
@keyframes bdDodgeL { 0%, 100% { transform: translateX(0) rotate(0); } 25% { transform: translateX(-14px) rotate(-10deg); } 70% { transform: translateX(-11px) rotate(-7deg); } }
@keyframes bdDodgeR { 0%, 100% { transform: translateX(0) rotate(0); } 25% { transform: translateX(14px) rotate(10deg); } 70% { transform: translateX(11px) rotate(7deg); } }
/* (G) slow-mo повтор: замедляем все позы-анимации .bcast-inner (transform/opacity) */
.bcast-stage.replay .bcast-fighter .bcast-inner { animation-duration: 1.4s !important; }
.bs-rep { font-size: 10px; color: var(--muted); font-weight: 700; letter-spacing: .5px; vertical-align: middle; }
/* (D) статистика в итоговом экране */
.bcast-stats { margin-top: 6px; border: 1px solid var(--border); border-radius: 12px; padding: 8px 10px; background: var(--card2); }
.bs-row { display: flex; align-items: center; gap: 6px; font-size: 12px; padding: 2px 0; }
.bs-title { font-weight: 800; font-size: 11.5px; }
.bs-a { flex: 1; text-align: left; color: #3ecf8e; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bs-b { flex: 1; text-align: right; color: #4da3ff; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bs-t { flex: none; color: var(--muted); font-size: 10.5px; }
.bs-rounds { margin-top: 6px; display: flex; flex-direction: column; gap: 3px; }
.bs-rline { display: flex; align-items: center; gap: 6px; }
.bs-rline em { font-style: normal; font-size: 9.5px; color: var(--muted); width: 18px; flex: none; }
.bs-track { flex: 1; height: 6px; border-radius: 3px; background: var(--panel); display: flex; overflow: hidden; }
.bs-track .ta { background: #3ecf8e; border-radius: 3px 0 0 3px; }
.bs-track .tb { background: #4da3ff; margin-left: auto; border-radius: 0 3px 3px 0; }

/* =====================================================================
   БОИ: карточка бойца — стиль «Fight Passport / Tale of the Tape»
   ===================================================================== */
.fcard-head {
  display: flex; gap: 14px; align-items: center; padding: 12px 14px; margin: -12px -14px 10px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--rc, #3ecf8e) 22%, transparent), transparent 75%);
  border-bottom: 1px solid var(--border);
}
.fcard-avatar { flex: none; position: relative; }
.fcard-avatar .fighter-avatar { border-radius: 16px; border: 1.5px solid color-mix(in srgb, var(--rc, #3ecf8e) 45%, var(--border)); box-shadow: 0 4px 12px rgba(0,0,0,.25); }
.fcard-info { flex: 1; min-width: 0; }
.fcard-title-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.fcard-info .fighter-name { font-size: 15px; font-weight: 800; letter-spacing: 0.2px; line-height: 1.2; margin-bottom: 2px; }
.fcard-div-line { font-size: 11px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.fcard-record-box {
  display: inline-flex; align-items: center; gap: 5px; background: var(--panel);
  border: 1px solid var(--border); border-radius: 8px; padding: 3px 8px; margin-bottom: 6px;
}
.fcard-record-box .rec-w { font-weight: 800; font-size: 12px; color: var(--accent); }
.fcard-record-box .rec-slash { font-weight: 600; font-size: 10px; color: var(--muted); opacity: .6; }
.fcard-record-box .rec-l { font-weight: 800; font-size: 12px; color: var(--red); }
.fcard-record-box .rec-d { font-weight: 800; font-size: 12px; color: var(--muted); }
.fcard-ko-chip { font-size: 10px; font-weight: 800; color: #ffb347; background: rgba(255,179,71,.12); border-radius: 6px; padding: 2px 6px; margin-left: 3px; }
.fcard-streak-chip { font-size: 10px; font-weight: 800; color: #ff5c5c; background: rgba(255,92,92,.12); border-radius: 6px; padding: 2px 6px; }
.fcard-badges-row { display: flex; flex-wrap: wrap; gap: 4px; }
.fcard-pill { font-size: 10px; font-weight: 700; color: var(--text); background: var(--panel); border: 1px solid var(--border); border-radius: 6px; padding: 2px 7px; display: inline-flex; align-items: center; gap: 4px; }

/* 3 боевых индекса крупными цифрами: STR / DEF / TAC */
.fcard-indices {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin: 4px 0 10px;
}
.findex-col {
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  padding: 8px 6px; text-align: center; display: flex; flex-direction: column; align-items: center;
}
.findex-col.str { border-color: rgba(255,92,92,.35); background: linear-gradient(180deg, rgba(255,92,92,.08), var(--panel)); }
.findex-col.def { border-color: rgba(77,163,255,.35); background: linear-gradient(180deg, rgba(77,163,255,.08), var(--panel)); }
.findex-col.tac { border-color: rgba(245,185,66,.35); background: linear-gradient(180deg, rgba(245,185,66,.08), var(--panel)); }
.findex-num { font-size: 20px; font-weight: 900; line-height: 1.1; letter-spacing: -0.5px; }
.findex-col.str .findex-num { color: #ff5c5c; }
.findex-col.def .findex-num { color: #4da3ff; }
.findex-col.tac .findex-num { color: #f5b942; }
.findex-tag { font-size: 9.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.3px; margin-top: 2px; }

/* Компактный ряд слотов экипировки бойца */
.fcard-slots-bar {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin: 2px 0 8px;
}
.fslot-chip {
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
  padding: 6px 2px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2px;
  cursor: pointer; transition: transform var(--tr), border-color var(--tr);
}
.fslot-chip:active { transform: scale(.95); }
.fslot-chip.worn { border-color: rgba(62,207,142,.45); background: rgba(62,207,142,.06); }
.fslot-chip.empty { opacity: .65; }
.fslot-ico { font-size: 13px; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; }
.fslot-ico svg { width: 14px; height: 14px; }
.fslot-name { font-size: 8.5px; font-weight: 700; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.fslot-dot { font-size: 8px; color: var(--accent); line-height: 1; }
.fslot-plus { font-size: 10px; font-weight: 800; color: var(--muted); line-height: 1; }

/* чип активных модификаторов экипировки */
.fcard-mod-chips { margin: 4px 0 8px; }
.fcard-mod-chip {
  display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 600;
  color: var(--accent); background: rgba(62,207,142,.08); border: 1px solid rgba(62,207,142,.28);
  border-radius: 8px; padding: 4px 10px; line-height: 1.3;
}
.fcard-mod-chip svg { flex: none; width: 13px; height: 13px; }

/* Совместимость со старыми классами чипов/особенностей/статов */
.chip-sm { font-size: 10px; font-weight: 700; color: var(--muted); background: var(--panel); border: 1px solid var(--border); border-radius: 999px; padding: 3px 9px; }
.chip-sm.hot { color: #ffb347; border-color: rgba(255,179,71,.5); }
.fcard-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; padding: 2px 0 6px; }
.fstat { display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--muted); }
.fstat-n { width: 74px; flex: none; text-align: right; }
.fstat-bar { flex: 1; height: 5px; background: var(--card2); border-radius: 3px; overflow: hidden; }
.fstat-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--rc, #4da3ff), color-mix(in srgb, var(--rc, #4da3ff) 55%, #fff)); }
.fstat-v { width: 20px; flex: none; font-weight: 800; color: var(--text); }
.fcard-traits { display: flex; flex-wrap: wrap; gap: 5px; margin: 4px 0 8px; }
.trait-chip { font-size: 10.5px; font-weight: 700; color: var(--text); background: var(--panel); border: 1px solid var(--border); border-radius: 20px; padding: 3px 9px; }

/* =====================================================================
   КАЗИНО: анимации слотов/рулетки/костей/монеты (26.08)
   ===================================================================== */
.slot-reel { position: relative; overflow: hidden; }
.slot-reels.rolling .slot-reel { animation: slotRoll .6s linear infinite; }
@keyframes slotRoll { 0% { transform: translateY(-14px); filter: blur(1px); } 50% { transform: translateY(14px); filter: blur(1.4px); } 100% { transform: translateY(-14px); filter: blur(1px); } }
.slot-reel.land { animation: slotLand .5s cubic-bezier(.2,1.2,.3,1) both; }
@keyframes slotLand { from { transform: translateY(-46px) scale(.7); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
.slot-reels.win { animation: slotWinPulse .9s ease-in-out 2; }
.slot-reels.win .slot-reel { border-color: rgba(245,185,66,.8); box-shadow: 0 0 14px rgba(245,185,66,.45); }
@keyframes slotWinPulse { 50% { transform: scale(1.04); } }
.roulette-num.hit { animation: rouletteHit .9s ease; }
.roulette-num.hit-win { border-color: #f5b942; box-shadow: 0 0 12px rgba(245,185,66,.75); }
@keyframes rouletteHit { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
.dice-box { display: flex; gap: 14px; justify-content: center; margin: 12px 0; }
.die { width: 58px; height: 58px; display: flex; align-items: center; justify-content: center; background: transparent; border-radius: 12px; }
.die svg { width: 46px; height: 46px; display: block; filter: drop-shadow(0 3px 6px rgba(0,0,0,.4)); }
.dice-box.rolling .die { animation: dieRoll .55s ease-in-out infinite alternate; }
@keyframes dieRoll { from { transform: rotate(-14deg) translateY(-6px); } to { transform: rotate(14deg) translateY(6px); } }
.die.land { animation: dieLand .5s var(--ease-spring) both; }
@keyframes dieLand { from { transform: rotate(120deg) scale(.6); opacity: 0; } to { transform: rotate(0) scale(1); opacity: 1; } }
.coin-box { display: flex; justify-content: center; margin: 14px 0; }
.coin-face { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; font-size: 34px; background: linear-gradient(135deg, #3a3f4e, #232836); border: 2px solid #f5b942; border-radius: 50%; box-shadow: 0 0 16px rgba(245,185,66,.35), inset 0 0 8px rgba(0,0,0,.5); }
.coin-box.rolling .coin-face { animation: coinFlip .6s linear infinite; }
@keyframes coinFlip { 0% { transform: rotateY(0); } 100% { transform: rotateY(360deg); } }
.coin-face.land { animation: coinLand .5s cubic-bezier(.2,1.4,.3,1) both; }
.coin-face.heads { border-color: #3ecf8e; box-shadow: 0 0 16px rgba(62,207,142,.4), inset 0 0 8px rgba(0,0,0,.5); }
.coin-face.tails { border-color: #e5484d; box-shadow: 0 0 16px rgba(229,72,77,.4), inset 0 0 8px rgba(0,0,0,.5); }
@keyframes coinLand { from { transform: rotateY(540deg) scale(.6); } to { transform: rotateY(0) scale(1); } }
.casino-fx { position: fixed; width: 7px; height: 7px; border-radius: 2px; background: var(--fx-color); pointer-events: none; z-index: 9999; animation: casinoFxUp 1s ease-out forwards; }
@keyframes casinoFxUp { 0% { opacity: 1; transform: translate(0,0) rotate(0) scale(1); } 100% { opacity: 0; transform: translate(var(--fx-x), var(--fx-y)) rotate(220deg) scale(.3); } }

/* =====================================================================
   ПОЛИРОВКА АНИМАЦИЙ (26.08 06:00): мягкое появление карточек сеток,
   разовая вспышка новых событий ленты. Только opacity/background —
   без transform (не конфликтует с :active), коротко и не назойливо.
   ===================================================================== */
@keyframes cardIn { from { opacity: 0; } to { opacity: 1; } }
.hub-grid .hub-card, .bq-grid .bq-tile, .casino-game, .company-tile {
  animation: cardIn .3s ease backwards;
}
/* лёгкая волна для первых карточек сеток (не дольше ~0.2с) */
.hub-grid .hub-card:nth-child(2), .bq-grid .bq-tile:nth-child(2), .casino-game:nth-child(2), .company-tile:nth-child(2) { animation-delay: .04s; }
.hub-grid .hub-card:nth-child(3), .bq-grid .bq-tile:nth-child(3), .casino-game:nth-child(3), .company-tile:nth-child(3) { animation-delay: .08s; }
.hub-grid .hub-card:nth-child(4), .bq-grid .bq-tile:nth-child(4), .casino-game:nth-child(4), .company-tile:nth-child(4) { animation-delay: .12s; }
.hub-grid .hub-card:nth-child(5), .bq-grid .bq-tile:nth-child(5), .casino-game:nth-child(5), .company-tile:nth-child(5) { animation-delay: .16s; }
.hub-grid .hub-card:nth-child(6), .bq-grid .bq-tile:nth-child(6), .casino-game:nth-child(6), .company-tile:nth-child(6) { animation-delay: .2s; }
/* новые события ленты — разовая золотая вспышка (категория «события») */
@keyframes newsNew {
  0% { background: rgba(245, 185, 66, .14); box-shadow: inset 3px 0 0 rgba(245, 185, 66, .55); }
  100% { background: transparent; box-shadow: inset 3px 0 0 transparent; }
}
.news-row.news-new { animation: newsNew 2.6s ease-out backwards; }
/* пустые состояния появляются мягко */
.empty-state { animation: fadeIn .25s ease backwards; }
/* прогресс выкупа — плавная ширина */
.mkt-bar-fill { transition: width .55s cubic-bezier(.4, 0, .2, 1); }

/* доступность: уважаем предпочтение без анимаций */
@media (prefers-reduced-motion: reduce) {
  .bcast-inner, .bcast-fighter, .bcast-stage, .bcast-hpfill, .bcast-popup, .bcast-shadow, .bcast-fighter .fighter-avatar, .slot-reel, .slot-reels, .die, .coin-face, .roulette-num, .casino-fx { animation: none !important; transition: none !important; }
  .hub-grid .hub-card, .bq-grid .bq-tile, .casino-game, .company-tile, .news-row.news-new, .empty-state, .mkt-bar-fill { animation: none !important; transition: none !important; }
  .xpbar-fill::after, .xpbar-fill.xp-gain, #stat-level.lvl-up, #stat-level.lvl-up .chip-val, #stat-neons.neons-flash, .empty-state .es-icon { animation: none !important; transition: none !important; }
}

/* ============================================================
   ИИ-ОРБ (02.09): единая кнопка «Совет дня / ИИ-помощник /
   Мои тикеты» вместо маяка и Проводника. Тёмная нейро-сфера
   (стиль ночных сцен art.js), вращающееся conic-кольцо, spark-глиф.
   Состояния = этапы обращения: idle / busy / queue / answer / clarify.
   Анимации — transform/filter/opacity (GPU), reduced-motion гасится.
   ============================================================ */
#ai-orb {
  position: fixed;
  right: 14px;
  bottom: calc(70px + env(safe-area-inset-bottom));
  z-index: 850; /* выше шитов (800), ниже тостов/оверлеев (900+) */
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .15s ease;
}
#ai-orb:active { transform: scale(.92); }
#ai-orb.hidden { display: none; }
/* ядро: нейро-сфера с «звёздами» (точки из radial-градиентов, без картинок) */
.orb-core {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(1.6px 1.6px at 30% 26%, rgba(255,255,255,.85) 45%, transparent 55%),
    radial-gradient(1.2px 1.2px at 66% 20%, rgba(200,205,255,.7) 45%, transparent 55%),
    radial-gradient(1.4px 1.4px at 76% 58%, rgba(255,255,255,.6) 45%, transparent 55%),
    radial-gradient(1px 1px at 44% 72%, rgba(190,180,255,.65) 45%, transparent 55%),
    radial-gradient(1.1px 1.1px at 22% 55%, rgba(210,215,255,.5) 45%, transparent 55%),
    radial-gradient(circle at 32% 28%, #7C74FF 0%, #4A3FAF 38%, #241C52 72%, #0F0B26 100%);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .5), 0 0 18px rgba(139, 127, 255, .22);
}
/* вращающееся кольцо: conic-градиент, замаскированный в тонкую окружность */
.orb-ring {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(139,127,255,.9) 55deg, transparent 130deg, transparent 200deg, rgba(139,127,255,.35) 280deg, transparent 330deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
  animation: orbSpin 12s linear infinite;
  pointer-events: none;
}
@keyframes orbSpin { to { transform: rotate(360deg); } }
/* spark-глиф */
.orb-glyph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  pointer-events: none;
}
.orb-glyph svg { width: 21px; height: 21px; color: #E9E5FF; filter: drop-shadow(0 0 4px rgba(139,127,255,.8)); }
/* дежурное дыхание (свечение, :active transform свободен) */
#ai-orb { animation: orbBreathe 7s ease-in-out infinite; }
@keyframes orbBreathe {
  0%, 88%, 100% { filter: drop-shadow(0 0 4px rgba(139,127,255,.18)); }
  94% { filter: drop-shadow(0 0 13px rgba(139,127,255,.45)); }
}
/* st-busy: ИИ думает — кольцо крутится быстро, свечение ярче */
#ai-orb.st-busy .orb-ring { animation-duration: 1.1s; }
#ai-orb.st-busy { animation: orbBusyGlow 1.2s ease-in-out infinite; }
@keyframes orbBusyGlow {
  0%, 100% { filter: drop-shadow(0 0 5px rgba(139,127,255,.35)); }
  50% { filter: drop-shadow(0 0 15px rgba(139,127,255,.7)); }
}
/* st-queue: обращение в очереди ночного ИИ — медленный фиолетовый пульс */
#ai-orb.st-queue { animation: orbQueue 3.2s ease-in-out infinite; }
@keyframes orbQueue {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(139,127,255,.25)); }
  50% { filter: drop-shadow(0 0 12px rgba(139,127,255,.55)); }
}
/* st-clarify: ждут твой ответ — золотые кольца */
#ai-orb.st-clarify::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 1.5px solid rgba(245, 185, 66, .55);
  animation: orbRing 3.2s var(--ease) infinite;
  pointer-events: none;
}
@keyframes orbRing {
  0% { transform: scale(.92); opacity: .9; }
  70%, 100% { transform: scale(1.45); opacity: 0; }
}
/* st-answer: ответ готов — зелёное свечение и глиф */
#ai-orb.st-answer { animation: orbAnswer 3.6s var(--ease) infinite; }
#ai-orb.st-answer .orb-glyph svg { color: var(--green); filter: drop-shadow(0 0 5px rgba(62,207,142,.9)); }
#ai-orb.st-answer .orb-core { box-shadow: 0 4px 16px rgba(0, 0, 0, .5), 0 0 22px rgba(62, 207, 142, .35); }
@keyframes orbAnswer {
  0%, 100% { filter: drop-shadow(0 0 5px rgba(62, 207, 142, .3)); }
  50% { filter: drop-shadow(0 0 14px rgba(62, 207, 142, .55)); }
}
/* разовая вспышка «частицы стянулись в ядро» при приходе первого ответа */
#ai-orb.orb-flash::after {
  content: '';
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  border: 2px solid rgba(62, 207, 142, .75);
  animation: orbFlash .55s cubic-bezier(.2,.8,.3,1) forwards;
  pointer-events: none;
}
@keyframes orbFlash {
  0% { transform: scale(1.7); opacity: 0; }
  35% { opacity: 1; }
  100% { transform: scale(1); opacity: 0; }
}
#ai-orb.orb-flash .orb-core { animation: orbCoreFlash .55s ease; }
@keyframes orbCoreFlash { 40% { filter: brightness(1.8); } }
/* бейдж: число непрочитанных отбивок (красный) или точка свежих советов (золото) */
#ai-orb-badge {
  position: absolute;
  top: -3px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--red);
  color: #fff;
  font-size: 9.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .45);
  pointer-events: none;
  z-index: 2;
}
#ai-orb-badge.advice {
  background: var(--gold);
  min-width: 10px;
  width: 10px;
  height: 10px;
  padding: 0;
  animation: fabPulse 1.6s ease-in-out infinite;
}
#ai-orb-badge.hidden { display: none; }
@keyframes fabPulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(11, 15, 25, .9), 0 0 0 0 rgba(245, 185, 66, .55); }
  50% { box-shadow: 0 0 0 2px rgba(11, 15, 25, .9), 0 0 0 7px rgba(245, 185, 66, 0); }
}

/* кнопка орба в шапке страниц (.page-head) */
.orb-head-btn {
  position: relative;
  border-color: rgba(155, 123, 255, .35);
  background: linear-gradient(135deg, rgba(155, 123, 255, .15), rgba(60, 40, 110, .22));
  color: #E9E5FF;
}
.orb-head-btn.hidden { display: none !important; }
.orb-head-btn svg {
  width: 20px;
  height: 20px;
  color: #c4b5fd;
  filter: drop-shadow(0 0 4px rgba(155, 123, 255, .65));
}
.orb-head-btn:active { background: rgba(155, 123, 255, .32); }
.orb-head-btn.st-answer svg {
  color: var(--green);
  filter: drop-shadow(0 0 5px rgba(62, 207, 142, .85));
}
.orb-head-btn.st-busy {
  animation: orbBusyGlow 1.2s ease-in-out infinite;
}
#page-orb-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 15px;
  height: 15px;
  padding: 0 3.5px;
  border-radius: 8px;
  background: var(--red);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px var(--panel);
  pointer-events: none;
  z-index: 2;
}
#page-orb-badge.advice {
  background: var(--gold);
  min-width: 9px;
  width: 9px;
  height: 9px;
  padding: 0;
  animation: fabPulse 1.6s ease-in-out infinite;
}
#page-orb-badge.hidden { display: none; }

/* карточка мгновенной ситуационной сводки в орбе */
.orb-summary-card {
  background: linear-gradient(135deg, rgba(155, 123, 255, .12), rgba(30, 25, 55, .4));
  border: 1px solid rgba(155, 123, 255, .28);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.orb-summary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13.5px;
  font-weight: 700;
  color: #E9E5FF;
}
.orb-summary-head .orb-summary-tag {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  background: rgba(155, 123, 255, .15);
  padding: 2px 7px;
  border-radius: 8px;
}
.orb-summary-body {
  font-size: 12.5px;
  color: var(--text);
  line-height: 1.45;
}
.orb-summary-metric {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
}
.orb-summary-metric b { color: var(--text); }
.orb-summary-tip {
  margin-top: 4px;
  padding: 6px 10px;
  background: rgba(255, 255, 255, .04);
  border-left: 2px solid var(--accent);
  border-radius: 0 8px 8px 0;
  font-size: 11.5px;
  color: #c4b5fd;
  line-height: 1.35;
}
/* шторка орба: табы, диалог, черновик эскалации, тикет-бабблы */
.orb-tabs { margin-bottom: 8px; }
.orb-tab-n {
  background: var(--red);
  color: #fff;
  border-radius: 8px;
  padding: 0 5px;
  font-size: 9.5px;
  font-weight: 800;
  margin-left: 2px;
}
.orb-hello {
  display: flex;
  gap: 7px;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--ai) 35%, transparent);
}
.orb-ai-ic { display: flex; color: var(--ai); flex: none; }
.orb-ai-ic svg { width: 13px; height: 13px; }
.ai-sys {
  align-self: center;
  background: none;
  border: 1px dashed var(--border-strong);
  color: var(--muted);
  font-size: 11.5px;
  border-radius: 10px;
  max-width: 96%;
  text-align: center;
}
.orb-dots { display: inline-flex; gap: 3px; margin-right: 4px; }
.orb-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--ai); animation: orbDot 1s ease-in-out infinite; }
.orb-dots i:nth-child(2) { animation-delay: .18s; }
.orb-dots i:nth-child(3) { animation-delay: .36s; }
@keyframes orbDot {
  0%, 100% { opacity: .3; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-2px); }
}
.orb-esc {
  border: 1px solid color-mix(in srgb, var(--ai) 40%, transparent);
  background: color-mix(in srgb, var(--ai) 7%, var(--card));
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.orb-limits { font-size: 11px; }
.badge-ai {
  background: color-mix(in srgb, var(--ai) 22%, var(--card2));
  border: 1px solid color-mix(in srgb, var(--ai) 45%, transparent);
  color: var(--ai);
  display: inline-flex;
  align-items: center;
  padding: 0 5px;
}
.badge-ai svg { width: 10px; height: 10px; }
/* тикет-диалог: ИИ — фиолетовый градиент + spark-аватар, модератор — карточка, игрок — справа */
.sp-thread { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; }
.sp-msg { display: flex; gap: 7px; align-items: flex-end; }
.sp-ava { flex: none; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.sp-ava svg { width: 12px; height: 12px; }
.sp-ava-ai { background: linear-gradient(135deg, var(--ai), var(--ai-2)); color: #fff; box-shadow: 0 0 8px rgba(139, 127, 255, .45); }
.sp-ava-mod { background: var(--card2); border: 1px solid var(--border); color: var(--muted); }
.sp-bub { max-width: 86%; padding: 6px 10px; border-radius: 12px; font-size: 12px; line-height: 1.45; }
.sp-who { font-size: 9.5px; opacity: .7; margin-bottom: 2px; }
.sp-text { white-space: pre-wrap; word-break: break-word; }
.sp-ai .sp-bub {
  background: linear-gradient(135deg, color-mix(in srgb, var(--ai) 26%, var(--card)), color-mix(in srgb, var(--ai) 10%, var(--card)));
  border: 1px solid color-mix(in srgb, var(--ai) 35%, transparent);
  border-bottom-left-radius: 4px;
  color: var(--text);
}
.sp-mod .sp-bub { background: var(--card); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.sp-player { flex-direction: row-reverse; }
.sp-player .sp-bub { background: var(--accent); color: #06120C; font-weight: 600; border-bottom-right-radius: 4px; }

/* ============================================================
   31.08 (план «Приятный UI»): XP-бар живёт — шиммер по полосе,
   вспышка при росте XP, волна при повышении уровня (C);
   кошелёк Неонов светится и вспыхивает при изменении (E);
   пустые состояния «дышат» (F); кнопка города — мягкий тач (G).
   Всё — transform/filter/opacity + box-shadow, в reduced-motion гасится.
   ============================================================ */
.xpbar-fill { position: relative; overflow: hidden; }
.xpbar-fill::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 38%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
  animation: xpShimmer 6.5s var(--ease) infinite;
}
@keyframes xpShimmer {
  0%, 55%, 100% { transform: translateX(-130%); }
  72% { transform: translateX(320%); }
}
.xpbar-fill.xp-gain { animation: xpFlash .55s ease; }
@keyframes xpFlash {
  0%, 100% { filter: brightness(1); }
  35% { filter: brightness(1.65); }
}
#stat-level.lvl-up .chip-val { animation: lvlPop .9s var(--ease); }
#stat-level.lvl-up { animation: lvlGlow 1.1s ease; }
@keyframes lvlPop {
  0%, 100% { transform: scale(1); }
  35% { transform: scale(1.08); }
}
@keyframes lvlGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(56, 200, 255, 0); }
  45% { box-shadow: 0 0 16px rgba(56, 200, 255, .5); }
}
#stat-neons { box-shadow: 0 0 8px rgba(56, 200, 255, .07); }
#stat-neons.neons-flash { animation: neonsFlash .7s ease; }
@keyframes neonsFlash {
  0%, 100% { box-shadow: 0 0 0 0 rgba(56, 200, 255, 0); }
  35% { box-shadow: 0 0 18px rgba(56, 200, 255, .55); }
}
.empty-state .es-icon { animation: esBreathe 8s ease-in-out infinite; }
@keyframes esBreathe {
  0%, 90%, 100% { opacity: 1; }
  96% { opacity: .7; }
}
.top-city-btn:active { background: var(--card2); color: var(--text); filter: brightness(1.12); }
/* плитки хабов (план D): иконка — в цвет плитки (--wc задаёт hubGrid из app.js) */
.hub-ico { color: var(--wc, var(--accent));
  background: linear-gradient(135deg, var(--wca, var(--card2)), var(--wcb, var(--card))); }

/* ============================================================
   КНОПКА ЧАТА: акцентная плашка + «живые точки» в пузыре (31.08)
   ============================================================ */
.action--chat {
  background: linear-gradient(135deg, rgba(62, 207, 142, .13), rgba(31, 169, 122, .09));
  border: 1px solid rgba(62, 207, 142, .18);
  color: var(--text);
  animation: chatBreathe 3.6s var(--ease) infinite;
}
.action--chat .action-text { color: inherit; }
/* три точки-«пульса» внутри пузыря: город живёт */
#btn-chat .cd {
  fill: currentColor;
  stroke: none;
  animation: chatDot 1.8s var(--ease) infinite;
}
#btn-chat .cd:nth-of-type(2) { animation-delay: .22s; }
#btn-chat .cd:nth-of-type(3) { animation-delay: .44s; }
@keyframes chatDot {
  0%, 100% { opacity: .25; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-1px); }
}
/* постоянное мягкое дыхание кнопки чата (амплитуда ≤4%) */
@keyframes chatBreathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(56, 200, 255, 0); transform: scale(1); }
  50% { box-shadow: 0 0 14px rgba(56, 200, 255, .16); transform: scale(1.02); }
}

/* ============================================================
   КАРЬЕРА И ПРОФИЛЬ: тот же приём, что у чата (заказ 31.08 вечер):
   мягкая плашка + тонкая рамка + лёгкое дыхание. Карьера — золото
   (работа/деньги), Профиль — циан (личное); чат остаётся главным.
   ============================================================ */
.action--career {
  background: linear-gradient(135deg, rgba(245, 185, 66, .11), rgba(245, 185, 66, .05));
  border: 1px solid rgba(245, 185, 66, .16);
  color: var(--text);
  animation: navBreathe 3.8s var(--ease) infinite;
  --nav-glow: rgba(245, 185, 66, .16);
}
.action--biz {
  background: linear-gradient(135deg, rgba(62, 207, 142, .11), rgba(62, 207, 142, .05));
  border: 1px solid rgba(62, 207, 142, .16);
  color: var(--text);
  animation: navBreathe 3.8s var(--ease) infinite;
  --nav-glow: rgba(62, 207, 142, .16);
}
.action--profile {
  background: linear-gradient(135deg, rgba(56, 200, 255, .10), rgba(56, 200, 255, .04));
  border: 1px solid rgba(56, 200, 255, .15);
  color: var(--text);
  animation: navBreathe 3.8s var(--ease) infinite;
  --nav-glow: rgba(56, 200, 255, .16);
}
.action--career .action-text,
.action--biz .action-text,
.action--profile .action-text { color: inherit; }
@keyframes navBreathe {
  0%, 100% { box-shadow: 0 0 0 0 var(--nav-glow, transparent); transform: scale(1); }
  50% { box-shadow: 0 0 12px var(--nav-glow, transparent); transform: scale(1.02); }
}
/* бейдж-статус диалога «нужен твой ответ» (clarify) */
.badge-info {
  background: rgba(56, 200, 255, .14);
  color: #38C8FF;
  border-color: rgba(56, 200, 255, .4);
}
/* ответы диалога тикета: ИИ — слева-нейтрально, игрок — с акцентом */
.r-sub.t-ai { color: var(--muted); }
.r-sub.t-player { color: var(--accent); }

/* карточки рекомендаций */
.adv-card {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.adv-num {
  flex: 0 0 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: #06120C;
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.adv-body { flex: 1; min-width: 0; }
.adv-title { font-weight: 700; font-size: 13px; line-height: 1.35; }
.adv-sub { color: var(--muted); font-size: 12px; line-height: 1.35; margin: 3px 0 7px; }
.adv-card .mini { font-size: 12px; }

/* «Совет дня»: золотая карточка внизу Проводника */
.adv-tip {
  border-color: rgba(245, 185, 66, .35);
  background: rgba(245, 185, 66, .06);
  margin-top: 4px;
}
.adv-tip .adv-num {
  background: var(--grad-gold);
  color: #241a06;
}
.adv-tip .adv-num svg { width: 13px; height: 13px; }
.adv-tip .adv-title { color: #F5B942; }
.adv-tip .adv-sub { margin-bottom: 0; }

/* AI-помощник: диалог */
.ai-thread {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 46vh;
  overflow-y: auto;
  margin-bottom: 10px;
}
.ai-msg {
  max-width: 88%;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}
.ai-bot {
  align-self: flex-start;
  background: var(--card);
  border: 1px solid var(--border);
  border-top-left-radius: 4px;
}
.ai-user {
  align-self: flex-end;
  background: var(--accent);
  color: #06120C;
  border-top-right-radius: 4px;
  font-weight: 600;
}
.ai-busy { opacity: .55; }
.ai-msg-actions { margin-top: 6px; display: flex; gap: 6px; flex-wrap: wrap; }
.ai-input-row { display: flex; gap: 8px; margin-bottom: 8px; }
.ai-input {
  flex: 1;
  min-width: 0;
  background: var(--card2);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  color: var(--text);
  padding: 9px 12px;
  font-size: 13px;
  outline: none;
}
.ai-input:focus { border-color: var(--accent); }
.ai-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.ai-hint { color: var(--muted); font-size: 11px; }
.ai-src { color: var(--muted); font-size: 11px; align-self: center; }
/* контекст орба (02.09): тонкая строка раздела + чипы-подсказки, только внутри шторки */
.orb-ctx { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11px; margin: 6px 0 4px; }
.orb-ctx .ic { width: 12px; height: 12px; flex: 0 0 auto; }
.orb-ctx-x { margin-left: auto; font-size: 10px; }
.orb-chips { gap: 6px; flex-wrap: wrap; margin: 0 0 8px; }
.orb-chips .chip { font-size: 11px; }
/* «Не знаю»/MISS — подсветка пути к команде (эскалация в один тап) */
.ai-msg-actions .mini.accent { border-color: var(--ai); color: var(--ai); font-weight: 600; }

/* ---------- поручения дня и достижения (27.08, Фаза 2) ---------- */
.ach-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0; }
.ach-badge {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 6px; background: var(--card);
  border: 1px solid var(--border); border-radius: 12px; text-align: center;
}
.ach-badge .ach-ico { font-size: 22px; line-height: 1; }
.ach-badge .ach-name { font-size: 11px; color: var(--muted); line-height: 1.2; }
.ach-badge .ach-reward { font-size: 10px; font-weight: 600; color: var(--accent); line-height: 1; }
.ach-badge .ach-prog { font-size: 10px; color: var(--muted); line-height: 1.1; }
.ach-badge.locked { opacity: .38; filter: grayscale(1); }
.ach-badge.locked .ach-reward { color: var(--muted); }

/* ---------- КУРЬЕР: мини-игра смены на реальной карте (28.08) ---------- */
/* Полноэкранный оверлей: выше страниц (900) и FAB (950), ниже тостов (1000) */
#crr-root {
  position: fixed; inset: 0; z-index: 960;
  display: flex; flex-direction: column;
  background: var(--bg); color: var(--text);
}
#crr-root.hidden { display: none; }
.crr-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; padding-top: calc(10px + env(safe-area-inset-top));
  background: var(--panel); border-bottom: 1px solid var(--border);
}
.crr-title { font-size: 16px; font-weight: 700; }
.crr-x {
  width: 32px; height: 32px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--card); color: var(--muted); font-size: 15px; line-height: 1;
  cursor: pointer; flex: none;
}
.crr-x:active { color: var(--text); }
.crr-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 12px 14px calc(16px + env(safe-area-inset-bottom)); }
.crr-note {
  font-size: 12px; color: var(--muted); line-height: 1.5;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 12px; padding: 10px 12px; margin: 10px 0;
}
.crr-howto {
  font-size: 12px; color: var(--muted); line-height: 1.6;
  background: var(--panel); border: 1px dashed var(--border);
  border-radius: 12px; padding: 10px 12px; margin: 10px 0;
}
.crr-howto b { color: var(--text); }
.crr-sect { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); margin: 16px 0 8px; }
.crr-play { width: 100%; margin-top: 14px; }
.crr-body .btn { width: 100%; margin-top: 10px; }

/* доверие */
.crr-trust { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; }
.crr-trust-top { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.crr-trust-top b { color: var(--text); }
.crr-trust-bar { position: relative; height: 8px; background: var(--card); border-radius: 4px; overflow: hidden; }
.crr-trust-bar > span { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent); border-radius: 4px; }
.crr-trust-bar > i { position: absolute; top: -1px; bottom: -1px; width: 2px; background: var(--muted); }
.crr-trust-sub { font-size: 11px; color: var(--muted); margin-top: 6px; }
.crr-trust-sub b { color: var(--accent); }

/* карточки-статы */
.crr-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0; }
.crr-card {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  padding: 10px 6px; text-align: center;
}
.crr-card-v { font-size: 15px; font-weight: 700; }
.crr-card-l { font-size: 10px; color: var(--muted); }
.crr-res-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0; }
.crr-res-score { display: flex; flex-direction: column; align-items: center; margin: 14px 0 6px; }
.crr-res-num { font-size: 40px; font-weight: 800; color: var(--accent); line-height: 1; }
.crr-res-l { font-size: 12px; color: var(--muted); margin-top: 6px; }

/* зоны */
.crr-zones { display: flex; gap: 8px; }
.crr-zone {
  flex: 1; display: flex; flex-direction: column; gap: 3px; align-items: center;
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  padding: 10px 6px; color: var(--text); cursor: pointer; text-align: center;
}
.crr-zone-name { font-size: 13px; font-weight: 600; }
.crr-zone-sub { font-size: 10px; color: var(--muted); }
.crr-zone.crr-locked { opacity: .45; cursor: default; }
.crr-zone.crr-cur { border-color: var(--accent); }
.crr-zone.crr-cur .crr-zone-sub { color: var(--accent); }

/* строки (транспорт/типы заказов) */
.crr-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  padding: 10px 12px; margin-bottom: 8px;
}
.crr-row-l { display: flex; align-items: center; gap: 10px; min-width: 0; }
.crr-row-ico { font-size: 20px; }
.crr-row-l b { display: block; font-size: 13px; }
.crr-row-sub { display: block; font-size: 11px; color: var(--muted); }
.crr-badge-ok { font-size: 11px; font-weight: 600; color: var(--accent); flex: none; }
.crr-badge-lock { font-size: 11px; color: var(--muted); flex: none; }

/* ---------- раунд ---------- */
.crr-round { position: absolute; inset: 0; display: flex; flex-direction: column; }
.crr-hud {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 12px; padding-top: calc(8px + env(safe-area-inset-top));
  background: var(--panel); border-bottom: 1px solid var(--border); z-index: 10;
}
.crr-hud-l, .crr-hud-r { display: flex; align-items: center; gap: 8px; flex: none; }
.crr-hud-c { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.crr-h-time { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.crr-h-leg { font-size: 10px; color: var(--muted); }
.crr-h-score { font-size: 12px; color: var(--muted); }
.crr-h-score b { color: var(--text); font-size: 15px; }
.crr-h-combo { font-size: 10px; color: var(--accent); font-weight: 700; min-height: 12px; }
.crr-badge {
  font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 8px;
  background: var(--card); border: 1px solid var(--border); flex: none;
}
.crr-badge-rush { color: #ffb020; border-color: #ffb02055; }
.crr-hud2 {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 12px; background: var(--panel); border-bottom: 1px solid var(--border); z-index: 10;
}
.crr-h-slots { font-size: 12px; font-weight: 700; }
.crr-h-forecast { font-size: 12px; color: var(--accent); font-weight: 600; flex: 1; }
.crr-hud2 .mini { flex: none; }

/* чипы активных заказов */
.crr-orders {
  display: flex; gap: 8px; padding: 8px 12px; overflow-x: auto; scrollbar-width: none;
  background: var(--panel); border-bottom: 1px solid var(--border); z-index: 10; flex: none;
}
.crr-orders::-webkit-scrollbar { display: none; }
/* подсказка первого заезда — поверх карты, внизу */
.crr-hint {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  background: rgba(20, 22, 28, 0.92); border: 1px solid var(--border); color: #fff;
  padding: 10px 16px; border-radius: 12px; font-size: 13px; z-index: 20;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35); white-space: nowrap; pointer-events: none;
  animation: crrHintPulse 1.6s ease-in-out infinite;
}
@keyframes crrHintPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
.crr-chip {
  display: flex; flex-direction: column; gap: 3px; flex: none; min-width: 120px; max-width: 180px;
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  padding: 6px 8px; color: var(--text); text-align: left; cursor: pointer;
}
.crr-chip > span:first-child { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crr-chip-bar { height: 3px; background: var(--border); border-radius: 2px; overflow: hidden; }
.crr-chip-bar > span { display: block; height: 100%; background: var(--accent); }
.crr-chip-s { font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; }
.crr-chip-target { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }

/* карта раунда */
.crr-map { flex: 1; min-height: 0; background: #0D1320; }

/* пины заказов */
.crr-pin { position: relative; }
.crr-pin-i { font-size: 18px; line-height: 1; display: block; filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
.crr-pin-t {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  font-size: 10px; font-weight: 800; color: var(--text);
  background: var(--panel); border: 1px solid var(--border); border-radius: 6px; padding: 1px 4px;
  font-variant-numeric: tabular-nums;
}
.crr-pin-hot .crr-pin-t { color: #ffb020; border-color: #ffb02066; }
.crr-pin-pizza .crr-pin-t { color: #ff7043; border-color: #ff704366; }
.crr-pin-target .crr-pin-i { font-size: 24px; }
.crr-pin-target::after {
  content: ''; position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%);
  width: 10px; height: 10px; border-radius: 50%; background: var(--accent); opacity: .5;
}
.crr-courier > span { font-size: 22px; line-height: 1; filter: drop-shadow(0 2px 4px rgba(0,0,0,.6)); }
.crr-home > span { font-size: 16px; opacity: .85; }
.leaflet-container .crr-route { filter: drop-shadow(0 0 4px rgba(62,207,142,.6)); }

/* всплывающие очки */
.crr-pop {
  position: absolute; z-index: 20; font-size: 16px; font-weight: 800; color: var(--accent);
  pointer-events: none; animation: crrPop .9s ease-out forwards; text-shadow: 0 1px 4px rgba(0,0,0,.7);
}
@keyframes crrPop { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-40px); } }

/* перерыв между заездами */
.crr-break {
  position: absolute; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center;
  background: rgba(11,15,25,.86); padding: 16px;
}
.crr-break-card {
  width: 100%; max-width: 380px; background: var(--panel);
  border: 1px solid var(--border); border-radius: 16px; padding: 16px;
}
.crr-break-t { font-size: 15px; font-weight: 700; }
.crr-break-s { font-size: 12px; color: var(--muted); margin: 4px 0 12px; }
.crr-break-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.crr-bonus {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  padding: 12px 6px; color: var(--text); cursor: pointer; text-align: center;
}
.crr-bonus-i { font-size: 22px; }
.crr-bonus b { font-size: 12px; }
.crr-bonus-s { font-size: 10px; color: var(--muted); line-height: 1.2; }
.crr-break-timer { text-align: center; font-size: 12px; color: var(--muted); margin-top: 12px; font-variant-numeric: tabular-nums; }

/* «покинуть смену?» */
.crr-leave {
  position: absolute; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center;
  background: rgba(11,15,25,.8); padding: 16px;
}
.crr-leave-card { width: 100%; max-width: 340px; background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 16px; }
.crr-leave-t { font-size: 15px; font-weight: 700; }
.crr-leave-s { font-size: 12px; color: var(--muted); margin: 6px 0 12px; line-height: 1.4; }
.crr-leave-btns { display: flex; gap: 8px; }
.crr-leave-btns .btn { margin-top: 0; flex: 1; }

/* ============================================================
   ЛАРЁК (.ksk-*, 28.08): витрина 8 слотов, склад дня, наценка,
   касса и лента продаж. Тёмная тема на переменных игры.
   ============================================================ */
.ksk-intro { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 8px 0 4px; text-align: center; }
.ksk-intro-ico { font-size: 52px; line-height: 1; filter: drop-shadow(0 4px 14px rgba(62,207,142,.35)); }
.ksk-intro-title { font-size: 17px; font-weight: 800; }
.ksk-intro-sub { font-size: 12.5px; color: var(--muted); max-width: 340px; line-height: 1.5; }
.ksk-note { font-size: 12px; color: var(--muted); background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px 12px; line-height: 1.5; }
.ksk-note.muted { background: transparent; border: none; padding: 2px 4px; text-align: center; }
.ksk-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 10px 0; }
.ksk-card {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px 6px;
}
.ksk-card-v { font-size: 14px; font-weight: 700; color: var(--text); }
.ksk-card-l { font-size: 10px; color: var(--muted); text-align: center; line-height: 1.2; }
.kiosk-open-btn { width: 100%; margin-top: 4px; background: var(--grad); }
.ksk-event {
  display: flex; align-items: center; gap: 10px; background: linear-gradient(135deg, rgba(245,185,66,.14), rgba(245,185,66,.05));
  border: 1px solid rgba(245,185,66,.35); border-radius: var(--r-md); padding: 10px 12px; margin-bottom: 10px;
}
.ksk-event-ico { font-size: 22px; }
.ksk-event b { font-size: 13px; display: block; }
.ksk-event-sub { font-size: 11.5px; color: var(--muted); display: block; }
.ksk-cap { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px 12px; margin: 8px 0 4px; }
.ksk-cap-top { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); margin-bottom: 6px; }
.ksk-cap-top b { color: var(--text); }
.ksk-cap-bar { height: 6px; border-radius: 4px; background: var(--card2); overflow: hidden; }
.ksk-cap-bar span { display: block; height: 100%; background: var(--grad-gold); border-radius: 4px; transition: width var(--tr); }
.ksk-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ksk-slot {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px 4px 8px; min-height: 96px;
}
.ksk-slot-empty { border-style: dashed; opacity: .55; }
.ksk-slot-ico { font-size: 22px; line-height: 1.1; }
/* имя фиксированной высоты в 2 строки: карточки витрины ровные, без «рваных» рядов */
.ksk-slot-name { font-size: 10px; color: var(--muted); text-align: center; line-height: 1.15; height: 2.3em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ksk-slot-qty { font-size: 11px; font-weight: 700; }
.ksk-slot-price { font-size: 10.5px; color: var(--gold); font-weight: 700; }
.ksk-slot-per { position: absolute; top: 4px; right: 6px; font-size: 10px; font-style: normal; color: #6fc3ff; }
.ksk-price-row { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px 12px; margin-bottom: 8px; }
.ksk-price-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 12px; flex-wrap: wrap; }
.ksk-price-head .num { font-size: 11px; color: var(--muted); }
.ksk-price-head .num b { color: var(--gold); }
.ksk-price-ctl { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
/* ползунок наценки: глобальный стиль инпутов (padding/border/radius) ломал драг
   range на мобильных — свой трек и бегунок, без вмешательства (#sheet-content input) */
.ksk-price-ctl input[type=range] {
  -webkit-appearance: none; appearance: none;
  flex: 1; min-width: 0; height: 26px; margin: 0;
  padding: 0; border: none; background: transparent; border-radius: 0;
  outline: none; cursor: pointer; touch-action: pan-y;
}
.ksk-price-ctl input[type=range]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, var(--accent), rgba(62, 207, 142, .28));
}
.ksk-price-ctl input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; margin-top: -7px; border-radius: 50%;
  background: #fff; border: 2px solid var(--accent);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .45); cursor: pointer;
}
.ksk-price-ctl input[type=range]::-moz-range-track {
  height: 6px; border-radius: 3px; background: rgba(62, 207, 142, .28);
}
.ksk-price-ctl input[type=range]::-moz-range-progress {
  height: 6px; border-radius: 3px; background: var(--accent);
}
.ksk-price-ctl input[type=range]::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%; background: #fff;
  border: 2px solid var(--accent); box-shadow: 0 1px 4px rgba(0, 0, 0, .45); cursor: pointer;
}
.ksk-mult { min-width: 44px; text-align: center; font-size: 14px; font-weight: 800; background: var(--card2); border-radius: var(--r-sm); padding: 3px 6px; }
.ksk-mult-hint { font-size: 11px; color: var(--muted); margin-top: 3px; }
.ksk-wh-row {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md); padding: 9px 12px; margin-bottom: 6px;
}
.ksk-wh-l { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ksk-wh-info { flex: 1; min-width: 0; }
.ksk-wh-ico { font-size: 22px; }
.ksk-wh-l b { font-size: 12.5px; display: block; }
.ksk-wh-sub { font-size: 10.5px; color: var(--muted); display: block; }
.ksk-wh-badge { flex-shrink: 0; }
/* нижняя строка: степпер + кнопки одной ровной линией, без переносов и «разъезжания» */
.ksk-wh-r { display: flex; align-items: stretch; gap: 8px; }
.ksk-stepper {
  display: flex; align-items: stretch; flex-shrink: 0;
  background: var(--card2); border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden;
}
.ksk-st-btn {
  width: 34px; min-height: 32px; font-size: 18px; font-weight: 700; line-height: 1;
  color: var(--text); background: transparent; border: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent;
}
.ksk-st-btn:active { background: rgba(62, 207, 142, .18); }
.ksk-stepper .num { min-width: 36px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; border-left: 1px solid var(--border); border-right: 1px solid var(--border); }
.ksk-buy-btn { flex: 1; white-space: nowrap; font-variant-numeric: tabular-nums; justify-content: center; }
.ksk-wh-r .mini.ghost { background: transparent; border: 1px solid var(--border); color: var(--muted); flex-shrink: 0; white-space: nowrap; }
.ksk-badge { font-size: 9.5px; font-weight: 700; border-radius: 20px; padding: 2px 8px; text-transform: uppercase; letter-spacing: .3px; }
.ksk-badge-good { background: rgba(46,204,113,.16); color: var(--green); border: 1px solid rgba(46,204,113,.4); }
.ksk-badge-high { background: rgba(229,72,77,.14); color: var(--red); border: 1px solid rgba(229,72,77,.4); }
.ksk-feed { display: flex; flex-direction: column; gap: 4px; }
.ksk-feed-line {
  display: flex; align-items: center; gap: 8px; font-size: 11.5px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 7px 10px;
}
.ksk-feed-line span:nth-child(2) { flex: 1; min-width: 0; }
.ksk-feed-bad { border-color: rgba(229,72,77,.3); }
.ksk-feed-ico { font-size: 15px; }
.ksk-feed-time { font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ksk-closed-banner {
  text-align: center; font-weight: 800; font-size: 13px; color: var(--gold);
  background: rgba(245,185,66,.1); border: 1px solid rgba(245,185,66,.3); border-radius: var(--r-md); padding: 9px; margin-bottom: 10px;
}

/* ================= АКТИВНОСТИ (было «Мини-игры»): карточки + группы ================= */
.mg-group {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
  color: var(--muted); margin: 16px 0 2px;
}
.mg-group:first-of-type { margin-top: 10px; }
.mg-group .ic { width: 14px; height: 14px; }
.mg-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
  padding: 12px 14px; margin: 10px 0; cursor: pointer;
  transition: transform .12s ease, border-color .12s ease;
}
.mg-card:active { transform: scale(.985); border-color: var(--accent); }
.mg-ico { font-size: 30px; line-height: 1; flex: none; }
.mg-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mg-body b { font-size: 15px; }
.mg-sub { font-size: 12px; color: var(--muted); line-height: 1.4; }
.mg-go { font-size: 12px; color: var(--accent); flex: none; font-weight: 600; }

/* ================= ПИТОМЦЫ (28.08, суб-агент C) — всё с префиксом .pet- ================= */
/* чип питомца в шапке Профиля (единственный вход после «Активностей», 29.08) */
.pet-chip {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 5px;
  font-size: 12px; font-weight: 600; color: var(--accent);
  background: rgba(56,200,255,.08); border: 1px solid rgba(56,200,255,.25);
  border-radius: 999px; padding: 4px 10px; cursor: pointer;
}
.pet-chip:active { transform: scale(.97); }
.pet-wait { text-align: center; padding: 14px 8px 6px; }
.pet-wait-ico { font-size: 44px; line-height: 1.1; animation: petPulse 2.2s ease-in-out infinite; color: var(--accent); filter: drop-shadow(0 0 10px rgba(62,207,142,.4)); }
@keyframes petPulse { 0%, 100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.08); opacity: 1; } }
.pet-wait-title { font-size: 16px; font-weight: 800; margin-top: 6px; }
.pet-wait-sub { font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.45; }
.pet-pick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; }
.pet-pick-card {
  display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center;
  background: var(--card); border: 1.5px solid var(--border); border-radius: var(--r-md);
  padding: 12px 6px 10px; cursor: pointer; transition: border-color var(--tr), transform var(--tr);
}
.pet-pick-card:active { transform: scale(.96); }
.pet-pick-card.on { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(74,144,226,.18); }
.pet-pick-ico { font-size: 34px; line-height: 1.1; filter: drop-shadow(0 0 6px rgba(255,255,255,.15)); }
.pet-pick-name { font-size: 12.5px; font-weight: 800; }
.pet-pick-desc { font-size: 10px; color: var(--muted); line-height: 1.3; }
.pet-adopt-btn { width: 100%; background: var(--grad); }
.pet-hero { display: flex; align-items: center; gap: 14px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px; }
.pet-hero-ava { font-size: 52px; line-height: 1; filter: drop-shadow(0 0 12px rgba(62,207,142,.35)); }
.pet-ava-face { display: flex; align-items: center; justify-content: center; color: var(--accent); }
.pet-ava-face svg.ic { width: 48px; height: 48px; filter: drop-shadow(0 0 8px var(--accent)); }
.pet-hero-body { flex: 1; min-width: 0; }
.pet-hero-name { font-size: 15px; font-weight: 800; }
.pet-hero-stage { font-size: 11px; font-weight: 700; color: var(--accent); background: rgba(74,144,226,.14); border-radius: 20px; padding: 2px 8px; margin-left: 4px; vertical-align: 1px; }
.pet-hero-sub { font-size: 11px; color: var(--muted); margin-top: 3px; line-height: 1.4; }
.pet-hero-badges { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.pet-badge { font-size: 10px; font-weight: 700; border-radius: 20px; padding: 3px 9px; }
.pet-badge-hungry { background: rgba(245,185,66,.14); color: var(--gold); border: 1px solid rgba(245,185,66,.4); }
.pet-badge-sad { background: rgba(143,153,175,.14); color: var(--muted); border: 1px solid rgba(143,153,175,.4); }
.pet-bars { display: flex; flex-direction: column; gap: 8px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px 12px; margin-top: 10px; }
.pet-bar-row { display: grid; grid-template-columns: 92px 1fr 38px; align-items: center; gap: 8px; }
.pet-bar-label { font-size: 11px; color: var(--muted); }
.pet-bar-val { font-size: 11px; font-weight: 700; text-align: right; }
.pet-bar { height: 8px; border-radius: 5px; background: var(--card2); overflow: hidden; }
.pet-bar-fill { display: block; height: 100%; border-radius: 5px; transition: width var(--tr); }
.pet-bar-fill.sat { background: linear-gradient(90deg, #7BD88F, #2ECC71); }
.pet-bar-fill.mood { background: linear-gradient(90deg, #6fb3ff, #4A90E2); }
.pet-bar-fill.low { background: linear-gradient(90deg, #F7C948, #E85D5D); }
.pet-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.pet-feed-btn { background: var(--grad-gold); color: #1c2233; }
.pet-play-btn { background: var(--grad); }
.pet-dog-passive {
  margin-top: 10px; font-size: 11.5px; line-height: 1.45; color: var(--muted);
  background: var(--card); border: 1px dashed var(--border); border-radius: var(--r-md); padding: 9px 12px;
}
.pet-feed-list { display: flex; flex-direction: column; gap: 4px; }
.pet-feed-line {
  display: flex; align-items: center; gap: 8px; font-size: 11.5px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 7px 10px;
}
.pet-feed-line span:nth-child(2) { flex: 1; min-width: 0; }
.pet-feed-line b { color: var(--green); font-size: 11px; white-space: nowrap; }
.pet-feed-dup { border-color: rgba(245,185,66,.3); }
.pet-feed-ico { font-size: 15px; }
.pet-feed-time { font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pet-album { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; }
.pet-cell {
  display: flex; align-items: center; gap: 6px; min-height: 40px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 6px 8px;
}
.pet-cell-found { border-color: rgba(247,201,72,.4); background: linear-gradient(135deg, rgba(247,201,72,.1), rgba(247,201,72,.03)); }
.pet-cell-lock { opacity: .45; filter: grayscale(1); }
.pet-cell-ico { font-size: 15px; }
.pet-cell-name { font-size: 10px; line-height: 1.25; color: var(--text); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pet-trinkets { display: flex; flex-wrap: wrap; gap: 6px; }
.pet-trinket { font-size: 11px; background: var(--card); border: 1px solid var(--border); border-radius: 20px; padding: 4px 10px; }
.pet-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 12px; }
.pet-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md); padding: 8px 4px; }
.pet-stat span:first-child { font-size: 13px; font-weight: 800; }
.pet-stat span:last-child { font-size: 9.5px; color: var(--muted); text-align: center; line-height: 1.2; }
.pet-game { display: flex; flex-direction: column; gap: 8px; }
.pet-game-head { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 800; }
.pet-game-head .num { color: var(--gold); }
.pet-game-field {
  position: relative; height: 300px; overflow: hidden; border-radius: var(--r-md);
  background: radial-gradient(circle at 50% 30%, #22305242, #0b0f19), var(--card2);
  border: 1px solid var(--border);
}
.pet-game-obj {
  position: absolute; width: 64px; height: 64px; margin: -32px 0 0 -32px;
  font-size: 40px; line-height: 64px; text-align: center; background: none; border: none; cursor: pointer;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,.4)); animation: petPop .18s ease-out;
  transition: transform .08s;
}
.pet-game-obj:active { transform: scale(1.25); }
@keyframes petPop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ---- Питомцы v2 (01.09): уровни, перки, аксессуары, топ, смена ---- */
.pet-lvl { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px 12px; margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.pet-lvl-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; font-weight: 700; }
.pet-lvl-head .muted { font-size: 11px; }
.pet-bar-fill.lvl { background: linear-gradient(90deg, #C9A7F5, #8E6BD8); }
.pet-lvl-bonus { font-size: 10px; line-height: 1.4; }
.pet-perk { font-size: 11.5px; line-height: 1.45; background: rgba(126,217,143,.08); border: 1px solid rgba(126,217,143,.28); border-radius: var(--r-sm); padding: 8px 10px; margin-top: 8px; }
.pet-perk-off { background: rgba(143,153,175,.08); border-color: var(--border); color: var(--muted); }
.pet-ava-acc { font-size: 20px; margin-left: 2px; vertical-align: 14px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.4)); }
.pet-acc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-top: 8px; }
.pet-acc { display: flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 8px 10px; }
.pet-acc-on { border-color: rgba(247,201,72,.45); background: linear-gradient(135deg, rgba(247,201,72,.09), rgba(247,201,72,.02)); }
.pet-acc-lock { opacity: .8; }
.pet-acc-ico { font-size: 20px; line-height: 1; }
.pet-acc-name { flex: 1; min-width: 0; font-size: 11px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pet-change { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.pet-change-sub { font-size: 10.5px; line-height: 1.4; }
.pet-change-btn { width: 100%; }
.pet-top-list { display: flex; flex-direction: column; gap: 4px; }
.pet-top-row { display: grid; grid-template-columns: 22px 22px 1fr 42px auto; align-items: center; gap: 6px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 7px 10px; font-size: 11.5px; }
.pet-top-me { border-color: rgba(74,144,226,.5); background: rgba(74,144,226,.08); }
.pet-top-rank { font-weight: 800; color: var(--muted); }
.pet-top-ico { font-size: 15px; }
.pet-top-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.pet-top-lvl { font-size: 10px; color: var(--muted); }
.pet-top-score { font-weight: 800; color: var(--gold); }
.pet-game-bad { opacity: .9; }

/* ================= ЖИВЫЕ СОБЫТИЯ (28.08): баннер + календарь =================
   29.08: баннер в потоке под шапкой (был fixed поверх шапки — на телефоне
   перекрывал город/баланс/чипы); pill по центру, места в потоке не ворует */
#live-banner {
  align-self: center;
  display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 24px);
  margin: 8px 12px 0;
  background: linear-gradient(135deg, #2b3a67, #1d2747); border: 1px solid rgba(120,150,255,.35);
  border-radius: 999px; padding: 7px 16px; cursor: pointer;
  box-shadow: 0 3px 14px rgba(0,0,0,.4); font-size: 13px; color: var(--text);
  transition: transform .12s ease;
}
#live-banner:active { transform: scale(.98); }
#live-banner .lb-ico { font-size: 18px; line-height: 1; }
#live-banner .lb-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#live-banner .lb-text b { color: #ffd77a; }
#live-banner .lb-timer { color: #9fc1ff; font-weight: 700; white-space: nowrap; }
/* тинт баннера по виду события (31.08): фон под сцену арта */
#live-banner.k-rush { background: linear-gradient(135deg, #4A2E2B, #1D2747); border-color: rgba(255,179,71,.45); }
#live-banner.k-rush .lb-timer { color: #FFB347; }
#live-banner.k-night { background: linear-gradient(135deg, #101A33, #0B0F19); border-color: rgba(140,165,220,.4); }
#live-banner.k-fair { background: linear-gradient(135deg, #1B3A6B, #1D2747); border-color: rgba(77,163,255,.5); }
#live-banner.k-fair .lb-timer { color: #7DD3FC; }

.live-now {
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(135deg, #2b3a67, #1d2747); border: 1px solid rgba(120,150,255,.35);
  border-radius: var(--r-md); padding: 12px 14px; margin: 10px 0;
}
.live-now-ico { font-size: 30px; line-height: 1; }
.live-now-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.live-now-body b { font-size: 15px; }
.live-now-sub { font-size: 12px; color: var(--muted); line-height: 1.4; }
.live-now-timer { color: #9fc1ff; font-weight: 700; font-size: 13px; white-space: nowrap; }
.live-next {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  font-size: 13px; background: var(--card); border: 1px dashed var(--border);
  border-radius: var(--r-md); padding: 10px 12px; margin: 8px 0;
}
.live-row { display: flex; align-items: center; gap: 12px; padding: 9px 2px; border-bottom: 1px solid var(--border); }
.live-row:last-child { border-bottom: none; }
.live-row-ico { font-size: 22px; line-height: 1; flex: none; }
.live-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.live-row-body b { font-size: 14px; }
.live-row-sub { font-size: 12px; color: var(--muted); line-height: 1.4; }
.live-row-when { font-size: 12px; color: var(--accent); }
.live-foot-note { font-size: 11.5px; color: var(--muted); line-height: 1.5; margin-top: 10px; }

/* ================= ДОСКА ПОДРАБОТОК (28.08) — всё с префиксом .gig- ================= */
.gig-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
  padding: 12px 14px; margin: 10px 0;
}
.gig-ico { font-size: 30px; line-height: 1; flex: none; }
.gig-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.gig-body b { font-size: 15px; }
.gig-sub { font-size: 12px; color: var(--muted); line-height: 1.4; }
.gig-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 2px; }
.gig-risk { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.gig-risk-low { background: rgba(46,204,113,.14); color: #4ade80; }
.gig-risk-mid { background: rgba(255,165,0,.14); color: #ffb347; }
.gig-risk-high { background: rgba(255,80,80,.14); color: #ff6b6b; }
.gig-age { font-size: 11px; color: var(--muted); }
.gig-go { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.gig-go .num { font-size: 15px; color: var(--gold); }
.gig-active {
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 20px 16px; margin: 12px 0;
}
.gig-active-ico { font-size: 44px; line-height: 1.1; }
.gig-active-title { font-size: 17px; font-weight: 800; }
.gig-active-sub { font-size: 13px; color: var(--muted); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: center; }
.gig-timer { font-size: 14px; font-weight: 700; color: var(--accent); margin: 6px 0; }
.gig-active-note { font-size: 12px; color: var(--muted); line-height: 1.5; margin-bottom: 8px; }
.live-note {
  font-size: 12.5px; color: #9fc1ff; background: rgba(74,144,226,.1);
  border: 1px dashed rgba(120,150,255,.4); border-radius: var(--r-md);
  padding: 8px 12px; margin: 8px 0;
}

/* ================= РЕЙД-БОСС (28.08) — всё с префиксом .raid- ================= */
.raid-next { text-align: center; padding: 16px 8px 8px; }
.raid-next-ico { font-size: 46px; line-height: 1.1; animation: petPulse 2.2s ease-in-out infinite; }
.raid-next-title { font-size: 17px; font-weight: 800; margin-top: 6px; }
.raid-next-sub { font-size: 12.5px; color: var(--muted); margin-top: 4px; line-height: 1.5; }
.raid-next-slots { font-size: 14px; font-weight: 700; margin-top: 10px; color: var(--accent); }
.raid-next-note { font-size: 12px; color: var(--muted); margin-top: 10px; line-height: 1.5; }
.raid-boss {
  display: flex; flex-direction: column; gap: 8px;
  background: linear-gradient(135deg, #3a2440, #241a30); border: 1px solid rgba(255,120,200,.25);
  border-radius: var(--r-md); padding: 14px; margin: 10px 0;
}
.raid-boss-head { display: flex; align-items: center; gap: 12px; }
.raid-boss-ico { font-size: 36px; line-height: 1; }
.raid-boss-head b { font-size: 16px; }
.raid-boss-sub { font-size: 12px; color: var(--muted); display: block; margin-top: 2px; }
.raid-hp { margin-top: 4px; }
.raid-hp-bar {
  height: 14px; border-radius: 999px; background: #221a28; border: 1px solid var(--border);
  overflow: hidden; position: relative;
}
.raid-hp-bar span {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #e74c3c, #ff7b54);
  transition: width .4s ease;
}
.raid-hp-nums { font-size: 12px; margin-top: 4px; color: #ff9d8a; font-weight: 700; }
.raid-timer { font-size: 13px; font-weight: 700; color: #ffd77a; }
.raid-my { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--muted); gap: 8px; flex-wrap: wrap; }
.raid-my b { color: var(--text); }
.raid-fighter { margin: 4px 0; }
.raid-sel {
  width: 100%; padding: 10px 12px; border-radius: var(--r-md);
  background: var(--card2); border: 1px solid var(--border); color: var(--text); font-size: 14px;
}
.raid-note { font-size: 11.5px; color: var(--muted); line-height: 1.5; }
.raid-top-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 2px;
  border-bottom: 1px solid var(--border); font-size: 13.5px;
}
.raid-top-row:last-child { border-bottom: none; }
.raid-top-place {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--card2); border: 1px solid var(--border); font-size: 11px; font-weight: 800;
}
.raid-top-row:nth-child(2) .raid-top-place { background: rgba(255,215,122,.18); color: #ffd77a; border-color: #ffd77a55; }
.raid-top-row:nth-child(3) .raid-top-place { background: rgba(200,200,210,.14); color: #d0d0da; border-color: #aaa; }
.raid-top-row:nth-child(4) .raid-top-place { background: rgba(205,127,50,.16); color: #cd8032; border-color: #cd8032aa; }
.raid-hist {
  display: flex; align-items: center; gap: 10px; padding: 7px 2px;
  border-bottom: 1px solid var(--border); font-size: 13px; color: var(--muted);
}
.raid-hist:last-child { border-bottom: none; }
/* --- редизайн 28.08: SVG-иконки в крупных плашках (эмодзи → иконсет) --- */
.ach-ico svg.ic { width: 22px; height: 22px; }
.crr-row-ico svg.ic { width: 20px; height: 20px; }
.ksk-intro-ico svg.ic { width: 52px; height: 52px; }
.ksk-event-ico svg.ic { width: 22px; height: 22px; }
.mg-ico svg.ic { width: 30px; height: 30px; }
.pet-wait-ico svg.ic { width: 44px; height: 44px; }
.live-row-ico svg.ic { width: 22px; height: 22px; }
.gig-ico svg.ic { width: 30px; height: 30px; }
.gig-active-ico svg.ic { width: 44px; height: 44px; }
.raid-next-ico svg.ic { width: 46px; height: 46px; }
.raid-boss-ico svg.ic { width: 36px; height: 36px; }
.raid-hist svg.ic { width: 16px; height: 16px; }
.badge svg.ic, .pet-badge svg.ic, .crr-badge svg.ic { width: 12px; height: 12px; }
.note svg.ic { flex: none; }

/* ---------- смерть: вуаль «мир заморожен до следующего входа» ---------- */
#death-veil { position: fixed; inset: 0; z-index: 980; display: flex; align-items: center; justify-content: center; background: rgba(8, 10, 16, 0.96); backdrop-filter: blur(6px); padding: 24px; }
#death-veil.hidden { display: none; }
.dv-card { max-width: 420px; text-align: center; display: flex; flex-direction: column; gap: 10px; }
.dv-icon { font-size: 46px; line-height: 1; }
.dv-title { font-size: 20px; font-weight: 700; }
.dv-sub { font-size: 14px; opacity: 0.85; line-height: 1.45; }

/* ---------- лента: чипы-категории внутри вкладок (30.08) ---------- */
.news-cats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.news-cat {
  border: 1px solid var(--line, rgba(255,255,255,0.12));
  background: rgba(255,255,255,0.04);
  color: var(--muted, #8892a6);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 13px;
  cursor: pointer;
  transition: 0.15s;
}
.news-cat.active { background: var(--grad, linear-gradient(135deg,#ffd75e,#ff9f43)); color: #1a1c24; border-color: transparent; font-weight: 600; }
.news-cat .badge { margin-left: 4px; }
.news-live-btn { width: 100%; text-align: left; }

/* ================= ЛЕНТА v2 (02.09): цвета категорий, дни, «Важно», мелкие операции ================= */
/* 13.09: категория «Дата-центр» (dc), мягкая подсветка личных важных (imp-soft),
   акцент крупных сумм (major), кнопка «Очистить» вместо крестика ✕ в строках */
.news-row { border-left: 3px solid var(--nc, #3a465f); }
.news-cls-money { --nc: #f5c451; }
.news-cls-work  { --nc: #5bb98f; }
.news-cls-biz   { --nc: #e0954f; }
.news-cls-dc    { --nc: #4fb3d9; }
.news-cls-fight { --nc: #e0605e; }
.news-cls-game  { --nc: #c86bd6; }
.news-cls-love  { --nc: #ff8fa3; }
.news-cls-pet   { --nc: #7ec9e8; }
.news-cls-style { --nc: #a9b8ff; }
.news-cls-sys   { --nc: #8892a6; }
.news-row.news-new { border-left-color: var(--nc, #7fa45e); border-left-width: 4px; }
.news-row.news-imp { background: linear-gradient(90deg, rgba(224,96,94,0.10), var(--card) 55%); }
.news-row.news-imp-soft { background: linear-gradient(90deg, rgba(245,196,81,0.09), var(--card) 55%); }
.news-row.news-major .r-title { font-weight: 800; }
.news-row.news-major .r-right > div { font-size: 16.5px; font-weight: 800; }
.news-day {
  font-size: 11.5px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
  color: var(--muted, #8892a6); margin: 14px 2px 6px;
}
.news-day-imp { color: #e0605e; display: flex; align-items: center; gap: 6px; }
.news-day:first-child { margin-top: 4px; }
.news-read-all {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--line, rgba(255,255,255,0.12)); background: rgba(255,255,255,0.04);
  color: var(--muted, #8892a6); border-radius: 999px; padding: 4px 11px;
  font-size: 12.5px; cursor: pointer; margin-bottom: 6px;
}
.news-row .r-right { display: flex; align-items: center; gap: 8px; }
.news-cat.news-clear {
  margin-left: auto; color: #e0605e; background: transparent;
  border-style: dashed; opacity: 0.75;
}
.news-cat.news-clear:active { opacity: 1; background: rgba(224,96,94,0.12); }
.news-minor { border: 1px solid var(--border); border-radius: 12px; margin-top: 12px; overflow: hidden; }
.news-minor > summary {
  display: flex; align-items: center; gap: 8px; padding: 12px 14px; cursor: pointer;
  font-weight: 700; font-size: 13.5px; list-style: none;
}
.news-minor > summary::-webkit-details-marker { display: none; }
.news-minor .acc-sub { font-weight: 600; font-size: 12.5px; color: var(--muted); }
.news-minor > summary::after { content: '▾'; margin-left: auto; color: var(--muted); transition: transform .15s; }
.news-minor[open] > summary::after { transform: rotate(180deg); }
.news-minor .news-row { border-radius: 0; border: none; border-top: 1px solid var(--border); border-left: 3px solid var(--nc, #3a465f); }

/* ================= РЕЙД-БОСС: баннер активного босса (01.09) =================
   Красный pill в потоке под шапкой (рядом с live-баннером), тап — поле боя.
   Мини-HP-бар в строке + таймер до ухода босса. */
#raid-banner {
  align-self: center;
  display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 24px);
  margin: 8px 12px 0;
  background: linear-gradient(135deg, #3A1D24, #1D2747); border: 1px solid rgba(255,107,107,.45);
  border-radius: 999px; padding: 7px 16px; cursor: pointer;
  box-shadow: 0 3px 14px rgba(0,0,0,.4); font-size: 13px; color: var(--text);
  transition: transform .12s ease;
}
#raid-banner:active { transform: scale(.98); }
#raid-banner { position: relative; overflow: hidden; }
#raid-banner .rb-art { position: absolute; inset: 0; opacity: .5; pointer-events: none; }
#raid-banner .rb-art svg { width: 100%; height: 100%; display: block; object-fit: cover; filter: brightness(.75); }
#raid-banner .rb-ico, #raid-banner .rb-text { position: relative; z-index: 1; }
#raid-banner .rb-ico { font-size: 18px; line-height: 1; }
#raid-banner .rb-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 8px; }
#raid-banner .rb-text b { color: #FF9A9A; }
#raid-banner .rb-timer { color: #FF8A94; font-weight: 700; white-space: nowrap; }
#raid-banner .rb-go { color: #FFD77A; font-weight: 700; white-space: nowrap; }
#raid-banner .rb-hp { width: 44px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.15); overflow: hidden; flex: none; }
#raid-banner .rb-hp i { display: block; height: 100%; background: linear-gradient(90deg, #E5484D, #FF8A3D); border-radius: 3px; }

/* 02.09: неон на ВСЕХ иконках (лёгкий, для мелких 14px — деликатнее) */
svg.ic { filter: drop-shadow(0 0 2px rgba(0, 229, 255, .35)) drop-shadow(0 0 7px rgba(0, 229, 255, .16)); }

/* ценовые доты ларька (02.09: замена эмодзи-кружков) */
.pdot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none; margin-right: 5px; box-shadow: 0 0 6px currentColor; }
.pdot-ok { background: #3DDC84; color: #3DDC84; }
.pdot-mid { background: #43D9C3; color: #43D9C3; }
.pdot-warn { background: #F5B942; color: #F5B942; }
.pdot-bad { background: #E5484D; color: #E5484D; }