:root {
  --bg: #f4f5fa;
  --surface: #ffffff;
  --surface-2: #f8f9fc;
  --text: #1c2030;
  --muted: #6b7186;
  --border: #e2e5ee;
  --accent: #4f46e5;
  --accent-hover: #4338ca;
  --accent-soft: #eef0ff;
  --accent-text: #ffffff;
  --success: #15803d;
  --success-soft: #e8f7ee;
  --danger: #dc2626;
  --table: #e9ecf8;
  --table-border: #d5daf0;
  --shadow: 0 1px 2px rgba(20, 24, 40, 0.06), 0 4px 16px rgba(20, 24, 40, 0.06);
  --shadow-lg: 0 10px 40px rgba(20, 24, 40, 0.16);
  --radius: 14px;
  /* "Twemoji Country Flags" подключается скриптом только там, где система не рисует флаги (Windows),
     и покрывает лишь символы флагов — остальной текст рисуется следующими шрифтами. */
  --font: "Twemoji Country Flags", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1117;
    --surface: #181b24;
    --surface-2: #1e222d;
    --text: #e8eaf1;
    --muted: #9aa0b5;
    --border: #2b303e;
    --accent: #818cf8;
    --accent-hover: #a5b4fc;
    --accent-soft: #262a4f;
    --accent-text: #0f1117;
    --success: #4ade80;
    --success-soft: #16301f;
    --danger: #f87171;
    --table: #1b1f2e;
    --table-border: #2d3350;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.25);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.5);
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }

button, input { font: inherit; color: inherit; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.btn:hover { border-color: var(--accent); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
}
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn.block { width: 100%; padding: 13px 16px; font-size: 1.02rem; }
.btn.ghost { background: transparent; }

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

/* ---------- forms ---------- */

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.field-label { font-size: 0.88rem; font-weight: 600; color: var(--muted); }

.input {
  width: 100%;
  padding: 11px 13px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.input.mono { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; letter-spacing: 0.04em; }

.input-row { display: flex; gap: 8px; }
.input-row .input { flex: 1; min-width: 0; }

.hint { font-size: 0.84rem; color: var(--muted); margin: 0; }
.error { color: var(--danger); font-size: 0.9rem; margin: 0 0 14px; min-height: 0; }
.error:empty { display: none; }

/* toggle switch */
.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  cursor: pointer;
}
.toggle-text { display: flex; flex-direction: column; }
.toggle-title { font-weight: 600; }
.toggle-sub { font-size: 0.84rem; color: var(--muted); }

.switch { position: relative; width: 46px; height: 26px; flex-shrink: 0; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch-track {
  position: absolute; inset: 0;
  border-radius: 999px;
  background: var(--border);
  transition: background 0.2s;
  pointer-events: none;
}
.switch-track::after {
  content: "";
  position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s;
}
.switch input:checked + .switch-track { background: var(--accent); }
.switch input:checked + .switch-track::after { transform: translateX(20px); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Выпадающий список колод: кнопка в стиле полей формы и всплывающий список, где под каждой
   колодой её карты. Стрелка нарисована рамкой и берёт цвет темы через currentColor. */
.deck-select { position: relative; }
.deck-trigger {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.deck-trigger:hover { border-color: var(--accent); }
.deck-trigger:focus-visible,
.deck-trigger[aria-expanded="true"] { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.deck-option-body { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.deck-option-name { font-weight: 600; }
.deck-chevron {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  margin: 0 4px 4px 0;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform 0.15s;
}
.deck-trigger[aria-expanded="true"] .deck-chevron { margin: 4px 4px 0 0; transform: rotate(-135deg); }
.deck-list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 20;
  display: grid;
  gap: 4px;
  max-height: min(380px, 60vh);
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  list-style: none;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  animation: tool-panel-in 0.12s ease-out;
}
.deck-list:focus { outline: none; }
.deck-option {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 9px;
  cursor: pointer;
}
.deck-option.active { background: var(--surface-2); }
.deck-option[aria-selected="true"] { border-color: var(--accent); background: var(--accent-soft); }
.deck-option[aria-selected="true"] .deck-option-name::after { content: " ✓"; color: var(--accent); }
.deck-preview { display: flex; flex-wrap: wrap; gap: 4px; }
.deck-preview span.deck-preview-note {
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  font-size: 0.82rem;
  font-weight: 400;
  text-align: left;
  color: var(--muted);
}
.deck-preview span {
  min-width: 26px;
  padding: 2px 6px;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
}

/* ---------- home ---------- */

.home {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 48px 16px;
}
.hero { text-align: center; margin-bottom: 28px; }
.hero-logo { font-size: 3rem; line-height: 1; }
.hero h1 { margin: 12px 0 6px; font-size: 2rem; letter-spacing: -0.02em; }
.hero p { margin: 0; color: var(--muted); }

.panel {
  width: 100%;
  max-width: 480px;
  padding: 26px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

/* Текст о сервисе под формой — свёрнутые панели той же ширины и в том же стиле, что и форма. */
.home-info {
  display: grid;
  gap: 10px;
  width: 100%;
  max-width: 480px;
  margin-top: 28px;
  line-height: 1.6;
}
.info-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.info-panel summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 20px;
  border-radius: var(--radius);
  cursor: pointer;
  list-style: none;
}
.info-panel summary::-webkit-details-marker { display: none; }
.info-panel summary:hover h2 { color: var(--accent); }
.info-panel summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Стрелка — как у списка колод: рамка, поворачивается при раскрытии. */
.info-panel summary::after {
  content: "";
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  margin: 0 4px 4px 0;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform 0.15s;
}
.info-panel[open] summary::after { margin: 4px 4px 0 0; transform: rotate(-135deg); }
.info-panel h2 { margin: 0; font-size: 1rem; font-weight: 600; transition: color 0.12s; }
.info-body { padding: 0 20px 18px; }
.home-info h3 { margin: 14px 0 2px; font-size: 0.95rem; }
.home-info h3:first-child { margin-top: 0; }
.home-info p { margin: 0; color: var(--muted); }
.home-info strong { color: var(--text); }
.home-steps,
.home-features { margin: 0; padding-left: 22px; color: var(--muted); }
.home-steps li,
.home-features li { margin: 6px 0; }

.credits {
  margin-top: 24px;
  max-width: 480px;
  text-align: center;
  font-size: 0.78rem;
  color: var(--muted);
}
.credits a { color: inherit; }

/* ---------- room ---------- */

.room-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.brand { font-weight: 700; color: var(--text); text-decoration: none; white-space: nowrap; }
.room-title { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 8px; }
.room-title h1 {
  margin: 0;
  font-size: 1.1rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.connection-banner {
  padding: 8px 16px;
  text-align: center;
  font-size: 0.9rem;
  background: var(--accent-soft);
  color: var(--text);
}

.room-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  padding: 28px 16px 240px;
}

/* Места за столом. По умолчанию (узкий экран, слишком много игроков) — ряды над столом. */
.table-area {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

.participants {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px 14px;
  max-width: 960px;
}

/* Игроки вокруг стола: размеры и координаты мест считает room.js (layoutSeats). */
.table-area.around { position: relative; display: block; flex-shrink: 0; }
/* Слой игроков лежит поверх всей области, но клики пропускает к столу. */
.table-area.around .participants {
  position: absolute;
  inset: 0;
  display: block;
  max-width: none;
  pointer-events: none;
}
.table-area.around .player {
  position: absolute;
  pointer-events: auto;
  transition: opacity 0.2s, left 0.45s ease, top 0.45s ease;
}
/* За столом с игроками вокруг стол всегда одной высоты: при вскрытии карточки не ездят.
   Оценки укладываются в одну строку с прокруткой, чтобы много разных значений не растягивали стол. */
/* 264px вмещают самое высокое состояние — результаты вскрытия с кнопками организатора. */
.table-area.around .poker-table { position: absolute; height: 264px; min-height: 0; }
.table-area.around .distribution {
  flex-wrap: nowrap;
  justify-content: safe center;
  max-width: 100%;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
}
.table-area.around .distribution span { flex-shrink: 0; }

.player {
  position: relative;
  width: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: opacity 0.2s;
}
/* Прозрачность — на содержимом, а не на .player: opacity на .player создала бы контекст наложения,
   и попап с эмодзи оказался бы под соседними карточками и тоже полупрозрачным. */
.player.offline .player-card,
.player.offline .player-name { opacity: 0.45; }
.player:not(.me) .player-card { cursor: pointer; }

/* ---------- emoji throw ---------- */

.react-popup {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  z-index: 20;
  display: flex;
  gap: 2px;
  padding: 6px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  transform: translateX(calc(-50% + var(--shift, 0px)));
  animation: react-popup-in 0.16s ease-out;
}
/* Хвостик, указывающий на карточку */
.react-popup::after {
  content: "";
  position: absolute;
  top: 100%;
  left: calc(50% - var(--shift, 0px));
  width: 12px;
  height: 12px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  transform: translate(-50%, -6px) rotate(45deg);
}
.react-emoji {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.12s, background 0.12s;
}
.react-emoji:hover { transform: scale(1.25); background: var(--accent-soft); }
.react-emoji:active { transform: scale(0.9); }
.react-emojis { display: flex; gap: 2px; }
.react-reroll {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-left: 4px;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--border);
  border-radius: 0 999px 999px 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.12s, background 0.12s;
}
.react-reroll svg { width: 18px; height: 18px; }
.react-reroll:hover { color: var(--accent); background: var(--accent-soft); }
@keyframes react-popup-in {
  from { opacity: 0; transform: translateX(calc(-50% + var(--shift, 0px))) translateY(6px) scale(0.9); }
}

/* ---------- left toolbar ---------- */

.tools {
  position: fixed;
  left: 12px;
  top: 50%;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 8px 6px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow);
  transform: translateY(-50%);
}
.tool-btn {
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.12s;
}
.tool-btn:hover:not(:disabled) { background: var(--accent-soft); }
.tool-btn[aria-expanded="true"],
.tool-btn[aria-pressed="true"] { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }
.tool-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.tool-btn, .launch-mode { position: relative; }

/* ---------- tokens ---------- */

/* Токен — эмодзи 🪙; размер задаётся font-size. */
.coin {
  display: inline-block;
  flex-shrink: 0;
  line-height: 1;
}
/* Цена на платной кнопке — в правом верхнем углу. */
.cost-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 1px 5px 1px 2px;
  border-radius: 999px;
  border: 1px solid #f59e0b;
  background: var(--surface);
  color: #b45309;
  font-size: 0.66rem;
  font-weight: 800;
  line-height: 1.2;
  pointer-events: none;
}
.cost-badge .coin { font-size: 0.85rem; }
/* Баланс под кнопками левой панели. */
.token-count {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  margin-top: 2px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  font-size: 0.95rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  cursor: default;
}
.token-count .coin { font-size: 1.5rem; }
.flying-coin { font-size: 2.6rem; perspective: 400px; }

/* ---------- pick a card mode (peek, rainbow) ---------- */

.pick-banner {
  position: fixed;
  left: 50%;
  top: 10px; /* поверх шапки: пока выбираешь карточку, название комнаты не нужно */
  z-index: 45;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 16px;
  white-space: nowrap;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-text);
  font-weight: 700;
  box-shadow: var(--shadow-lg);
  transform: translateX(-50%);
  animation: pick-banner-in 0.18s ease-out;
}
@keyframes pick-banner-in {
  from { opacity: 0; transform: translateX(-50%) translateY(-8px); }
}
.pick-cancel {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  color: inherit;
  font-size: 0.8rem;
  cursor: pointer;
}
.pick-cancel:hover { background: rgba(255, 255, 255, 0.38); }

/* Все карточки подсвечены; те, что можно выбрать для команды, пульсируют. */
.pick-mode .player .player-face.front {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow);
}
.pick-mode .player.pickable .player-card { cursor: pointer; }
.pick-mode .player.pickable .player-face.front {
  animation: pick-pulse 1.1s ease-in-out infinite;
}
.pick-mode .player:not(.pickable) .player-card { cursor: not-allowed; }
.pick-mode .player:not(.pickable) .player-face.front { border-style: dashed; filter: grayscale(0.6) opacity(0.55); }
@keyframes pick-pulse {
  0%, 100% { box-shadow: 0 0 0 3px var(--accent), 0 0 10px 2px var(--accent); }
  50% { box-shadow: 0 0 0 3px var(--accent), 0 0 24px 8px var(--accent); }
}

.tool-panel {
  position: fixed;
  left: 82px;
  top: 50%;
  z-index: 40;
  width: min(340px, calc(100vw - 96px));
  padding: 14px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  transform: translateY(-50%);
  animation: tool-panel-in 0.16s ease-out;
}
@keyframes tool-panel-in {
  from { opacity: 0; transform: translateY(-50%) translateX(-8px); }
}
.tool-panel-title {
  margin: 0 0 8px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.tool-panel-title + * { margin-bottom: 14px; }
.tool-panel-note { margin-left: 6px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.tool-panel > :last-child { margin-bottom: 0; }
.tool-panel-hint { margin: 0; font-size: 0.8rem; color: var(--muted); }
.tool-panel-hint.used { color: var(--accent); font-weight: 600; }

.launch-emojis {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.launch-emoji {
  aspect-ratio: 1;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 10px;
  background: var(--surface-2);
  font-size: 1.45rem;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.12s, background 0.12s, border-color 0.12s;
}
.launch-emoji:hover { transform: scale(1.1); background: var(--accent-soft); }
.launch-emoji[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
/* 21-я клетка сетки — кнопка «другие эмодзи». */
.launch-refresh {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  padding: 0;
  border: 2px dashed var(--border);
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.launch-refresh svg { width: 20px; height: 20px; transition: transform 0.3s; }
.launch-refresh:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.launch-refresh:hover svg { transform: rotate(90deg); }
.launch-refresh:active svg { transform: rotate(200deg); }

.launch-modes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.launch-mode {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 4px 8px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, transform 0.1s;
}
.launch-mode:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-soft); }
.launch-mode:active:not(:disabled) { transform: scale(0.95); }
.launch-mode:disabled { opacity: 0.45; cursor: not-allowed; }
/* Уже применённый приём (своя взятка или щит, режим подглядывания). */
.launch-mode[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.launch-mode[aria-pressed="true"]:disabled { opacity: 0.75; }
.launch-mode-icon { font-size: 1.7rem; line-height: 1; }
.launch-mode-label { font-size: 0.72rem; font-weight: 600; color: var(--muted); }

/* ---------- launch effects ---------- */

.launch-layer {
  position: fixed;
  inset: 0;
  z-index: 90;
  overflow: hidden;
  pointer-events: none;
}
.launch-layer > * { position: absolute; left: 0; top: 0; line-height: 1; will-change: transform; }

/* поезд */
.launch-train { display: flex; align-items: flex-end; gap: 6px; }
.train-loco { font-size: 4rem; }
.train-wagon {
  position: relative;
  width: 62px;
  height: 34px;
  margin-bottom: 6px;
  border-radius: 6px 6px 4px 4px;
  background: linear-gradient(#ef4444, #b91c1c);
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.2);
}
/* колёса */
.train-wagon::before,
.train-wagon::after {
  content: "";
  position: absolute;
  bottom: -9px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle, #9ca3af 30%, #374151 32%);
}
.train-wagon::before { left: 7px; }
.train-wagon::after { right: 7px; }
.train-cargo {
  position: absolute;
  left: 50%;
  bottom: 18px;
  margin-left: -20px;
  font-size: 2.5rem;
}
.train-rails {
  left: 0 !important;
  right: 0;
  height: 12px;
  border-top: 3px solid #6b7280;
  border-bottom: 3px solid #6b7280;
  background: repeating-linear-gradient(90deg, transparent 0 14px, #92400e 14px 22px);
}

/* парашюты */
.launch-parachute {
  top: -150px !important;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.chute { font-size: 3rem; }
.chute-cargo { margin-top: -10px; font-size: 2.2rem; }

/* подглядывание */
.launch-peek { filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.25)); }

/* радуга: дуга в SVG, по её верху съезжают эмодзи */
.launch-rainbow { overflow: visible; filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.6)); }
.rainbow-rider { font-size: 2.6rem; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.25)); }

/* фейерверк: ракета — светящийся след, взрыв — вспышка, искры и эмодзи */
.firework-rocket {
  width: 4px;
  height: 46px;
  margin-left: -2px;
  border-radius: 2px;
  background: linear-gradient(to bottom, #ffffff, #fde68a 20%, rgba(251, 146, 60, 0.6) 55%, rgba(251, 146, 60, 0));
  box-shadow: 0 0 8px 2px rgba(253, 230, 138, 0.7);
}
.firework-flash {
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff, rgba(253, 224, 71, 0.8) 40%, rgba(253, 224, 71, 0) 70%);
}
.firework-spark {
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 6px 2px var(--c);
}
.firework-emoji { font-size: 2.4rem; }

/* искры ✨, когда открывается посылка */
.launch-sparkle { font-size: 1.4rem; }

/* посылка: конвейерная лента над картами оценки и коробка с двумя клапанами */
.parcel-belt {
  width: 100%;
  height: 13px;
  border-radius: 7px;
  background: repeating-linear-gradient(90deg, #374151 0 9px, #4b5563 9px 18px);
  box-shadow: inset 0 -3px 0 #1f2937, 0 2px 5px rgba(0, 0, 0, 0.3);
  animation: parcel-belt-move 0.45s linear infinite;
}
.parcel-belt.reverse { animation-direction: reverse; }
.parcel-belt.stopped { animation-play-state: paused; }
@keyframes parcel-belt-move { to { background-position: 18px 0; } }
.parcel { width: 60px; height: 43px; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.3)); }
.parcel-body {
  position: absolute;
  inset: 7px 0 0;
  border-radius: 3px;
  background:
    linear-gradient(90deg, transparent 44%, #ead2a8 44% 56%, transparent 56%),
    linear-gradient(#c98a4b, #a86b33);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.15);
}
.parcel-flap {
  position: absolute;
  top: 0;
  width: 50%;
  height: 8px;
  border: 1px solid #8a5526;
  background: linear-gradient(#c9884a, #b9773c);
}
.parcel-flap.left { left: 0; border-radius: 3px 0 0 0; transform-origin: 0 100%; }
.parcel-flap.right { right: 0; border-radius: 0 3px 0 0; transform-origin: 100% 100%; }
.parcel-pop { font-size: 2.6rem; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.25)); }

/* воздушные шары: цветной шар с бликом и узелком, на нём эмодзи, снизу ниточка */
.launch-balloon { display: flex; flex-direction: column; align-items: center; }
.balloon-body {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 66px;
  height: 80px;
  border-radius: 50% 50% 48% 48% / 56% 56% 44% 44%;
  background:
    radial-gradient(circle at 30% 26%, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 24%),
    var(--balloon);
  box-shadow: inset -7px -9px 14px rgba(0, 0, 0, 0.2), 0 6px 12px rgba(0, 0, 0, 0.15);
}
/* Узелок внизу шара. */
.balloon-body::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 8px solid var(--balloon);
  transform: translateX(-50%);
  filter: brightness(0.85);
}
.balloon-emoji { font-size: 2.1rem; }
.balloon-string { width: 1.5px; height: 70px; margin-top: 6px; background: linear-gradient(rgba(107, 114, 128, 0.9), rgba(107, 114, 128, 0.2)); }

/* рыбалка: полоса воды с бегущими волнами, лодка с гребцом, удочка, леска и поплавок */
.fishing-water {
  z-index: 1; /* поверх лодки: корпус сидит в воде */
  width: 100%;
  height: 58px;
  background: linear-gradient(#4aa6f7, #2563eb);
  box-shadow: inset 0 6px 10px rgba(255, 255, 255, 0.18);
  transform-origin: 50% 100%;
}
/* Гребешки волн поверх кромки воды. */
.fishing-water::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -7px;
  height: 14px;
  background: radial-gradient(circle at 12px 14px, #4aa6f7 11px, transparent 12px) 0 0 / 24px 14px repeat-x;
  animation: fishing-waves 1.4s linear infinite;
}
@keyframes fishing-waves { to { background-position: 24px 0; } }
.fishing-boat { width: max-content; }
.fishing-boat > * { position: absolute; left: 0; top: 0; }
.fishing-boat > .fishing-rower { position: relative; display: block; font-size: 84px; line-height: 1; }
.fishing-rod {
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #92400e, #f5deb3);
  transform-origin: 0 50%;
}
.fishing-line { width: 1.5px; background: rgba(229, 231, 235, 0.9); transform: scaleY(0); transform-origin: 50% 0; }
.fishing-bobber {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: linear-gradient(#ef4444 50%, #ffffff 50%);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
  opacity: 0;
}
.fishing-catch { font-size: 28px; line-height: 1; }
.fishing-catch-emoji { display: inline-block; }
/* Лодка плывёт вправо и отражена — улов отражаем обратно, чтобы он смотрел как обычно. */
.fishing-catch.unflip .fishing-catch-emoji { transform: scaleX(-1); }
.fishing-splash { z-index: 1; font-size: 1.4rem; } /* брызги — над водой */

/* без анимаций: до 5 выбранных эмодзи в ряд по центру */
.launch-still {
  left: 50% !important;
  top: 50% !important;
  font-size: min(9rem, 17vw);
  white-space: nowrap;
  transform: translate(-50%, -50%);
}

/* хрустальный шар: свет приглушается, подсвеченные карточки остаются над темнотой */
.spell-dim {
  position: fixed;
  inset: 0;
  z-index: 42;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(14, 8, 38, 0.66), rgba(14, 8, 38, 0.42) 55%, rgba(14, 8, 38, 0.2));
}
.player.spell-lit,
.player.spell-target { z-index: 43; }
.player.spell-lit .player-face.front {
  border-color: #c084fc;
  box-shadow: 0 0 0 3px #c084fc, 0 0 28px 6px rgba(192, 132, 252, 0.75);
}
.player.spell-target .player-face.front {
  border-color: #a855f7;
  animation: spell-target-glow 0.4s ease-in-out infinite alternate;
}
@keyframes spell-target-glow {
  from { box-shadow: 0 0 0 3px #a855f7, 0 0 16px 4px rgba(168, 85, 247, 0.55); }
  to { box-shadow: 0 0 0 4px #c084fc, 0 0 40px 12px rgba(192, 132, 252, 0.9); }
}
.spell-orb {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 95;
  font-size: 4.4rem;
  line-height: 1;
  pointer-events: none;
  will-change: transform, opacity;
  filter: drop-shadow(0 0 12px rgba(192, 132, 252, 0.8));
}
.spell-orb-body { display: block; }
.spell-orb.active { animation: orb-glow 0.9s ease-in-out infinite alternate; }
.spell-orb.active .spell-orb-body { animation: orb-float 1.4s ease-in-out infinite alternate; }
@keyframes orb-glow {
  from { filter: drop-shadow(0 0 10px rgba(192, 132, 252, 0.7)); }
  to { filter: drop-shadow(0 0 26px rgba(216, 180, 254, 1)) brightness(1.15); }
}
@keyframes orb-float {
  from { transform: translateY(3px); }
  to { transform: translateY(-7px); }
}
.spell-spark {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0 25%, #e9d5ff 45%, rgba(168, 85, 247, 0) 72%);
}
.spell-spark-star { font-size: 1.1rem; }

/* Заколдованный участник: фиолетовое сияние вокруг карточки на столе. */
.player.blind .player-card { border-radius: 14px; box-shadow: 0 0 18px 4px rgba(168, 85, 247, 0.5); }

/* Рука вслепую: карты рубашкой вверх; выбранная приподнимается, но не переворачивается. */
.vote-card.blind-card:not(.face-up) { position: relative; overflow: hidden; padding: 0; }
.vote-card.blind-card.selected:not(.face-up) {
  background: var(--surface);
  box-shadow: 0 0 0 3px var(--accent), var(--shadow-lg);
}

/* щит: прозрачный купол над карточкой и значок 🛡️; владелец до попадания видит его бледным */
.player.shielded .player-card::after {
  content: "";
  position: absolute;
  inset: -7px;
  z-index: 2;
  border-radius: 20px;
  border: 2px solid rgba(56, 189, 248, 0.85);
  background: radial-gradient(ellipse at 30% 18%, rgba(255, 255, 255, 0.35), rgba(125, 211, 252, 0.1) 45%, rgba(56, 189, 248, 0.18));
  box-shadow: 0 0 16px 2px rgba(56, 189, 248, 0.5), inset 0 0 18px rgba(56, 189, 248, 0.3);
  pointer-events: none;
}
.player.shielded .player-card::before {
  content: "🛡️";
  position: absolute;
  top: -18px;
  left: -16px;
  z-index: 3;
  font-size: 1.9rem;
  line-height: 1;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3));
  pointer-events: none;
}
.player.shield-secret .player-card::before,
.player.shield-secret .player-card::after { opacity: 0.45; }
.player.shield-secret .player-card::after { border-style: dashed; }
.player.shield-flash .player-card::after { animation: shield-flash 0.9s ease-out; }
.player.shield-flash .player-card::before { animation: shield-badge-pop 0.9s ease-out; }
@keyframes shield-flash {
  0% { transform: scale(1.14); background: rgba(186, 230, 253, 0.75); box-shadow: 0 0 40px 14px rgba(56, 189, 248, 0.9); }
  100% { transform: scale(1); }
}
@keyframes shield-badge-pop {
  0% { transform: scale(0.4) rotate(-30deg); }
  40% { transform: scale(1.6) rotate(10deg); }
  100% { transform: none; }
}

/* песочные часы: таймер над столом, в последние 3 секунды краснеет и пульсирует */
.hourglass-timer {
  position: absolute;
  top: -20px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 14px 4px 10px;
  border-radius: 999px;
  border: 2px solid #f59e0b;
  background: var(--surface);
  color: #d97706;
  font-size: 1.1rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  box-shadow: var(--shadow);
  transform: translateX(-50%);
}
.hourglass-icon { display: inline-block; animation: hourglass-turn 2s ease-in-out infinite; }
.hourglass-timer.urgent {
  border-color: var(--danger);
  color: var(--danger);
  animation: hourglass-urgent 0.5s ease-in-out infinite alternate;
}
@keyframes hourglass-turn {
  0%, 80% { transform: none; }
  100% { transform: rotate(180deg); }
}
@keyframes hourglass-urgent {
  to { transform: translateX(-50%) scale(1.12); }
}
.coffee-drop { font-size: 2.6rem; }

/* пиньята: свисает на верёвке с верха страницы до уровня центра стола и качается;
   высотой как карточка участника (154px). Лежит в координатах страницы, а не окна. */
/* ---------- secret items ---------- */

/* Тайный предмет в углу экрана: прозрачность ведёт room.js (проявление за минуту). */
.secret-item {
  position: fixed;
  z-index: 41; /* над панелью инструментов слева, если угол на низком экране до неё дотянулся */
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 2.2rem;
  line-height: 48px;
  text-align: center;
  cursor: pointer;
  opacity: 0;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.25));
  transition: transform 0.15s;
}
.secret-item:hover:not(:disabled) { transform: scale(1.12); }
.secret-item:disabled { cursor: default; }
/* У эмодзи 🧤 перчатки цветные — делаем их чёрными; светлый ореол, чтобы не терялись на тёмной теме. */
.secret-gloves,
.secret-icon-gloves { filter: grayscale(1) brightness(0.3) contrast(1.3) drop-shadow(0 0 2px rgba(255, 255, 255, 0.35)); }
/* Плитка предмета, который пока ничего не делает, — не притворяемся кнопкой. */
.launch-mode.secret-slot { position: relative; overflow: hidden; }
.launch-mode.secret-slot:not(.usable) { cursor: default; }
.launch-mode.secret-slot:not(.usable):hover { border-color: var(--border); background: var(--surface-2); }
.launch-mode.secret-slot:not(.usable):active { transform: none; }
/* Перезарядка: тень от 12 часов по часовой стрелке на оставшуюся долю (--cooldown: 1 → 0). */
.launch-mode.secret-slot.cooling { opacity: 1; cursor: not-allowed; }
.launch-mode.secret-slot.cooling::after {
  content: "";
  position: absolute;
  inset: 0;
  background: conic-gradient(rgba(15, 23, 42, 0.55) calc(var(--cooldown, 0) * 1turn), transparent 0);
  pointer-events: none;
}

/* ---------- magnifier ---------- */

.magnifier-dim {
  position: fixed;
  inset: 0;
  z-index: 44; /* под баннером выбора карточки и самими чужими карточками */
  background: rgba(15, 23, 42, 0.3);
  pointer-events: none;
  animation: magnifier-dim-in 0.25s ease-out;
}
@keyframes magnifier-dim-in { from { opacity: 0; } }
/* Лупа в половину карточки (карточка — 154px в высоту); курсор вместо неё прячем. */
.magnifier-lens {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 46;
  width: 80px;
  height: 80px;
  pointer-events: none;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.35));
}
.magnifier-lens svg { display: block; }
body.magnifier-mode,
body.magnifier-mode * { cursor: none !important; }
/* Карточка под лупой — над затемнением, как под лучом. Только наведённая: курсор бывает лишь над
   видимой карточкой, поэтому поднятая не вылезет поверх ряда карт оценки. */
body.magnifier-mode .player.pickable:hover { z-index: 45; }

/* Над чужой карточкой на месте 🤔/👍 проступает 🪙 и подсказка «Reveal count». */
.lens-hint {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  display: none;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  border: 2px solid #f59e0b;
  background: #fef3c7;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  font-size: 1.5rem;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.lens-hint::after {
  content: "Reveal count";
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--text);
  color: var(--surface);
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
  transform: translateX(-50%);
}
body.magnifier-mode .player.pickable .player-card:hover .lens-hint { display: flex; }
body.magnifier-mode .player.pickable .player-card:hover .card-badge { visibility: hidden; }

/* Баланс, который показала лупа: на месте значка, только у смотревшего. */
.token-reveal {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 2px solid #f59e0b;
  background: #fef3c7;
  color: #78350f;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  font-size: 1.4rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.pinata {
  position: absolute;
  top: 0;
  z-index: 49; /* поверх всего на странице (шапки, игроков, панелей, баннеров); под окнами и уведомлениями */
  transform: translateX(-50%);
  pointer-events: none;
}
.pinata-swing {
  display: flex;
  flex-direction: column;
  align-items: center;
  transform-origin: 50% 0;
  animation: pinata-swing 2.4s ease-in-out infinite alternate;
}
/* Верёвка длинная, поэтому угол небольшой: внизу пиньята и так отклоняется заметно. */
@keyframes pinata-swing {
  from { transform: rotate(-4deg); }
  to { transform: rotate(4deg); }
}
.pinata-rope { width: 2px; background: linear-gradient(#a0805c, #5b4636); }
.pinata-body {
  height: 154px;
  margin-top: -10px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 132px;
  line-height: 154px;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.25));
  pointer-events: auto;
}
.pinata-counter {
  margin-top: -6px;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow);
  font-size: 0.85rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.pinata-flash { font-size: 2.6rem; }
.pinata-candy { font-size: 1.9rem; }

/* Пока висит пиньята, курсор везде — бейсбольная бита 96×96 (кончик биты — точка клика). */
body.pinata-time,
body.pinata-time * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 32 32'%3E%3Cg transform='rotate(45 16 16)'%3E%3Cpath d='M15.2 29 L15.2 19 C14.2 15 13.1 10 13.1 5.5 A2.9 2.9 0 0 1 18.9 5.5 C18.9 10 17.8 15 16.8 19 L16.8 29 Z' fill='%23d9a35b' stroke='%235b3a1a' stroke-width='1.2' stroke-linejoin='round'/%3E%3Crect x='15.2' y='21' width='1.6' height='7' fill='%233f2a14'/%3E%3Crect x='13.9' y='28' width='4.2' height='2.6' rx='1.3' fill='%235b3a1a'/%3E%3C/g%3E%3C/svg%3E") 75 21, auto !important;
}

/* слот-машина в духе эмодзи 🎰: серебристый корпус с сиреневым низом, тёмная рамка с тремя белыми
   колёсами (сверху и снизу выглядывают соседние символы), широкий тёмный лоток и рычаг с красным шаром
   справа. Стоит посреди стола (внутри .poker-table), под ней — кто играет. */
.slot-machine {
  --slot-cell: 62px;
  --slot-peek: 15px;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 44;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.slot-body {
  display: flex;
  align-items: flex-start;
  padding-left: 30px; /* рычаг справа — уравновешиваем, чтобы корпус стоял по центру стола */
  filter: drop-shadow(0 12px 16px rgba(20, 16, 40, 0.3));
}
.slot-cabinet {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 18px 16px 20px;
  border: 0;
  border-radius: 30px;
  background: linear-gradient(180deg, #f1eff4 0%, #d6d3dc 45%, #c3bfcc 72%, #b9a6dc 100%);
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.9),
    inset 4px 0 8px rgba(255, 255, 255, 0.45),
    inset -6px -8px 14px rgba(90, 70, 140, 0.25);
  color: inherit;
  font: inherit;
  cursor: default;
  pointer-events: auto;
  transition: box-shadow 0.2s;
}
.slot-machine.mine.ready .slot-cabinet { cursor: pointer; animation: slot-call 1.2s ease-in-out infinite; }
.slot-machine.mine.ready .slot-cabinet:hover { filter: brightness(1.05); }
@keyframes slot-call {
  50% {
    box-shadow:
      inset 0 3px 0 rgba(255, 255, 255, 0.9),
      inset -6px -8px 14px rgba(90, 70, 140, 0.25),
      0 0 0 5px rgba(250, 204, 21, 0.65);
  }
}
.slot-window {
  display: flex;
  gap: 6px;
  padding: 7px;
  border-radius: 16px;
  background: linear-gradient(180deg, #4a4378, #2d2752);
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.55), 0 1px 0 rgba(255, 255, 255, 0.6);
}
.slot-reel {
  width: 60px;
  height: calc(var(--slot-cell) + 2 * var(--slot-peek));
  overflow: hidden;
  border-radius: 10px;
  /* Затенение сверху и снизу — колесо круглое и уходит вглубь. */
  background: linear-gradient(#cfc6e6, #ffffff 26%, #ffffff 74%, #cfc6e6);
  box-shadow: inset 0 6px 8px -4px rgba(45, 39, 82, 0.45), inset 0 -6px 8px -4px rgba(45, 39, 82, 0.45);
  transition: box-shadow 0.2s;
}
.slot-reel.win {
  box-shadow: inset 0 0 0 3px #facc15, 0 0 16px 4px rgba(250, 204, 21, 0.85);
}
.slot-strip { display: flex; flex-direction: column; will-change: transform; }
.slot-reel.blur .slot-strip { filter: blur(2px); }
.slot-symbol {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  height: var(--slot-cell);
  font-size: 40px;
  line-height: 1;
}
/* Зашли посреди игры: колёса бесконечно мелькают, пока не придёт итог. */
.slot-machine.idle-spin .slot-strip { animation: slot-idle 0.4s linear infinite; filter: blur(2px); }
@keyframes slot-idle {
  from { transform: translateY(calc(var(--slot-peek) - var(--slot-cell))); }
  to { transform: translateY(calc(var(--slot-peek) - 5 * var(--slot-cell))); }
}
/* Лоток: широкая тёмная щель, из неё вылетают монеты. */
.slot-tray {
  width: 82%;
  height: 40px;
  border-radius: 14px 14px 18px 18px;
  background: linear-gradient(180deg, #1c1733, #3b3168 70%, #5a4a94);
  box-shadow: inset 0 6px 8px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255, 255, 255, 0.7);
}
.slot-machine.jackpot .slot-cabinet { animation: slot-jackpot 0.3s steps(2, jump-none) infinite; }
@keyframes slot-jackpot {
  50% { box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.9), 0 0 0 5px #facc15, 0 0 28px 8px rgba(250, 204, 21, 0.8); }
}
/* Рычаг: серое крепление на боку, палка вверх и красный шар. Дёргается — палка «переворачивается»
   через ось вниз. */
.slot-lever {
  position: relative;
  width: 30px;
  height: 176px;
  margin-left: -4px;
  pointer-events: auto;
}
.slot-machine.mine.ready .slot-lever { cursor: pointer; }
.slot-lever::after {
  content: "";
  position: absolute;
  left: 0;
  top: 92px;
  width: 22px;
  height: 44px;
  border-radius: 0 10px 10px 0;
  background: linear-gradient(90deg, #a9a4b3, #e4e1e9 55%, #a9a4b3);
  box-shadow: inset -2px -3px 4px rgba(60, 50, 90, 0.25);
}
.slot-lever-stick {
  position: absolute;
  left: 8px;
  top: 22px;
  z-index: 1;
  width: 8px;
  height: 92px;
  border-radius: 4px;
  background: linear-gradient(90deg, #9d98a8, #f4f2f7 50%, #9d98a8);
  transform-origin: 50% 100%;
}
.slot-lever-stick::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -22px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fecdd3 0 8%, #f43f5e 30%, #be123c 70%, #881337);
  transform: translateX(-50%);
}
.slot-caption {
  max-width: 260px;
  margin: 0;
  padding: 3px 12px;
  overflow: hidden;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow);
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.slot-hand { font-size: 2.4rem; }
.slot-puff { font-size: 2.2rem; }
.slot-burn { font-size: 2rem; }

/* ---------- рулетка ---------- */

/* Сцена: свет чуть приглушён, сверху качаются софиты, с боков и сверху выезжают красные шторы.
   Над затемнением поднимается только стол. Всё без перехвата кликов. */
.roulette-dim,
.roulette-light,
.roulette-curtain,
.roulette-valance { position: fixed; pointer-events: none; }
.roulette-dim {
  inset: 0;
  z-index: 41;
  background: radial-gradient(ellipse at 50% 45%, rgba(12, 6, 28, 0.2), rgba(12, 6, 28, 0.55));
  opacity: 0;
  transition: opacity 0.9s ease;
}
body.roulette-time .poker-table.roulette-mode { z-index: 42; }
.roulette-light {
  top: -10px;
  z-index: 46;
  width: 170px;
  transform-origin: 50% 0;
  background: linear-gradient(to bottom, rgba(255, 246, 214, 0.75), rgba(255, 238, 190, 0.22) 65%, rgba(255, 238, 190, 0));
  clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%);
  filter: blur(5px);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 0.9s ease 0.3s;
  animation: roulette-sway 3.4s ease-in-out infinite alternate;
}
@keyframes roulette-sway {
  from { transform: translateX(-50%) rotate(calc(var(--aim, 0deg) - 7deg)); }
  to { transform: translateX(-50%) rotate(calc(var(--aim, 0deg) + 7deg)); }
}
/* Бархат: складки — повторяющийся градиент, тень у края. */
.roulette-curtain {
  top: 0;
  bottom: 0;
  z-index: 47;
  width: clamp(56px, 13vw, 200px);
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.25), transparent 30%, transparent 70%, rgba(0, 0, 0, 0.3)),
    repeating-linear-gradient(90deg, #6d0f14 0, #a3161f 14px, #d32631 24px, #a3161f 34px, #6d0f14 46px);
  filter: drop-shadow(0 0 14px rgba(0, 0, 0, 0.5));
  transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* Шторы подхвачены у середины высоты — внутренний край изгибается. */
.roulette-curtain.left { left: 0; transform: translateX(-105%); clip-path: polygon(0 0, 100% 0, 46% 52%, 78% 100%, 0 100%); }
.roulette-curtain.right { right: 0; transform: translateX(105%); clip-path: polygon(0 0, 100% 0, 100% 100%, 22% 100%, 54% 52%); }
.roulette-valance {
  top: 0;
  left: 0;
  right: 0;
  z-index: 48;
  height: clamp(44px, 9vh, 84px);
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.3), transparent 40%),
    repeating-linear-gradient(90deg, #7a1118 0, #b81c26 16px, #dc2f3a 26px, #b81c26 36px, #7a1118 50px);
  /* Фестоны снизу: прямоугольник плюс ряд кругов. */
  -webkit-mask:
    linear-gradient(#000, #000) top / 100% calc(100% - 22px) no-repeat,
    radial-gradient(circle at 50% 0, #000 22px, transparent 23px) 0 calc(100% - 22px) / 50px 44px repeat-x;
  mask:
    linear-gradient(#000, #000) top / 100% calc(100% - 22px) no-repeat,
    radial-gradient(circle at 50% 0, #000 22px, transparent 23px) 0 calc(100% - 22px) / 50px 44px repeat-x;
  transform: translateY(-105%);
  transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}
body.roulette-open .roulette-dim { opacity: 1; }
body.roulette-open .roulette-light { opacity: 0.85; }
body.roulette-open .roulette-curtain,
body.roulette-open .roulette-valance { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .roulette-light { animation: none; transform: translateX(-50%) rotate(var(--aim, 0deg)); }
  .roulette-dim, .roulette-light, .roulette-curtain, .roulette-valance { transition: none; }
}

/* Рулеточный стол: зелёное сукно в деревянном борту. Пока он стоит, обычное содержимое стола спрятано. */
.poker-table.roulette-mode {
  background: radial-gradient(ellipse at 50% 40%, #1f8a4c, #14532d 78%);
  border-color: #7c4a1e;
  box-shadow: 0 0 0 6px #5b3415, 0 18px 40px rgba(0, 0, 0, 0.45);
  color: #fff;
}
.table-area.around .poker-table.roulette-mode { height: auto; min-height: 264px; }
.poker-table.roulette-mode > :not(.roulette-layer):not(.slot-machine):not(.hourglass-timer) { display: none; }
.poker-table:not(.roulette-mode) > .roulette-layer { display: none; }
.roulette-layer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 22px;
  width: 100%;
}
.roulette-wheel-box { position: relative; flex-shrink: 0; width: 190px; height: 190px; }
.roulette-wheel,
.roulette-ball-orbit { position: absolute; inset: 0; }
.roulette-wheel svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.45)); }
.roulette-layer.idle .roulette-wheel { animation: roulette-idle 0.9s linear infinite; }
@keyframes roulette-idle { to { transform: rotate(360deg); } }
.roulette-pointer {
  position: absolute;
  left: 50%;
  top: -9px;
  z-index: 2;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 17px solid #fbbf24;
  transform: translateX(-50%);
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.5));
}
.roulette-ball {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffffff, #e4e4e7 55%, #a1a1aa);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  opacity: 0;
}
.roulette-rim { fill: #6b3f1d; }
.roulette-track { fill: #2a1708; }
.roulette-sector { stroke: #d4a017; stroke-width: 1; }
.roulette-sector.red { fill: #c81e1e; }
.roulette-sector.black { fill: #1c1c22; }
.roulette-sector.green { fill: #16a34a; }
.roulette-sector.win { animation: roulette-sector-win 0.5s steps(2, jump-none) infinite; }
@keyframes roulette-sector-win { 50% { fill: #facc15; } }
.roulette-num {
  fill: #fff;
  font-size: 16px;
  font-weight: 800;
  text-anchor: middle;
  dominant-baseline: central;
}
.roulette-cone { fill: #a16207; stroke: #d4a017; stroke-width: 1.5; }
.roulette-hub { fill: #fbbf24; }
#roulette-icon svg { display: block; width: 1em; height: 1em; }

.roulette-board {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  max-width: 300px;
}
.roulette-status {
  margin: 0;
  color: #fef3c7;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.roulette-colors,
.roulette-numbers { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 5px; }
/* Место под стопки монет над полями. */
.roulette-colors { margin-top: 14px; }
.roulette-numbers { margin-top: 8px; }
.roulette-bet {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 34px;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, 0.75);
  border-radius: 8px;
  color: #fff;
  font: inherit;
  font-weight: 800;
  line-height: 1.05;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.15s, opacity 0.15s;
}
.roulette-colors .roulette-bet { width: 76px; height: 42px; }
.roulette-bet.red { background: #c81e1e; }
.roulette-bet.black { background: #1c1c22; }
.roulette-bet.green { background: #15803d; }
.roulette-bet:hover:not(:disabled) { transform: translateY(-2px); }
.roulette-bet[aria-pressed="true"] { border-color: #fde047; box-shadow: 0 0 0 3px #fde047, 0 0 14px 2px rgba(253, 224, 71, 0.8); }
.roulette-bet:disabled { cursor: default; }
.roulette-bet:disabled:not([aria-pressed="true"]):not(.win) { opacity: 0.55; }
.roulette-bet.win { animation: roulette-bet-win 0.45s ease-in-out infinite alternate; }
@keyframes roulette-bet-win {
  to { transform: scale(1.12); box-shadow: 0 0 0 3px #facc15, 0 0 18px 4px rgba(250, 204, 21, 0.9); }
}
.roulette-bet-prize { font-size: 0.62rem; font-weight: 700; opacity: 0.85; }
/* Стопка поставленных монет над полем: монеты — золотые «таблетки», каждая на 4px выше прошлой. */
.roulette-stack {
  position: absolute;
  left: 50%;
  bottom: calc(100% - 5px);
  width: 20px;
  height: 0;
  z-index: 1;
  transform: translateX(-50%);
  pointer-events: none;
}
.roulette-stack-coin {
  position: absolute;
  left: 0;
  bottom: calc(var(--i) * 4px);
  width: 20px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 35%, #fde68a, #f59e0b 60%, #b45309);
  box-shadow: 0 1px 0 #92400e, 0 2px 2px rgba(0, 0, 0, 0.35);
}
.roulette-stack-coin:last-child { animation: roulette-coin-land 0.25s ease-out; }
@keyframes roulette-coin-land { from { transform: translateY(-6px); } }
.roulette-stack-count {
  position: absolute;
  left: 15px;
  bottom: 14px;
  padding: 0 4px;
  border-radius: 999px;
  background: #fde047;
  color: #422006;
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 14px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.roulette-coin-fly { font-size: 1.3rem; }
.roulette-hint { margin: 0; color: rgba(255, 255, 255, 0.8); font-size: 0.72rem; }

/* Фишка ставки в углу карточки участника: цвет ставки, число или 💰. */
.roulette-chip {
  position: absolute;
  right: -10px;
  bottom: -10px;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 3px dashed rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 900;
  animation: roulette-chip-drop 0.35s ease-out;
}
.roulette-chip[hidden] { display: none; }
.roulette-chip.red { background: #c81e1e; }
.roulette-chip.black { background: #1c1c22; }
.roulette-chip.green { background: #15803d; font-size: 1rem; }
@keyframes roulette-chip-drop {
  from { transform: translateY(-14px) scale(1.4); opacity: 0; }
}

/* ---------- фонарик ---------- */

/* Темнота поверх всего (кроме уведомлений), клики проходят насквозь. Пятно фонарика у курсора:
   небольшое и тусклое — середина чуть притемнена, к краю свет мягко гаснет в черноту. */
.flashlight-dark {
  --x: 50vw;
  --y: 50vh;
  --r: clamp(80px, 12vmin, 115px);
  position: fixed;
  inset: 0;
  z-index: 99;
  pointer-events: none;
  background: radial-gradient(circle var(--r) at var(--x) var(--y),
    rgba(30, 22, 0, 0.38) 0%, rgba(18, 12, 0, 0.5) 45%, rgba(4, 3, 0, 0.85) 80%, #000 100%);
  animation: flashlight-flicker 4s steps(1, end) infinite;
}
/* Батарейка подсела: свет иногда едва заметно моргает. */
@keyframes flashlight-flicker {
  0%, 46%, 50%, 88%, 100% { opacity: 1; }
  47% { opacity: 0.94; }
  89% { opacity: 0.97; }
}
@media (prefers-reduced-motion: reduce) {
  .flashlight-dark { animation: none; }
}
/* У того, кто сидит в темноте, карточка для остальных притушена. */
.player.in-dark .player-face.front { filter: brightness(0.45); }

/* ---------- краски ---------- */

/* Холсты рисунка лежат под всем содержимым страницы: карточки, стол и панели закрывают их собой. */
.paint-canvas {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  pointer-events: none;
}
/* У владельца красок пустое поле — под кисть; на карточках и столе курсор обычный. */
body.paint-mode .room-main { cursor: crosshair; touch-action: none; }
body.paint-mode .room-main .player,
body.paint-mode .room-main .poker-table { cursor: auto; touch-action: auto; }

.paint-panel {
  position: fixed;
  right: 12px;
  bottom: 200px;
  z-index: 45;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 224px;
  padding: 10px 12px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
.paint-panel.collapsed { width: auto; padding-bottom: 10px; }
.paint-panel.collapsed .paint-body { display: none; }
.paint-panel.paused { opacity: 0.5; pointer-events: none; }
.paint-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.paint-title { font-size: 0.85rem; font-weight: 800; }
.paint-toggle {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.paint-body { display: flex; flex-direction: column; gap: 10px; }
.paint-tools { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.paint-tool {
  height: 36px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  font-size: 1.15rem;
  cursor: pointer;
}
.paint-tool:hover { border-color: var(--accent); }
.paint-tool[aria-checked="true"] { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.paint-size { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 0.75rem; font-weight: 700; }
.paint-size input { flex: 1; min-width: 0; accent-color: var(--accent); }
.paint-size-preview { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 38px; height: 38px; }
.paint-size-dot { border-radius: 50%; background: var(--dot); box-shadow: 0 0 0 1px var(--border); }
.paint-size-dot.eraser { background: transparent; box-shadow: none; border: 2px dashed var(--muted); }
.paint-colors { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.paint-color,
.paint-custom {
  aspect-ratio: 1;
  padding: 0;
  border: 2px solid var(--surface);
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--border);
  cursor: pointer;
}
.paint-color { background: var(--swatch); }
.paint-color[aria-checked="true"],
.paint-custom.active { box-shadow: 0 0 0 2px var(--accent); }
.paint-custom { position: relative; overflow: hidden; background: conic-gradient(#ef4444, #facc15, #22c55e, #06b6d4, #3b82f6, #a855f7, #ef4444); }
.paint-custom input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.paint-clear { font-size: 0.8rem; }

/* облако драки */
.fight-cloud-body { position: absolute; inset: 0; }
.fight-cloud-core,
.fight-puff {
  position: absolute;
  background: radial-gradient(circle at 35% 30%, #ffffff 0%, #eceef3 45%, #c3c7d1 100%);
}
.fight-cloud-core { inset: 12% 3%; border-radius: 999px; background: #e3e6ec; }
.fight-puff {
  border-radius: 50%;
  box-shadow: inset -6px -8px 14px rgba(80, 86, 104, 0.18), 0 6px 18px rgba(20, 24, 40, 0.12);
}
.fight-pop {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  font-size: 2.4rem;
  line-height: 1;
  will-change: transform, opacity;
}
.fight-pop-still { left: 50%; top: 50%; font-size: 4rem; transform: translate(-50%, -50%); }

/* Запасная иконка драки, где нет эмодзи 🫯: облако пыли со вспышкой. */
.fight-icon { position: relative; display: inline-block; filter: drop-shadow(0 1px 1.5px rgba(30, 35, 50, 0.5)); }
.fight-icon-spark { position: absolute; right: -0.35em; bottom: -0.2em; font-size: 0.55em; }

.flying-emoji {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
  font-size: 2rem;
  line-height: 1;
  pointer-events: none;
  will-change: transform, opacity;
}

.player-card {
  position: relative;
  width: 112px;
  height: 154px;
  perspective: 800px;
}
.player-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.5s cubic-bezier(0.3, 0.7, 0.3, 1);
  transform-style: preserve-3d;
}
.player.revealed .player-card-inner { transform: rotateY(180deg); }

.player-face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  border: 2px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.player-face.front { overflow: hidden; }
.player.voted .player-face.front { border-color: var(--success); box-shadow: 0 0 0 2px var(--success), var(--shadow); }

/* Значок 🤔/👍 поверх рубашки — на светлой подложке, чтобы читался на любом узоре. */
.card-badge {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-size: 1.3rem;
  background: var(--surface);
  border: 2px solid var(--border);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
.player .card-badge { width: 45px; height: 45px; font-size: 1.5rem; }
.player.voted .card-badge { border-color: var(--success); background: var(--success-soft); }
.player-face.back {
  transform: rotateY(180deg);
  font-size: 2.6rem;
  font-weight: 800;
  border-color: var(--accent);
  background: var(--accent-soft);
}
.player-face.back.empty { color: var(--muted); border-color: var(--border); background: var(--surface-2); }

.player-name {
  max-width: 100%;
  font-size: 0.86rem;
  font-weight: 600;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.player.me .player-name { color: var(--accent); }

/* ---------- bomb ---------- */

/* «Рулетка»: подсветка бежит по карточкам и останавливается на жертве, та пульсирует красным. */
.player.bomb-lit .player-face.front {
  border-color: #f97316;
  box-shadow: 0 0 0 3px #f97316, 0 0 26px 4px rgba(249, 115, 22, 0.65);
}
.player.bomb-target .player-face.front {
  border-color: #ef4444;
  animation: bomb-target-glow 0.35s ease-in-out infinite alternate;
}
.player.bomb-target .player-card { animation: bomb-target-shake 0.14s linear infinite; }
@keyframes bomb-target-glow {
  from { box-shadow: 0 0 0 3px #ef4444, 0 0 14px 2px rgba(239, 68, 68, 0.5); }
  to { box-shadow: 0 0 0 4px #ef4444, 0 0 36px 8px rgba(239, 68, 68, 0.85); }
}
@keyframes bomb-target-shake {
  0%, 100% { transform: none; }
  25% { transform: translateX(-2px) rotate(-1deg); }
  75% { transform: translateX(2px) rotate(1deg); }
}

.bomb {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 95;
  font-size: 3.2rem;
  line-height: 1;
  pointer-events: none;
  will-change: transform;
  filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.3));
}
.bomb-body { display: block; transform-origin: 50% 80%; }
.bomb.armed .bomb-body { animation: bomb-wobble 0.5s ease-in-out infinite alternate; }
/* Искра на фитиле — у эмодзи 💣 он справа сверху. */
.bomb-spark {
  position: absolute;
  right: -0.18em;
  top: -0.32em;
  font-size: 0.45em;
  animation: bomb-spark 0.18s steps(2) infinite alternate;
}
@keyframes bomb-wobble {
  from { transform: rotate(-7deg); }
  to { transform: rotate(7deg); }
}
@keyframes bomb-spark {
  from { transform: scale(0.7); opacity: 0.7; }
  to { transform: scale(1.25) rotate(25deg); opacity: 1; }
}

.card-fx {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 96;
  line-height: 1;
  pointer-events: none;
  will-change: transform, opacity;
}
.bomb-boom { font-size: 5rem; }
.bomb-flash {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff7d6 0 20%, #fbbf24 40%, rgba(249, 115, 22, 0.6) 60%, transparent 72%);
}
.bomb-debris { width: 8px; height: 8px; border-radius: 2px; }
.bomb-smoke {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(120, 120, 120, 0.55);
  filter: blur(6px);
}

/* Вместо взорванной карточки — кучка пепла с тлеющими угольками и дымком. */
.ash-pile {
  display: none;
  position: absolute;
  left: 50%;
  bottom: 10px;
  width: 92px;
  height: 44px;
  margin-left: -46px;
  transform-origin: 50% 100%;
}
.player.bombed .ash-pile { display: block; animation: ash-in 0.5s 0.12s ease-out both; }
.player.bombed .player-card-inner { visibility: hidden; }
.player.bombed .player-name { opacity: 0.6; }
.ash-pile::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50% 50% 46% 46% / 100% 100% 18% 18%;
  background:
    radial-gradient(circle at 30% 40%, rgba(255, 255, 255, 0.2) 0 3px, transparent 4px),
    radial-gradient(circle at 62% 28%, rgba(0, 0, 0, 0.25) 0 2px, transparent 3px),
    radial-gradient(circle at 76% 62%, rgba(255, 255, 255, 0.14) 0 2px, transparent 3px),
    radial-gradient(circle at 44% 68%, rgba(0, 0, 0, 0.22) 0 3px, transparent 4px),
    radial-gradient(circle at 18% 75%, rgba(255, 255, 255, 0.12) 0 2px, transparent 3px),
    linear-gradient(180deg, #918b86, #5d5854 70%, #46423f);
  box-shadow: 0 6px 10px -4px rgba(0, 0, 0, 0.45);
}
/* Рассыпанный вокруг пепел и тень. */
.ash-pile::after {
  content: "";
  position: absolute;
  left: -16px;
  right: -16px;
  bottom: -4px;
  height: 12px;
  z-index: -1;
  background:
    radial-gradient(circle at 4% 55%, #6b6662 0 2px, transparent 3px),
    radial-gradient(circle at 11% 30%, #7d7873 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 90% 60%, #6b6662 0 2px, transparent 3px),
    radial-gradient(circle at 97% 35%, #5d5854 0 1.5px, transparent 2.5px),
    radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0.3), transparent 70%);
}
.ash-ember {
  position: absolute;
  z-index: 1;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fb923c;
  box-shadow: 0 0 6px 2px rgba(249, 115, 22, 0.7);
  animation: ash-ember 1.6s ease-in-out infinite alternate;
}
.ash-ember:nth-child(1) { left: 36%; top: 34%; }
.ash-ember:nth-child(2) { left: 64%; top: 58%; animation-delay: 0.7s; }
.ash-smoke {
  position: absolute;
  bottom: 55%;
  left: 42%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(150, 150, 150, 0.45);
  filter: blur(3px);
  opacity: 0;
  animation: ash-smoke 2.8s ease-out infinite;
}
.ash-smoke:nth-of-type(4) { left: 32%; animation-delay: 0.9s; }
.ash-smoke:nth-of-type(5) { left: 54%; animation-delay: 1.8s; }
@keyframes ash-in {
  from { opacity: 0; transform: scale(0.4, 0.2); }
}
@keyframes ash-ember {
  from { opacity: 0.25; }
  to { opacity: 1; }
}
@keyframes ash-smoke {
  0% { opacity: 0; transform: translate(0, 0) scale(0.6); }
  20% { opacity: 0.75; }
  100% { opacity: 0; transform: translate(6px, -60px) scale(2.4); }
}

.kick-btn {
  position: absolute;
  top: -8px;
  right: 6px;
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s, border-color 0.15s;
}
.player:hover .kick-btn, .kick-btn:focus-visible { opacity: 1; }
.kick-btn:hover { color: var(--danger); border-color: var(--danger); }

.edit-btn {
  position: absolute;
  top: -10px;
  right: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--accent);
  box-shadow: var(--shadow);
  cursor: pointer;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.15s, transform 0.15s, border-color 0.15s;
  z-index: 2;
}
.edit-btn svg { width: 14px; height: 14px; }
.player:hover .edit-btn, .edit-btn:focus-visible { opacity: 1; transform: scale(1); }
.edit-btn:hover { border-color: var(--accent); }
@media (hover: none) {
  .kick-btn, .edit-btn { opacity: 1; transform: none; }
}

/* ---------- card backs ---------- */

.card-back {
  position: absolute;
  inset: 0;
  background-color: var(--surface-2);
  background-position: center;
}
.card-back.image { background-size: cover; }

/* 🎹 Радужная рубашка на один раунд: шесть горизонтальных полос, как на радужном флаге.
   Ложится поверх своей снизу вверх, по ней бегает блик. */
.player.rainbow .card-back::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.5) 50%, transparent 65%) 150% 0 / 250% 100% no-repeat,
    linear-gradient(180deg,
      #e40303 0 16.67%, #ff8c00 0 33.33%, #ffed00 0 50%,
      #008026 0 66.67%, #004dff 0 83.33%, #750787 0 100%);
  animation: rainbow-in 0.6s ease-out both, rainbow-shine 2.6s 0.6s ease-in-out infinite;
}
@keyframes rainbow-in {
  from { clip-path: inset(100% 0 0 0); }
  to { clip-path: inset(0 0 0 0); }
}
@keyframes rainbow-shine {
  from { background-position: 150% 0, 0 0; }
  to { background-position: -50% 0, 0 0; }
}
.rainbow-note { font-size: 1.6rem; }

.card-back--indigo-stripes {
  background: repeating-linear-gradient(45deg, #4f46e5 0 6px, #6366f1 6px 12px);
}
.card-back--crimson-dots {
  background-color: #dc2626;
  background-image: radial-gradient(#fecaca 2.5px, transparent 3px);
  background-size: 12px 12px;
}
.card-back--emerald-checks {
  background-color: #047857;
  background-image: conic-gradient(#10b981 25%, transparent 0 50%, #10b981 0 75%, transparent 0);
  background-size: 16px 16px;
}
.card-back--amber-zigzag {
  background:
    linear-gradient(135deg, #fde68a 25%, transparent 25%) -8px 0 / 16px 16px,
    linear-gradient(225deg, #fde68a 25%, transparent 25%) -8px 0 / 16px 16px,
    linear-gradient(315deg, #fde68a 25%, transparent 25%) 0 0 / 16px 16px,
    linear-gradient(45deg, #fde68a 25%, #f59e0b 25%) 0 0 / 16px 16px;
}
.card-back--teal-ripples {
  background: repeating-radial-gradient(circle at 0 0, #0e7490 0 5px, #22d3ee 5px 8px);
}
.card-back--violet-diamonds {
  background-color: #5b21b6;
  background-image:
    linear-gradient(45deg, #8b5cf6 25%, transparent 25%, transparent 75%, #8b5cf6 75%),
    linear-gradient(-45deg, #8b5cf6 25%, transparent 25%, transparent 75%, #8b5cf6 75%);
  background-size: 14px 14px;
}
.card-back--slate-grid {
  background-color: #334155;
  background-image:
    linear-gradient(#64748b 1px, transparent 1px),
    linear-gradient(90deg, #64748b 1px, transparent 1px);
  background-size: 10px 10px;
}
.card-back--pink-sunburst {
  background: repeating-conic-gradient(from 0deg at 50% 50%, #db2777 0 10deg, #f472b6 10deg 20deg);
}
.card-back--sky-triangles {
  background-color: #0369a1;
  background-image:
    linear-gradient(60deg, #38bdf8 25%, transparent 25.5%, transparent 75%, #38bdf8 75%),
    linear-gradient(120deg, #38bdf8 25%, transparent 25.5%, transparent 75%, #38bdf8 75%);
  background-size: 16px 28px;
}
.card-back--midnight-stars {
  background-color: #1e1b4b;
  background-image:
    radial-gradient(#fde68a 1px, transparent 1.6px),
    radial-gradient(#c7d2fe 0.8px, transparent 1.4px);
  background-size: 18px 18px, 11px 11px;
  background-position: 0 0, 5px 7px;
}

/* ---------- profile modal ---------- */

.profile-panel { max-width: 460px; }
.profile-panel h2 { margin-bottom: 18px; }

.profile-preview {
  display: flex;
  justify-content: center;
  margin-bottom: 18px;
}
.preview-card {
  position: relative;
  width: 84px;
  height: 116px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 12px;
  border: 2px solid var(--border);
  box-shadow: var(--shadow-lg);
}

.back-picker {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}
.back-option {
  position: relative;
  aspect-ratio: 64 / 88;
  padding: 0;
  overflow: hidden;
  border-radius: 8px;
  border: 2px solid var(--border);
  background: var(--surface-2);
  cursor: pointer;
  transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s;
}
.back-option:hover { transform: translateY(-2px); }
.back-option[aria-checked="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft), 0 0 0 4px var(--accent);
}
.back-option[aria-checked="true"]::after {
  content: "✓";
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 0.65rem;
  font-weight: 800;
  color: var(--accent-text);
  background: var(--accent);
}
.back-option.upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-style: dashed;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 600;
}
.back-option.upload:hover { color: var(--accent); border-color: var(--accent); }
.back-option.upload .upload-icon { font-size: 1.1rem; line-height: 1; }

.modal-actions { display: flex; justify-content: flex-end; gap: 10px; }

.poker-table {
  position: relative; /* для таймера песочных часов */
  width: 100%;
  max-width: 560px;
  min-height: 150px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  border-radius: 80px;
  background: var(--table);
  border: 2px solid var(--table-border);
}
.table-status { margin: 0; font-weight: 600; }
.table-sub { margin: 0; color: var(--muted); font-size: 0.9rem; }
.host-controls { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

.results { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.results-summary { display: flex; gap: 24px; justify-content: center; align-items: center; }
.stat { display: flex; flex-direction: column; align-items: center; }
.stat-value { font-size: 1.7rem; font-weight: 800; line-height: 1.1; }
.stat-label { font-size: 0.8rem; color: var(--muted); }
/* «Consensus» — в одной строке с цифрами, чтобы не добавлять столу высоты. */
.consensus { margin: 0; color: var(--success); font-weight: 700; }
.distribution { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.distribution span {
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 0.85rem;
}

/* hand of cards */
.hand {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 12px 16px 18px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--border);
}
.hand-label { margin: 0 0 10px; text-align: center; font-size: 0.86rem; color: var(--muted); }
.hand-cards {
  display: flex;
  gap: 10px;
  justify-content: safe center;
  overflow-x: auto;
  padding: 20px 4px 4px;
  scrollbar-width: thin;
}
.vote-card {
  flex-shrink: 0;
  width: 84px;
  height: 126px;
  border-radius: 14px;
  border: 2px solid var(--accent);
  background: var(--surface);
  color: var(--accent);
  font-size: 1.9rem;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.15s, background 0.15s, color 0.15s, box-shadow 0.15s;
}
.vote-card:hover:not(:disabled) { transform: translateY(-9px); box-shadow: var(--shadow); }
.vote-card.selected {
  transform: translateY(-18px);
  background: var(--accent);
  color: var(--accent-text);
  box-shadow: var(--shadow-lg);
}
.vote-card:disabled { cursor: not-allowed; opacity: 0.45; }
.vote-card.selected:disabled { opacity: 0.8; }

/* Карта «свой эмодзи»: радужная рамка, внутри сменяющийся эмодзи. */
.vote-card.emoji-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-color: transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(135deg, #f472b6, #a78bfa, #38bdf8, #34d399) border-box;
}
.vote-card.emoji-card.selected {
  background:
    linear-gradient(var(--accent-soft), var(--accent-soft)) padding-box,
    linear-gradient(135deg, #f472b6, #a78bfa, #38bdf8, #34d399) border-box;
}
.emoji-face { font-size: 2.4rem; line-height: 1; }
.emoji-face.pop { animation: emoji-pop 0.4s cubic-bezier(0.3, 1.6, 0.5, 1); }
.emoji-hint {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
@keyframes emoji-pop {
  from { transform: scale(0.3) rotate(-25deg); opacity: 0; }
  to { transform: none; opacity: 1; }
}

/* ---------- emoji picker ---------- */

.emoji-panel { max-width: 520px; }
.emoji-panel h2 { margin-bottom: 4px; }
.emoji-search { margin-bottom: 10px; }
.emoji-jump {
  display: flex;
  gap: 4px;
  margin-bottom: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}
.emoji-jump button {
  flex: 1 0 auto;
  min-width: 36px;
  height: 36px;
  padding: 0 6px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-size: 1.25rem;
  cursor: pointer;
  opacity: 0.7;
  transition: background 0.12s, opacity 0.12s;
}
.emoji-jump button:hover { background: var(--accent-soft); opacity: 1; }
.emoji-jump button.active { background: var(--accent-soft); opacity: 1; box-shadow: inset 0 -2px 0 var(--accent); }
.emoji-groups {
  position: relative;
  height: min(46vh, 400px);
  overflow-y: auto;
  margin: 0 -6px 16px;
  padding: 0 6px;
  overscroll-behavior: contain;
}
.emoji-group-title {
  position: sticky;
  top: 0;
  z-index: 1;
  margin: 0;
  padding: 10px 0 6px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--surface);
}
.emoji-empty { margin: 48px 0 0; text-align: center; color: var(--muted); }
.emoji-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
  gap: 6px;
}
.emoji-option {
  aspect-ratio: 1;
  padding: 0;
  border-radius: 10px;
  border: 2px solid transparent;
  background: var(--surface-2);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.12s, border-color 0.12s, background 0.12s;
}
.emoji-option:hover { transform: scale(1.12); background: var(--accent-soft); }
.emoji-option[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.modal-actions .spacer { flex: 1; }

/* ---------- modal & messages ---------- */

.overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 16px;
  overflow-y: auto;
  background: rgba(10, 12, 20, 0.5);
  z-index: 50;
}
/* Прогрев окна эмодзи после входа: окно разложено и отрисовано, но его не видно и оно не мешает.
   Не opacity: 0 — полностью прозрачное браузер может не рисовать вовсе. */
.overlay.warming { z-index: -1; opacity: 0.01; pointer-events: none; }
/* margin: auto центрирует окно, а если оно выше экрана — прижимает к верху и даёт прокрутку. */
.overlay .panel { margin: auto 0; box-shadow: var(--shadow-lg); }
.overlay h2 { margin: 0 0 6px; font-size: 1.3rem; }
.overlay .lead { margin: 0 0 20px; color: var(--muted); }
.message-panel { text-align: center; }
.message-emoji { font-size: 2.6rem; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 20px);
  padding: 10px 18px;
  border-radius: 10px;
  background: var(--text);
  color: var(--bg);
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 100;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.room-page .toast { bottom: 230px; }

@media (max-width: 600px) {
  .topbar { padding: 10px 12px; gap: 10px; }
  .brand-text { display: none; }
  .copy-text { display: none; }
  .panel { padding: 20px; }
  .poker-table { border-radius: 40px; padding: 20px 16px; }
  .vote-card { width: 75px; height: 111px; font-size: 1.65rem; }
  .emoji-face { font-size: 2.1rem; }
  .player { width: 124px; }
  /* место под боковую панель слева */
  .room-main { padding-left: 72px; padding-right: 8px; }
  .tools { left: 6px; }
  .tool-btn { width: 42px; height: 42px; font-size: 1.45rem; }
  .tool-panel { left: 66px; width: calc(100vw - 76px); padding: 12px; }
  .launch-emoji { font-size: 1.25rem; }
  .react-emoji, .react-reroll { width: 36px; height: 36px; }
  .react-emoji { font-size: 1.35rem; }
  .back-picker { grid-template-columns: repeat(4, 1fr); }
}

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