/* ============================================================
   МАФИЯ — стили
   ------------------------------------------------------------
   Первый блок ниже — НЕ оригинальные стили Мафии, а копия общих,
   переиспользуемых классов лобби (net-btn, lobby-list-*, modal-screen
   и т.д.), которые оказались жёстко привязаны к monopoly.css при самой
   первой реализации сетевого лобби, хотя логически они общие для любой
   игры с похожим экраном "создать/войти в комнату". Мафия и Монополия
   сейчас независимо держат свою копию этих правил — при случае стоит
   вынести их в общий css/menu.css, чтобы не дублировать при добавлении
   следующих игр, но это отдельная, не срочная задача на будущее.
============================================================ */
.net-row{display:flex;gap:8px;margin-bottom:12px}
.net-btn{flex:1;padding:11px;border-radius:12px;border:1.5px solid rgba(200,180,220,0.5);background:rgba(255,255,255,0.5);color:#7060a0;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit}
.net-btn:hover{background:rgba(255,255,255,0.75)}
.net-btn.reconnect{background:linear-gradient(135deg,#f5d020,#e0a020);border-color:rgba(200,150,30,0.5);color:#5a4a10;font-weight:700}
.mono-big-btn{width:100%;padding:13px;border-radius:14px;border:none;background:linear-gradient(135deg,#c0a0e0,#9060c8);color:#fff;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit}

/* ============================================================
   ПРОСТОЕ ИНФОРМАЦИОННОЕ МОДАЛЬНОЕ ОКНО — собственная копия общего
   стиля .mono-modal из Монополии (та же затемнённая подложка +
   центрированная карточка), не подключаем monopoly.css напрямую —
   мафия уже копирует нужные общие классы локально (см. .mono-big-btn
   выше), та же логика и здесь. Используется для разовых уведомлений
   вроде "вас усыпили Клофелинщицей" — см. showMafiaInfoModal в JS.
============================================================ */
.mono-modal{display:none;position:fixed;inset:0;background:rgba(20,10,30,0.5);align-items:center;justify-content:center;z-index:1500;padding:20px}
.mono-modal-card{background:#fff;border-radius:18px;padding:26px 24px;max-width:340px;width:100%;text-align:center;box-shadow:0 16px 50px rgba(60,30,90,0.35)}
.mono-modal-card h3{font-size:16px;font-weight:800;color:#3a2a4a;margin-bottom:10px;line-height:1.35}
.mono-modal-card p{font-size:13px;color:#7060a0;line-height:1.55;margin-bottom:18px}
.mono-modal-actions{display:flex;gap:8px;justify-content:center}
.mono-modal-btn{padding:11px 24px;border-radius:12px;border:none;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit}
.mono-modal-btn.primary{background:linear-gradient(135deg,#c0a0e0,#9060c8);color:#fff}
.mono-modal-btn.primary:hover{filter:brightness(1.08)}
.mono-big-btn:hover{filter:brightness(1.08)}
.mono-big-btn:disabled{opacity:.5;cursor:not-allowed;filter:none}
.net-join-row{display:flex;gap:6px;margin-bottom:6px}
.net-input{flex:1;padding:10px;border-radius:10px;border:1.5px solid rgba(180,150,210,0.5);background:rgba(255,255,255,0.7);font-size:13px;color:#3a2a4a;font-family:inherit;outline:none;text-transform:uppercase}
.lobby-list-section{margin-top:14px}
.net-auth-required-box{background:rgba(255,255,255,0.55);border:1.5px solid rgba(200,180,220,0.5);border-radius:14px;padding:20px 18px;text-align:center}
.net-auth-required-icon{font-size:28px;margin-bottom:8px}
.net-auth-required-text{font-size:12px;color:#7060a0;line-height:1.5;margin-bottom:6px}

/* .nick-login-btn рассчитана на использование внутри .nick-row рядом
   с инпутом (там высоту задаёт flex-соседство) — здесь кнопка стоит
   одна, width:100%, без родительской высоты, и без явных размеров
   получается приплюснутой (padding:0 18px без line-height/height).
   Даём ей собственную высоту прямо здесь. */
#mafiaAuthRequiredBlock .nick-login-btn{
  height:42px;
  display:flex;align-items:center;justify-content:center;
}
.lobby-list-title{font-size:11px;font-weight:700;color:#7060a0;margin-bottom:7px;text-align:center}
.lobby-list-box{display:flex;flex-direction:column;gap:6px;max-height:160px;overflow-y:auto;padding-right:2px}
.lobby-list-empty{font-size:11px;color:#a090b0;text-align:center;padding:14px 6px}
.net-note{font-size:11px;color:#a090b0;text-align:center;margin-top:10px;line-height:1.4}
/* align-items:flex-start + margin:auto на карточке (см. ниже) вместо
   align-items:center — классический приём против "обрезания" верха, когда
   содержимое выше экрана. При центрировании через align-items:center у
   переполняющей карточки верх (кнопка "назад", заголовок) уходил за край
   и был недостижим прокруткой; margin:auto центрирует, пока помещается, и
   аккуратно прижимает к верху с полной прокрутыкой, когда лобби полное. */
.modal-screen{display:none;position:fixed;inset:0;background:linear-gradient(135deg,#f5e6f0 0%,#e8d5f0 40%,#d5e8f5 100%);align-items:flex-start;justify-content:center;z-index:450;padding:20px;overflow:auto}
.modal-screen.active{display:flex}
.modal-screen > .menu-card{margin:auto}
.net-loading-overlay{position:fixed;inset:0;z-index:600;background:rgba(60,40,80,0.45);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
.net-loading-spinner{width:38px;height:38px;border-radius:50%;border:4px solid rgba(255,255,255,0.35);border-top-color:#fff;animation:mafiaNetSpin .8s linear infinite}
.net-loading-text{color:#fff;font-size:14px;font-weight:700;text-shadow:0 2px 6px rgba(0,0,0,0.3)}
@keyframes mafiaNetSpin{to{transform:rotate(360deg)}}

/* ============================================================
   ЛОББИ КОМНАТЫ — счётчик мафии, переключатели ролей, список игроков
============================================================ */
#mafiaRoomCodeDisplay{font-size:28px;font-weight:800;letter-spacing:3px;color:#3a2a4a;text-align:center;margin:6px 0 14px;font-family:monospace}

.mafia-count-row{display:flex;align-items:center;justify-content:center;gap:18px;margin-bottom:14px}
.mafia-count-btn{width:38px;height:38px;border-radius:50%;border:1.5px solid rgba(200,180,220,0.6);background:rgba(255,255,255,0.6);color:#7060a0;font-size:20px;font-weight:700;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;line-height:1}
.mafia-count-btn:hover{background:rgba(255,255,255,0.9)}
.mafia-count-value{font-size:24px;font-weight:800;color:#3a2a4a;min-width:32px;text-align:center}

.mafia-toggle-row{display:flex;justify-content:center;gap:24px;margin-bottom:14px;flex-wrap:wrap}
.mafia-toggle-label{display:flex;align-items:center;gap:6px;font-size:13px;color:#5a4a6a;font-weight:600;cursor:pointer}
.mafia-toggle-label input{width:16px;height:16px;cursor:pointer;accent-color:#9060c8}

/* ============================================================
   ПЕРЕДЕЛАННОЕ ЛОББИ — секции настроек, роль-чипы, свитч, кнопка бота.
   Общая идея: каждая секция (счётчик мафии / роли / опция раскрытия) —
   отдельная "карточка" с лёгким фоном, чтобы визуально разбить длинный
   список настроек на понятные группы, а не одну сплошную стену контролов.
============================================================ */
.mafia-settings-section{
  background:rgba(255,255,255,0.35);
  border:1px solid rgba(200,180,220,0.3);
  border-radius:14px;
  padding:14px 12px 12px;
  margin-bottom:12px;
}
.mafia-settings-section .games-label{margin-bottom:10px}

/* Роли — карточки-"чипы" вместо голых чекбоксов: иконка сверху, подпись
   снизу, вся карточка кликабельна (label оборачивает input), чекбокс
   визуально спрятан (не display:none — иначе теряется фокус с
   клавиатуры/скринридером, просто убран из потока через position). */
.mafia-role-chips{display:grid;grid-template-columns:repeat(auto-fit,minmax(84px,1fr));gap:8px}
.mafia-role-chip{
  position:relative;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:10px 6px 9px;
  border-radius:12px;
  border:1.5px solid rgba(200,180,220,0.45);
  background:rgba(255,255,255,0.55);
  cursor:pointer;user-select:none;
  transition:transform .15s,box-shadow .15s,border-color .15s,background .15s;
}
.mafia-role-chip:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(144,96,200,0.16)}
.mafia-role-chip input{position:absolute;opacity:0;width:1px;height:1px}
.mafia-role-chip-icon{font-size:20px;line-height:1;filter:grayscale(.6) opacity(.55);transition:filter .15s}
.mafia-role-chip-label{font-size:11px;font-weight:700;color:#8878a0;transition:color .15s;text-align:center}
/* Отмеченная роль — цветная иконка, фиолетовая обводка/подложка, лёгкий
   "выезд" вверх, как будто карточка чуть приподнялась и включилась. */
.mafia-role-chip:has(input:checked){
  border-color:#9060c8;
  background:rgba(144,96,200,0.14);
  box-shadow:0 4px 14px rgba(144,96,200,0.22);
}
.mafia-role-chip:has(input:checked) .mafia-role-chip-icon{filter:none}
.mafia-role-chip:has(input:checked) .mafia-role-chip-label{color:#6a40a0}
.mafia-role-chip:has(input:focus-visible){outline:2px solid #9060c8;outline-offset:2px}

/* Переключатель-свитч (вместо обычного чекбокса) для опции "показывать
   роль после смерти" — та же идея, что iOS/Android toggle: капсула с
   ползунком, ползунок едет и капсула красится при включении. */
.mafia-switch-row{display:flex;align-items:center;gap:9px;cursor:pointer;user-select:none}
.mafia-switch-icon{font-size:16px;flex-shrink:0}
.mafia-switch-label{flex:1;font-size:12.5px;font-weight:600;color:#5a4a6a;line-height:1.35}
.mafia-switch{position:relative;flex-shrink:0;width:42px;height:24px}
.mafia-switch input{position:absolute;opacity:0;width:1px;height:1px}
.mafia-switch-track{
  position:absolute;inset:0;border-radius:100px;
  background:rgba(180,160,200,0.35);
  border:1.5px solid rgba(200,180,220,0.5);
  transition:background .2s,border-color .2s;
}
.mafia-switch-thumb{
  position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;
  background:#fff;box-shadow:0 2px 5px rgba(0,0,0,0.25);
  transition:transform .2s;
}
.mafia-switch input:checked ~ .mafia-switch-track{background:#9060c8;border-color:#9060c8}
.mafia-switch input:checked ~ .mafia-switch-track .mafia-switch-thumb{transform:translateX(18px)}
.mafia-switch input:focus-visible ~ .mafia-switch-track{outline:2px solid #9060c8;outline-offset:2px}

/* Кнопка "Добавить бота" — приподнятая над обычным .net-btn: свой
   градиент (перекликается с фиолетовой темой ролей), иконка робота
   слегка покачивается при наведении — небольшая живая деталь вместо
   плоской серой кнопки. */
.mafia-add-bot-btn{
  width:100%;margin-bottom:10px;padding:11px;
  border-radius:12px;border:1.5px solid rgba(144,96,200,0.35);
  background:linear-gradient(135deg,rgba(192,160,224,0.18),rgba(144,96,200,0.22));
  color:#6a40a0;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:transform .15s,box-shadow .15s,background .15s;
}
.mafia-add-bot-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(144,96,200,0.25);
  background:linear-gradient(135deg,rgba(192,160,224,0.28),rgba(144,96,200,0.32));
}
.mafia-add-bot-btn:active{transform:translateY(0)}
.mafia-add-bot-icon{font-size:16px;display:inline-block;transition:transform .2s}
.mafia-add-bot-btn:hover .mafia-add-bot-icon{transform:rotate(-12deg) scale(1.15)}

/* Появление строки игрока/бота в списке лобби — лёгкий fade+slide.
   ВАЖНО: анимация висит ТОЛЬКО на .mafia-row-new (класс навешивается в
   renderMafiaLobby лишь для по-настоящему новых игроков), а не на всех
   строках подряд — иначе она проигрывалась бы заново на каждом обновлении
   комнаты (список перестраивается через innerHTML целиком), и весь список
   "дёргался" при любом чихе сервера. */
@keyframes mafiaRowIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.mafia-lobby-player-row{transition:background .15s,opacity .2s}
.mafia-lobby-player-row.mafia-row-new{animation:mafiaRowIn .25s ease both}

/* Заголовок лобби + кнопка "Информация о ролях" в одну строку */
.mafia-lobby-title-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.mafia-lobby-title-row .menu-title{margin-bottom:0}
.mafia-info-btn{
  flex-shrink:0;padding:7px 12px;border-radius:10px;
  border:1.5px solid rgba(144,96,200,0.3);background:rgba(144,96,200,0.08);
  color:#7060c8;font-size:11.5px;font-weight:700;cursor:pointer;font-family:inherit;
  transition:background .15s;
}
.mafia-info-btn:hover{background:rgba(144,96,200,0.18)}

/* ===== ЭКРАН ИНФОРМАЦИИ О РОЛЯХ ===== */
.mafia-info-card{max-height:88vh;overflow-y:auto}
.mafia-info-roles-list{display:flex;flex-direction:column;gap:12px;margin-top:16px}
.mafia-info-role-card{
  border-radius:14px;padding:14px 16px;
  background:rgba(255,255,255,0.55);
  border:1.5px solid rgba(200,180,220,0.35);
}
.mafia-info-role-card.team-mafia{border-color:rgba(200,64,106,0.35);background:rgba(200,64,106,0.06)}
.mafia-info-role-card.team-town{border-color:rgba(106,191,122,0.3);background:rgba(106,191,122,0.06)}
.mafia-info-role-card.team-neutral{border-color:rgba(245,200,66,0.4);background:rgba(245,200,66,0.08)}
.mafia-info-role-head{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.mafia-info-role-icon{font-size:22px;flex-shrink:0}
.mafia-info-role-title{font-size:14px;font-weight:800;color:#3a2a4a}
.mafia-info-role-desc{font-size:12.5px;line-height:1.55;color:#5a4a6a}

.mafia-settings-readout{font-size:12.5px;color:#7060a0;text-align:center;line-height:1.6;background:rgba(255,255,255,0.4);border-radius:10px;padding:10px;margin-bottom:10px}

#mafiaPlayersList{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;max-height:220px;overflow-y:auto}
.mafia-lobby-player-row{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:10px;background:rgba(255,255,255,0.45);font-size:12.5px;color:#3a2a4a;font-weight:600}
.mafia-lobby-player-row.host::after{content:'👑';margin-left:auto;font-size:13px}
.mafia-lobby-player-row.offline{opacity:.5}
.mafia-bot-remove-btn{margin-left:auto;width:22px;height:22px;border-radius:50%;border:none;background:rgba(200,64,106,0.12);color:#c0506a;font-size:11px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;line-height:1;transition:background .15s,transform .15s}
.mafia-bot-remove-btn:hover{background:rgba(200,64,106,0.22);transform:scale(1.1)}

.mafia-lobby-room-card{padding:8px 12px;border-radius:10px;background:rgba(255,255,255,0.5);display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;transition:background .15s}
.mafia-lobby-room-card:hover{background:rgba(255,255,255,0.8)}
.mafia-lobby-room-host{font-size:12.5px;font-weight:700;color:#3a2a4a}
.mafia-lobby-room-meta{font-size:11px;color:#9080b0}

/* ============================================================
   МОБИЛЬНАЯ АДАПТАЦИЯ ЛОББИ (создание/вход в комнату, настройки хоста) —
   .menu-card из css/menu.css уже тянется по ширине (max-width:440px;
   width:100%), но на узких телефонах её боковой паддинг (36px/40px) и
   плотный список настроек всё равно ощущаются тесно/крупно. Подрезаем
   именно то, что специфично для мафии — счётчик, роль-чипы, свитч,
   список игроков — сама карточка/фон уже отзывчивы за счёт menu.css.
============================================================ */
@media (max-width:480px){
  .modal-screen .menu-card{padding:24px 18px;border-radius:18px}
  .mafia-settings-section{padding:12px 10px 10px;margin-bottom:9px}
  .mafia-count-row{gap:14px}
  .mafia-count-btn{width:34px;height:34px;font-size:18px}
  .mafia-count-value{font-size:21px}
  .mafia-role-chips{grid-template-columns:repeat(3,1fr);gap:7px}
  .mafia-role-chip{padding:9px 4px 8px}
  .mafia-role-chip-icon{font-size:18px}
  .mafia-role-chip-label{font-size:10px}
  .mafia-switch-label{font-size:12px}
  #mafiaPlayersList{max-height:180px}
  .mafia-lobby-player-row{padding:7px 10px;font-size:12px}
}


/* ============================================================
   ИГРОВОЙ ЭКРАН — структура по образцу UI-кита дизайн-системы:
   верхняя панель + три колонки (моя роль слева, сетка игроков в
   центре, единая лента событий/чата с вкладками справа). Все
   CSS-переменные дизайн-системы (--ink-900, --brand-gradient и т.п.)
   переведены в реальные конкретные значения палитры сайта.
============================================================ */
.mafia-screen{display:none;position:fixed;inset:0;background:linear-gradient(135deg,#f5e6f0 0%,#e8d5f0 40%,#d5e8f5 100%);flex-direction:column}
.mafia-screen.active{display:flex}
.mafia-screen.night{background:linear-gradient(135deg,#2a2040 0%,#241a35 50%,#1a1428 100%);transition:background 1.8s ease}

/* Два aurora шарика — медленно плавают поверх фона.
   Пульсируют при смене дня/ночи (JS добавляет .pulsing),
   фон меняется на пике пульса с задержкой 350мс. */
.mafia-blob{
  position:absolute;border-radius:50%;
  filter:blur(80px);pointer-events:none;
  will-change:transform,background;
  z-index:0;
}
.mafia-blob1{
  width:55%;height:70%;top:-10%;left:-5%;
  background:rgba(220,160,255,0.45);
  animation:mblob1 18s ease-in-out infinite alternate;
}
.mafia-blob2{
  width:50%;height:65%;bottom:-10%;right:-5%;
  background:rgba(160,190,255,0.4);
  animation:mblob2 22s ease-in-out infinite alternate;
}
.mafia-blob1.to-night{background:rgba(120,50,220,0.5);transition:background 1.6s ease}
.mafia-blob2.to-night{background:rgba(40,80,200,0.45);transition:background 1.6s ease}
.mafia-blob1.to-day{background:rgba(220,160,255,0.45);transition:background 1.6s ease}
.mafia-blob2.to-day{background:rgba(160,190,255,0.4);transition:background 1.6s ease}

@keyframes mblob1{
  0%  {transform:translate(0,0) scale(1)}
  33% {transform:translate(8%,12%) scale(1.05)}
  66% {transform:translate(-5%,18%) scale(.97)}
  100%{transform:translate(10%,5%) scale(1.03)}
}
@keyframes mblob2{
  0%  {transform:translate(0,0) scale(1)}
  33% {transform:translate(-10%,-8%) scale(1.04)}
  66% {transform:translate(5%,-15%) scale(.96)}
  100%{transform:translate(-8%,-5%) scale(1.06)}
}
@keyframes mpulse1{
  0%  {transform:translate(0,0) scale(1);filter:blur(80px) brightness(1)}
  30% {transform:translate(0,0) scale(1.3);filter:blur(60px) brightness(1.8)}
  60% {transform:translate(0,0) scale(1.15);filter:blur(70px) brightness(1.3)}
  100%{transform:translate(0,0) scale(1);filter:blur(80px) brightness(1)}
}
@keyframes mpulse2{
  0%  {transform:translate(0,0) scale(1);filter:blur(80px) brightness(1)}
  30% {transform:translate(0,0) scale(1.25);filter:blur(65px) brightness(1.7)}
  60% {transform:translate(0,0) scale(1.1);filter:blur(72px) brightness(1.2)}
  100%{transform:translate(0,0) scale(1);filter:blur(80px) brightness(1)}
}
.mafia-blob1.pulsing{animation:mpulse1 .7s ease-out forwards}
.mafia-blob2.pulsing{animation:mpulse2 .7s ease-out forwards}

/* ============================================================
   AURORA / BLOB ФОН — два слоя плавающих цветных пятен с blur,
   один дневной (розово-сиреневый) и один ночной (глубокий фиолет).
   Переключение через opacity transition — единственный надёжный
   способ плавно менять градиенты во всех браузерах включая Safari.
   Каждый слой живёт на отдельном ::before/::after псевдоэлементе,
   контент игры поверх них через position:relative z-index:1.
============================================================ */


.mafia-topbar{height:54px;flex-shrink:0;display:flex;align-items:center;padding:0 24px;gap:16px;background:rgba(255,255,255,0.55);backdrop-filter:blur(12px);border-bottom:1px solid rgba(200,180,240,0.3);transition:background .6s,border-color .6s;position:relative;z-index:2}
.mafia-screen.night .mafia-topbar{background:rgba(255,255,255,0.05);border-bottom-color:rgba(255,255,255,0.07)}
.mafia-logo{font-size:16px;font-weight:800;background:linear-gradient(135deg,#c0a0e0,#9060c8);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.mafia-phase-indicator{font-size:13px;font-weight:700;color:#3a2a4a;background:rgba(255,255,255,0.5);border:1px solid rgba(200,180,220,0.4);padding:5px 14px;border-radius:100px}
.mafia-screen.night .mafia-phase-indicator{background:rgba(255,255,255,0.07);border-color:rgba(255,255,255,0.12);color:#e8d5f0}
.mafia-timer{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums;color:#d08820;margin-left:2px}
.mafia-screen.night .mafia-timer{color:#c0a0e0;text-shadow:0 0 12px rgba(192,160,224,0.5)}
.mafia-topbar-sp{flex:1}
.mafia-leave-btn{height:34px;padding:0 16px;border-radius:100px;border:1.5px solid rgba(200,180,220,0.5);background:rgba(255,255,255,0.5);color:#7060a0;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit}

/* Кнопка-переключатель голосовой озвучки фаз — бесплатный браузерный
   SpeechSynthesis. Серая/приглушённая в выключенном состоянии (по
   умолчанию), подсвечивается фиолетовым при включении. */
.mafia-voice-toggle-btn{
  height:34px;width:34px;flex-shrink:0;
  border-radius:50%;border:1.5px solid rgba(200,180,220,0.5);
  background:rgba(255,255,255,0.5);
  font-size:15px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s,border-color .15s;
}
.mafia-voice-toggle-btn.active{
  background:rgba(144,96,200,0.18);border-color:rgba(144,96,200,0.5);
}
.mafia-screen.night .mafia-voice-toggle-btn{background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.15)}
.mafia-screen.night .mafia-voice-toggle-btn.active{background:rgba(192,160,224,0.22);border-color:rgba(192,160,224,0.5)}
.mafia-leave-btn:hover{background:rgba(255,255,255,0.8)}

.mafia-main{flex:1;min-height:0;display:flex;overflow:visible;position:relative;z-index:2}

/* LEFT — моя роль, подсказка действия, счёт живых/выбывших */
.mafia-left{width:260px;flex-shrink:0;display:flex;flex-direction:column;border-right:1px solid rgba(200,180,240,0.25);padding:16px 14px;gap:10px;overflow:hidden;transition:border-color .6s}
.mafia-screen.night .mafia-left{border-right-color:rgba(255,255,255,0.07)}

.mafia-my-card{border-radius:16px;padding:18px 16px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;background:rgba(255,255,255,0.6);border:1px solid rgba(200,180,240,0.3);backdrop-filter:blur(10px);transition:all .5s}
.mafia-screen.night .mafia-my-card{background:rgba(255,255,255,0.05);border-color:rgba(255,255,255,0.08)}
.mafia-my-card-label{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:0.7px;color:#9080b0;align-self:flex-start}
.mafia-screen.night .mafia-my-card-label{color:rgba(255,255,255,0.3)}
.mafia-role-icon{font-size:24px;width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(144,96,200,0.12)}
.mafia-role-name{font-size:15px;font-weight:800;color:#3a2a4a}
.mafia-screen.night .mafia-role-name{color:rgba(255,255,255,0.9)}
.mafia-role-hint{font-size:11px;color:#7060a0;line-height:1.4}
.mafia-screen.night .mafia-role-hint{color:rgba(255,255,255,0.45)}

.mafia-action-card{border-radius:12px;background:rgba(144,96,200,0.1);border:1px solid rgba(144,96,200,0.2);padding:14px;font-size:11.5px;color:#6a40a0;line-height:1.5}
.mafia-screen.night .mafia-action-card{color:#c0a0e0}

.mafia-alive-box{border-radius:12px;padding:12px 14px;background:rgba(255,255,255,0.5);border:1px solid rgba(200,180,240,0.25);display:flex;align-items:center;gap:10px;transition:all .5s;flex-shrink:0}
.mafia-screen.night .mafia-alive-box{background:rgba(255,255,255,0.05);border-color:rgba(255,255,255,0.07)}
.mafia-alive-divider{width:1px;height:36px;background:rgba(200,180,240,0.3)}
.mafia-screen.night .mafia-alive-divider{background:rgba(255,255,255,0.1)}
.mafia-alive-num{font-size:24px;font-weight:800;color:#3a9a4a}
.mafia-dead-num{font-size:24px;font-weight:800;color:#c0506a}
.mafia-alive-label{font-size:10.5px;font-weight:600;color:#9080b0}
.mafia-screen.night .mafia-alive-label{color:rgba(255,255,255,0.35)}

/* Лента событий в левой колонке */
.mafia-events-label{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:0.7px;color:#9080b0;flex-shrink:0;margin-top:2px}
.mafia-screen.night .mafia-events-label{color:rgba(255,255,255,0.3)}
.mafia-events-feed{flex:1;min-height:0;overflow-y:auto;padding:4px 4px;gap:5px;display:flex;flex-direction:column;scrollbar-width:thin;scrollbar-color:rgba(144,96,200,0.12) transparent}

/* CENTER — сетка игроков */
.mafia-center{flex:1;min-height:0;padding:14px 16px;display:flex;flex-direction:column;gap:12px;overflow-y:auto;overflow-x:visible}
.mafia-center-head{display:flex;align-items:center;gap:10px}
.mafia-center-title{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.6px;color:#9080b0}
.mafia-screen.night .mafia-center-title{color:rgba(255,255,255,0.3)}

.mafia-players-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;overflow:visible;align-content:start;padding:6px 4px}

.player-card{
  border-radius:20px;
  border:1.5px solid rgba(200,180,220,0.35);
  /* Цвет фона чуть плотнее, чем был под backdrop-filter — раз сам блюр
     убран (см. комментарий ниже), компенсируем визуальную "лёгкость"
     карточки чистой непрозрачностью фона, без эффекта размытия. */
  background:rgba(255,255,255,0.78);
  padding:20px 16px 16px;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  cursor:pointer;
  transition:transform .15s,box-shadow .15s,background .3s,border-color .3s;
  position:relative;
  /* will-change только на свойства самого hover-перехода — браузер
     заранее выделяет отдельный composite layer ИМЕННО под них, не
     трогая соседние карточки в сетке при их перерисовке. */
  will-change:transform,box-shadow;
}
.mafia-screen.night .player-card{background:rgba(35,25,55,0.55);border-color:rgba(255,255,255,0.08)}
.player-card:hover:not(.dead):not(.no-action){transform:translateY(-4px);box-shadow:0 10px 28px rgba(144,96,200,0.22)}
.player-card.voted-on{border-color:rgba(200,64,106,0.5);box-shadow:0 0 0 3px rgba(200,64,106,0.12)}
.player-card.dead{opacity:.42;cursor:default;filter:grayscale(.6)}
.player-card.dead::after{content:'☠️';position:absolute;top:8px;right:10px;font-size:15px}
.player-card.me{border-color:rgba(144,96,200,0.5);background:rgba(144,96,200,0.07)}
.mafia-screen.night .player-card.me{background:rgba(144,96,200,0.12);border-color:rgba(192,160,224,0.3)}
/* «Опасность» — мягкий красный ореол вокруг карточки, а не сплошная
   заливка. Видно только тому, у кого есть основания знать: своим
   сообщникам-мафии и детективу, который проверил и выяснил, что это мафия. */
.player-card.danger{
  border-color:rgba(200,64,106,0.45);
  background:rgba(200,64,106,0.05);
  box-shadow:0 0 0 1px rgba(200,64,106,0.15), 0 0 18px rgba(200,64,106,0.18);
}
.mafia-screen.night .player-card.danger{
  background:rgba(200,64,106,0.08);
  box-shadow:0 0 0 1px rgba(200,64,106,0.25), 0 0 20px rgba(200,64,106,0.28);
}
.player-card.danger .pc-avatar-ring{border-color:rgba(200,64,106,0.5)}

.pc-avatar{
  width:60px;height:60px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:24px;font-weight:800;color:#fff;
  box-shadow:0 4px 14px rgba(0,0,0,0.18);
  position:relative;
}
.pc-avatar-ring{position:absolute;inset:-4px;border-radius:50%;border:2.5px solid transparent}
.player-card.voted-on .pc-avatar-ring{border-color:rgba(200,64,106,0.7)}

.pc-name{font-size:13.5px;font-weight:800;color:#3a2a4a;text-align:center;word-break:break-word}
.mafia-screen.night .pc-name{color:rgba(255,255,255,0.9)}
.pc-status{font-size:10.5px;font-weight:600;color:#9080b0;text-align:center}
.mafia-screen.night .pc-status{color:rgba(255,255,255,0.35)}

.votes-row{display:flex;gap:4px;flex-wrap:wrap;justify-content:center;min-height:16px}

/* Подпись "N голосов" под пипсами — видна когда за карточку реально
   проголосовали (см. votesCountLabel в renderMafiaPlayersGrid). */
.votes-count-label{
  font-size:9.5px;font-weight:700;color:#a02050;text-align:center;
  margin-top:-2px;
}
.mafia-screen.night .votes-count-label{color:#f0a0b8}
.vote-pip{width:15px;height:15px;border-radius:50%;border:2px solid rgba(255,255,255,0.65);box-shadow:0 1px 5px rgba(0,0,0,0.18)}

.vote-btn,.target-btn{width:100%;height:32px;border-radius:9px;border:none;font-family:inherit;font-size:11px;font-weight:700;cursor:pointer;transition:all .12s}
.vote-btn{background:rgba(200,64,106,0.1);color:#c0506a;border:1px solid rgba(200,64,106,0.2)}
.vote-btn:hover{background:rgba(200,64,106,0.2)}
.target-btn{background:rgba(144,96,200,0.15);color:#9060c8;border:1px solid rgba(144,96,200,0.25)}
.target-btn:hover{background:rgba(144,96,200,0.27)}

/* RIGHT — единая лента (вкладки События/Чат). Фон ВСЕГДА светлый
   и полностью непрозрачный — чат не меняет цвет при смене дня/ночи
   на десктопе, иначе тёмный фон экрана просвечивает сквозь rgba и
   делает текст нечитаемым. На мобиле то же самое через медиа-правило. */
.mafia-right{width:340px;flex-shrink:0;display:flex;flex-direction:column;border-left:1px solid rgba(200,180,240,0.25);transition:border-color .6s,background .6s;overflow:hidden;background:rgba(255,255,255,0.55)}
.mafia-screen.night .mafia-right{border-left-color:rgba(255,255,255,0.07);background:rgba(20,10,40,0.7)}

/* Заголовок правой колонки — только чат */
.mafia-right-header{
  height:40px;flex-shrink:0;
  display:flex;align-items:center;gap:8px;
  padding:0 16px;
  font-size:11px;font-weight:700;color:#9080b0;
  border-bottom:1px solid rgba(200,180,240,0.25);
  position:relative;
}
.mafia-screen.night .mafia-right-header{color:rgba(255,255,255,0.3);border-bottom-color:rgba(255,255,255,0.07)}

/* Вкладки переключения каналов чата (Общий / Чат мафии) — видны только
   мафии и Стукачу, заменяют статичный заголовок "Чат" когда видны. */
.mafia-chat-channel-tabs{
  display:flex;flex-shrink:0;
  border-bottom:1px solid rgba(200,180,240,0.25);
}
.mafia-screen.night .mafia-chat-channel-tabs{border-bottom-color:rgba(200,180,240,0.25)}
.mafia-chat-channel-tab{
  flex:1;text-align:center;padding:10px 6px;
  font-size:10.5px;font-weight:700;color:#9080b0;
  cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;
  transition:color .15s,border-color .15s;
}
.mafia-screen.night .mafia-chat-channel-tab{color:rgba(255,255,255,0.6)}
.mafia-chat-channel-tab.active{color:#9060c8;border-bottom-color:#9060c8}
.mafia-screen.night .mafia-chat-channel-tab.active{color:#c0a0e0;border-bottom-color:#c0a0e0}
/* Вкладка "Чат мафии" подсвечена красноватым, когда активна — лёгкое
   визуальное напоминание, что это секретный канал, не общий. */
.mafia-chat-channel-tab:last-child.active{color:#c8406a;border-bottom-color:#c8406a}
.mafia-screen.night .mafia-chat-channel-tab:last-child.active{color:#f0a0b8;border-bottom-color:#f0a0b8}

/* Полоса-предупреждение об усыплении Клофелинщицей — видна только
   самому усыплённому игроку. На мобильном (≤900px) этот длинный текст
   ломает горизонтальную flex-полосу .mafia-left (см. @media ниже) —
   там вместо баннера показывается обычный alert() через JS один раз,
   а сам баннер скрыт полностью на этих экранах. */
.mafia-sedated-banner{
  display:flex;align-items:center;gap:6px;
  padding:9px 12px;border-radius:10px;
  background:rgba(200,64,106,0.1);border:1.5px solid rgba(200,64,106,0.3);
  color:#a02050;font-size:11px;font-weight:600;line-height:1.4;
  flex-shrink:0;
}
.mafia-screen.night .mafia-sedated-banner{background:rgba(200,64,106,0.18);color:#f0a0b8;border-color:rgba(200,64,106,0.4)}

/* Сердечко на аватарке — кого Клофелинщица усыпила прямо сейчас,
   публичная информация, видна ВСЕМ игрокам. */
.pc-nurse-heart{
  position:absolute;top:-4px;right:-4px;
  font-size:13px;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,0.3));
  animation:mafiaHeartPulse 1.2s ease-in-out infinite;
  /* Своя изолированная composite-прослойка — постоянно работающий
     scale() на нескольких карточках одновременно иначе может конфликтовать
     с hover-анимацией соседних .player-card за один и тот же слой
     браузера, что и даёт визуальные подёргивания/мерцания рядом. */
  will-change:transform;
}
@keyframes mafiaHeartPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
.player-card.nurse-target{border-color:rgba(232,120,160,0.5);box-shadow:0 0 0 1px rgba(232,120,160,0.2),0 0 16px rgba(232,120,160,0.22)}
.mafia-screen.night .player-card.nurse-target{box-shadow:0 0 0 1px rgba(232,120,160,0.3),0 0 18px rgba(232,120,160,0.3)}

/* Кнопка-тогл — скрыта на десктопе (≥901px), показывается внутри @media ниже.
   Это правило идёт ДО медиа-блоков, чтобы их display:flex могло его перебить. */
.mafia-chat-toggle-btn{display:none}

/* Точка-уведомление нового сообщения */
.mafia-tab-dot{
  width:8px;height:8px;border-radius:50%;
  background:linear-gradient(135deg,#e0607a,#c8406a);
  box-shadow:0 0 6px rgba(200,64,106,0.7);
  display:none;
  animation:mafiaDotPulse 1.5s ease-in-out infinite;
  flex-shrink:0;
}
.mafia-tab-dot.visible{display:block}
@keyframes mafiaDotPulse{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(1.3);opacity:0.7}
}

/* === ЛЕНТА СОБЫТИЙ === */
.mafia-feed{flex:1;min-height:0;overflow-y:auto;padding:10px 12px;display:flex;flex-direction:column;gap:6px;scrollbar-width:thin;scrollbar-color:rgba(144,96,200,0.15) transparent}

/* Событие: иконка в прямоугольнике + текст + время */
.mafia-event{display:flex;gap:9px;align-items:flex-start}
.mafia-ev-icon{
  width:30px;height:30px;border-radius:9px;
  flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-size:14px;margin-top:1px;
}
.mafia-ev-body{flex:1}
.mafia-ev-text{font-size:11.5px;font-weight:600;color:#3a2a4a;line-height:1.4}
.mafia-screen.night .mafia-ev-text{color:rgba(255,255,255,0.75)}
.mafia-ev-text b{color:#3a2a4a;font-weight:800}
.mafia-screen.night .mafia-ev-text b{color:rgba(255,255,255,0.95)}
.mafia-ev-time{font-size:9.5px;color:#a090b8;margin-top:1px}
.mafia-screen.night .mafia-ev-time{color:rgba(255,255,255,0.25)}

/* Негативное событие (ничья, перевыборы) — красная обводка + чуть
   более тёмный фон, чтобы выделяться среди обычных событий в ленте. */
.mafia-event.negative{
  background:rgba(200,64,106,0.07);
  border-radius:10px;
  border:1.5px solid rgba(200,64,106,0.35);
  padding:5px 7px;
}
.mafia-screen.night .mafia-event.negative{
  background:rgba(200,64,106,0.14);
  border-color:rgba(200,64,106,0.45);
}

/* Красное мигание всего игрового экрана — поверх основного фона,
   через псевдоэлемент чтобы не трогать transition фона самого экрана.
   Запускается JS-классом .flash-negative (см. mafiaFlashNegative в JS). */
.mafia-screen::after{
  content:'';
  position:absolute;inset:0;
  background:rgba(200,20,60,0);
  pointer-events:none;
  z-index:2000;
  transition:none;
}
.mafia-screen.flash-negative::after{
  animation:mafiaFlashRed .7s ease-out forwards;
}
@keyframes mafiaFlashRed{
  0%{background:rgba(200,20,60,0.38)}
  100%{background:rgba(200,20,60,0)}
}

/* Цвета подложек иконок событий по типу */
.mafia-ev-icon.ev-day   {background:rgba(245,200,66,0.15)}
.mafia-ev-icon.ev-night {background:rgba(144,96,200,0.15)}
.mafia-ev-icon.ev-vote  {background:rgba(200,64,106,0.12)}
.mafia-ev-icon.ev-kill  {background:rgba(200,64,106,0.15)}
.mafia-ev-icon.ev-heal  {background:rgba(106,191,122,0.15)}
.mafia-ev-icon.ev-detect{background:rgba(94,169,204,0.15)}
.mafia-ev-icon.ev-exile {background:rgba(200,64,106,0.12)}
.mafia-ev-icon.ev-start {background:rgba(144,96,200,0.12)}
.mafia-ev-icon.ev-info  {background:rgba(200,180,220,0.18)}
.mafia-ev-icon.ev-win   {background:rgba(245,200,66,0.2)}

/* === ЧАТ-МЕССЕНДЖЕР === */
.mafia-msg{display:flex;gap:8px;align-items:flex-end;margin-bottom:2px}
.mafia-msg-av{
  width:26px;height:26px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:800;color:#fff;
}
.mafia-bubble-wrap{display:flex;flex-direction:column;gap:2px;max-width:210px}
.mafia-msg-nick{font-size:9.5px;font-weight:700;margin-left:2px}
.mafia-bubble{
  background:rgba(255,255,255,0.65);
  border:1px solid rgba(200,180,240,0.3);
  border-radius:12px 12px 12px 3px;
  padding:7px 11px;
}
.mafia-screen.night .mafia-bubble{background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.15)}
.mafia-bubble-text{font-size:11.5px;color:#3a2a4a;line-height:1.4}


/* Статус локального («оптимистичного») сообщения до подтверждения сервером */
.mafia-msg.pending .mafia-bubble{opacity:.65}
.mafia-msg-status{font-size:9px;font-weight:600;margin-left:4px;white-space:nowrap}
.mafia-msg-status.pending-icon{color:#a090c0;animation:mafiaPendingBlink 1s ease-in-out infinite}
.mafia-msg-status.failed-icon{color:#c8406a;font-weight:700}
.mafia-msg.failed .mafia-bubble{background:rgba(200,64,106,0.08);border-color:rgba(200,64,106,0.3)}
@keyframes mafiaPendingBlink{0%,100%{opacity:1}50%{opacity:.3}}

/* Мессаджи «от себя» — справа, другой цвет пузыря. ВАЖНО: без
   flex-direction:row-reverse — DOM-порядок уже собран правильно в JS
   (для своих сообщений: сначала текст, потом аватарка, см.
   renderMafiaChatLog), row-reverse визуально переворачивал бы его ещё
   раз и давал обратный эффект (аватарка слева, текст справа вместо
   текст слева, аватарка справа — именно так, как должно быть). */
.mafia-msg.self{justify-content:flex-end}
.mafia-msg.self .mafia-bubble-wrap{align-items:flex-end}
.mafia-msg.self .mafia-bubble{
  background:rgba(144,96,200,0.15);
  border-color:rgba(144,96,200,0.25);
  border-radius:12px 12px 3px 12px;
}
.mafia-screen.night .mafia-msg.self .mafia-bubble{background:rgba(144,96,200,0.15);border-color:rgba(144,96,200,0.25)}

/* Сообщения «от мафии» — тёмно-красный акцент */
.mafia-msg.as-mafia .mafia-bubble{background:rgba(200,64,106,0.1);border-color:rgba(200,64,106,0.25)}
.mafia-screen.night .mafia-msg.as-mafia .mafia-bubble{background:rgba(200,64,106,0.1)}
.mafia-msg.as-mafia .mafia-bubble-text{color:#8a2040}
.mafia-screen.night .mafia-msg.as-mafia .mafia-bubble-text{color:#8a2040}

/* === ПОЛЕ ВВОДА ЧАТА === */
.mafia-chat-wrap{padding:10px 12px;border-top:1px solid rgba(200,180,240,0.25);display:flex;gap:8px;flex-shrink:0;align-items:center}
.mafia-screen.night .mafia-chat-wrap{border-top-color:rgba(200,180,240,0.25)}
.mafia-chat-inp{flex:1;height:34px;border-radius:8px;background:rgba(255,255,255,0.6);border:1.5px solid rgba(200,180,240,0.4);padding:0 12px;font-family:inherit;font-size:12px;color:#3a2a4a;outline:none;transition:border-color .12s}
.mafia-screen.night .mafia-chat-inp{background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.12);color:rgba(255,255,255,0.9)}
.mafia-chat-inp:focus{border-color:#9060c8}
.mafia-chat-inp::placeholder{color:#a090b8}
.mafia-screen.night .mafia-chat-inp::placeholder{color:rgba(255,255,255,0.3)}
.mafia-send-btn{width:34px;height:34px;border-radius:8px;background:linear-gradient(135deg,#c0a0e0,#9060c8);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(144,96,200,0.35);color:#fff;flex-shrink:0;font-size:14px;transition:filter .12s}
.mafia-send-btn:hover{filter:brightness(1.12)}
/* Переключатель «писать как мафия» */
.mafia-mode-toggle{height:30px;padding:0 8px;border-radius:7px;border:1.5px solid rgba(200,64,106,0.3);background:rgba(200,64,106,0.08);color:#a02050;font-size:9.5px;font-weight:700;cursor:pointer;font-family:inherit;flex-shrink:0;white-space:nowrap;transition:all .15s}
.mafia-mode-toggle.active{background:#c0506a;color:#fff;border-color:#c0506a}

/* ============================================================
   МОБИЛЬНАЯ АДАПТАЦИЯ
   Планшет (≤900px): правая панель уходит вниз под сетку
   Телефон (≤600px): всё в одну колонку, топбар упрощается
============================================================ */
@media (min-width:901px){
  .mafia-screen.night .mafia-bubble-text{color:rgba(255,255,255,0.9)}
  .mafia-screen.night .mafia-chat-inp{color:rgba(255,255,255,0.9)}
  .mafia-screen.night .mafia-chat-inp::placeholder{color:rgba(255,255,255,0.3)}
}

@media (max-width:900px){
  .mafia-main{flex-direction:column;overflow-y:auto;overflow-x:hidden}

  /* Левая — горизонтальная полоса вверху */
  .mafia-left{
    width:100%;flex-direction:row;flex-wrap:nowrap;
    border-right:none;border-bottom:1px solid rgba(200,180,240,0.2);
    padding:8px 12px;gap:8px;overflow:visible;align-items:stretch;
  }
  .mafia-screen.night .mafia-left{border-bottom-color:rgba(255,255,255,0.07)}

  /* Карточка роли — горизонтальная, та же высота что у alive-box */
  .mafia-my-card{flex-direction:row;align-items:center;gap:10px;padding:10px 14px;flex:1 1 0;min-width:0;border-radius:12px}
  .mafia-role-icon{width:34px;height:34px;font-size:17px;flex-shrink:0}
  .mafia-role-name{font-size:12.5px}
  .mafia-role-hint{display:none}

  /* Подсказка действия — скрываем на планшете, только телефон */
  .mafia-action-card{display:none}

  /* Баннер усыпления — скрыт на мобильном, ломает горизонтальную
     полосу .mafia-left длинным текстом. Вместо него — alert() через
     JS один раз за фазу, см. renderMafiaSedatedBanner в mafia-game.js. */
  .mafia-sedated-banner{display:none !important}

  /* Счётчик живых — та же высота что у карточки роли */
  .mafia-alive-box{flex:0 0 auto;padding:8px 14px;border-radius:12px}
  .mafia-alive-num,.mafia-dead-num{font-size:20px}

  /* События в левой — скрываем на планшете, места нет */
  .mafia-events-label,.mafia-events-feed{display:none}

  /* Центр — карточки */
  .mafia-center{min-height:0;overflow-y:auto;padding:12px 14px;flex-shrink:0}
  .mafia-players-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}

  /* Правая — выдвижная панель снизу */
  .mafia-right{
    position:fixed;bottom:0;left:0;right:0;z-index:200;
    width:100%;
    /* Полная высота всегда фиксирована — открытие/закрытие через transform,
       не через height. transform анимируется на GPU (composite-only),
       минуя layout и paint на каждый кадр — на телефоне это разница
       между рваной анимацией и по-настоящему плавной. */
    height:calc(320px + env(safe-area-inset-bottom,0px));
    padding-bottom:env(safe-area-inset-bottom,0px);
    border-left:none;border-top:1px solid rgba(200,180,240,0.3);
    border-radius:16px 16px 0 0;
    background:rgba(255,255,255,0.95);backdrop-filter:blur(12px);
    /* Сдвигаем вниз так, чтобы торчала только полоска-кнопка (40px) */
    transform:translateY(calc(320px - 40px));
    transition:transform .42s cubic-bezier(.22,1,.36,1);
    will-change:transform;
    overflow:hidden;
    box-shadow:0 -4px 24px rgba(100,60,140,0.13);
  }
  /* На мобильных чат ВСЕГДА остаётся светлым, даже ночью — намеренно.
     Причина: смена background при добавлении класса .night совпадает по
     времени с resize-перерисовкой viewport, когда системная клавиатура
     прячется — на некоторых телефонах это даёт заметную белую вспышку
     перед тем как тёмный фон применится. Раз чат — это panel поверх игры,
     а не часть игрового поля, его можно держать константно белым без
     потери атмосферы (только фон поля и карточки темнеют ночью). */
  .mafia-screen.night .mafia-right{
    background:rgba(255,255,255,0.95);
    border-top-color:rgba(200,180,240,0.3);
  }
  .mafia-right.expanded{transform:translateY(0)}
  /* Отступ снизу у центра чтобы чат (свёрнутый, 40px) не перекрывал
     последний ряд карточек — плюс safe-area для iPhone с домашней чертой */
  .mafia-center{padding-bottom:calc(56px + env(safe-area-inset-bottom,0px))}

  /* Текст чата на мобильном — всегда тёмный, раз фон панели остаётся
     светлым даже ночью (см. комментарий выше). Без этого десктопные
     ночные правила (светлый текст) делают сообщения нечитаемыми на
     светлом фоне. */
  .mafia-screen.night .mafia-right-header{color:#9080b0;border-bottom-color:rgba(200,180,240,0.25)}
  .mafia-screen.night .mafia-bubble{background:rgba(255,255,255,0.08);border-color:rgba(200,180,240,0.3)}
  .mafia-screen.night .mafia-bubble-text{color:#3a2a4a}
  .mafia-screen.night .mafia-msg.self .mafia-bubble{background:rgba(144,96,200,0.15);border-color:rgba(144,96,200,0.25)}
  .mafia-screen.night .mafia-chat-inp{background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.12);color:rgba(255,255,255,0.9)}
  .mafia-screen.night .mafia-chat-inp::placeholder{color:rgba(255,255,255,0.3)}
  .mafia-screen.night .mafia-chat-toggle-btn{color:#7060a0}
  .mafia-screen.night .mafia-msg.as-mafia .mafia-bubble-text{color:#8a2040}
  .mafia-screen.night .mafia-bubble.self,
  .mafia-screen.night .mafia-msg.self .mafia-bubble{background:rgba(144,96,200,0.15);border-color:rgba(144,96,200,0.25)}

  /* Кнопка-тогл чата — видна в этом же диапазоне, где чат стал выдвижным */
  .mafia-chat-toggle-btn{
    display:flex;align-items:center;justify-content:space-between;
    width:100%;height:40px;flex-shrink:0;
    padding:0 16px;
    background:transparent;border:none;cursor:pointer;
    font-family:inherit;font-size:12px;font-weight:700;color:#7060a0;
  }
  .mafia-chat-toggle-btn-label{display:flex;align-items:center;gap:7px}
  .mafia-chat-toggle-arrow{font-size:10px;transition:transform .3s;color:#9080b0}
  .mafia-right.expanded .mafia-chat-toggle-arrow{transform:rotate(180deg)}
  /* Заголовок обычного десктопного чата скрываем — заменён кнопкой-тоглом */
  .mafia-right-header{display:none}
  /* Feed, wrap и вкладки каналов — скрыты пока не expanded, без прыжков при открытии */
  .mafia-right:not(.expanded) .mafia-feed,
  .mafia-right:not(.expanded) .mafia-chat-wrap,
  .mafia-right:not(.expanded) .mafia-chat-channel-tabs{
    opacity:0;pointer-events:none;
  }
  .mafia-right .mafia-feed,.mafia-right .mafia-chat-wrap,.mafia-right .mafia-chat-channel-tabs{
    transition:opacity .2s;
  }
  .mafia-right.expanded .mafia-feed,
  .mafia-right.expanded .mafia-chat-wrap,
  .mafia-right.expanded .mafia-chat-channel-tabs{
    opacity:1;pointer-events:auto;
  }
}

@media (max-width:600px){
  /* Топбар — убираем лишнее */
  .mafia-topbar{padding:0 12px;gap:10px}
  .mafia-logo{display:none}
  .mafia-timer{font-size:18px;padding:0 8px}
  .mafia-leave-btn{padding:0 10px;font-size:11px}

  /* Левая полоса — только роль и счётчик */
  .mafia-left{padding:8px 12px;gap:6px}
  .mafia-my-card{padding:8px 10px;gap:8px}
  .mafia-role-icon{width:30px;height:30px;font-size:15px}
  .mafia-role-name{font-size:12px}
  .mafia-my-card-label{display:none}

  /* Сетка — 2 колонки */
  .mafia-players-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .mafia-center{padding:8px 10px calc(56px + env(safe-area-inset-bottom,0px)) 10px}

  /* Карточки — компактнее */
  .player-card{padding:12px 8px 10px;border-radius:14px;gap:6px}
  .pc-avatar{width:44px;height:44px;font-size:18px}
  .pc-name{font-size:12px}
  .pc-status{font-size:9.5px}
  .vote-btn,.target-btn{height:28px;font-size:10px}

  /* Чат — выдвижная панель (height управляется JS через .expanded) */
  .mafia-chat-inp{font-size:14px}

  /* Финальный экран */
  .mafia-finish-card{padding:24px 18px}
  .mafia-finish-title{font-size:18px}
}

/* Индикатор состояния соединения в углу игрового экрана — без него
   игрок не может отличить "сервер молчит, потому что сейчас не моя
   фаза/ход" от "связь оборвалась", оба выглядят одинаково как зависшая
   игра. Тот же подход, что и .mono-conn-status в монополии. */
.mafia-conn-status{position:fixed;top:10px;left:50%;transform:translateX(-50%);z-index:999;padding:7px 16px;border-radius:10px;font-size:12px;font-weight:700;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,0.2);display:flex}
.mafia-conn-status.reconnecting{background:#f5d020;color:#5a4a10;animation:mafiaConnPulse 1s infinite}
.mafia-conn-status.failed{background:#e0382a;color:#fff}
@keyframes mafiaConnPulse{0%,100%{opacity:1}50%{opacity:.6}}

.mafia-finish-overlay{position:fixed;inset:0;z-index:700;background:rgba(40,20,60,0.7);display:flex;align-items:center;justify-content:center;padding:20px}
.mafia-finish-card{background:#fff;border-radius:20px;padding:32px 28px;max-width:420px;width:100%;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,0.3)}
.mafia-finish-title{font-size:22px;font-weight:800;color:#3a2a4a;margin-bottom:18px}
.mafia-finish-roles{display:flex;flex-direction:column;gap:6px;margin-bottom:20px;text-align:left;font-size:12.5px;color:#5a4a6a}
.mafia-finish-role-row{display:flex;justify-content:space-between;padding:6px 10px;border-radius:8px;background:rgba(144,96,200,0.06)}

/* .to-night алиасы для плавного перехода (см. mafiaTransitionDayNight) */
.mafia-screen.to-night .mafia-topbar{background:rgba(255,255,255,0.05);border-bottom-color:rgba(255,255,255,0.07)}
.mafia-screen.to-night .mafia-phase-indicator{background:rgba(255,255,255,0.07);border-color:rgba(255,255,255,0.12);color:#e8d5f0}
.mafia-screen.to-night .mafia-timer{color:#c0a0e0;text-shadow:0 0 12px rgba(192,160,224,0.5)}
.mafia-screen.to-night .mafia-voice-toggle-btn{background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.15)}
.mafia-screen.to-night .mafia-voice-toggle-btn.active{background:rgba(192,160,224,0.22);border-color:rgba(192,160,224,0.5)}
.mafia-screen.to-night .mafia-left{border-right-color:rgba(255,255,255,0.07)}
.mafia-screen.to-night .mafia-my-card{background:rgba(255,255,255,0.05);border-color:rgba(255,255,255,0.08)}
.mafia-screen.to-night .mafia-my-card-label{color:rgba(255,255,255,0.3)}
.mafia-screen.to-night .mafia-role-name{color:rgba(255,255,255,0.9)}
.mafia-screen.to-night .mafia-role-hint{color:rgba(255,255,255,0.45)}
.mafia-screen.to-night .mafia-action-card{color:#c0a0e0}
.mafia-screen.to-night .mafia-alive-box{background:rgba(255,255,255,0.05);border-color:rgba(255,255,255,0.07)}
.mafia-screen.to-night .mafia-alive-divider{background:rgba(255,255,255,0.1)}
.mafia-screen.to-night .mafia-alive-label{color:rgba(255,255,255,0.35)}
.mafia-screen.to-night .mafia-events-label{color:rgba(255,255,255,0.3)}
.mafia-screen.to-night .mafia-center-title{color:rgba(255,255,255,0.3)}
.mafia-screen.to-night .player-card{background:rgba(35,25,55,0.55);border-color:rgba(255,255,255,0.08)}
.mafia-screen.to-night .player-card.me{background:rgba(144,96,200,0.12);border-color:rgba(192,160,224,0.3)}
.mafia-screen.to-night .player-card.danger{
  background:rgba(200,64,106,0.08);
  box-shadow:0 0 0 1px rgba(200,64,106,0.25), 0 0 20px rgba(200,64,106,0.28);
}
.mafia-screen.to-night .pc-name{color:rgba(255,255,255,0.9)}
.mafia-screen.to-night .pc-status{color:rgba(255,255,255,0.35)}
.mafia-screen.to-night .votes-count-label{color:#f0a0b8}
.mafia-screen.to-night .mafia-right{border-left-color:rgba(255,255,255,0.07)}
.mafia-screen.to-night .mafia-right-header{color:rgba(255,255,255,0.3);border-bottom-color:rgba(255,255,255,0.07)}
.mafia-screen.to-night .mafia-chat-channel-tabs{border-bottom-color:rgba(255,255,255,0.07)}
.mafia-screen.to-night .mafia-chat-channel-tab{color:rgba(255,255,255,0.35)}
.mafia-screen.to-night .mafia-chat-channel-tab.active{color:#c0a0e0;border-bottom-color:#c0a0e0}
.mafia-screen.to-night .mafia-chat-channel-tab:last-child.active{color:#f0a0b8;border-bottom-color:#f0a0b8}
.mafia-screen.to-night .mafia-sedated-banner{background:rgba(200,64,106,0.18);color:#f0a0b8;border-color:rgba(200,64,106,0.4)}
.mafia-screen.to-night .player-card.nurse-target{box-shadow:0 0 0 1px rgba(232,120,160,0.3),0 0 18px rgba(232,120,160,0.3)}
.mafia-screen.to-night .mafia-ev-text{color:rgba(255,255,255,0.75)}
.mafia-screen.to-night .mafia-ev-text b{color:rgba(255,255,255,0.95)}
.mafia-screen.to-night .mafia-ev-time{color:rgba(255,255,255,0.25)}
.mafia-screen.to-night .mafia-event.negative{
  background:rgba(200,64,106,0.14);
  border-color:rgba(200,64,106,0.45);
}
.mafia-screen.to-night .mafia-bubble{background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.1)}
.mafia-screen.to-night .mafia-msg.self .mafia-bubble{background:rgba(144,96,200,0.22)}
.mafia-screen.to-night .mafia-msg.as-mafia .mafia-bubble{background:rgba(200,64,106,0.18)}
.mafia-screen.to-night .mafia-chat-wrap{border-top-color:rgba(255,255,255,0.07)}
.mafia-screen.to-night .mafia-chat-inp{background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.1);color:rgba(255,255,255,0.85)}
.mafia-screen.to-night .mafia-chat-inp::placeholder{color:rgba(255,255,255,0.2)}
.mafia-screen.to-night .mafia-left{border-bottom-color:rgba(255,255,255,0.07)}
.mafia-screen.to-night .mafia-right{
    border-top-color:rgba(200,180,240,0.3);
  }
.mafia-screen.to-night .mafia-right-header{color:#9080b0;border-bottom-color:rgba(200,180,240,0.25)}
.mafia-screen.to-night .mafia-bubble{background:rgba(255,255,255,0.65);border-color:rgba(200,180,240,0.3)}
.mafia-screen.to-night .mafia-msg.self .mafia-bubble{background:rgba(144,96,200,0.15);border-color:rgba(144,96,200,0.25)}
.mafia-screen.to-night .mafia-chat-toggle-btn{color:#7060a0}
.mafia-screen.to-night .mafia-bubble.self,
  .mafia-screen.to-night .mafia-msg.self .mafia-bubble{background:rgba(144,96,200,0.15);border-color:rgba(144,96,200,0.25)}