/* ═══════════ ШРИФТЫ (локальные — без похода к Google с телефона игрока) ═══════════
   Oswald и Manrope у Google ВАРИАТИВНЫЕ: один файл на все веса → font-weight здесь
   диапазон. Кириллицу/латиницу браузер тянет раздельно по unicode-range. Тайский и
   китайский эти шрифты не знают → системный фолбэк из font-family (это норма). */
@font-face { font-family:'Oswald'; font-style:normal; font-weight:300 700; font-display:swap;
  src:url(fonts/oswald-cyrillic-ext.woff2) format('woff2');
  unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family:'Oswald'; font-style:normal; font-weight:300 700; font-display:swap;
  src:url(fonts/oswald-cyrillic.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'Oswald'; font-style:normal; font-weight:300 700; font-display:swap;
  src:url(fonts/oswald-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Oswald'; font-style:normal; font-weight:300 700; font-display:swap;
  src:url(fonts/oswald-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; }
@font-face { font-family:'Manrope'; font-style:normal; font-weight:400 800; font-display:swap;
  src:url(fonts/manrope-cyrillic-ext.woff2) format('woff2');
  unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family:'Manrope'; font-style:normal; font-weight:400 800; font-display:swap;
  src:url(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:400 800; font-display:swap;
  src:url(fonts/manrope-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Manrope'; font-style:normal; font-weight:400 800; font-display:swap;
  src:url(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; }

/* ═══════════ ПАЛИТРА «ТЕАТР» — ночная сцена ═══════════
   🔴 Цвета берём ТОЛЬКО отсюда. Каждый цвет живёт ещё и как *-rgb для rgba-подложек —
   иначе светлая тема снова обрастёт 40 ручными заплатками. */
:root {
  --accent-rgb: 229,72,77;      /* #e5484d — красный «Театра» */
  --accent2-rgb: 184,38,43;     /* #b8262b — тёмный край градиента кнопок */
  --gold-rgb: 240,179,74;       /* #f0b34a — рейтинг, титулы */
  --ok-rgb: 75,217,138;         /* #4bd98a — онлайн, успех */
  --danger-rgb: 255,90,95;      /* #ff5a5f */
  --info-rgb: 74,158,255;       /* #4a9eff — команда «Город» */
  --violet-rgb: 209,127,224;    /* #d17fe0 — нейтральные роли */

  --accent: rgb(var(--accent-rgb));
  --accent-2: rgb(var(--accent2-rgb));
  --accent-soft: #ff8185;       /* красный ТЕКСТ на тёмном; на светлом темнеет */
  --gold: rgb(var(--gold-rgb));
  --ok: rgb(var(--ok-rgb));
  --danger: rgb(var(--danger-rgb));
  --info: rgb(var(--info-rgb));
  --violet: rgb(var(--violet-rgb));

  --bg: #0c0708;
  --bg-glow: #241012;
  --bg-deep: #060405;
  --panel: rgba(255,255,255,.03);
  --panel-2: rgba(255,255,255,.05);
  --sunk: rgba(0,0,0,.28);
  --solid: #120b0d;
  --line: rgba(255,255,255,.07);
  --line-2: rgba(255,255,255,.09);
  --txt: #efe9e9;
  --txt-hi: #f7f2f2;
  --muted: rgba(255,255,255,.5);
  --radius: 20px;
  --shadow: 0 10px 34px rgba(0,0,0,.40);
  --bar: rgba(9,5,6,.94);
  --scrim: rgba(4,3,5,.66);
  --font-display: 'Oswald', 'Segoe UI', system-ui, sans-serif;
  --font-text: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
  /* 🔴 Нативные попапы <select> рисует ОС, а не наш CSS. Без color-scheme браузер
     берёт СВЕТЛУЮ системную схему, а цвет текста наследует наш (почти белый) →
     «белое на светло-сером», список ролей нечитаем. Схему держим здесь и в
     theme-day — это часть палитры, а не заплатка. */
  color-scheme: dark;
  font-size: 17px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* SEO-заголовок: доступен поисковикам/скринридерам, визуально скрыт */
.seo-h1 { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
html, body { margin: 0; min-height: 100%; }
/* Фон привязан к вьюпорту (fixed) и покрывает экран — без «швов» на длинных
   страницах при любом скролле. */
body {
  background: radial-gradient(130% 100vh at 50% -5%, var(--bg-glow) 0%, var(--bg) 46%, var(--bg-deep) 100%) no-repeat fixed;
  background-size: cover;
  color: var(--txt);
  font-family: var(--font-text);
  line-height: 1.55;
  overflow-x: hidden;
  transition: background .6s ease;
  -webkit-font-smoothing: antialiased;
}
/* Фазы перекрашивают софит над сценой — день/ночь обязаны различаться с одного
   взгляда (это игровая инфа), поэтому фазовые тона держим и в «Театре». */
body.phase-night { --bg-glow: #161a3e; --bg: #08070f; --bg-deep: #050409; }
body.phase-day   { --bg-glow: #3d2a10; --bg: #120c09; --bg-deep: #080505; }
body.phase-ended { --bg-glow: #2a1030; --bg: #0b0710; --bg-deep: #050308; }
body.phase-night .phase-badge { color: #8fa4ff; }
body.phase-day   .phase-badge { color: var(--gold); }

.app { max-width: 600px; margin: 0 auto; padding: 22px 16px 120px; min-height: 100%; }
/* Десктоп/ноут: шире контейнер — оптимальнее используем пространство. */
@media (min-width: 1000px) { .app { max-width: 880px; padding-left: 24px; padding-right: 24px; } }
@media (min-width: 1400px) { .app { max-width: 1040px; } }

/* Заголовки — Oswald, плакатный верхний регистр. Тайский/китайский: без разрядки
   и uppercase (на тайском разрядка рвёт огласовки, uppercase бессмыслен). */
h1,h2,h3 { margin: 0 0 14px; font-family: var(--font-display); font-weight: 600;
  line-height: 1.25; letter-spacing: .04em; text-transform: uppercase; color: var(--txt-hi); }
h3 { font-size: 1.22rem; }
html[lang="th"] h1, html[lang="th"] h2, html[lang="th"] h3,
html[lang="zh"] h1, html[lang="zh"] h2, html[lang="zh"] h3 { letter-spacing:0; text-transform:none; }
.brand { display:flex; align-items:center; gap:12px; font-family: var(--font-display);
  font-size: 1.6rem; font-weight: 600; letter-spacing:.06em; text-transform: uppercase; color: var(--txt-hi); }
.brand .logo { display:flex; align-items:center; justify-content:center; flex:none;
  width:38px; height:38px; border-radius:11px; font-size:1.25rem; font-weight:700; color:#fff;
  background: linear-gradient(150deg, var(--accent), var(--accent-2));
  box-shadow: 0 8px 20px -8px rgba(var(--accent-rgb),.7); }
/* лого-маска «Театр»: в шапке главной, в шапках остальных экранов, рядом с афишей */
.brand-logo { flex:none; width:40px; height:40px; border-radius:11px; object-fit:contain;
  box-shadow: 0 8px 20px -8px rgba(var(--accent-rgb),.7); }
.hdr-logo { flex:none; width:28px; height:28px; border-radius:8px; object-fit:contain; }
.subtitle { color: var(--muted); margin: 6px 0 22px; font-size: 1.02rem; }

/* Афиша на главной */
.hero { text-align:center; margin: 6px 0 26px; }
.hero-kicker { font-family: var(--font-display); font-size:.72rem; font-weight:600;
  letter-spacing:.42em; text-transform:uppercase; color: var(--accent); margin-bottom:6px; }
.hero-title { font-family: var(--font-display); font-size: 4.1rem; font-weight:700;
  line-height:.82; letter-spacing:.02em; text-transform:uppercase; color: var(--txt-hi); margin-bottom:6px; }
.hero-sub { font-size:.8rem; color: var(--muted); }
html[lang="th"] .hero-kicker, html[lang="zh"] .hero-kicker { letter-spacing:.12em; }
html[lang="th"] .hero-title, html[lang="zh"] .hero-title { font-size:3rem; line-height:1.1; letter-spacing:0; }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 18px; box-shadow: var(--shadow); margin-bottom: 18px; }
.card.soft { background: var(--panel-2); border-color: var(--line-2); }

label { display:block; color: var(--muted); font-size:.92rem; margin: 0 0 8px; font-weight: 600; }
input[type=text], select {
  width: 100%; padding: 15px 16px; border-radius: 14px; border: 1.5px solid var(--line-2);
  background: var(--sunk); color: var(--txt); font-size: 1.05rem; outline: none; transition: border-color .15s;
}
input[type=text]:focus, select:focus { border-color: var(--accent); }
/* Подстраховка к color-scheme: Firefox/Linux рисуют список сами и цвет текста
   наследуют — задаём пару фон+текст явно, чтобы контраст был при любом движке. */
select option { background: var(--solid); color: var(--txt); }
::placeholder { color: var(--muted); }

/* Кнопки — Oswald вразрядку, как на макете. */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  width: 100%; padding: 17px 18px; border: none; border-radius: 15px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff; font-family: var(--font-display); font-size: 1.05rem; font-weight: 600;
  letter-spacing:.1em; text-transform: uppercase; cursor: pointer;
  box-shadow: 0 16px 40px -12px rgba(var(--accent-rgb),.6);
  transition: transform .08s ease, filter .2s ease, box-shadow .2s; margin-bottom: 4px;
}
html[lang="th"] .btn, html[lang="zh"] .btn { letter-spacing:.02em; text-transform:none; }
.btn:active { transform: scale(.98); }
.btn:disabled { filter: grayscale(.6) brightness(.65); box-shadow:none; cursor: not-allowed; }
.btn.ghost { background: var(--panel-2); border:1px solid var(--line-2); color: var(--txt);
  box-shadow:none; font-weight:500; }
.btn.danger { background: linear-gradient(135deg, var(--danger), var(--accent-2)); }
.btn.ok { background: linear-gradient(135deg, #1f9d6b, #137a51);
  box-shadow: 0 14px 34px -14px rgba(31,157,107,.7); }
.btn.small { width:auto; padding: 11px 16px; font-size:.9rem; border-radius: 13px; }
.row { display:flex; gap:12px; }

/* ═══════════ ВХОД: Telegram + Google/Яндекс/LINE в одной оправе ═══════════
   Логотипы брендов настоящие (их нельзя перекрашивать под палитру), а ОПРАВА —
   общая: тёмная кулиса, тонкая линия, золотой отклик. Единый стиль даёт плитка,
   а не логотип. 🔴 Цвета — только токены, кроме самих логотипов внутри SVG. */
.login-row { display:flex; flex-direction:column; gap:9px; }
.login-btn {
  position:relative; display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; padding:14px 16px; border-radius:14px; cursor:pointer;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid var(--line-2); color:var(--txt);
  font-family:var(--font-display); font-size:.92rem; font-weight:500;
  letter-spacing:.09em; text-transform:uppercase; text-align:center;
  transition:border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .08s ease;
}
.login-btn:hover { border-color:rgba(var(--gold-rgb),.45);
  background:linear-gradient(180deg, rgba(var(--gold-rgb),.10), rgba(255,255,255,.02));
  box-shadow:0 10px 26px -16px rgba(var(--gold-rgb),.8); }
.login-btn:active { transform:scale(.98); }
html[lang="th"] .login-btn, html[lang="zh"] .login-btn { letter-spacing:.02em; text-transform:none; }
.login-ico { width:21px; height:21px; flex:none; display:block; }

/* Ряд из трёх компактных плиток под главной кнопкой. */
.login-mini { display:flex; gap:9px; }
.login-mini .login-btn { flex:1; flex-direction:column; gap:7px; padding:12px 4px;
  font-size:.68rem; letter-spacing:.05em; }

/* Разделитель «или» — занавес между главным входом и остальными. */
.login-or { display:flex; align-items:center; gap:10px; margin:1px 0;
  color:var(--muted); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; }
.login-or::before, .login-or::after { content:''; flex:1; height:1px; background:var(--line-2); }

/* Кнопка Telegram — обычная наша кнопка: клик сам открывает oauth.telegram.org
   (см. tgLogin в app.js). 🔴 Урок: наложение прозрачного iframe-виджета поверх
   кнопки дважды дало «кнопка не нажимается» — больше так не делаем. */
.row > * { flex: 1; }

.games-list { display:flex; flex-direction:column; gap:12px; }
.game-row { display:flex; align-items:center; justify-content:space-between; gap:12px;
  background: var(--panel-2); border-radius: 15px; padding: 15px 16px; }
.game-row .meta { color: var(--muted); font-size:.9rem; margin-top: 2px; }
.pill { font-size:.78rem; padding: 5px 11px; border-radius: 999px; background:var(--line); color:var(--muted); font-weight:600; white-space:nowrap; }
.pill.live { background: rgba(var(--danger-rgb),.18); color: var(--accent-soft); }
.pill.open { background: rgba(var(--ok-rgb),.16); color: var(--ok); }

.topbar { display:flex; align-items:center; justify-content:space-between; margin-bottom: 16px; gap:10px; }
.phase-badge { display:flex; align-items:center; gap:8px; font-family:var(--font-display); font-weight:600; font-size:1.28rem; letter-spacing:.05em; text-transform:uppercase; color:var(--txt-hi); }
.timer { font-variant-numeric: tabular-nums; background:var(--sunk); border:1.5px solid var(--line);
  border-radius: 12px; padding: 8px 14px; font-weight:800; min-width: 60px; text-align:center; font-size:1.05rem; }
.timer.low { color: var(--danger); border-color: var(--danger); }

.rolecard { display:flex; gap:16px; align-items:center; }
.rolecard .emoji { font-size: 3rem; }
.rolecard .rname { font-size: 1.4rem; font-weight: 900; }
.rolecard .rdesc { color: var(--muted); font-size:.95rem; margin-top: 6px; line-height:1.5; }
.dead-banner { color: var(--danger); font-weight: 800; margin-top: 6px; }
/* #3 панель «твоя мафия»: подельники видны с начала игры (номер+имя, Дон 👑) */
.mafia-team { border:1.5px solid rgba(var(--accent-rgb),.5); background: rgba(var(--accent-rgb),.10); }
.mafia-team .mt-title { font-weight:900; letter-spacing:.02em; margin-bottom:10px; color: var(--accent-soft); }
.mafia-team .mt-list { display:flex; flex-direction:column; gap:8px; }
.mafia-team .mt-mate { display:flex; align-items:center; gap:8px; font-size:1rem;
  padding:8px 12px; border-radius:12px; background: rgba(var(--accent-rgb),.10); }
.mafia-team .mt-mate.dead { opacity:.5; }
.mafia-team .mt-num { font-weight:900; color: var(--accent-soft); min-width:2.2em; }
.mafia-team .mt-name { font-weight:700; flex:1; }
.mafia-team .mt-don { font-weight:800; color: var(--gold); font-size:.9rem; }
.mafia-team .mt-dead { margin-left:auto; }

.grid { display:grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 440px){ .grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 720px){ .grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1000px){ .grid { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 1400px){ .grid { grid-template-columns: repeat(6, 1fr); } }
.player {
  position: relative; background: var(--panel); border: 2px solid transparent;
  border-radius: 16px; padding: 16px 10px 18px; text-align:center; cursor: default;
  transition: transform .08s ease, border-color .15s ease, opacity .3s ease;
}
.player.clickable { cursor: pointer; }
.player.clickable:active { transform: scale(.97); }
.player.you { border-color: var(--accent); }
.player.selected { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold) inset; }
.player.dead { opacity: .4; filter: grayscale(1); }
.player.dimmed { opacity: .35; filter: grayscale(.7); }
.player .num { position:absolute; top:8px; left:10px; font-size:.78rem; color: var(--muted); font-weight:700; }
.player .av { font-size: 2.3rem; line-height: 1; margin: 8px 0 6px; }
.player .pname { font-weight: 700; font-size:1rem; word-break: break-word; line-height:1.3; }
.player .prole { font-size:.82rem; color: var(--gold); margin-top: 5px; min-height: 1em; font-weight:600; }
.player .badges { position:absolute; top:7px; right:9px; font-size:.9rem; display:flex; gap:3px; }
.dot { position:absolute; bottom:9px; right:10px; width:9px; height:9px; border-radius:50%; background:var(--line-2); }
.dot.on { background: var(--ok); box-shadow: 0 0 7px var(--ok); }

.toggles { display:grid; grid-template-columns: 1fr; gap:10px; }
@media (min-width: 440px){ .toggles { grid-template-columns: repeat(2,1fr); } }
.toggle { display:flex; align-items:center; gap:11px; background:var(--panel-2); padding:13px 14px; border-radius:13px; font-size:.98rem; cursor:pointer; }
.toggle input { width:21px; height:21px; accent-color: var(--accent); flex:none; }
.modes { display:flex; gap:8px; }
.modes .m { flex:1; text-align:center; padding:13px 8px; border-radius:12px; background:var(--panel-2);
  border:1.5px solid var(--line); cursor:pointer; font-weight:700; font-size:.92rem; color:var(--txt);
  transition:border-color .15s, background .15s, color .15s; }
.modes .m.active { border-color: rgba(var(--accent-rgb),.5); color: var(--accent-soft); background: rgba(var(--accent-rgb),.1); }

.feed { background:var(--sunk); border-radius:14px; padding:14px 16px; max-height: 280px; overflow-y:auto; font-size:.98rem; }
@media (min-width: 1000px){ .feed { max-height: 46vh; } }
.feed .line { padding: 7px 0; border-bottom: 1px solid var(--line); line-height:1.5; }
.feed .line:last-child { border-bottom: none; }
.secret { background: rgba(var(--accent-rgb),.12); border:1.5px solid rgba(var(--accent-rgb),.35); border-radius:14px; padding:14px 16px; font-size:.98rem; margin-bottom:16px; line-height:1.5; }
.secret .line { padding: 4px 0; }
.chatbar { position: fixed; left:0; right:0; bottom:0; background: var(--bar);
  backdrop-filter: blur(10px); border-top:1px solid var(--line); padding:12px 14px; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
.chatbar .inner { max-width:600px; margin:0 auto; display:flex; gap:10px; }
@media (min-width: 1000px){ .chatbar .inner { max-width:880px; } }
@media (min-width: 1400px){ .chatbar .inner { max-width:1040px; } }
.chatbar input { flex:1; }
.chatbar .btn { width:auto; padding: 14px 18px; margin:0; }

.winner { text-align:center; padding: 26px 16px; }
.winner .big { font-size: 2.2rem; font-weight: 900; margin-bottom: 8px; line-height:1.2; }
.muted { color: var(--muted); }
.center { text-align:center; }
.spacer { height: 12px; }

.toast { position: fixed; left:50%; transform: translateX(-50%); bottom: 92px;
  background: var(--accent); color:#fff; padding: 13px 20px; border-radius: 14px;
  font-weight:700; box-shadow: var(--shadow); z-index: 50; max-width: 90%; font-size:1rem; }

.linkbox { display:flex; gap:10px; align-items:center; background:var(--sunk); border-radius:12px; padding:11px 13px; font-size:.9rem; flex-wrap:wrap; }
.linkbox code { color: var(--accent); word-break: break-all; }
.hint { color: var(--muted); font-size:.9rem; margin-top: 8px; line-height:1.5; }

/* финальный отчёт */
.report .card h3 { display:flex; align-items:center; gap:8px; padding-bottom:10px; border-bottom:1px solid var(--line); }
/* вкладки отчёта — горизонтальный скролл-чипы */
.rep-tabs { display:flex; flex-wrap:wrap; gap:8px; padding:2px 2px 12px; margin: 4px 0 2px; }
.rep-tabs button { flex:0 0 auto; white-space:nowrap; padding:9px 15px; border-radius:999px;
  border:1.5px solid var(--line); background:var(--panel-2); color:var(--muted);
  font-weight:700; font-size:.92rem; cursor:pointer; transition: all .15s; }
.rep-tabs button.sel { background:linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#fff; border-color:transparent; box-shadow: 0 4px 14px rgba(var(--accent-rgb),.35); }
/* аккордеон (день/ночь, игроки) */
.acc { border:1.5px solid var(--line); border-radius:14px; margin-bottom:9px; overflow:hidden;
  background:rgba(255,255,255,.025); }
.acc > summary { list-style:none; cursor:pointer; user-select:none; display:flex; align-items:center;
  gap:10px; padding:13px 15px; font-weight:700; color:var(--txt); }
.acc > summary::-webkit-details-marker { display:none; }
.acc > summary > .acc-t { flex:1; }
.acc > summary::after { content:'▸'; color:var(--accent); font-weight:800; font-size:1.05rem;
  transition: transform .18s ease; }
.acc[open] > summary::after { transform: rotate(90deg); }
.acc[open] > summary { border-bottom:1px solid var(--line); }
.acc-n { background:rgba(var(--accent-rgb),.18); color:var(--accent); border-radius:999px;
  padding:2px 10px; font-size:.78rem; font-weight:800; min-width:24px; text-align:center;
  font-variant-numeric: tabular-nums; }
.acc-body { padding:8px 15px 13px; }
.acc-body .logline:first-child { padding-top:2px; }
/* живой индикатор баланса — ЗАКРЕПЛЁН внизу экрана (считается на CPU клиента) */
.balbar { position: fixed; left:0; right:0; z-index:40;
  bottom: calc(74px + env(safe-area-inset-bottom));
  background: var(--bar); backdrop-filter: blur(12px);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding: 9px 14px 11px; box-shadow:0 -6px 20px rgba(0,0,0,.28); }
.balbar .inner { max-width:600px; margin:0 auto; }
@media (min-width:1000px){ .balbar .inner { max-width:880px; } }
@media (min-width:1400px){ .balbar .inner { max-width:1040px; } }
.balbar-top { display:flex; align-items:center; justify-content:space-between; font-weight:800; }
.balbar-hint { font-size:.78rem; color:var(--muted); margin-top:5px; text-align:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bal-track { position:relative; height:13px; border-radius:999px;
  background:linear-gradient(90deg,var(--danger) 0%,var(--gold) 28%,var(--ok) 50%,var(--gold) 72%,var(--danger) 100%); }
.bal-marker { position:absolute; top:-4px; width:6px; height:21px; border-radius:3px; background:#fff;
  box-shadow:0 0 0 2px rgba(8,11,24,.6), 0 2px 6px rgba(0,0,0,.4);
  transform:translateX(-50%); transition:left .4s cubic-bezier(.34,1.2,.5,1); }
.bal-ok { color:var(--ok); }
.bal-town { color:var(--info); }
.bal-evil { color:var(--danger); }
/* когда закреплённый бар виден — освобождаем место снизу, чтобы контент не прятался */
body.has-balbar .app { padding-bottom: 250px; }
html.theme-day .balbar { background: rgba(253,249,240,.95); }
/* видео-столы */
.video-card { border:1.5px solid var(--accent); }
.video-row { background:rgba(var(--accent-rgb),.07); border:1px solid rgba(var(--accent-rgb),.18);
  border-radius:12px; padding:9px 11px; margin-bottom:7px; }
.video-row:last-child { margin-bottom:0; }
/* 🔥 информер-дашборд */
.informer { margin:6px 0 16px; padding:16px 14px; border-radius:18px;
  background:linear-gradient(135deg, rgba(var(--accent-rgb),.16), rgba(var(--accent2-rgb),.12));
  border:1px solid rgba(var(--accent-rgb),.30); box-shadow:var(--shadow); }
.inf-title { text-align:center; font-weight:800; font-size:.95rem; margin-bottom:12px; }
.inf-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (min-width:560px){ .inf-grid { grid-template-columns:repeat(4,1fr); } }
.inf-cell { text-align:center; }
.inf-num { font-size:1.7rem; font-weight:900; line-height:1.1; font-variant-numeric:tabular-nums; color:var(--info); }
@supports ((-webkit-background-clip:text) or (background-clip:text)) {
  .inf-num { background:linear-gradient(135deg,var(--accent),var(--accent-2));
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent; }
}
.inf-live { -webkit-text-fill-color:var(--ok); color:var(--ok);
  display:flex; align-items:center; justify-content:center; gap:7px; }
.inf-dot { width:9px; height:9px; border-radius:50%; background:var(--ok); animation:infpulse 1.8s infinite; }
@keyframes infpulse { 0%{box-shadow:0 0 0 0 rgba(var(--ok-rgb),.55)} 70%{box-shadow:0 0 0 9px rgba(var(--ok-rgb),0)} 100%{box-shadow:0 0 0 0 rgba(var(--ok-rgb),0)} }
.inf-lbl { font-size:.72rem; color:var(--muted); margin-top:3px; text-transform:uppercase; letter-spacing:.4px; }
.inf-today { text-align:center; margin-top:12px; font-size:.9rem; color:var(--muted); }
.inf-today b { color:var(--gold); font-variant-numeric:tabular-nums; }
/* заметный блок «открытый/видео-стол» в настройках */
.vis-box { border:1.5px solid var(--accent); border-radius:14px; padding:12px 14px;
  background:rgba(var(--accent-rgb),.07); }
.vis-box .toggle b { color:var(--accent); }
.vis-box.promo { background:linear-gradient(160deg,rgba(var(--accent-rgb),.16),rgba(var(--accent-rgb),.05));
  border-style:dashed; }
.vis-box.promo b { color:var(--accent); font-size:1.05rem; }
.vis-box.promo .hint { color:var(--muted); font-size:.92rem; line-height:1.4; }
/* титул карьеры и достижения (кабинет) */
.title-chip { display:inline-block; margin:3px 0 2px; padding:2px 10px; font-size:.8rem;
  font-weight:700; color:var(--gold); border:1px solid rgba(var(--gold-rgb),.45);
  border-radius:999px; background:rgba(var(--gold-rgb),.08); }
.ach-row { display:flex; align-items:center; gap:10px; padding:8px 0;
  border-bottom:1px solid var(--line); opacity:.45; }
.ach-row:last-child { border-bottom:none; }
.ach-row.got { opacity:1; }
.ach-emoji { font-size:1.4rem; width:34px; text-align:center; }
.ach-row .gold { color:var(--gold); }
.ach-bar { height:7px; border-radius:5px; background:var(--line); overflow:hidden; margin-top:8px; }
.ach-fill { height:100%; border-radius:5px;
  background:linear-gradient(90deg, var(--accent), var(--gold)); }
/* 🎤 круг речей + 🔇 мут от ведущего */
.speech-card { border:1px solid rgba(var(--gold-rgb),.5); background:rgba(var(--gold-rgb),.07);
  text-align:center; }
.mutebtn { background:none; border:none; cursor:pointer; font-size:.95rem;
  padding:0 2px; line-height:1; opacity:.85; }
.mutebtn:hover { opacity:1; transform:scale(1.15); }
.rate-row { display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding: 9px 0; border-bottom: 1px solid var(--line); font-size:1rem; }
.rate-row:last-child { border-bottom: none; }
.rate-row b { font-variant-numeric: tabular-nums; font-size:1.05rem; }
.role-row { display:flex; align-items:center; gap:10px; padding: 9px 0; font-size:1rem; border-bottom: 1px solid var(--line); }
.role-row:last-child { border-bottom: none; }
.role-row .rn { font-weight: 700; flex: 1; }
.role-row.team-mafia .rn { color: var(--accent-soft); }
.role-row.team-maniac .rn { color: var(--gold); }
.logline { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size:.86rem;
  color: var(--muted); padding: 3px 0; word-break: break-word; line-height:1.55; }
.gold-1 { color: var(--gold); font-weight:700; }
.voteprog { margin: 2px 0 14px; }
.voteprog-bar { height: 9px; background:var(--sunk); border-radius:999px; overflow:hidden; border:1px solid var(--line); }
.voteprog-fill { height:100%; background:linear-gradient(90deg,var(--accent),var(--accent-2)); transition:width .4s ease; }
.voteprog-txt { display:flex; justify-content:space-between; gap:10px; font-size:.88rem; color:var(--muted); margin-top:7px; }
.vote-ok { color: var(--ok); font-weight:700; }
.avatar-img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border:2px solid var(--accent); }
.tglink { display:block; font-size:.8rem; color: var(--accent); text-decoration:none; margin-top:3px; font-weight:600; }
.tglink:active { opacity:.6; }

/* ── кабинет ── */
.profile-head { display:flex; align-items:center; gap:13px; }
.profile-head .pname { font-weight:800; font-size:1.25rem; line-height:1.2; word-break:break-word; }
.phead-main { flex:1; min-width:0; }
/* Один ряд одинаковых чипов под именем (звание · город · подтверждение) —
   вместо прежней лесенки из разнокалиберных строк. */
.pchips { display:flex; flex-wrap:wrap; gap:6px; margin-top:7px; }
.pchip { display:inline-flex; align-items:center; gap:5px; padding:4px 11px; border-radius:999px;
  background:var(--panel-2); border:1px solid var(--line-2); color:var(--muted);
  font-size:.78rem; font-weight:600; line-height:1.2; cursor:default; }
button.pchip { cursor:pointer; }
button.pchip:active { transform:scale(.96); }
.pchip.gold { color:var(--gold); border-color:rgba(var(--gold-rgb),.35);
  background:rgba(var(--gold-rgb),.08); }
.pchip.ok { color:var(--ok); border-color:rgba(var(--ok-rgb),.3); }

/* Способы входа (настройки): строка = логотип · название · метка · действие. */
.idrows { display:flex; flex-direction:column; gap:8px; }
.idrow { display:flex; align-items:center; gap:11px; padding:11px 13px; border-radius:13px;
  background:var(--panel); border:1px solid var(--line); }
.idrow-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.idrow-main b { font-size:.92rem; }
.idrow-main .muted { font-size:.76rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.idrow .btn.small { margin:0; padding:9px 14px; font-size:.8rem; }
.idrow-off { color:var(--danger); }
.section-title { font-size:.78rem; text-transform:uppercase; letter-spacing:.6px; color:var(--muted);
  font-weight:800; margin:20px 6px 8px; }
.stat-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; }
.stat-tile { background: var(--panel); border:1px solid var(--line); border-radius:16px;
  padding:18px 8px; text-align:center; box-shadow: var(--shadow); }
.stat-tile .num { font-size:1.7rem; font-weight:900; line-height:1.05; }
.stat-tile .num.gold { color: var(--gold); }
.stat-tile .lbl { font-size:.76rem; color:var(--muted); margin-top:5px; }
.danger-zone { border:1px solid rgba(var(--danger-rgb),.32); border-radius:var(--radius); padding:16px;
  background: rgba(var(--danger-rgb),.05); }
.danger-zone .btn.logout { background:transparent; color:var(--danger); box-shadow:none;
  border:1.5px solid rgba(var(--danger-rgb),.4); }
/* пикер эмодзи */
.emoji-grid { display:grid; grid-template-columns: repeat(8, 1fr); gap:6px; }
@media (max-width:380px){ .emoji-grid { grid-template-columns: repeat(7,1fr); } }
@media (min-width:1000px){ .emoji-grid { grid-template-columns: repeat(12,1fr); } }
.emoji-btn { background:var(--panel-2); border:2px solid transparent; border-radius:10px;
  padding:7px 0; font-size:1.35rem; cursor:pointer; line-height:1; }
.emoji-btn.sel { border-color:var(--accent); background:rgba(var(--accent-rgb),.18); }
.emoji-btn:active { transform:scale(.92); }
/* чипы ролей + период */
.chips { display:flex; flex-wrap:wrap; gap:7px; }
.chip { background:var(--panel-2); border:1.5px solid var(--line); border-radius:999px;
  padding:7px 13px; font-size:.85rem; cursor:pointer; color:var(--txt); font-weight:600; }
.chip.sel { border-color:rgba(var(--accent-rgb),.5); color:var(--accent-soft); background:rgba(var(--accent-rgb),.1); }
.period { display:flex; gap:7px; }
.period button { flex:1; background:var(--panel-2); border:1.5px solid var(--line); border-radius:11px;
  padding:11px; font-size:.82rem; cursor:pointer; color:var(--muted); font-weight:700;
  font-family:var(--font-display); letter-spacing:.05em; text-transform:uppercase; }
.period button.sel { border-color:rgba(var(--accent-rgb),.5); color:var(--accent-soft); background:rgba(var(--accent-rgb),.1); }
html[lang="th"] .period button, html[lang="zh"] .period button { letter-spacing:0; text-transform:none; }

/* ── главная-дашборд / навигация ── */
.home-top { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom: 14px; }
.menu-btn { background:var(--panel-2); border:1px solid var(--line); color:var(--txt);
  width:36px; height:36px; border-radius:10px; font-size:1.05rem; cursor:pointer; flex:none;
  display:flex; align-items:center; justify-content:center; line-height:1; }
.menu-btn:active { transform:scale(.94); }

/* переключатель языка: список под кнопкой (рассчитан на 6 языков) */
.lang-wrap { position:relative; flex:none; }
.lang-btn { width:auto; padding:0 11px; font-size:.78rem; font-weight:700; letter-spacing:.04em; }
.lang-menu { position:absolute; top:52px; right:0; z-index:60; min-width:150px;
  background:var(--panel-2); border:1px solid var(--line); border-radius:14px;
  padding:6px; display:flex; flex-direction:column; gap:2px;
  box-shadow:0 12px 32px rgba(0,0,0,.42); }
.lang-menu button { background:none; border:0; color:var(--txt); cursor:pointer;
  text-align:start; padding:10px 12px; border-radius:10px; font-size:1rem; white-space:nowrap; }
.lang-menu button:active { transform:scale(.97); }
.lang-menu button.sel { background:rgba(var(--accent-rgb),.18); color:var(--accent); font-weight:700; }

/* приветствие + чип ранга на главной */
.greet-row { display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin:2px 2px 14px; font-size:1.05rem; }
.rank-chip { background:rgba(var(--gold-rgb),.14); border:1px solid rgba(var(--gold-rgb),.35); color:var(--gold);
  border-radius:999px; padding:6px 14px; font-weight:800; cursor:pointer; font-size:.95rem; white-space:nowrap; }
.rank-chip:active { transform:scale(.95); }

/* тизер-ссылка (карточка-кнопка) */
.teaser-link { width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px;
  text-align:start; cursor:pointer; color:var(--txt); border:1px solid var(--line); }
.teaser-link:active { transform:scale(.99); }
.chev { color:var(--accent); font-weight:800; white-space:nowrap; font-size:.92rem; }

/* живой баннер */
.live-banner { background:rgba(var(--ok-rgb),.12); border:1px solid rgba(var(--ok-rgb),.3); color:var(--ok);
  border-radius:14px; padding:11px 16px; font-weight:700; margin-bottom:14px; text-align:center; font-size:.96rem; }

/* плитки лаунчера (вариант B) */
.tiles { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-bottom:18px; }
@media (min-width:720px){ .tiles { grid-template-columns:repeat(4,1fr); } }
.tile { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:24px 10px;
  cursor:pointer; color:var(--txt); box-shadow:var(--shadow); transition:transform .08s, border-color .15s; }
.tile:active { transform:scale(.97); }
.tile:disabled { filter:grayscale(.6) brightness(.7); cursor:not-allowed; }
.tile .ti { font-size:2.1rem; line-height:1; }
.tile .tl { font-weight:800; font-size:1rem; }
.tile.accent { background:linear-gradient(135deg, var(--accent), var(--accent-2)); border-color:transparent;
  box-shadow:0 6px 18px rgba(var(--accent-rgb),.28); }

/* «моё место» на экране рейтинга */
.me-rank { display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:linear-gradient(135deg, rgba(var(--accent-rgb),.16), rgba(var(--accent2-rgb),.12));
  border:1px solid rgba(var(--accent-rgb),.3); }
.rate-row.me { background:rgba(var(--accent-rgb),.1); border-radius:10px; margin:0 -8px; padding-left:8px; padding-right:8px; }

/* меню-drawer */
.drawer-wrap { position:fixed; inset:0; background:var(--scrim); backdrop-filter:blur(3px); z-index:60;
  display:flex; justify-content:flex-end; }
/* Шторка поверх затемнения — фон ОБЯЗАН быть непрозрачным (var(--panel) просвечивал бы). */
.drawer { background:linear-gradient(180deg, var(--bg-glow), var(--solid)); border-left:1px solid var(--line-2);
  width:min(320px,82vw); height:100%; padding:18px 16px;
  box-shadow:-30px 0 60px -20px rgba(0,0,0,.7); overflow-y:auto; animation:slidein .2s ease; }
@keyframes slidein { from { transform:translateX(100%);} to { transform:translateX(0);} }
.drawer-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.drawer-user { display:flex; align-items:center; gap:11px; background:var(--panel-2); border-radius:14px;
  padding:12px; margin-bottom:14px; }
.menu-item { width:100%; text-align:start; background:transparent; border:none; color:var(--txt);
  padding:15px 12px; font-size:1.04rem; font-weight:600; cursor:pointer; border-radius:12px;
  display:flex; align-items:center; gap:10px; }
.menu-item:hover { background:var(--panel-2); }
.menu-item:active { transform:scale(.98); }
.menu-item.danger { color:var(--danger); margin-top:8px; border-top:1px solid var(--line); border-radius:0; }

/* ── полный мануал «Как играть» ── */
html { scroll-behavior:smooth; }
.manual h2 { line-height:1.25; }
/* Разбор ролей — раскрывающиеся блоки «все ситуации» */
.role-detail { border:1px solid var(--line); border-radius:12px; background:var(--panel-2);
  margin:8px 0; overflow:hidden; }
.role-detail > summary { list-style:none; cursor:pointer; padding:12px 14px; font-weight:700;
  display:flex; align-items:center; gap:9px; user-select:none; }
.role-detail > summary::-webkit-details-marker { display:none; }
.role-detail .rd-emo { font-size:1.15rem; }
.role-detail .rd-chev { margin-left:auto; color:var(--muted); transition:transform .18s; }
.role-detail[open] .rd-chev { transform:rotate(90deg); }
.role-detail .rd-body { padding:0 14px 12px; }
.role-detail .rd-body ul { margin:0; padding-left:18px; }
.role-detail .rd-body li { margin:6px 0; color:var(--muted); line-height:1.5; }
.role-detail .rd-body b { color:var(--txt); }
/* Правила поверх стола (открываются кнопкой 📖, не выходя из игры) */
.manual.rules-overlay { position:fixed; inset:0; z-index:900; overflow-y:auto;
  background:var(--bg-deep); -webkit-overflow-scrolling:touch; padding:16px 16px 48px; }
.manual.rules-overlay .topbar { position:sticky; top:0; z-index:2; margin:-16px -16px 16px;
  padding:12px 16px; background:var(--bg-deep); }
.manual-intro { background:linear-gradient(135deg, rgba(var(--accent-rgb),.14), rgba(var(--accent2-rgb),.1));
  border:1px solid rgba(var(--accent-rgb),.22); }
.manual [id] { scroll-margin-top:14px; }
.manual-nav { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 18px; }
.manual-nav a { background:var(--panel-2); border:1px solid var(--line); color:var(--txt);
  border-radius:999px; padding:8px 14px; font-size:.86rem; font-weight:700; text-decoration:none; }
.manual-nav a:active { transform:scale(.95); }

.goal-row, .flow-step, .bot-feat { display:flex; gap:14px; align-items:flex-start; padding:12px 0;
  border-bottom:1px solid var(--line); }
.goal-row:last-child, .flow-step:last-child, .bot-feat:last-child { border-bottom:none; }
.goal-row .g-emo, .flow-step .fs-num, .bot-feat > span { font-size:1.7rem; line-height:1; flex:none; width:34px; text-align:center; }
.goal-row b, .flow-step b, .bot-feat b { display:block; margin-bottom:2px; }
.goal-row.town b { color:var(--info); }
.goal-row.mafia b { color:var(--accent-soft); }
.goal-row.neutral b { color:var(--gold); }

.role-group-title { font-weight:900; font-size:1.05rem; margin:18px 4px 10px; }
.role-group-title.mafia { color:var(--accent-soft); }
.role-group-title.town { color:var(--info); }
.role-group-title.neutral { color:var(--gold); }
.role-card { display:flex; gap:13px; align-items:flex-start; background:var(--panel);
  border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:14px; padding:13px 15px; margin-bottom:9px; box-shadow:var(--shadow); }
.role-card.mafia { border-left-color:var(--danger); }
.role-card.neutral { border-left-color:var(--gold); }
.role-card .rc-emo { font-size:1.8rem; line-height:1; flex:none; width:34px; text-align:center; }
.role-card .rc-tag { font-size:.66rem; text-transform:uppercase; letter-spacing:.4px; font-weight:800;
  padding:2px 8px; border-radius:999px; vertical-align:middle; }
.rc-tag.town { background:rgba(var(--accent-rgb),.16); color:var(--info); }
.rc-tag.mafia { background:rgba(var(--danger-rgb),.16); color:var(--accent-soft); }
.rc-tag.neutral { background:rgba(var(--gold-rgb),.16); color:var(--gold); }

/* FAQ-аккордеоны */
.faq { background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:0 16px; margin-bottom:9px; box-shadow:var(--shadow); }
.faq summary { cursor:pointer; padding:15px 0; font-weight:700; list-style:none; display:flex;
  align-items:center; justify-content:space-between; gap:10px; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:'+'; color:var(--accent); font-weight:900; font-size:1.3rem; flex:none; }
.faq[open] summary::after { content:'−'; }
.faq p { margin:0 0 16px; }

/* превью сообщения рассылки (как пузырь в Telegram) */
.bc-msg { background:var(--sunk); border:1px solid var(--line); border-radius:14px 14px 4px 14px;
  padding:13px 15px; white-space:pre-wrap; line-height:1.5; font-size:.98rem; }
.bc-btn { background:var(--panel-2); color:var(--accent); border-radius:0 0 12px 12px; text-align:center;
  padding:11px; font-weight:800; margin-top:-4px; border:1px solid var(--line); border-top:none; }
textarea:focus { border-color:var(--accent) !important; outline:none; }

/* пикер «выбранным» */
.pick-list { max-height:300px; overflow-y:auto; border:1px solid var(--line); border-radius:12px; background:var(--sunk); }
.pick-row { display:flex; align-items:center; gap:10px; padding:10px 12px; border-bottom:1px solid var(--line);
  cursor:pointer; font-size:.96rem; }
.pick-row:last-child { border-bottom:none; }
.pick-row input { width:19px; height:19px; accent-color:var(--accent); flex:none; }
/* история рассылок */
.hist-row { display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:11px 0; border-bottom:1px solid var(--line); }
.hist-row:last-of-type { border-bottom:none; }

/* единый футер с версией — на всех экранах */
.app-footer { text-align:center; color:var(--muted); font-size:.74rem; opacity:.7;
  margin:26px 0 6px; }

/* якорь авто-скролла: чтобы действие не прилипало к самому верху */
#actionZone { scroll-margin-top: 16px; }
/* карточка темы дня + первый говорящий */
.topic-card { background: linear-gradient(135deg, rgba(var(--gold-rgb),.12), rgba(var(--accent2-rgb),.08));
  border:1px solid rgba(var(--gold-rgb),.3); }
.topic-card .topic-label { font-size:.72rem; text-transform:uppercase; letter-spacing:.6px;
  color:var(--muted); font-weight:800; margin-bottom:6px; }
.topic-card .topic-text { font-size:1.12rem; font-weight:800; line-height:1.35; }
.topic-card .topic-speaker { margin-top:8px; color:var(--gold); font-weight:700; font-size:.96rem; }

/* SEO-секция «О игре» (низ главной) — приглушённая, но реальная и полезная */
.seo-about { max-width: 600px; margin: 26px auto 90px; padding: 22px 16px 0;
  border-top: 1px solid var(--line); color: var(--muted); font-size: .92rem; line-height: 1.6; }
@media (min-width:1000px){ .seo-about { max-width: 880px; } }
.seo-about h2 { font-size: 1.15rem; color: var(--txt); margin: 0 0 10px; }
.seo-about h3 { font-size: 1rem; color: var(--txt); margin: 18px 0 6px; }
.seo-about h4 { font-size: .94rem; color: var(--txt); margin: 12px 0 4px; }
.seo-about p { margin: 0 0 10px; }
.seo-about ul { margin: 0 0 10px; padding-left: 20px; }
.seo-about li { margin: 4px 0; }
.seo-about strong { color: var(--txt-hi); font-weight: 700; }
.seo-about details { margin-top: 12px; }
.seo-about summary { cursor: pointer; color: var(--accent); font-weight: 700; padding: 6px 0; }


/* ═══════════ СВЕТЛАЯ ТЕМА — «Дневное досье» (тёплая, не белая) ═══════════ */
/* ═══════════ КОМПОНЕНТЫ «ТЕАТРА» ═══════════ */

/* топбар экранов рейтинг/кабинет/лобби: назад + заголовок Oswald + иконки */
.scr-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:16px; }
.scr-head .scr-title { display:flex; align-items:center; gap:9px; font-family:var(--font-display);
  font-size:1.3rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--txt-hi); }
html[lang="th"] .scr-head .scr-title, html[lang="zh"] .scr-head .scr-title { letter-spacing:0; text-transform:none; }
.iconbtn { display:flex; align-items:center; justify-content:center; flex:none; width:36px; height:36px;
  border-radius:10px; background:var(--panel-2); border:1px solid var(--line-2); color:var(--txt);
  font-size:1rem; cursor:pointer; line-height:1; }
.iconbtn:active { transform:scale(.94); }
.backbtn { display:flex; align-items:center; justify-content:center; flex:none; width:32px; height:36px;
  border-radius:10px; background:transparent; border:none; color:var(--muted); font-size:1.6rem; cursor:pointer; line-height:1; }

/* афиша-действия HOME */
.act-primary { margin-bottom:11px; }
.act-primary .btn { font-size:1.2rem; padding:19px; }
.act-secondary { display:flex; gap:11px; }
.act-secondary .btn { margin-bottom:0; }

/* полоса счётчиков (онлайн · столы · игры) */
.counter-strip { display:flex; justify-content:space-between; padding:18px 20px; border-radius:16px;
  background:var(--panel); border:1px solid var(--line); }
.counter-strip .cs-cell { text-align:center; flex:1; }
.counter-strip .cs-num { font-family:var(--font-display); font-size:1.5rem; font-weight:700; line-height:1;
  color:var(--txt-hi); font-variant-numeric:tabular-nums; }
.counter-strip .cs-num.ok { color:var(--ok); }
.counter-strip .cs-lbl { font-size:.62rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  color:var(--muted); margin-top:4px; }
.counter-strip .cs-div { width:1px; background:var(--line-2); align-self:stretch; }

/* тизер-карточка */
.teaser { border-radius:16px; padding:16px 17px; margin-bottom:14px; border:1px solid var(--line);
  background:var(--panel); cursor:pointer; text-align:start; width:100%; color:var(--txt); display:block; }
.teaser:active { transform:scale(.99); }
.teaser.accent { background:rgba(var(--accent-rgb),.07); border-color:rgba(var(--accent-rgb),.22); }
.teaser .tz-title { font-family:var(--font-display); font-size:.95rem; font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; color:var(--txt-hi); margin-bottom:5px; }
.teaser.accent .tz-title { color:var(--accent-soft); }
html[lang="th"] .teaser .tz-title, html[lang="zh"] .teaser .tz-title { letter-spacing:0; text-transform:none; }
.teaser .tz-body { font-size:.8rem; line-height:1.5; color:var(--muted); }

/* сегмент-контрол: вкладки/тумблеры-из-нескольких */
.seg { display:flex; gap:4px; background:var(--sunk); border-radius:13px; padding:4px; }
.seg > button { flex:1; text-align:center; padding:11px 4px; border-radius:10px; border:none; cursor:pointer;
  background:transparent; color:var(--muted); font-family:var(--font-display); font-size:.82rem; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; transition:background .15s, color .15s; white-space:nowrap; }
.seg > button.sel { background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:#fff; }
html[lang="th"] .seg > button, html[lang="zh"] .seg > button { letter-spacing:0; text-transform:none; }

/* radio-карточки выбора (режим, сложность ботов) */
.opt-list { display:flex; flex-direction:column; gap:9px; }
.opt { display:flex; align-items:center; gap:13px; padding:15px 16px; border-radius:13px; cursor:pointer;
  background:var(--panel); border:1.5px solid var(--line); transition:border-color .15s, background .15s; text-align:start; width:100%; color:var(--txt); }
.opt.sel { background:rgba(var(--accent-rgb),.1); border-color:rgba(var(--accent-rgb),.5); }
.opt .opt-radio { width:20px; height:20px; border-radius:50%; border:2px solid var(--line-2); flex:none;
  display:flex; align-items:center; justify-content:center; }
.opt.sel .opt-radio { border-color:var(--accent); }
.opt.sel .opt-radio::after { content:''; width:10px; height:10px; border-radius:50%; background:var(--accent); }
.opt .opt-name { font-weight:700; font-size:.92rem; color:var(--txt-hi); }
.opt .opt-desc { font-size:.72rem; color:var(--muted); margin-top:2px; }

/* стек накладывающихся аватаров + инициал-аватар */
.avstack { display:flex; }
.avstack > * { width:38px; height:38px; border-radius:50%; border:2px solid var(--bg); margin-left:-9px;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.82rem; flex:none; }
.avstack > *:first-child { margin-left:0; }
.avstack .av-me { background:linear-gradient(150deg, var(--accent), var(--accent-2)); color:#fff; }
.avstack .av-empty { background:var(--panel-2); border-style:dashed; border-color:var(--line-2); color:var(--muted); }
.ava { display:flex; align-items:center; justify-content:center; flex:none; color:#fff;
  font-family:var(--font-display); font-weight:700; background:linear-gradient(150deg, var(--accent), #7a1c20); }

/* ── МОДАЛКА «Поделиться» (QR + соцсети) ── */
.share-wrap { position:fixed; inset:0; z-index:70; background:var(--scrim); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; padding:20px; }
.share-card { width:min(340px,92vw); max-height:92vh; overflow-y:auto; border-radius:22px; padding:20px;
  background:linear-gradient(180deg, var(--bg-glow), var(--solid)); border:1px solid var(--line-2);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.8); animation:sharepop .22s cubic-bezier(.2,1.1,.4,1) both; }
@keyframes sharepop { from { opacity:0; transform:scale(.92) translateY(10px);} to { opacity:1; transform:none;} }
.share-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.share-title { font-family:var(--font-display); font-size:1.15rem; font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; color:var(--txt-hi); }
html[lang="th"] .share-title, html[lang="zh"] .share-title { letter-spacing:0; text-transform:none; }
/* QR — на белой подложке с полями, чтобы гарантированно сканировался в любой теме */
.share-qr { width:210px; height:210px; margin:0 auto 12px; padding:12px; border-radius:16px; background:#fff;
  box-shadow:0 8px 24px -10px rgba(0,0,0,.5); }
.share-qr svg { display:block; width:100%; height:100%; }
.share-scan { text-align:center; font-size:.8rem; color:var(--muted); margin:0 0 16px; }
.share-linkbox { display:flex; gap:8px; align-items:center; margin-bottom:16px; }
.share-socials { display:flex; gap:9px; margin-bottom:14px; }
.soc { flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; padding:13px 4px;
  border-radius:13px; cursor:pointer; background:var(--panel-2); border:1px solid var(--line-2);
  color:var(--txt); font-size:.72rem; font-weight:600; }
.soc:active { transform:scale(.96); }
.soc .soc-i { font-size:1.3rem; line-height:1; }

/* Город игрока в шапке кабинета — виден сразу, тап открывает форму смены. */
.pcity { display:inline-flex; align-items:center; gap:4px; margin-top:5px; padding:3px 9px 3px 7px;
  border-radius:9px; background:var(--panel-2); border:1px solid var(--line-2); color:var(--muted);
  font-family:var(--font-text); font-size:.8rem; font-weight:600; cursor:pointer; }
.pcity:active { transform:scale(.97); }

/* ── МОДАЛКА ЗНАКОМСТВА (вход по пригласительной ссылке ?game=) ──
   Гость пришёл по ссылке друга и ещё не представлялся. Держим его на месте
   приглашения и спрашиваем имя занавесом «Театра» — фон/краски идут от токенов,
   поэтому день/ночь и светлая тема работают сами. */
.ask-wrap { position:fixed; inset:0; z-index:80; background:var(--scrim); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; padding:20px; animation:askfade .2s ease both; }
@keyframes askfade { from { opacity:0 } to { opacity:1 } }
.ask-card { position:relative; width:min(380px,94vw); max-height:94vh; overflow-y:auto; border-radius:24px;
  padding:26px 22px 22px; text-align:center;
  background:linear-gradient(180deg, var(--bg-glow), var(--solid));
  border:1px solid var(--line-2); box-shadow:0 46px 100px -30px rgba(0,0,0,.85);
  animation:askrise .3s cubic-bezier(.2,1.05,.35,1) both; }
@keyframes askrise { from { opacity:0; transform:translateY(18px) scale(.94) } to { opacity:1; transform:none } }
/* Занавес: две алые кулисы по краям карточки — узнаваемый жест «Театра». */
.ask-card::before, .ask-card::after { content:''; position:absolute; top:0; bottom:0; width:16px; pointer-events:none;
  background:linear-gradient(90deg, rgba(var(--accent-rgb),.34), transparent); }
.ask-card::before { left:0; border-radius:24px 0 0 24px; }
.ask-card::after { right:0; border-radius:0 24px 24px 0; transform:scaleX(-1); }
.ask-mask { font-size:2.5rem; line-height:1; margin-bottom:12px;
  filter:drop-shadow(0 8px 22px rgba(var(--accent-rgb),.5)); }
.ask-title { font-family:var(--font-display); font-size:1.5rem; font-weight:600; letter-spacing:.07em;
  text-transform:uppercase; color:var(--txt-hi); margin:0 0 8px; }
html[lang="th"] .ask-title, html[lang="zh"] .ask-title, html[lang="ar"] .ask-title {
  letter-spacing:0; text-transform:none; }
.ask-sub { font-size:.9rem; color:var(--muted); margin:0 0 18px; line-height:1.45; }
.ask-card input[type=text] { text-align:center; font-size:1.15rem; }
.ask-card .btn { margin-top:14px; }
.ask-tg { margin-top:16px; padding-top:14px; border-top:1px solid var(--line); }
.ask-tg .hint { margin:0 0 10px; }
.ask-tg > div { display:flex; justify-content:center; }
/* Подтверждение — та же карточка, но компактнее и с парой кнопок в ряд. */
.cnf-card { padding:24px 20px 20px; }
.cnf-card .ask-sub { margin-bottom:20px; }
.cnf-danger { filter:drop-shadow(0 8px 22px rgba(var(--danger-rgb),.55)); }
.cnf-row { display:flex; gap:10px; }
.cnf-row .btn { margin:0; padding:15px 12px; font-size:.95rem; }

.ask-back { margin-top:12px; background:none; border:none; color:var(--muted); font-size:.84rem;
  font-family:var(--font-text); cursor:pointer; text-decoration:underline; }
.ask-back:active { opacity:.6; }

/* ── ЛОББИ «Театра» ── */
.lobby-roster { display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:14px 16px; border-radius:15px; background:var(--panel); border:1px solid var(--line); margin-bottom:16px; }
.roster-count { font-family:var(--font-display); font-size:.9rem; font-weight:600; letter-spacing:.06em; color:var(--danger); }
.invite-row { display:flex; gap:8px; align-items:center; margin-bottom:10px; }
.invite-link { flex:1; font-family:ui-monospace,monospace; font-size:.78rem; color:var(--muted);
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis; padding:12px 13px; background:var(--panel-2); border-radius:11px; }

/* карточка «Хочу роль» */
.wish-card { border-radius:15px; padding:16px; margin-bottom:20px;
  background:rgba(var(--accent-rgb),.06); border:1px solid rgba(var(--accent-rgb),.28); }
.wish-card .wish-title { font-family:var(--font-display); font-size:.95rem; font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; color:var(--accent-soft); margin-bottom:6px; }
html[lang="th"] .wish-card .wish-title, html[lang="zh"] .wish-card .wish-title { letter-spacing:0; text-transform:none; }

/* карточка баланса ролей — видна ВСЕМ игрокам (перевес город/мафия) */
.balance-card { border-radius:15px; padding:15px 16px; margin-bottom:20px;
  background:var(--panel); border:1px solid var(--line); }
.balance-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:11px; }
.balance-top .bt-side { display:flex; align-items:center; gap:7px; font-size:.75rem; font-weight:600; }
.balance-top .bt-side .bt-dot { width:8px; height:8px; border-radius:50%; background:currentColor; }
.balance-top .bt-pct { font-family:var(--font-display); font-size:.85rem; font-weight:700; letter-spacing:.03em; }
.balance-track { position:relative; height:8px; border-radius:5px; margin:0 8px 11px;
  background:linear-gradient(90deg, var(--danger) 0%, var(--gold) 50%, var(--ok) 100%); }
.balance-marker { position:absolute; top:50%; transform:translate(-50%,-50%); width:16px; height:16px;
  border-radius:50%; background:#fff; border:3px solid var(--bg); box-shadow:0 2px 7px rgba(0,0,0,.55);
  transition:left .4s cubic-bezier(.34,1.2,.5,1); }
.balance-you { position:absolute; top:-16px; transform:translateX(-50%); font-family:var(--font-display);
  font-size:.5rem; font-weight:700; letter-spacing:.05em; color:var(--muted); white-space:nowrap; }
.balance-foot { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.balance-foot .bf-comp { font-size:.68rem; color:var(--muted); }
.balance-foot .bf-all { font-size:.62rem; color:var(--muted); opacity:.7; }
.bal-tone-ok { color:var(--ok); } .bal-tone-evil { color:var(--danger); } .bal-tone-town { color:var(--info); }

/* «Настройки стола» — заголовок хостовой секции */
.settings-head { font-family:var(--font-display); font-size:.78rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); margin-bottom:4px; }
html[lang="th"] .settings-head, html[lang="zh"] .settings-head { letter-spacing:.02em; text-transform:none; }
.settings-sub { font-size:.7rem; color:var(--muted); margin-bottom:12px; }
.stab-title { font-family:var(--font-display); font-size:.72rem; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; color:var(--accent-soft); margin-bottom:11px; }
html[lang="th"] .stab-title, html[lang="zh"] .stab-title { letter-spacing:.02em; text-transform:none; }

/* счётчик-строка (Мафия − N +) */
.count-row { display:flex; align-items:center; justify-content:space-between; padding:13px 15px;
  border-radius:13px; background:var(--panel); border:1px solid var(--line); margin-bottom:13px; }
.count-row .cr-name { font-weight:700; font-size:.85rem; color:var(--txt-hi); }
.count-row .cr-sub { font-size:.7rem; color:var(--muted); margin-top:2px; }
.count-row .cr-ctl { display:flex; align-items:center; gap:13px; }
.count-row .cr-btn { width:31px; height:31px; border-radius:9px; background:var(--panel-2); border:1px solid var(--line-2);
  display:flex; align-items:center; justify-content:center; color:var(--txt); font-size:1.1rem; cursor:pointer; }
.count-row .cr-btn:disabled { opacity:.4; cursor:not-allowed; }
.count-row .cr-val { font-family:var(--font-display); font-size:1.05rem; font-weight:700; color:var(--danger);
  min-width:14px; text-align:center; }

/* сетка ролей (2 колонки, чекбокс-квадрат) */
.role-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-bottom:14px; }
.role-cell { display:flex; align-items:center; gap:8px; padding:9px 10px; border-radius:10px; cursor:pointer;
  background:var(--panel-2); border:1px solid var(--line-2); }
.role-cell.off { background:var(--panel); border-color:var(--line); opacity:.5; }
.role-cell .rc-box { width:16px; height:16px; border-radius:5px; flex:none; display:flex; align-items:center; justify-content:center; }
.role-cell .rc-box { border:1.5px solid var(--line-2); }
.role-cell:not(.off) .rc-box { background:var(--accent); border-color:var(--accent); }
.role-cell .rc-name { flex:1; font-weight:600; font-size:.78rem; color:var(--txt); }

/* чипы опций (Дон / Слухи / Раскрывать роли / Заказ роли) */
.opt-chips { display:flex; flex-wrap:wrap; gap:7px; }
.opt-chip { padding:8px 12px; border-radius:9px; font-weight:600; font-size:.78rem; cursor:pointer;
  background:var(--panel-2); border:1px solid var(--line-2); color:var(--muted); }
.opt-chip.on { background:rgba(var(--accent-rgb),.14); border-color:rgba(var(--accent-rgb),.35); color:var(--accent-soft); }

/* быстрые кнопки ботов (+1 +3 −1 Очист.) */
.bot-quick { display:flex; gap:8px; margin-bottom:16px; }
.bot-quick > button { flex:1; padding:13px; border-radius:12px; cursor:pointer; font-family:var(--font-display);
  font-weight:700; font-size:.85rem; letter-spacing:.03em; }
.bot-quick > button.add { background:rgba(var(--accent-rgb),.14); border:1px solid rgba(var(--accent-rgb),.3); color:var(--accent-soft); }
.bot-quick > button.sub { background:var(--panel); border:1px solid var(--line); color:var(--muted); }
.bot-quick > button:disabled { opacity:.4; cursor:not-allowed; }

/* карточка игрока-ранга в лобби (сетка мест) */
.seat-grid { display:flex; gap:11px; flex-wrap:wrap; margin-bottom:16px; }
.seat-empty { flex:1; min-width:120px; border-radius:14px; border:1.5px dashed var(--line-2);
  display:flex; align-items:center; justify-content:center; text-align:center; padding:14px;
  font-size:.78rem; color:var(--muted); }

/* ТОТ ЖЕ «Театр», только сцена освещена. 🔴 ТОЛЬКО переопределение токенов —
   ни одного правила под селектор. Нужно что-то светлой теме — заводи ТОКЕН и правь
   здесь, НЕ дописывай `html.theme-day .что-то` (иначе снова 40 заплаток). Краски
   темнеют: золото/зелёный на белом нечитаемы; красный проходит на обоих фонах. */
html.theme-day {
  --gold-rgb: 169,118,15;
  --ok-rgb: 21,127,82;
  --danger-rgb: 193,55,60;
  --info-rgb: 26,110,200;
  --violet-rgb: 150,60,168;
  --accent-soft: #b8262b;       /* «мягкий красный» на светлом = ТЕМНЕЕ */

  --bg: #f4eeee;
  --bg-glow: #fbe6e5;
  --bg-deep: #ece5e5;
  --panel: rgba(0,0,0,.025);
  --panel-2: rgba(0,0,0,.045);
  --sunk: rgba(0,0,0,.05);
  --solid: #fdf8f8;
  --line: rgba(0,0,0,.09);
  --line-2: rgba(0,0,0,.13);
  --txt: #241a1c;
  --txt-hi: #120b0c;
  --muted: rgba(32,20,22,.55);
  --bar: rgba(252,247,247,.94);
  --scrim: rgba(60,40,42,.42);
  --shadow: 0 10px 26px rgba(90,40,45,.10);
  color-scheme: light;
}
html.theme-day body.phase-night { --bg-glow: #e6e8fa; --bg: #eef0f7; --bg-deep: #e6e8f0; }
html.theme-day body.phase-day   { --bg-glow: #fdf0d8; --bg: #f7f2e8; --bg-deep: #efe9dd; }
html.theme-day body.phase-ended { --bg-glow: #f3e4f7; --bg: #f2ecf4; --bg-deep: #eae3ec; }
html.theme-day body.phase-night .phase-badge { color:#3f4fa8; }

/* ═══════════ СОЧНОСТЬ: анимации/вспышки (отключаемы тумблером) ═══════════ */
.phase-flash { position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:30vh; pointer-events:none; z-index:80; animation:phaseflash 1.1s ease-out forwards;
  filter: drop-shadow(0 8px 40px rgba(0,0,0,.45)); }
@keyframes phaseflash {
  0% { opacity:0; transform:scale(.4); }
  25% { opacity:.95; transform:scale(1); }
  70% { opacity:.9; transform:scale(1.06); }
  100% { opacity:0; transform:scale(1.25); }
}
.winner .big { animation:winpop .55s cubic-bezier(.2,1.3,.5,1) both; }
@keyframes winpop { 0%{opacity:0;transform:scale(.6)} 100%{opacity:1;transform:scale(1)} }
.player.selected { animation:votepulse .25s ease; }
@keyframes votepulse { 0%{transform:scale(.94)} 60%{transform:scale(1.05)} 100%{transform:scale(1)} }
.feed .line:last-child { animation:feedin .35s ease; }
@keyframes feedin { from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:none} }
/* мастер-тумблер «Анимации выкл» */
html.no-anim *, html.no-anim *::before, html.no-anim *::after { animation:none !important; transition:none !important; }
/* чат «Выкл»: заглушаем, но не прячем — опция должна оставаться видимой */
.chatbar.chat-off { opacity:.55; }
.chatbar input:disabled { opacity:.7; cursor:not-allowed; }

/* ═══════ v0.60: топ-10 апгрейдов интерфейса ═══════ */

/* #1 настоящие аватарки на плитках (Telegram-фото) */
.player .av { display:flex; align-items:center; justify-content:center; min-height:52px; }
.av-img { width:52px; height:52px; border-radius:50%; object-fit:cover; border:2px solid var(--line); display:block; }
.player.you .av-img { border-color: var(--accent); }
.player.dead .av-img { filter: grayscale(1); }

/* #6 убывающая полоса таймера */
.timer-track { height:5px; border-radius:999px; background:var(--sunk); overflow:hidden; margin:0 0 6px; }
.timer-bar { height:100%; width:100%; border-radius:999px; background:linear-gradient(90deg,var(--accent),var(--accent-2));
  transition: width 1s linear, background .3s; }
.timer-bar.low { background:linear-gradient(90deg,#ff8a5b,var(--danger)); }

/* #10 баннер потери связи */
.ws-down { text-align:center; font-weight:700; font-size:.9rem; color:#1a140a;
  background: var(--gold); border-radius:12px; padding:8px 12px; margin:0 0 10px; }

/* #4 крышка-«рубашка» роли — чистая иерархия: бейдж → заголовок → строка → кнопка */
.rolecard { min-height:158px; }   /* чтобы рубашка ровно ложилась при любой длине описания роли */
.role-cover { position:absolute; inset:0; border-radius:16px; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:8px;
  padding:18px;
  background:
    radial-gradient(120% 85% at 50% -10%, rgba(var(--accent-rgb),.20), transparent 60%),
    linear-gradient(160deg,#161b3a,#221a44);
  border:1.5px solid rgba(var(--accent-rgb),.45);
  box-shadow: inset 0 0 44px rgba(var(--accent-rgb),.08); }
.rc-badge { width:58px; height:58px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:2rem; line-height:1; background:rgba(var(--accent-rgb),.14); border:1.5px solid rgba(var(--accent-rgb),.5);
  box-shadow:0 0 26px rgba(var(--accent-rgb),.28); animation: rcfloat 3s ease-in-out infinite; }
@keyframes rcfloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} }
.rc-title { font-weight:900; font-size:1.2rem; letter-spacing:.2px; }
.rc-sub { color:var(--muted); font-size:.84rem; line-height:1.4; max-width:30ch; }
.rc-btn { margin-top:3px; font-weight:800; font-size:.92rem; color:#fff;
  background: linear-gradient(135deg,var(--accent),var(--accent-2)); border-radius:999px; padding:9px 20px;
  box-shadow:0 6px 16px rgba(var(--accent-rgb),.32); }
/* пилюля «спрятать роль · таймер» поверх открытой роли */
.peek-timer { position:absolute; top:10px; right:12px; font-size:.74rem; font-weight:800;
  color:var(--accent); background:rgba(var(--accent-rgb),.14); border:1px solid var(--accent);
  border-radius:999px; padding:3px 9px; font-variant-numeric:tabular-nums; }
/* подсказка «личные сообщения скрыты» (под рубашкой) */
.secret-hint { text-align:center; cursor:pointer; font-weight:700; font-size:.84rem; color:var(--accent);
  background:rgba(var(--accent-rgb),.10); border:1.5px dashed rgba(var(--accent-rgb),.5); border-radius:13px;
  padding:9px 12px; }

/* кнопка «удалить игрока» (ведущий) на плитке */
.kickbtn { font-size:.8rem; line-height:1; cursor:pointer; padding:1px 5px; border-radius:7px;
  border:1px solid rgba(var(--danger-rgb),.5); background:rgba(var(--danger-rgb),.16); color:var(--accent-soft); font-weight:800; }
.kickbtn:active { transform:scale(.9); }
/* карточка «занять место бота» (опоздавший-наблюдатель) */
.join-bot { border:1.5px solid var(--ok); }

/* «доступна новая версия» — мягкая плашка сверху */
.update-bar { position:fixed; top:0; left:0; right:0; z-index:9000; display:flex; gap:12px;
  align-items:center; justify-content:center; padding:8px 12px; font-weight:700; font-size:.9rem;
  background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#fff;
  box-shadow:0 4px 16px rgba(0,0,0,.3); }

/* режим обновления — блокирующий оверлей на весь экран */
.maint-overlay { position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center;
  padding:24px; background:rgba(8,10,22,.86); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); }
.maint-card { max-width:420px; width:100%; text-align:center; border-radius:20px; padding:28px 22px;
  background:linear-gradient(160deg,#161b3a,#221a44); border:1.5px solid rgba(var(--accent-rgb),.5);
  box-shadow:0 18px 50px rgba(0,0,0,.5); }
.maint-spin { font-size:3rem; line-height:1; display:inline-block; animation:maintspin 2.4s linear infinite; }
@keyframes maintspin { from{transform:rotate(0)} to{transform:rotate(360deg)} }
.maint-title { font-weight:900; font-size:1.4rem; margin-top:10px; }
.maint-msg { color:var(--muted); font-size:.96rem; line-height:1.45; margin-top:8px; }
.maint-foot { color:var(--accent); font-size:.82rem; margin-top:14px; font-weight:700; }

/* мягкий анонс-предупреждение (деплой) — НЕ блокирует игру */
.notice-bar { position:fixed; top:0; left:0; right:0; z-index:8800; display:flex; gap:10px;
  align-items:center; justify-content:center; flex-wrap:wrap; padding:8px 14px; font-weight:800;
  font-size:.88rem; color:#3a2600; background:linear-gradient(135deg,#ffcf5c,#ffab3d);
  box-shadow:0 4px 16px rgba(0,0,0,.28); }
.notice-bar .nb-msg { font-weight:700; }
.notice-bar .nb-timer { font-variant-numeric:tabular-nums; background:rgba(0,0,0,.16);
  padding:2px 9px; border-radius:999px; font-weight:900; }
.notice-modal .maint-card { border-color:rgba(255,180,60,.7);
  background:linear-gradient(160deg,#2a2410,#241a10); }
.notice-modal .maint-spin { animation:none; }
.notice-modal .nb-until { color:#ffcf5c; font-weight:900; margin-top:6px; font-size:1.05rem; }

/* #9 коачмарк первого хода */
.coach { text-align:center; font-weight:800; font-size:.95rem; color:var(--accent);
  background: rgba(var(--accent-rgb),.12); border:1.5px dashed var(--accent); border-radius:13px;
  padding:9px 12px; margin:0 0 10px; animation: coachpulse 1.6s ease-in-out infinite; }
@keyframes coachpulse { 0%,100%{transform:translateY(0)} 50%{transform:translateY(3px)} }

/* #3 пресеты стола */
.preset-row { display:flex; gap:8px; }
.preset-row > * { flex:1; }

/* #8 эмодзи-реакции */
.react-bar { display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 4px; }
.react-btn { font-size:1.5rem; line-height:1; background:var(--panel-2); border:1.5px solid var(--line);
  border-radius:12px; padding:6px 9px; cursor:pointer; transition:transform .08s; }
.react-btn:active { transform:scale(1.25); }
.feed .line.reaction { font-size:1.15rem; color:var(--gold); border-bottom-color:var(--line); }

/* #7 прогноз победителя (мёртвые) */
.predict-card { border:1.5px solid var(--accent); }

/* выделение выбранной ghost-кнопки (пресеты/прогноз) */
.btn.ghost.sel { background: rgba(var(--accent-rgb),.16); border:1.5px solid var(--accent); color:var(--accent); }

/* ─── RTL (арабский): зеркалим физические L/R там, где dir=rtl этого сам не делает.
   Текстовые выравнивания уже переведены на логическое text-align:start. Здесь — абсолютно
   позиционированные элементы (дропдаун языка, бейджи карточки игрока, стопка аватаров, отступ
   маркеров списка), которые остаются «прибитыми» к физической стороне. ─── */
[dir="rtl"] .lang-menu { right:auto; left:0; }
[dir="rtl"] .player .num { left:auto; right:10px; }
[dir="rtl"] .player .badges { right:auto; left:9px; }
[dir="rtl"] .dot { right:auto; left:10px; }
[dir="rtl"] .peek-timer { right:auto; left:12px; }
[dir="rtl"] .seo-about ul { padding-left:0; padding-right:20px; }
[dir="rtl"] .avstack > * { margin-left:0; margin-right:-9px; }
[dir="rtl"] .avstack > *:first-child { margin-right:0; }

/* Город определён по IP — честно помечаем приблизительным (IP-гео врёт на
   мобильных операторах; точный источник — координаты браузера). */
.pcity.approx { border-style:dashed; opacity:.85; }
.pcity-cta { color:var(--accent-soft); text-decoration:underline; }