/* Мини-апп «Мафия»: цвета — из темы Telegram (переменные --tg-theme-* ставит SDK), акцент — тема беседы/скин.
   Всё плавное: переходы экранов, нажатия, появление карточек. */
:root {
  /* как в настройках Telegram: фон — «вторичный», секции-карточки — поверх него */
  --bg: var(--tg-theme-secondary-bg-color, #0e0e13);
  --bg2: var(--tg-theme-bg-color, #1a1a22);
  --card: var(--tg-theme-section-bg-color, var(--tg-theme-bg-color, #1a1a22));
  --text: var(--tg-theme-text-color, #f2f2f5);
  --hint: var(--tg-theme-hint-color, #8d8d99);
  --link: var(--tg-theme-link-color, #7aa7ff);
  --accent: var(--tg-theme-button-color, #c0392b);
  --accent-text: var(--tg-theme-button-text-color, #ffffff);
  --danger: var(--tg-theme-destructive-text-color, #e5484d);
  --sep: color-mix(in srgb, var(--hint) 22%, transparent);
  --radius: 18px;
  --r-btn: 14px;
  --r-sm: 12px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  --font-head: var(--font);
  --shadow: 0 8px 28px rgba(0, 0, 0, .18);
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text);
  font: 15px/1.45 var(--font); }
body { overscroll-behavior-y: none; }
button { font: inherit; color: inherit; }
a { color: var(--link); text-decoration: none; }

.app { min-height: 100vh; position: relative; overflow-x: hidden; }
.screen { position: absolute; inset: 0; padding: 14px 14px calc(96px + env(safe-area-inset-bottom));
  animation: in .32s var(--ease) both; }
.screen.back { animation-name: in-back; }
/* Соседние блоки экрана и шторки никогда не слипаются (плитки, ряды кнопок, графики без своего отступа снизу
   и карточка с подписью за ними). :where — нулевая специфичность: свои отступы элементов (h2, .btn) главнее,
   а с margin-bottom карточек этот отступ схлопывается, двойного не бывает. */
:where(.screen, .sheet:not(.tall), .sheet-scroll) > :where(* + *) { margin-top: 10px; }
:where(.screen, .sheet:not(.tall), .sheet-scroll) > :where(.grip + *, h1 + *, h2 + *, h3 + *) { margin-top: 0; }
@keyframes in { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes in-back { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.boot { position: fixed; inset: 0; display: grid; place-items: center; }
.boot-mask { font-size: 56px; animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.12); opacity: .6; } }

h1 { font-size: 24px; margin: 6px 4px 14px; letter-spacing: -.02em; }
h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--hint);
  margin: 22px 8px 8px; font-weight: 600; }
.muted { color: var(--hint); }
.small { font-size: 13px; }

.card { background: var(--card); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 10px;
  animation: rise .36s var(--ease) both; }
.card + .card { animation-delay: .04s; }

/* ---------- профиль ---------- */
.hero { position: relative; overflow: hidden; padding: 20px 18px; border-radius: calc(var(--radius) + 4px); margin-bottom: 12px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 85%, #000) 0%,
              color-mix(in srgb, var(--accent) 35%, var(--card)) 100%);
  color: #fff; box-shadow: var(--shadow); animation: rise .4s var(--ease) both; }
.hero::after { content: attr(data-accent); position: absolute; right: -6px; bottom: -18px; font-size: 110px;
  opacity: .16; transform: rotate(-12deg); pointer-events: none; }
.hero .name { font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.hero .sub { opacity: .85; font-size: 13px; margin-top: 2px; }
.hero .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.chip { background: rgba(255, 255, 255, .18); backdrop-filter: blur(6px); border-radius: 999px;
  padding: 4px 10px; font-size: 12.5px; font-weight: 600; }
.bar { height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .22); margin-top: 14px; overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 6px; background: #fff; transition: width .8s var(--ease); }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.stat { background: var(--card); border-radius: var(--radius); padding: 12px 10px; text-align: center;
  animation: rise .4s var(--ease) both; }
button.stat { border: 0; color: inherit; font: inherit; width: 100%; cursor: pointer; transition: transform .15s; }
button.stat:active { transform: scale(.96); }
.stat b { display: block; font-size: 19px; }
.stat span { font-size: 12px; color: var(--hint); }

.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.tile { background: var(--card); border: var(--look-border, 0); border-radius: var(--radius); padding: 16px 14px; text-align: left;
  display: flex; flex-direction: column; gap: 6px; cursor: pointer; transition: transform .15s var(--ease);
  animation: rise .4s var(--ease) both; }
.tile:active, .row:active, .btn:active, .seg button:active { transform: scale(.97); }
.tile .ic { font-size: 24px; }
.tile .t { font-weight: 600; }
.tile .d { font-size: 12.5px; color: var(--hint); }

/* ---------- списки и формы ---------- */
.list { background: var(--card); border-radius: var(--radius); overflow: hidden; margin-bottom: 10px;
  animation: rise .36s var(--ease) both; }
.row { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border: 0; width: 100%;
  background: transparent; text-align: left; transition: transform .15s var(--ease), background .2s; }
.row + .row { border-top: 1px solid var(--sep); }
.row .grow { flex: 1; min-width: 0; }
.row .title { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .title.wrap { white-space: normal; }
/* текст с сервера (safeHtml) внутри строки списка — в строку, без отступов сообщения */
.row .title .msg, .row .muted .msg { display: inline; margin: 0; padding: 0; background: none; }
.row .val { color: var(--hint); font-size: 14px; white-space: nowrap; }
.row.me { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.place { width: 30px; text-align: center; font-weight: 700; font-size: 16px; }

.btn { display: block; width: 100%; border: 0; border-radius: var(--r-btn); padding: 13px 16px; font-weight: 600;
  background: var(--accent); color: var(--accent-text); cursor: pointer; transition: transform .15s var(--ease),
  opacity .2s; margin-top: 8px; }
.btn.ghost { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.btn:disabled { opacity: .5; }
.input { width: 100%; padding: 13px 14px; border-radius: var(--r-btn); border: 1px solid var(--sep);
  background: var(--bg); color: var(--text); font: inherit; outline: none; transition: border .2s; }
.input:focus { border-color: var(--accent); }

.seg { display: flex; background: var(--bg2); border-radius: var(--r-sm); padding: 3px; margin-bottom: 12px; gap: 2px; }
.seg button { flex: 1; border: 0; background: transparent; padding: 8px 6px; border-radius: 9px; font-weight: 600;
  font-size: 13.5px; color: var(--hint); transition: all .25s var(--ease); cursor: pointer; }
.seg button.on { background: var(--card); color: var(--text); box-shadow: 0 2px 8px rgba(0, 0, 0, .12); }

.switch { width: 46px; height: 28px; border-radius: 28px; background: var(--sep); position: relative;
  transition: background .25s var(--ease); flex: none; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; transition: transform .25s var(--ease); box-shadow: 0 1px 4px rgba(0, 0, 0, .3); }
.switch.on { background: var(--accent); }
.switch.on::after { transform: translateX(18px); }

.pack { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.offer { background: var(--card); border-radius: var(--radius); padding: 16px 14px; border: 0; text-align: center;
  cursor: pointer; transition: transform .15s var(--ease); position: relative; animation: rise .4s var(--ease) both; }
.offer:active { transform: scale(.96); }
.offer .big { font-size: 22px; font-weight: 700; }
.offer .price { margin-top: 6px; color: var(--hint); font-size: 13px; }
.offer .tagline { position: absolute; top: 8px; right: 8px; font-size: 11px; font-weight: 700; padding: 2px 7px;
  border-radius: 8px; background: var(--accent); color: var(--accent-text); }
.offer.sel { outline: 2px solid var(--accent); }
s { opacity: .6; }

.pack.three { grid-template-columns: repeat(3, 1fr); }
.row .badge { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 22px;
  background: color-mix(in srgb, var(--accent) 16%, transparent); }

.empty { text-align: center; color: var(--hint); padding: 40px 20px; }
.empty .ic { font-size: 44px; display: block; margin-bottom: 10px; }

/* «Наверх»: маленькая круглая кнопка справа снизу, появляется при прокрутке вниз */
.to-top { position: fixed; right: 14px; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 35; width: 40px;
  height: 40px; border-radius: 50%; border: 0; background: color-mix(in srgb, var(--card) 88%, transparent);
  color: var(--accent); font-size: 20px; font-weight: 700; box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
  opacity: 0; transform: translateY(12px) scale(.9); pointer-events: none; transition: opacity .2s, transform .2s; }
.to-top.on { opacity: 1; transform: none; pointer-events: auto; }
.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 50;
  transform: translate(-50%, 30px); opacity: 0; background: color-mix(in srgb, var(--text) 92%, transparent);
  color: var(--bg); padding: 11px 16px; border-radius: 14px; font-size: 14px; font-weight: 500;
  transition: all .3s var(--ease); pointer-events: none; max-width: calc(100vw - 32px); text-align: center; }
.toast.show { transform: translate(-50%, 0); opacity: 1; }

.skeleton { border-radius: var(--radius); height: 72px; margin-bottom: 10px;
  background: linear-gradient(90deg, var(--card) 0%, color-mix(in srgb, var(--card) 70%, var(--hint)) 50%,
              var(--card) 100%); background-size: 200% 100%; animation: shimmer 1.2s infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }

.desc { white-space: pre-wrap; font-size: 14px; color: color-mix(in srgb, var(--text) 85%, var(--hint)); }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* Старые WebView без color-mix(): простые запасные цвета, чтобы всё оставалось читаемым. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  :root { --sep: rgba(128, 128, 128, .22); }
  .hero { background: var(--accent); }
  .row.me, .btn.ghost, .row .badge { background: rgba(128, 128, 128, .14); }
  .btn.ghost { color: var(--accent); }
  .toast { background: var(--text); }
  .skeleton { background: var(--card); }
  .desc { color: var(--text); }
}

/* ---------- нижняя шторка выбора (настройки беседы) ---------- */
.sheet-bg { position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 40; animation: fade .2s both; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; background: var(--card);
  border-radius: calc(var(--radius) + 4px) calc(var(--radius) + 4px) 0 0; padding: 10px 14px calc(18px + env(safe-area-inset-bottom));
  max-height: 80vh; overflow-y: auto; animation: up .3s var(--ease) both; box-shadow: 0 -8px 30px rgba(0, 0, 0, .25); }
.sheet .grip { width: 38px; height: 5px; border-radius: 5px; background: var(--sep); margin: 4px auto 12px; }
.sheet h3 { margin: 0 4px 6px; font-size: 17px; }
.sheet .desc { margin: 0 4px 12px; }
.opt { display: flex; align-items: center; justify-content: space-between; width: 100%; border: 0;
  background: transparent; padding: 14px 6px; border-top: 1px solid var(--sep); font-size: 15.5px; cursor: pointer; }
.opt.on { color: var(--accent); font-weight: 700; }
.opt.on::after { content: "✓"; }
@keyframes fade { from { opacity: 0; } }
@keyframes up { from { transform: translateY(100%); } }

.chat-head { display: flex; align-items: center; gap: 12px; }
.chat-head .badge { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; font-size: 28px;
  background: color-mix(in srgb, var(--accent) 18%, transparent); flex: none; }
.pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.timeline .ev { padding: 8px 16px; font-size: 14px; }
.timeline .ev + .ev { border-top: 1px solid var(--sep); }
.theme-card { position: relative; overflow: hidden; }
.theme-card .sample { font-style: italic; color: var(--hint); font-size: 13.5px; margin-top: 6px; }
.theme-card.cur { outline: 2px solid var(--accent); }
textarea.input { min-height: 120px; resize: vertical; font: inherit; }
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .chat-head .badge, .pill { background: rgba(128, 128, 128, .16); }
}

/* ---------- игровой стол ---------- */
.game-top { display: flex; align-items: center; justify-content: space-between; margin: 2px 4px 10px; }
.game-top .ph { font-weight: 700; font-size: 17px; }
.game-top .timer { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 17px; padding: 4px 12px;
  border-radius: 12px; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.game-top .timer.low { animation: pulse 1s ease-in-out infinite; }
.table-wrap { position: relative; width: 100%; aspect-ratio: 1 / 1; max-width: 460px; margin: 0 auto 12px; }
.felt { position: absolute; inset: 17%; border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--accent) 45%, #1d3b2a) 0%,
              color-mix(in srgb, var(--accent) 25%, #0c1a12) 70%);
  box-shadow: inset 0 0 40px rgba(0, 0, 0, .55), 0 10px 30px rgba(0, 0, 0, .35);
  display: grid; place-items: center; text-align: center; color: #fff; transition: background 1s var(--ease); }
.felt.night { background: radial-gradient(circle at 50% 40%, #26315a 0%, #0b1022 72%); }
.felt .big { font-size: 40px; line-height: 1; }
.felt .lbl { font-size: 13px; opacity: .85; margin-top: 6px; }
.seat { position: absolute; width: 22%; transform: translate(-50%, -50%); text-align: center; border: 0;
  background: transparent; padding: 0; cursor: default; transition: transform .25s var(--ease); }
.seat .av { width: 52px; height: 52px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center;
  font-size: 22px; font-weight: 700; color: #fff; background: color-mix(in srgb, var(--accent) 55%, #333);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .3); border: 2px solid transparent; transition: all .3s var(--ease); }
.seat .nm { font-size: 11.5px; margin-top: 4px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; max-width: 100%; }
.seat .num { position: absolute; top: -4px; left: 50%; margin-left: 14px; font-size: 10px; font-weight: 700;
  background: var(--card); color: var(--text); border-radius: 8px; padding: 0 5px; }
.seat.me .av { border-color: var(--accent-text); box-shadow: 0 0 0 3px var(--accent); }
.seat.dead .av { filter: grayscale(1); opacity: .45; }
.seat.dead .nm { opacity: .5; text-decoration: line-through; }
.seat.pick { cursor: pointer; }
.seat.pick .av { animation: glow 1.4s ease-in-out infinite; }
.seat.pick:active { transform: translate(-50%, -50%) scale(.92); }
.seat.win .av { box-shadow: 0 0 0 3px #f5c542; }
@keyframes glow { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 60%, transparent), 0 0 22px var(--accent); } }
.prompt { border: 2px solid color-mix(in srgb, var(--accent) 50%, transparent); }
.prompt .acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.prompt .acts .btn { width: auto; flex: 1 1 45%; margin: 0; padding: 10px 12px; font-size: 14px; }
.prompt .acts .btn.ghost { color: var(--text); }
.msg { font-size: 14px; line-height: 1.45; }
.msg aside, .msg blockquote { margin: 6px 0; padding: 6px 10px; border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent); border-radius: 0 10px 10px 0; font-style: italic; }
.msg h1, .msg h2, .msg h3 { font-size: 15px; margin: 4px 0; }
.msg table { border-collapse: collapse; width: 100%; font-size: 13px; margin: 4px 0; }
.msg td, .msg th { padding: 3px 6px; border-bottom: 1px solid var(--sep); text-align: left; }
.msg footer { color: var(--hint); font-size: 12.5px; margin-top: 4px; }
.msg p { margin: 4px 0; }
.log .msg { padding: 10px 14px; animation: rise .3s var(--ease) both; }
.log .msg + .msg { border-top: 1px solid var(--sep); }
.role-card { display: flex; gap: 12px; align-items: center; }
.game-top .right { display: flex; align-items: center; gap: 8px; }
.voice-bar { display: flex; align-items: center; gap: 8px; margin: -2px 0 8px; flex-wrap: wrap; }
.voice-bar .vb-text { flex: 1 1 140px; font-size: 13px; color: var(--hint); }
.voice-bar .vb-btn { width: auto; margin: 0; padding: 8px 12px; font-size: 13.5px; }
.sp-about { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 6px 12px; margin-top: 10px; }
.sp-kv { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sp-row .msg { font-size: 14px; }
.set-note { margin: -4px 4px 8px; min-height: 1em; }
.away { position: fixed; inset: 0; z-index: 30; background: color-mix(in srgb, var(--bg, #000) 88%, transparent);
  display: grid; place-items: center; padding: 16px; }
.away-box { background: var(--card); border-radius: 16px; padding: 22px 18px; max-width: 340px; text-align: center;
  display: flex; flex-direction: column; gap: 10px; }
.away-box .big { font-size: 40px; }
.voice-bar .vb-warn { flex: 1 1 100%; font-size: 13px; color: #e08a3c; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.lim-row { flex-wrap: wrap; gap: 6px; }
.lim-v { cursor: pointer; border: 0; font: inherit; font-size: 13px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin: 6px 0 10px; }
.kpi { background: var(--card); border-radius: var(--r-sm); padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kpi b { font-size: 20px; font-variant-numeric: tabular-nums; }
.kpi span { font-size: 12.5px; color: var(--hint); }
.chart-note { margin: -4px 4px 8px; }
.chart { background: var(--card); border-radius: var(--r-sm); padding: 12px; margin-bottom: 8px; }
.bars { display: flex; align-items: flex-end; gap: 2px; height: 120px; }
.bar { flex: 1; min-width: 2px; border: 0; padding: 0; background: color-mix(in srgb, var(--accent) 55%, transparent);
  border-radius: 4px 4px 0 0; cursor: pointer; }
.bar.best, .bar:hover, .bar:focus-visible { background: var(--accent); outline: none; }
.bars-axis { display: flex; justify-content: space-between; margin-top: 6px; font-variant-numeric: tabular-nums; }
.bars-tip { margin-top: 4px; min-height: 1.2em; }
.shares { display: flex; flex-direction: column; gap: 10px; background: var(--card); border-radius: var(--r-sm); padding: 12px; margin-bottom: 8px; }
.share-top { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.share-top b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.share-bar { height: 8px; border-radius: 4px; background: var(--sep); overflow: hidden; margin-top: 4px; }
.share-bar i { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.share-bar.wl { background: color-mix(in srgb, var(--hint) 35%, transparent); }
.share-bar.wl i.w { background: #3fa564; }
.legend { display: flex; gap: 14px; }
.legend .lg::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.legend .win::before { background: #3fa564; }
.legend .loss::before { background: color-mix(in srgb, var(--hint) 35%, transparent); }
.sp-media { margin-top: 4px; }
.sp-img { max-width: 100%; max-height: 260px; border-radius: 10px; display: block; }
.sp-attach { width: auto; margin-top: 8px; display: inline-flex; cursor: pointer; }
.faq { display: flex; flex-direction: column; gap: 8px; margin-bottom: 6px; }
.faq-item { background: var(--card); border-radius: var(--r-sm); padding: 0 14px; }
.faq-item summary { cursor: pointer; padding: 12px 0; font-weight: 600; list-style: none; display: flex; gap: 10px; align-items: baseline; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; margin-left: auto; color: var(--hint); font-weight: 400; }
.faq-item[open] summary::after { content: "–"; }
.faq-item .faq-a { padding: 0 0 12px; color: var(--text); line-height: 1.5; }
.cmd-row .mono-cmd { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 13.5px; overflow-wrap: anywhere; }
.voice-bar .vb-volrow { flex: 1 1 100%; display: flex; align-items: center; gap: 8px; font-size: 15px; }
.voice-bar .vb-vol { flex: 1; min-width: 0; accent-color: var(--accent, #c9a227); }
.voice-bar .vb-vol:disabled { opacity: .4; }
.peer-vol { margin: 0 4px 14px; }
.peer-vol .vb-volrow { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 15px; }
.peer-vol .vb-vol { flex: 1; min-width: 0; accent-color: var(--accent); }
.peer-vol .pv-pct { width: 42px; text-align: right; font-variant-numeric: tabular-nums; }
.seat .vc { position: absolute; top: 34px; right: 50%; margin-right: 16px; font-size: 12px; }
.seat.talk .av { box-shadow: 0 0 0 3px #34c759, 0 0 16px 2px rgba(52, 199, 89, .55); }
.st-head { display: flex; gap: 14px; align-items: center; }
.st-av { width: 64px; height: 64px; border-radius: 50%; flex: none; display: grid; place-items: center; overflow: hidden;
  font-size: 26px; font-weight: 700; color: #fff; background: var(--accent); }
.st-av img { width: 100%; height: 100%; object-fit: cover; }
.row .val.strong { color: var(--text); font-weight: 600; white-space: normal; text-align: right; }
.link-btn { border: 0; background: none; color: var(--link); padding: 4px 0 0; font-size: 14px; cursor: pointer; }
.st-act { min-height: 56px; justify-content: center; }
.st-act.danger .t { color: var(--danger); }
.field { display: block; margin: 0 2px 12px; }
.field > span { display: block; font-size: 13px; color: var(--hint); margin: 0 4px 6px; }
.field .seg { margin-bottom: 0; }
.avi { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: rgba(128, 128, 128, .2); }
.avi img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avi:has(img:not([src])) { animation: shimmer 1.2s ease-in-out infinite; }
.avi.sm { width: 34px; height: 34px; flex: none; }
.avi.big { width: 76px; height: 76px; margin: 0 auto 8px; }
.seat .av { overflow: hidden; padding: 0; }
.seat .rem { position: absolute; top: 30px; left: 50%; margin-left: 12px; font-size: 15px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6)); }
.seat .skull { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); font-size: 22px; }
.hero-top { display: flex; gap: 14px; align-items: center; }
.hero-av { width: 58px; height: 58px; flex: none; border: 2px solid rgba(255, 255, 255, .7); border-radius: 50%; padding: 0;
  background: none; cursor: pointer; }
.av-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.av-tile { background: var(--card); border: 2px solid transparent; border-radius: 18px; padding: 12px 6px; text-align: center;
  color: var(--text); cursor: pointer; transition: transform .15s var(--ease); }
.av-tile.on { border-color: var(--accent); }
.av-tile .t { font-weight: 600; font-size: 14px; }
.av-tile:active { transform: scale(.96); }
.sheet.tall { max-height: 86vh; display: flex; flex-direction: column; }
.sheet-scroll { overflow-y: auto; margin-bottom: 10px; }
.sp-chat { max-height: 340px; margin: 10px 0 0; }
.cm .at { display: block; font-style: normal; font-size: 11px; color: var(--hint); margin-top: 2px; text-align: right; }
.sp-row { align-items: flex-start; }
.sp-text { white-space: normal; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
textarea.input { resize: none; font: inherit; }
.chat-row { align-items: flex-end; }
.chat-row .chat-send { height: 46px; }
.nw-toolbar { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.nw-tool { min-width: 38px; height: 36px; border: 0; border-radius: 10px; background: rgba(128, 128, 128, .16);
  color: var(--text); font-weight: 700; cursor: pointer; }
.nw-text { min-height: 160px; margin-bottom: 10px; }
.nw-btn-row { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 6px; margin-bottom: 6px; }
.nw-btn-row .input { margin: 0; }
.sv-q { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.sv-q .input, .sv-q .seg { margin: 0; }
.theme-cover { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; margin-top: 10px; display: block; }
.cover-thumb { width: 64px; height: 36px; border-radius: 8px; object-fit: cover; flex: none; }
.felt { background-size: cover !important; background-position: center !important; }
.lobby-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.lobby-top .ok { color: #34c759; font-weight: 600; font-size: 14px; }
.pbar { height: 8px; border-radius: 8px; background: rgba(128, 128, 128, .18); margin-top: 10px; overflow: hidden; }
.pbar > i { display: block; height: 100%; border-radius: 8px; background: var(--accent); transition: width .6s var(--ease); }
.num-badge { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px;
  font-weight: 700; background: rgba(128, 128, 128, .16); flex: none; }
.btn.danger { color: var(--danger); }
.game-top .more { border: 0; background: rgba(128, 128, 128, .16); color: var(--text); width: 36px; height: 34px;
  border-radius: 12px; font-size: 20px; line-height: 1; cursor: pointer; }
.seat .mute { position: absolute; top: -4px; right: 50%; margin-right: 16px; font-size: 13px; }
.chat { padding: 10px; }
.chat-tabs { margin-bottom: 8px; }
.chat-list { max-height: 260px; min-height: 90px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px;
  padding: 2px; overscroll-behavior: contain; }
.cm { align-self: flex-start; max-width: 85%; padding: 7px 11px; border-radius: 14px 14px 14px 4px; font-size: 14px;
  line-height: 1.35; background: rgba(128, 128, 128, .13); overflow-wrap: anywhere; animation: rise .25s var(--ease) both; }
.cm b { display: block; font-size: 12px; color: var(--accent); margin-bottom: 1px; }
.cm.mine { align-self: flex-end; border-radius: 14px 14px 4px 14px;
  background: color-mix(in srgb, var(--accent) 22%, transparent); }
.cm.sys { align-self: center; background: none; color: var(--hint); font-size: 12.5px; text-align: center; }
.chat-hint:empty { display: none; }
.chat-hint { text-align: center; margin: 6px 0 2px; }
.chat-row { display: flex; gap: 8px; margin-top: 8px; }
.chat-row .input { flex: 1; margin: 0; }
.chat-row .chat-send { width: 46px; margin: 0; padding: 0; flex: none; }
.chat-row :disabled { opacity: .45; }
.role-card .em { font-size: 36px; }
.banner { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 18px; margin-bottom: 12px;
  border: 0; width: 100%; text-align: left; color: #fff; cursor: pointer; font-weight: 600;
  background: linear-gradient(135deg, #a3213a, #4a1020); box-shadow: var(--shadow); animation: rise .4s var(--ease) both; }
.banner .em { font-size: 26px; }
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .felt { background: #1d3b2a; } .seat .av { background: #444; } .game-top .timer { background: rgba(128,128,128,.16); }
}

/* ---------- вид скина (личный скин — всё приложение; тема беседы — экраны беседы и стол) ----------
   Цвета ставит applyLook() в переменные; здесь — форма, шрифт заголовков и картинка скина фоном. */
html[data-shape="sharp"] { --radius: 6px; --r-btn: 4px; --r-sm: 4px; }
html[data-shape="round"] { --radius: 26px; --r-btn: 999px; --r-sm: 18px; }
html[data-font="serif"] { --font-head: Georgia, "Times New Roman", "Noto Serif", serif; }
html[data-font="mono"] { --font-head: ui-monospace, "SF Mono", Consolas, "Courier New", monospace; }
html[data-font="rounded"] { --font-head: ui-rounded, "SF Pro Rounded", "Nunito", "Segoe UI", sans-serif; }
h1, .hero .name, .tile .t, .kpi b, .lobby-top b { font-family: var(--font-head); }
html[data-font="mono"] h1, html[data-font="mono"] h2 { letter-spacing: .02em; }
html[data-look] body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(color-mix(in srgb, var(--bg) 30%, transparent), color-mix(in srgb, var(--bg) 70%, transparent) 45%, var(--bg) 92%), var(--look-art) center top / cover no-repeat;
  opacity: var(--look-art-alpha, .55); }
html[data-look] { background: var(--bg); }
html[data-look] body { background: transparent; }       /* иначе фон body закрыл бы картинку скина */
html[data-look] .app { background: transparent; }
html[data-look] .tile, html[data-look] .list, html[data-look] .card, html[data-look] .kpi, html[data-look] .stat,
html[data-look] .chart, html[data-look] .shares, html[data-look] .faq-item {
  background: color-mix(in srgb, var(--card) 86%, transparent); backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--accent) 22%, transparent) inset; }
html[data-look] .btn:not(.ghost) { box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 30%, transparent); }
.look-dot { width: 26px; height: 26px; border-radius: 50%; flex: none; border: 2px solid var(--sep);
  background: linear-gradient(135deg, var(--d-bg) 50%, var(--d-ac) 50%); }

/* ---------- анимации вида скина (по смыслу темы): частицы фоном и эффект главных кнопок ----------
   Слой частиц — body::after поверх картинки скина и под содержимым; двигаются только фон и прозрачность (дёшево).
   Выключаются: «Анимации» в настройках приложения (html[data-fx-off]) и системное «Уменьшить движение». */
html[data-fx] body::after { content: ""; position: fixed; inset: -10% 0 0; z-index: -1; pointer-events: none; opacity: .9; }
/* снег: Зима, Викинги */
html[data-fx="snow"] body::after {
  background-image: radial-gradient(2.5px 2.5px at 20px 30px, #fff, transparent), radial-gradient(2px 2px at 120px 80px, #fff, transparent),
    radial-gradient(3px 3px at 70px 150px, #ffffffcc, transparent), radial-gradient(1.6px 1.6px at 170px 190px, #fff, transparent);
  background-size: 200px 220px; animation: fx-fall 14s linear infinite;
  filter: drop-shadow(0 0 1.5px rgba(40, 90, 150, .55)); }            /* на светлом фоне снежинки тоже видны */
/* дождь: Чикаго, Нуар, Лондон */
html[data-fx="rain"] body::after {
  background-image: linear-gradient(105deg, transparent 48%, color-mix(in srgb, #cfe3ff 55%, transparent) 50%, transparent 52%);
  background-size: 34px 120px; opacity: .35; animation: fx-rain .7s linear infinite; }
/* звёзды мерцают: Космос, Кавказ, Вампиры, Замок, Египет */
html[data-fx="stars"] body::after {
  background-image: radial-gradient(1.6px 1.6px at 30px 40px, #fff, transparent), radial-gradient(1.2px 1.2px at 140px 90px, #fff, transparent),
    radial-gradient(2px 2px at 220px 20px, #fff8d0, transparent), radial-gradient(1.3px 1.3px at 90px 170px, #fff, transparent);
  background-size: 260px 220px; inset: 0 0 45%; animation: fx-twinkle 3.2s ease-in-out infinite alternate; }
/* пузырьки: Атлантида, Пираты, Лайнер */
html[data-fx="bubbles"] body::after {
  background-image: radial-gradient(circle at 30px 200px, transparent 5px, color-mix(in srgb, #bff3ff 60%, transparent) 6px, transparent 7px),
    radial-gradient(circle at 140px 120px, transparent 3px, color-mix(in srgb, #bff3ff 50%, transparent) 4px, transparent 5px),
    radial-gradient(circle at 90px 40px, transparent 7px, color-mix(in srgb, #bff3ff 40%, transparent) 8px, transparent 9px);
  background-size: 190px 240px; animation: fx-rise 16s linear infinite; }
/* искры и угли: Дракон, Стимпанк, Экспресс */
html[data-fx="embers"] body::after {
  background-image: radial-gradient(2.5px 2.5px at 40px 200px, #ffb347, transparent), radial-gradient(2px 2px at 150px 100px, #ff7a2e, transparent),
    radial-gradient(1.8px 1.8px at 100px 30px, #ffd27a, transparent);
  background-size: 210px 230px; animation: fx-rise 9s linear infinite, fx-flicker 1.6s ease-in-out infinite alternate; }
/* лепестки сакуры: Самурай */
html[data-fx="petals"] body::after {
  background-image: radial-gradient(5px 3px at 40px 40px, #ffc4d6, transparent), radial-gradient(4px 2.5px at 160px 120px, #ffb0c8, transparent),
    radial-gradient(3.5px 2px at 100px 190px, #ffd6e2, transparent);
  background-size: 220px 240px; animation: fx-drift 18s linear infinite; }
/* светлячки: Джунгли */
html[data-fx="fireflies"] body::after {
  background-image: radial-gradient(3px 3px at 50px 80px, #e9ff8a, transparent), radial-gradient(2.5px 2.5px at 170px 160px, #d4ff6a, transparent),
    radial-gradient(2px 2px at 110px 220px, #f3ffb0, transparent);
  background-size: 230px 260px; animation: fx-float 11s ease-in-out infinite alternate, fx-twinkle 2.4s ease-in-out infinite alternate; }
/* туман: Призраки, Зомби, Тюрьма */
html[data-fx="fog"] body::after {
  background: radial-gradient(60% 30% at 20% 70%, color-mix(in srgb, #c9c9d6 22%, transparent), transparent 70%),
    radial-gradient(50% 25% at 80% 85%, color-mix(in srgb, #c9c9d6 18%, transparent), transparent 70%);
  background-size: 200% 100%; animation: fx-fog 22s ease-in-out infinite alternate; }
/* северное сияние: Аврора, Неон */
html[data-fx="aurora"] body::after {
  background: linear-gradient(115deg, transparent 20%, color-mix(in srgb, #2ee6a8 22%, transparent) 40%, color-mix(in srgb, #8b5cf6 22%, transparent) 60%, transparent 80%);
  background-size: 300% 100%; inset: 0 0 50%; animation: fx-aurora 14s ease-in-out infinite alternate; }
/* золотые искорки: Королевский, VIP, Казино, Олимп, Венеция, Рим */
html[data-fx="gold"] body::after {
  background-image: radial-gradient(1.8px 1.8px at 40px 50px, #ffe08a, transparent), radial-gradient(1.4px 1.4px at 160px 130px, #fff1b8, transparent),
    radial-gradient(2.2px 2.2px at 100px 200px, #ffd24a, transparent);
  background-size: 240px 240px; animation: fx-twinkle 2.6s ease-in-out infinite alternate, fx-float 20s ease-in-out infinite alternate; }
/* конфетти: Цирк */
html[data-fx="confetti"] body::after {
  background: radial-gradient(3px 2px at 20px 30px, #ff4d6d, transparent), radial-gradient(3px 2px at 120px 90px, #ffd23f, transparent),
    radial-gradient(3px 2px at 70px 170px, #3ec1ff, transparent), radial-gradient(3px 2px at 170px 40px, #7ae582, transparent);
  background-size: 200px 210px; animation: fx-fall 10s linear infinite; }
/* песок и пыль: Пустыня, Дикий Запад */
html[data-fx="dust"] body::after {
  background-image: radial-gradient(1.6px 1.6px at 30px 60px, #e8cfa0, transparent), radial-gradient(1.2px 1.2px at 140px 140px, #d9b98a, transparent),
    radial-gradient(1.8px 1.8px at 90px 210px, #f2dcb4, transparent);
  background-size: 210px 240px; animation: fx-wind 12s linear infinite; }
/* искорки знаний: Академия */
html[data-fx="sparks"] body::after {
  background-image: radial-gradient(1.6px 1.6px at 40px 60px, color-mix(in srgb, var(--accent) 80%, #fff), transparent),
    radial-gradient(1.2px 1.2px at 150px 160px, color-mix(in srgb, var(--accent) 60%, #fff), transparent);
  background-size: 220px 220px; animation: fx-twinkle 3s ease-in-out infinite alternate; }

@keyframes fx-fall { from { background-position: 0 0, 0 0, 0 0, 0 0; } to { background-position: 40px 440px, -30px 440px, 20px 440px, -20px 440px; } }
@keyframes fx-rain { from { background-position: 0 0; } to { background-position: -12px 120px; } }
@keyframes fx-rise { from { background-position: 0 0, 0 0, 0 0; } to { background-position: 20px -480px, -20px -480px, 10px -480px; } }
@keyframes fx-drift { from { background-position: 0 0, 0 0, 0 0; } to { background-position: 220px 480px, 140px 480px, 180px 480px; } }
@keyframes fx-float { from { transform: translate(0, 0); } to { transform: translate(18px, -26px); } }
@keyframes fx-twinkle { from { opacity: .35; } to { opacity: .95; } }
@keyframes fx-flicker { from { opacity: .55; } to { opacity: 1; } }
@keyframes fx-fog { from { background-position: 0% 0; } to { background-position: 100% 0; } }
@keyframes fx-aurora { from { background-position: 0% 0; filter: hue-rotate(0deg); } to { background-position: 100% 0; filter: hue-rotate(40deg); } }
@keyframes fx-wind { from { background-position: 0 0, 0 0, 0 0; } to { background-position: 420px 30px, 420px -20px, 420px 10px; } }

/* главные кнопки: золото — блик пробегает; неон — пульсирующее свечение; остальное — мягкий блик при наведении */
html[data-btn] .btn:not(.ghost) { position: relative; overflow: hidden; }
html[data-btn="shimmer"] .btn:not(.ghost)::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .45) 50%, transparent 65%); background-size: 250% 100%;
  animation: fx-shimmer 3.2s ease-in-out infinite; }
html[data-btn="glow"] .btn:not(.ghost) { animation: fx-glow 2.2s ease-in-out infinite alternate; }
html[data-btn="glow"] .tile .ic { filter: drop-shadow(0 0 6px var(--accent)); }
@keyframes fx-shimmer { from { background-position: 150% 0; } to { background-position: -100% 0; } }
@keyframes fx-glow { from { box-shadow: 0 0 6px color-mix(in srgb, var(--accent) 45%, transparent); }
  to { box-shadow: 0 0 22px color-mix(in srgb, var(--accent) 75%, transparent), 0 0 2px var(--accent); } }
/* выбранная плитка и место за столом говорящего — плавное «дыхание» акцентом */
html[data-look] .seat.talk .av { animation: fx-glow 1s ease-in-out infinite alternate; }

html[data-fx-off] body::after, html[data-fx-off] .btn::after { display: none; }
html[data-fx-off] .btn, html[data-fx-off] .seat .av { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  html[data-fx] body::after, html[data-btn] .btn::after { animation: none !important; }
  html[data-btn="glow"] .btn { animation: none !important; }
}