:root {
  --bg: #0f1124;
  --panel: #1a1e38;
  --panel-2: #232843;
  --line: #2b3157;
  --txt: #eef1ff;
  --muted: #aab2dd;
  --accent: #7c97ff;
  --accent-2: #9b6bff;
  --danger: #ff6076;
  --ok: #3fd9a0;
  --gold: #ffd166;
  --radius: 20px;
  --shadow: 0 10px 34px rgba(0,0,0,.40);
  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: var(--bg) no-repeat fixed;
  background-size: cover;
  color: var(--txt);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", system-ui, sans-serif;
  line-height: 1.55;
  overflow-x: hidden;
  transition: background .6s ease;
  -webkit-font-smoothing: antialiased;
}
body.phase-night { background: radial-gradient(150% 100vh at 50% -15%, #1b2c72 0%, #070a18 60%) no-repeat fixed; }
body.phase-day   { background: radial-gradient(150% 100vh at 50% -15%, #8a6526 0%, #1a1430 58%) no-repeat fixed; }
body.phase-lobby { background: radial-gradient(150% 100vh at 50% -15%, #20284f 0%, #0d0f22 60%) no-repeat fixed; }
body.phase-ended { background: radial-gradient(150% 100vh at 50% -15%, #4a2563 0%, #120c22 60%) no-repeat fixed; }
body.phase-night .phase-badge { color: #8fb0ff; }
body.phase-day   .phase-badge { color: #ffd27a; }

.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; } }

h1,h2,h3 { margin: 0 0 14px; font-weight: 800; line-height: 1.25; }
h3 { font-size: 1.22rem; }
.brand { display:flex; align-items:center; gap:12px; font-size: 2.1rem; font-weight: 900; letter-spacing:.2px; }
.brand .logo { font-size: 2.3rem; }
.subtitle { color: var(--muted); margin: 6px 0 22px; font-size: 1.02rem; }

.card { background: var(--panel); border: 1px solid rgba(255,255,255,.04); border-radius: var(--radius);
  padding: 20px 18px; box-shadow: var(--shadow); margin-bottom: 18px; }
.card.soft { background: var(--panel-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);
  background: #11142c; color: var(--txt); font-size: 1.05rem; outline: none; transition: border-color .15s;
}
input[type=text]:focus, select:focus { border-color: var(--accent); }
::placeholder { color: #6b73a0; }

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  width: 100%; padding: 16px 18px; border: none; border-radius: 16px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff; font-size: 1.12rem; font-weight: 800; cursor: pointer;
  box-shadow: 0 6px 18px rgba(124,151,255,.28);
  transition: transform .08s ease, filter .2s ease, box-shadow .2s; margin-bottom: 4px;
}
.btn:active { transform: scale(.98); }
.btn:disabled { filter: grayscale(.6) brightness(.65); box-shadow:none; cursor: not-allowed; }
.btn.ghost { background: #2a2f52; box-shadow:none; }
.btn.danger { background: linear-gradient(135deg, #ff6076, #c1374d); }
.btn.ok { background: linear-gradient(135deg, #3fd9a0, #1f9e72); box-shadow: 0 6px 18px rgba(63,217,160,.25); }
.btn.small { width:auto; padding: 11px 16px; font-size:.98rem; border-radius: 13px; }
.row { display:flex; gap:12px; }
.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:#2b3157; color:var(--muted); font-weight:600; white-space:nowrap; }
.pill.live { background: rgba(255,96,118,.18); color: #ff8a9b; }
.pill.open { background: rgba(63,217,160,.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-weight:900; font-size:1.28rem; }
.timer { font-variant-numeric: tabular-nums; background:#11142c; 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; }

.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:#4a4f74; }
.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:10px; }
.modes .m { flex:1; text-align:center; padding:13px 8px; border-radius:14px; background:var(--panel-2); cursor:pointer; font-weight:800; border:2px solid transparent; font-size:.98rem; }
.modes .m.active { border-color: var(--accent); color: var(--accent); background: rgba(124,151,255,.1); }

.feed { background:#0c0e1f; 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 #181c34; line-height:1.5; }
.feed .line:last-child { border-bottom: none; }
.secret { background: rgba(124,151,255,.12); border:1.5px solid #364074; 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: rgba(15,17,36,.95);
  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:#11142c; 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(124,151,255,.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(124,151,255,.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: rgba(15,17,36,.94); 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,#ff5d6c 0%,#ffb24a 28%,#3fd9a0 50%,#ffb24a 72%,#ff5d6c 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:#6fb1ff; }
.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(124,151,255,.07); border:1px solid rgba(124,151,255,.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(124,151,255,.16), rgba(155,107,255,.12));
  border:1px solid rgba(124,151,255,.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:#aebbff; }
@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(63,217,160,.55)} 70%{box-shadow:0 0 0 9px rgba(63,217,160,0)} 100%{box-shadow:0 0 0 0 rgba(63,217,160,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(124,151,255,.07); }
.vis-box .toggle b { color:var(--accent); }
.vis-box.promo { background:linear-gradient(160deg,rgba(124,151,255,.16),rgba(124,151,255,.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(255,209,102,.45);
  border-radius:999px; background:rgba(255,209,102,.08); }
.ach-row { display:flex; align-items:center; gap:10px; padding:8px 0;
  border-bottom:1px solid #1b2038; 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:#1b2038; 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(255,209,102,.5); background:rgba(255,209,102,.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 #1b2038; 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 #1b2038; }
.role-row:last-child { border-bottom: none; }
.role-row .rn { font-weight: 700; flex: 1; }
.role-row.team-mafia .rn { color: #ff95a4; }
.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:#11142c; 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:12px; }
.profile-head .pname { font-weight:800; font-size:1.25rem; line-height:1.2; word-break:break-word; }
.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 rgba(255,255,255,.04); 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(255,96,118,.32); border-radius:var(--radius); padding:16px;
  background: rgba(255,96,118,.05); }
.danger-zone .btn.logout { background:transparent; color:var(--danger); box-shadow:none;
  border:1.5px solid rgba(255,96,118,.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(124,151,255,.18); }
.emoji-btn:active { transform:scale(.92); }
/* чипы ролей + период */
.chips { display:flex; flex-wrap:wrap; gap:7px; }
.chip { background:var(--panel-2); border:2px solid transparent; border-radius:999px;
  padding:7px 13px; font-size:.85rem; cursor:pointer; color:var(--txt); }
.chip.sel { border-color:var(--accent); color:var(--accent); background:rgba(124,151,255,.1); }
.period { display:flex; gap:7px; }
.period button { flex:1; background:var(--panel-2); border:2px solid transparent; border-radius:12px;
  padding:10px; font-size:.86rem; cursor:pointer; color:var(--txt); font-weight:700; }
.period button.sel { border-color:var(--accent); color:var(--accent); }

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

/* приветствие + чип ранга на главной */
.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(255,209,102,.14); border:1px solid rgba(255,209,102,.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:left; cursor:pointer; color:var(--txt); border:1px solid rgba(255,255,255,.04); }
.teaser-link:active { transform:scale(.99); }
.chev { color:var(--accent); font-weight:800; white-space:nowrap; font-size:.92rem; }

/* живой баннер */
.live-banner { background:rgba(63,217,160,.12); border:1px solid rgba(63,217,160,.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 rgba(255,255,255,.05); 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(124,151,255,.28); }

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

/* меню-drawer */
.drawer-wrap { position:fixed; inset:0; background:rgba(6,8,18,.6); backdrop-filter:blur(3px); z-index:60;
  display:flex; justify-content:flex-end; }
.drawer { background:var(--panel); width:min(320px,82vw); height:100%; padding:18px 16px;
  box-shadow:-12px 0 40px rgba(0,0,0,.5); 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:left; 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; }
.manual-intro { background:linear-gradient(135deg, rgba(124,151,255,.14), rgba(155,107,255,.1));
  border:1px solid rgba(124,151,255,.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 #1b2038; }
.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:#8fb0ff; }
.goal-row.mafia b { color:#ff95a4; }
.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:#ff95a4; }
.role-group-title.town { color:#8fb0ff; }
.role-group-title.neutral { color:var(--gold); }
.role-card { display:flex; gap:13px; align-items:flex-start; background:var(--panel);
  border:1px solid rgba(255,255,255,.04); 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:#ff6076; }
.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(124,151,255,.16); color:#9fb6ff; }
.rc-tag.mafia { background:rgba(255,96,118,.16); color:#ff95a4; }
.rc-tag.neutral { background:rgba(255,209,102,.16); color:var(--gold); }

/* FAQ-аккордеоны */
.faq { background:var(--panel); border:1px solid rgba(255,255,255,.04); 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:#11142c; 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:#2a2f52; 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:#0c0e1f; }
.pick-row { display:flex; align-items:center; gap:10px; padding:10px 12px; border-bottom:1px solid #181c34;
  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 #1b2038; }
.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(255,209,102,.12), rgba(155,107,255,.08));
  border:1px solid rgba(255,209,102,.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: #c7cffd; font-weight: 700; }
.seo-about details { margin-top: 12px; }
.seo-about summary { cursor: pointer; color: var(--accent); font-weight: 700; padding: 6px 0; }


/* ═══════════ СВЕТЛАЯ ТЕМА — «Дневное досье» (тёплая, не белая) ═══════════ */
html.theme-day {
  --bg: #f0e7d4;          /* песочный кремовый */
  --panel: #fdf9f0;       /* тёплый айвори (карточки) */
  --panel-2: #f1e8d6;     /* бежевый */
  --line: #e2d6bd;        /* тёплая граница */
  --txt: #2c2438;         /* чернильный */
  --muted: #7c6f5a;       /* кофе с молоком */
  --accent: #5b54d6;      /* глубокий индиго — контраст на креме */
  --accent-2: #9b5cff;
  --danger: #d23b54;
  --ok: #1f9e72;
  --gold: #b07d10;        /* тёмное золото */
  --shadow: 0 10px 26px rgba(120,95,50,.16);
}
html.theme-day { color: var(--txt); }
/* фоны: солнечное свечение сверху, у фаз — своё настроение */
html.theme-day body { background: var(--bg) no-repeat fixed; }
html.theme-day body.phase-home,
html.theme-day body.phase-lobby { background: radial-gradient(150% 105vh at 50% -10%, #fbf3df 0%, #efe2c8 55%, #e6d9bb 100%) no-repeat fixed; }
html.theme-day body.phase-night { background: radial-gradient(150% 105vh at 50% -10%, #efe9f4 0%, #dcd5e7 60%) no-repeat fixed; }
html.theme-day body.phase-day   { background: radial-gradient(150% 105vh at 50% -10%, #ffeecb 0%, #f6dca6 60%) no-repeat fixed; }
html.theme-day body.phase-ended { background: radial-gradient(150% 105vh at 50% -10%, #f6e8e1 0%, #ecd7d0 60%) no-repeat fixed; }
html.theme-day body.phase-night .phase-badge { color:#6b56b8; }
html.theme-day body.phase-day   .phase-badge { color:#b07d10; }
/* карточки — тёплый айвори, мягкая граница и тень */
html.theme-day .card { border:1px solid #ece0c8; box-shadow:0 6px 20px rgba(120,95,50,.10); }
html.theme-day .stat-tile, html.theme-day .role-card, html.theme-day .faq,
html.theme-day .game-row, html.theme-day .me-strip, html.theme-day .teaser-link { border:1px solid #ece0c8; }
/* поверхности ввода — тёплые */
html.theme-day input[type=text], html.theme-day select, html.theme-day textarea { background:#f6efe0; color:var(--txt); border-color:#e2d6bd; }
html.theme-day ::placeholder { color:#a99a80; }
html.theme-day .feed, html.theme-day .pick-list { background:#f6efe0; }
html.theme-day .feed .line, html.theme-day .rate-row, html.theme-day .role-row,
html.theme-day .hist-row, html.theme-day .pick-row { border-bottom-color:#ece0c8; }
html.theme-day .timer, html.theme-day .linkbox, html.theme-day .bc-msg { background:#f6efe0; }
html.theme-day .voteprog-bar { background:#e7dabd; }
html.theme-day .secret { background:rgba(91,84,214,.08); border-color:#d8cdf0; }
html.theme-day .chatbar { background:rgba(253,249,240,.96); }
html.theme-day .logline { color:#8a7c64; }
/* СЕРЫЕ КНОПКИ → чернильный текст (была беда: белый текст) + тёплый беж */
html.theme-day .btn.ghost { background:#efe6d2; color:var(--txt); border:1.5px solid #e0d3b8; box-shadow:none; }
html.theme-day .btn.ghost:active { background:#e7dabd; }
html.theme-day .bc-btn { background:#efe6d2; color:var(--accent); border-color:#e0d3b8; }
html.theme-day .menu-btn { background:#efe6d2; color:var(--txt); border-color:#e0d3b8; }
html.theme-day .chip, html.theme-day .period button, html.theme-day .modes .m,
html.theme-day .toggle, html.theme-day .emoji-btn { background:#efe6d2; }
html.theme-day .chip { border-color:#e0d3b8; }
html.theme-day .pill { background:#e9dcc2; color:var(--muted); }
html.theme-day .dot { background:#c4b696; }
/* акцентные градиентные блоки — тёплая адаптация */
html.theme-day .manual-intro { background:linear-gradient(135deg, rgba(91,84,214,.10), rgba(155,92,255,.06)); border-color:#d8cdf0; }
html.theme-day .topic-card { background:linear-gradient(135deg, rgba(176,125,16,.13), rgba(155,92,255,.06)); border-color:#e6d3a0; }
html.theme-day .me-rank { background:linear-gradient(135deg, rgba(91,84,214,.12), rgba(155,92,255,.07)); border-color:#d8cdf0; }
html.theme-day .live-banner { background:rgba(31,158,114,.12); border-color:rgba(31,158,114,.3); color:#147a55; }
html.theme-day .danger-zone { background:rgba(210,59,84,.06); border-color:rgba(210,59,84,.28); }
html.theme-day .seo-about { border-top-color:#e2d6bd; }
html.theme-day .seo-about strong { color:#5b54d6; }
html.theme-day .rank-chip { background:rgba(176,125,16,.16); border-color:rgba(176,125,16,.4); color:#9a6e0e; }

/* ═══════════ СОЧНОСТЬ: анимации/вспышки (отключаемы тумблером) ═══════════ */
.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:#11142c; 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(124,151,255,.20), transparent 60%),
    linear-gradient(160deg,#161b3a,#221a44);
  border:1.5px solid rgba(124,151,255,.45);
  box-shadow: inset 0 0 44px rgba(124,151,255,.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(124,151,255,.14); border:1.5px solid rgba(124,151,255,.5);
  box-shadow:0 0 26px rgba(124,151,255,.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(124,151,255,.32); }
/* пилюля «спрятать роль · таймер» поверх открытой роли */
.peek-timer { position:absolute; top:10px; right:12px; font-size:.74rem; font-weight:800;
  color:var(--accent); background:rgba(124,151,255,.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(124,151,255,.10); border:1.5px dashed rgba(124,151,255,.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(255,96,118,.5); background:rgba(255,96,118,.16); color:#ff8a9b; 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(124,151,255,.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; }

/* #9 коачмарк первого хода */
.coach { text-align:center; font-weight:800; font-size:.95rem; color:var(--accent);
  background: rgba(124,151,255,.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:#181c34; }

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

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