/* Цитадели и Мафия — оформление веб-клиента.
 *
 * Дизайн-токены один в один повторяют iOS-приложение, чтобы два клиента
 * читались как один продукт. Светлая и тёмная схемы переключаются системной
 * настройкой: у настольной игры нет «своей» темы, игрок вечером сидит с
 * выключенным светом, а днём — на солнце, поэтому выбор отдан системе.
 *
 * Важно: панели только непрозрачные (--surface). Полупрозрачные подложки и
 * backdrop-filter на светлом фоне выцветают, и текст перестаёт читаться.
 *
 * Экраны «Мафии» собраны из тех же классов, что и «Цитадели» (.card, .btn,
 * .opt, .player, .turnbar, .log, .score): одинаковые вещи должны выглядеть
 * одинаково, а не «примерно похоже». Новые классы ниже — только там, где у
 * «Цитаделей» аналога нет: переключатель настройки, карта роли, погибший
 * игрок, отсчёт времени и результат проверки. */

/* Тема: `data-theme` на <html> выставляет скрипт в <head> (без мигания при
   загрузке) и переключатель в интерфейсе. Значения по умолчанию — светлые:
   систему определяет скрипт и подставляет нужное значение сразу. */
:root {

  /* Светлая схема */
  --bg: #F2F1F4;
  --surface: #FFFFFF;
  --hairline: #E0DEE4;
  --text: #17161F;
  --muted: #666470;
  --accent: #D9174D;
  --accent2: #D13808;
  --danger: #D92957;
  --spy: #05733F;
  /* Текст поверх акцентной заливки. В светлой схеме акценты тёмные — белый
     даёт 4,9–6,7:1. В тёмной они яркие, и белый на них не читается (минт
     2,1:1, оранжевый край градиента 2,35:1), поэтому там текст почти
     чёрный: 4,9–6,8:1. То же решение, что в iOS (`Theme.onAccent`). */
  --on-accent: #FFFFFF;
  /* Цвет управляющих элементов — рамок невыбранных вариантов, переключателей.
     Волосяная линия (`--hairline`) для них слишком бледная: 1,34:1 в светлой
     схеме и 1,66:1 в тёмной, при пороге 3:1 для нетекстовых элементов. */
  --control: #7C7A87;

  --shadow: 0 8px 18px rgba(23, 22, 31, 0.07), 0 1px 2px rgba(23, 22, 31, 0.05);

  /* Цвета кварталов: одинаковы в обеих схемах — это цвет карты, а не темы */
  --d-yellow: #F2C733;
  --d-blue: #4C9BE8;
  --d-green: #4CAF50;
  --d-red: #E5484D;
  --d-purple: #9B51E0;

  --r-card: 14px;
  --r-btn: 16px;
  --r-chip: 10px;
  --tap: 44px; /* минимальная цель нажатия */
  --pad: 16px;
  --maxw: 760px;
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #121216;
  --surface: #21212B;
  --hairline: #42444F;
  --text: #F7F7FF;
  --muted: #A1A3BF;
  --accent: #FF3366;
  --accent2: #FF6619;
  --danger: #F04770;
  --spy: #00CC66;
  --on-accent: #12121A;
  --control: #7A7B8A;

  --shadow: 0 10px 22px rgba(0, 0, 0, 0.38);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.4;
  -webkit-tap-highlight-color: transparent;
  caret-color: var(--accent);
}

/* Мелочи браузерного слоя — выделение, скроллбар — тоже часть системы. */
::selection { background: var(--accent); color: var(--on-accent); }
* { scrollbar-color: var(--hairline) transparent; scrollbar-width: thin; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: var(--hairline);
  border-radius: 8px;
  border: 3px solid var(--bg);
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

.app {
  max-width: var(--maxw);
  margin: 0 auto;
  padding:
    calc(env(safe-area-inset-top) + 12px)
    calc(env(safe-area-inset-right) + var(--pad))
    calc(env(safe-area-inset-bottom) + 20px)
    calc(env(safe-area-inset-left) + var(--pad));
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 100dvh;
}

/* --- типографика --- */

h1, h2, h3 { margin: 0; line-height: 1.2; }
h1 { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; }
h2 { font-size: 17px; font-weight: 700; }
h3 { font-size: 15px; font-weight: 700; }
p { margin: 0; }

.meta { font-size: 13px; color: var(--muted); }
.meta--center { text-align: center; }
.tnum { font-variant-numeric: tabular-nums; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- карточки и секции --- */

.card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  padding: 14px;
}

.section { display: flex; flex-direction: column; gap: 10px; }
.section__title {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.02em;
  text-transform: uppercase; color: var(--muted);
}
.section__title .spacer { flex: 1; }

.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.row--tight { gap: 6px; }
.stack { display: flex; flex-direction: column; gap: 10px; }

/* --- кнопки --- */

.btn {
  min-height: var(--tap);
  padding: 11px 16px;
  border-radius: var(--r-btn);
  border: 1px solid transparent;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  background: var(--surface);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  transition: transform 0.12s ease, filter 0.12s ease, opacity 0.12s ease;
}

.btn--primary {
  background: linear-gradient(to bottom right, var(--accent), var(--accent2));
  color: var(--on-accent);
  border-color: transparent;
}
.btn--secondary { background: var(--surface); border-color: var(--hairline); }
.btn--danger { background: var(--surface); border-color: var(--danger); color: var(--danger); }
.btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--muted);
  font-weight: 600;
  font-size: 15px;
}
.btn--block { width: 100%; }
.btn--sm { min-height: var(--tap); padding: 8px 12px; font-size: 14px; }

.btn:not(:disabled):active { transform: scale(0.985); }
.btn:not(:disabled):hover { filter: brightness(1.04); }
.btn--secondary:not(:disabled):hover { border-color: var(--muted); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* Кнопки-опции: персонаж, цель, карта из выдачи — крупная цель на всю ширину. */
.opt {
  width: 100%;
  min-height: var(--tap);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--control);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  font: inherit;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.12s ease, transform 0.12s ease;
}
.opt:hover:not(:disabled) { border-color: var(--accent); }
.opt:active:not(:disabled) { transform: scale(0.99); }
.opt:disabled { opacity: 0.45; cursor: not-allowed; }
.opt--on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent) inset, var(--shadow); }
.opt__emoji { font-size: 24px; line-height: 1; flex: none; }
.opt__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.opt__title { font-weight: 700; font-size: 16px; overflow-wrap: anywhere; }
.opt__hint { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.opt__aside { flex: none; font-weight: 700; color: var(--accent); }
.opt__check { flex: none; font-size: 18px; font-weight: 800; color: var(--accent); }

/* --- вход и лобби --- */

.hero { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px 0 6px; }
.hero__emoji { font-size: 52px; line-height: 1; }
.hero__tag { color: var(--muted); font-size: 14px; text-align: center; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field > label { font-size: 13px; font-weight: 600; color: var(--muted); }
.input {
  min-height: var(--tap);
  width: 100%;
  padding: 10px 12px;
  font: inherit;
  font-size: 16px; /* 16px обязателен: иначе iOS Safari зумит страницу при фокусе */
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 12px;
}
.input:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.input--code {
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-weight: 700;
  font-size: 20px;
  text-align: center;
}

.roomcode {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 0 2px;
}
.roomcode__value {
  font-size: 44px; font-weight: 800; letter-spacing: 0.16em;
  line-height: 1.1; color: var(--accent); text-indent: 0.16em;
  font-variant-numeric: tabular-nums;
}
.roomcode__label { font-size: 13px; color: var(--muted); }

.players { display: flex; flex-direction: column; gap: 8px; }
.player {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
}
.player--acting { border-color: var(--accent); }
.player--me { border-color: var(--accent); border-width: 2px; padding: 9px 11px; }
.player__icon { flex: none; display: flex; color: var(--muted); }
.player__icon--crown { color: var(--accent); }
.player__name {
  font-weight: 700; min-width: 0; flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.player__gold { flex: none; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
.player__count { flex: none; font-size: 13px; font-weight: 700; color: var(--muted); }
.player__body { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.player__head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.badge-turn {
  flex: none; font-size: 11px; font-weight: 800; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--on-accent);
  background: linear-gradient(to bottom right, var(--accent), var(--accent2));
  padding: 3px 7px; border-radius: 999px;
}

/* --- город и рука --- */

.city { display: flex; flex-wrap: wrap; gap: 4px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  max-width: 100%;
  padding: 3px 8px 3px 6px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-chip);
  background: var(--bg);
  font-size: 12px;
  line-height: 1.5;
}
.chip__dot { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.chip__name { overflow-wrap: anywhere; }
.chip__cost { color: var(--muted); font-weight: 700; font-variant-numeric: tabular-nums; flex: none; }
.chip--keep { border-color: var(--accent); }
.chip--big { font-size: 13px; padding: 6px 10px 6px 8px; }

.hand { display: flex; flex-wrap: wrap; gap: 8px; }
.handcard {
  flex: 1 1 128px;
  max-width: 100%;
  min-height: var(--tap);
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px;
  text-align: left;
  font: inherit; color: var(--text);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-left: 5px solid var(--card-color, var(--hairline));
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: border-color 0.12s ease, transform 0.12s ease;
}
.handcard:disabled { opacity: 0.5; cursor: not-allowed; }
.handcard:not(:disabled):active { transform: scale(0.99); }
.handcard--on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent), var(--shadow); }
.handcard__top { display: flex; align-items: baseline; gap: 6px; }
.handcard__name { font-weight: 700; font-size: 14px; overflow-wrap: anywhere; }
.handcard__cost { margin-left: auto; font-weight: 800; color: var(--accent); flex: none; }
.handcard__rule { font-size: 11px; color: var(--muted); overflow-wrap: anywhere; }

/* --- шапка партии --- */

.topbar {
  display: flex; align-items: center; gap: 10px;
  /* На 320 px в строку не помещаются название, значок раунда, тема и связь:
     переносим, а не вылезаем за экран (переполнение ломало горизонтальную
     прокрутку на узких телефонах). */
  flex-wrap: wrap; row-gap: 8px;
  padding: 2px 0 2px;
}
.topbar__title { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; }
.topbar__spacer { flex: 1; }
/* Переключатель темы: системная → светлая → тёмная. */
.theme-btn {
  flex: none; width: var(--tap); height: var(--tap);
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--control); border-radius: 999px;
  background: var(--surface); color: var(--text);
  cursor: pointer; padding: 0;
}
.theme-btn:active { transform: scale(0.96); }
.theme-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.toprow { display: flex; align-items: center; gap: 10px; padding-top: 6px; }
.round-badge {
  font-size: 13px; font-weight: 700; color: var(--accent);
  border: 1px solid var(--hairline); border-radius: 999px;
  padding: 4px 10px; background: var(--surface);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.conn {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--muted);
}
.conn__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none; }
.conn--open .conn__dot { background: var(--spy); }
.conn--offline .conn__dot, .conn--reconnecting .conn__dot, .conn--connecting .conn__dot {
  background: var(--danger);
  animation: pulse 1.4s ease-in-out infinite;
}

.turnbar {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
}
.turnbar--me { border-color: var(--accent); }
.turnbar__char { font-size: 26px; line-height: 1; flex: none; }
/* flex: 1 нужен «Мафии»: рядом с текстом фазы стоит отсчёт времени, и он
   должен уезжать к правому краю, а не липнуть к заголовку. */
.turnbar__text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.turnbar__who { font-weight: 700; overflow-wrap: anywhere; }
.turnbar__what { font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }

/* --- панель действий --- */

.actions {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px;
  margin-top: 2px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  /* Нижний отступ — «домашняя» полоса жестов на Android/iPhone */
  margin-bottom: calc(env(safe-area-inset-bottom) * -1 + 4px);
}
/* Заголовок шага и подсказка — в столбик: на 320 px в строку они не помещаются
   и заголовок «Выберите персонажа» рвался посередине. */
.actions__head { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.actions__title { font-size: 16px; font-weight: 800; }
.actions__hint { font-size: 12.5px; color: var(--muted); }
.actions__row { display: flex; gap: 10px; flex-wrap: wrap; }
.actions__row > .btn { flex: 1 1 140px; }

.waiting {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 18px 10px; text-align: center;
}
.waiting__dots { display: inline-flex; gap: 5px; }
.waiting__dots i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--muted);
  animation: pulse 1.4s ease-in-out infinite;
}
.waiting__dots i:nth-child(2) { animation-delay: 0.18s; }
.waiting__dots i:nth-child(3) { animation-delay: 0.36s; }
.waiting__text { font-weight: 600; color: var(--muted); }

@keyframes pulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

/* --- журнал --- */

.log { display: flex; flex-direction: column; gap: 6px; }
.log__last { font-size: 14px; font-weight: 600; }
.log__list {
  display: flex; flex-direction: column; gap: 4px;
  max-height: 190px; overflow-y: auto;
  border-top: 1px solid var(--hairline); padding-top: 8px; margin-top: 2px;
}
.log__entry { font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.log__entry:first-child { color: var(--text); }

/* --- финал --- */

.scores { display: flex; flex-direction: column; gap: 8px; }
.score {
  display: flex; align-items: center; gap: 12px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
}
.score--winner { border-color: var(--accent); border-width: 2px; padding: 11px; }
.score__rank { flex: none; width: 22px; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }
.score__rank--winner { color: var(--accent); }
.score__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.score__name { font-weight: 700; overflow-wrap: anywhere; }
.score__detail { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
/* Сторона роли: мафия, город, одиночка. Цвет — тот же, что у карточки роли. */
.score--mafia .score__detail { color: var(--danger); font-weight: 700; }
.score--city .score__detail { color: var(--spy); font-weight: 700; }
.score--solo .score__detail { color: var(--accent); font-weight: 700; }
.score__points {
  flex: none; font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.score--winner .score__points { color: var(--accent); }

/* --- «Мафия»: роли, настройки, ночь и день --- */

/* Переключатель настройки в лобби. Кнопка, а не чекбокс: цель нажатия та же,
   что у остальных кнопок (44 px), и её видно в общем списке целей. */
.toggle {
  width: 100%;
  min-height: var(--tap);
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  text-align: left;
  font: inherit; color: var(--text);
  background: var(--surface);
  border: 1px solid var(--control);
  border-radius: var(--r-card);
  cursor: pointer;
}
.toggle:active { transform: scale(0.99); }
.toggle__box {
  flex: none; width: 46px; height: 28px; border-radius: 999px;
  background: var(--bg); border: 1px solid var(--hairline);
  display: inline-flex; align-items: center; padding: 2px;
}
.toggle__box > i {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--muted);
  transition: transform 0.16s ease, background 0.16s ease;
}
.toggle--on { border-color: var(--accent); }
.toggle--on .toggle__box { background: var(--accent); border-color: var(--accent); }
.toggle--on .toggle__box > i { background: #fff; transform: translateX(18px); }
.toggle__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.toggle__title { font-weight: 700; font-size: 15px; overflow-wrap: anywhere; }
.toggle__hint { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }

/* Карта роли: крупная на раздаче, компактная в своей колонке. Цвет рамки —
   сторона роли, а не тема: у мафии красная, у одиночки-маньяка лиловая. */
.rolecard {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px;
  border: 2px solid var(--hairline);
  border-radius: var(--r-card);
  background: var(--bg);
}
.rolecard--mafia { border-color: var(--danger); }
.rolecard--solo { border-color: var(--d-purple); }
.rolecard--city { border-color: var(--spy); }
.rolecard__emoji { font-size: 40px; line-height: 1; flex: none; }
.rolecard--compact .rolecard__emoji { font-size: 30px; }
.rolecard__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rolecard__name { font-size: 18px; font-weight: 800; overflow-wrap: anywhere; }
.rolecard__hint { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.rolecard__friends { font-size: 13px; font-weight: 700; color: var(--danger); overflow-wrap: anywhere; }

/* Результат проверки комиссара — личный и одноразовый, поэтому подложка
   цветная: его нельзя перепутать с обычной строкой журнала. */
.check {
  padding: 10px 12px; border-radius: var(--r-chip);
  font-weight: 700; font-size: 14px; overflow-wrap: anywhere;
}
.check--mafia { background: var(--danger); color: var(--on-accent); }
.check--clean { background: var(--spy); color: var(--on-accent); }

/* Погибший: тот же игрок в списке, но заметно «выключенный». */
.player--dead { opacity: 0.55; }
.player--dead .player__name { text-decoration: line-through; }

/* Отсчёт фазы — подсказка, а не источник правды: таймеры живут на сервере. */
.countdown {
  flex: none; align-self: center;
  font-size: 15px; font-weight: 800; color: var(--accent);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* «Ваш голос принят» — заметная строка, к ней возвращаются глазами. */
.vote-done {
  padding: 10px 12px; border-radius: var(--r-chip);
  background: var(--bg); border: 1px solid var(--spy);
  font-size: 14px; overflow-wrap: anywhere;
}

/* --- баннер ошибки и тосты --- */

.banner {
  position: fixed; left: 50%; transform: translateX(-50%);
  top: calc(env(safe-area-inset-top) + 10px);
  z-index: 50;
  width: min(560px, calc(100vw - 24px));
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--danger);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  color: var(--text);
}
.banner[hidden] { display: none; }
.banner__text { flex: 1; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.banner__retry {
  flex: none; min-height: var(--tap); padding: 0 12px;
  border: 1px solid var(--control); border-radius: 10px;
  background: var(--surface); color: var(--text);
  font: inherit; font-weight: 700; font-size: 14px; cursor: pointer;
}
.banner__retry[hidden] { display: none; }
.banner__retry:active { transform: scale(0.98); }
.banner__close {
  /* 44 px — минимальная цель касания: 32 px в углу требовали попадания. */
  flex: none; width: var(--tap); height: var(--tap); margin: -8px -8px 0 0;
  border: 0; background: transparent; color: var(--muted);
  font-size: 20px; line-height: 1; cursor: pointer; border-radius: 8px;
}
.banner--info { border-color: var(--hairline); }

.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom) + 18px);
  z-index: 60;
  padding: 10px 16px;
  background: var(--text); color: var(--bg);
  border-radius: 999px; font-size: 14px; font-weight: 700;
  box-shadow: var(--shadow);
  animation: rise 0.18s ease-out;
}
@keyframes rise { from { opacity: 0; transform: translate(-50%, 8px); } }

/* --- раскладка партии --- */

/* На телефоне — одна колонка; на широком экране — две (см. медиазапрос ниже).
   min-width: 0 обязателен: без него длинные имена игроков распирают грид-колонку
   и появляется горизонтальная прокрутка. */
.wide { display: flex; flex-direction: column; gap: 12px; }
.wide__col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

@media (min-width: 900px) {
  /* На широком экране колонка в 760 px выглядит сиротливо: доска игры
     спокойно держит две колонки и большую ширину. */
  :root { --pad: 20px; --maxw: 1040px; }
  .app { gap: 14px; }
  .wide {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 14px;
    align-items: start;
  }
  .actions { position: static; margin-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* --- конфетти на итогах «Мафии» ------------------------------------------
   Праздник засчитывается только выигравшей стороне и не мешает интерфейсу:
   слой не ловит касания, а нижняя треть экрана замаскирована — там кнопки
   «Ещё партию» и «Выйти». При системном «уменьшении движения» конфетти не
   создаётся вовсе (см. app.js): застывшие на месте фигуры выглядели бы
   сломанной вёрсткой. */
.confetti {
  position: fixed; inset: 0; z-index: 40; pointer-events: none;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 60%, transparent 85%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 60%, transparent 85%);
}
.confetti__piece {
  position: absolute; top: -40px; font-size: 22px; line-height: 1;
  animation: confetti-fall linear forwards;
}
@keyframes confetti-fall {
  from { transform: translateY(0) rotate(0deg); }
  to { transform: translateY(105vh) rotate(540deg); }
}

/* --- реклама сети FLAUNT -------------------------------------------------- */

/* Слот живёт между очками и кнопками экрана результата. Пока сеть не
   ответила или ответила «рекламы нет», блок пуст и места не занимает:
   пустая рамка с подписью «Реклама» читалась бы как сломанное объявление. */
.ad-slot {
  display: block;
  margin: 0 0 14px;
}

.ad-slot:empty {
  display: none;
}

/* Карточку объявления тег верстает инлайновыми стилями, чтобы она выглядела
   одинаково на любом сайте. Тема игры её не переопределяет намеренно:
   чужой блок не должен зависеть от наших переменных. */
.ad-slot > * {
  border-radius: 16px;
}