/*
 * Оформление Словотрона.
 *
 * Отдельный файл, потому что тот же CSS подключает панель для живого превью:
 * рядом со сбросом html/body из оверлея панель получила бы overflow:hidden и
 * прозрачный фон на всю страницу.
 *
 * Семь характеров с канваса Ember (02.09.2026): Эмбер · Вечернее шоу ·
 * Аркада · Меловая доска · Таро · Вампирский · Демонский. Старые «Бумага»,
 * «Неон» и «Без фона» остались как были — у людей они уже выбраны.
 *
 * Подписи («ближе всех», «слово угадано», слова тепла) у каждого характера
 * свои: разметка одна, текст подставляют CSS-переменные через content.
 * Вся живность — transform, opacity и filter; на победе — canvas-конфетти.
 */

/* ------------------------------------------------------------------ */
/* Основа                                                              */
/* ------------------------------------------------------------------ */

.slov-root {
  /* Концепт «Эмбер»: тёплый уголь + янтарь лисы, острые углы. */
  --slov-font: "Manrope", Inter, system-ui, sans-serif;
  --slov-size: 18px;
  --slov-accent: #ff6a2b;
  --slov-win: #8cc97e;
  --slov-bg: rgba(22, 17, 11, 0.82);
  --slov-radius: 4px;
  --slov-width: 380px;
  --slov-ink: #efe6d4;
  --slov-ink-2: #8a7b63;

  /* Подписи по умолчанию — их переопределяет характер. */
  --slov-title: "Словотрон";
  --slov-round-word: "Раунд";
  --slov-best-label: "Ближе всех";
  --slov-hint-label: "Подсказка";
  --slov-win-label: "Слово угадано";
  --slov-board-label: "Лидеры";
  --slov-cta: "";
  --slov-heat-burning: "горячо";
  --slov-heat-hot: "тепло";
  --slov-heat-warm: "прохладно";
  --slov-heat-cold: "холодно";
  --slov-rank-prefix: "#";
  --slov-heat-sep: " · ";

  position: fixed;
  /* Высота по содержимому. Растяжка на весь источник давала полосу пустоты
     под лентой всякий раз, когда браузерный источник выше блока, — а он
     почти всегда выше. Потолок оставлен, чтобы длинная лента не уехала за
     край кадра. */
  max-height: calc(100% - 48px);
  width: var(--slov-width);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
  padding: 16px;
  border-radius: var(--slov-radius);
  background: var(--slov-bg);
  color: var(--slov-ink);
  font-family: var(--slov-font);
  font-size: var(--slov-size);
  /* Источник лежит поверх сцены и не должен ловить клики. */
  pointer-events: none;
}
.slov-root[hidden] { display: none; }
/* У блоков внутри собственный display (grid/flex), а он перебивает
   [hidden] из стилей браузера — без этого правила «слово угадано»
   висело бы на экране весь раунд. */
.slov-root [hidden] { display: none !important; }
.slov-root[data-position="right"] { right: 24px; }
.slov-root[data-position="left"] { left: 24px; }
/* Раз высота теперь по содержимому, блок надо к чему-то прижать. */
.slov-root[data-vertical="top"] { top: 24px; }
.slov-root[data-vertical="bottom"] { bottom: 24px; }

/* Живой фон: два медленных пятна, как в остальном оформлении FoxChat.
   Характеры используют эти же два <i> под свою живность: каплю крови,
   летучую мышь, языки пламени, меловую пыль. */
.slov-glow { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.slov-glow i {
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  filter: blur(52px);
  opacity: .35;
}
.slov-glow i:nth-child(1) {
  top: -90px; right: -60px;
  background: var(--slov-accent);
  animation: slov-drift 19s ease-in-out infinite;
}
.slov-glow i:nth-child(2) {
  bottom: -110px; left: -70px;
  background: #ffb454;
  animation: slov-drift 26s ease-in-out infinite reverse;
}
@keyframes slov-drift {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(28px, -22px, 0); }
}

.slov-head {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.slov-eyebrow {
  font-size: calc(var(--slov-size) * 0.6);
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--slov-accent);
}
.slov-round {
  font-size: calc(var(--slov-size) * 0.58);
  font-weight: 700;
  color: var(--slov-ink-2);
  font-variant-numeric: tabular-nums;
}

/* ---- Лучший результат ---- */

.slov-best {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 4px 10px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--slov-accent) 40%, transparent);
  border-radius: calc(var(--slov-radius) - 6px);
  background: color-mix(in srgb, var(--slov-accent) 14%, transparent);
}
.slov-best-label {
  grid-column: 1 / -1;
  font-size: calc(var(--slov-size) * 0.52);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--slov-ink-2);
}
.slov-best-word {
  min-width: 0;
  font-size: calc(var(--slov-size) * 1.25);
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.slov-best-rank {
  font-size: calc(var(--slov-size) * 0.85);
  font-weight: 800;
  color: var(--slov-accent);
  font-variant-numeric: tabular-nums;
}
.slov-best-by {
  grid-column: 1 / -1;
  font-size: calc(var(--slov-size) * 0.58);
  color: var(--slov-ink-2);
}

/* ---- Подсказка ---- */

.slov-hint {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  font-size: calc(var(--slov-size) * 0.66);
}
.slov-hint span { color: var(--slov-ink-2); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: .82em; }
.slov-hint b { font-weight: 800; }

/* ---- Лента попыток ---- */

.slov-feed {
  position: relative;
  /* Лента ровно по числу строк из настроек: тянуться ей больше некуда. */
  flex: 0 0 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
}
.slov-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 10px;
  padding: 7px 11px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .05);
  /* Свежая попытка въезжает сверху: без движения лента читается как список.
     Уже показанные строки (is-settled) на перерисовке не дёргаются. */
  animation: slov-in .28s ease-out both;
}
.slov-item.is-settled { animation: none; }
@keyframes slov-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}
.slov-item-word {
  min-width: 0;
  font-weight: 700;
  font-size: calc(var(--slov-size) * 0.84);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.slov-item-by { display: block; font-size: .72em; font-weight: 500; color: var(--slov-ink-2); }
.slov-item-rank {
  font-weight: 800;
  font-size: calc(var(--slov-size) * 0.78);
  font-variant-numeric: tabular-nums;
}
/* Слово тепла перед рангом включает характер (is-worded), базовый вид — только число. */
.slov-item[data-heat="burning"] { --slov-heat: var(--slov-heat-burning); }
.slov-item[data-heat="hot"] { --slov-heat: var(--slov-heat-hot); }
.slov-item[data-heat="warm"] { --slov-heat: var(--slov-heat-warm); }
.slov-item[data-heat="cold"] { --slov-heat: var(--slov-heat-cold); }
.slov-best[data-heat="burning"] { --slov-heat: var(--slov-heat-burning); }
.slov-best[data-heat="hot"] { --slov-heat: var(--slov-heat-hot); }
.slov-best[data-heat="warm"] { --slov-heat: var(--slov-heat-warm); }
.slov-best[data-heat="cold"] { --slov-heat: var(--slov-heat-cold); }
.slov-root.is-worded .slov-item-rank::before,
.slov-root.is-worded .slov-best-rank::before { content: var(--slov-heat) var(--slov-heat-sep) var(--slov-rank-prefix); }
/* Чем ближе слово, тем теплее число: холодный→тёплый вместо одинакового серого. */
.slov-item[data-heat="cold"] .slov-item-rank { color: #7d8bb3; }
.slov-item[data-heat="warm"] .slov-item-rank { color: #e0b45a; }
.slov-item[data-heat="hot"] .slov-item-rank { color: #f0784f; }
.slov-item[data-heat="burning"] .slov-item-rank { color: #ff5470; }

/* ---- Победа ---- */

.slov-win {
  position: relative;
  display: grid;
  gap: 3px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--slov-win) 46%, transparent);
  border-radius: calc(var(--slov-radius) - 6px);
  background: color-mix(in srgb, var(--slov-win) 15%, transparent);
  animation: slov-pop .4s cubic-bezier(.2, 1.4, .4, 1) both;
}
@keyframes slov-pop {
  from { opacity: 0; transform: scale(.9); }
  to { opacity: 1; transform: none; }
}
.slov-win-label {
  font-size: calc(var(--slov-size) * 0.52);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--slov-win);
}
.slov-win-word { font-size: calc(var(--slov-size) * 1.5); font-weight: 900; }
/* Буквы ответа — отдельные span'ы: характер решает, как они появляются. */
.slov-letter { display: inline-block; }
.slov-win-by { font-size: calc(var(--slov-size) * 0.72); font-weight: 700; }
.slov-win-next { font-size: calc(var(--slov-size) * 0.6); color: var(--slov-ink-2); }

/* ---- Лидеры ---- */

.slov-board { position: relative; display: grid; gap: 5px; }
.slov-board-label {
  font-size: calc(var(--slov-size) * 0.52);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--slov-ink-2);
}
.slov-board ol { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; }
.slov-board li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 8px;
  font-size: calc(var(--slov-size) * 0.7);
}
.slov-board li b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.slov-board li i { font-style: normal; color: var(--slov-ink-2); font-variant-numeric: tabular-nums; }
.slov-board li span { color: var(--slov-accent); font-weight: 800; font-variant-numeric: tabular-nums; }

.slov-foot {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 10px;
  font-size: calc(var(--slov-size) * 0.58);
  color: var(--slov-ink-2);
  font-variant-numeric: tabular-nums;
}
/* Призыв «пишите слова в чат» — строкой над счётчиками, если характер его задал. */
.slov-root.is-worded .slov-foot::before {
  content: var(--slov-cta);
  flex-basis: 100%;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: .9em;
}
.slov-root.is-worded .slov-foot::before:empty { display: none; }

.slov-confetti {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ------------------------------------------------------------------ */
/* Подмена подписей: текст в разметке гасится, характер подставляет свой */
/* ------------------------------------------------------------------ */

.slov-root.is-worded .slov-eyebrow,
.slov-root.is-worded .slov-best-label,
.slov-root.is-worded .slov-hint > span,
.slov-root.is-worded .slov-win-label,
.slov-root.is-worded .slov-board-label,
.slov-root.is-worded .slov-round-word { font-size: 0; letter-spacing: 0; }
.slov-root.is-worded .slov-eyebrow::before,
.slov-root.is-worded .slov-best-label::before,
.slov-root.is-worded .slov-hint > span::before,
.slov-root.is-worded .slov-win-label::before,
.slov-root.is-worded .slov-board-label::before,
.slov-root.is-worded .slov-round-word::before { letter-spacing: inherit; }
.slov-root.is-worded .slov-eyebrow::before { content: var(--slov-title); font-size: calc(var(--slov-size) * 0.6); }
.slov-root.is-worded .slov-best-label::before { content: var(--slov-best-label); font-size: calc(var(--slov-size) * 0.5); }
.slov-root.is-worded .slov-hint > span::before { content: var(--slov-hint-label); font-size: calc(var(--slov-size) * 0.54); }
.slov-root.is-worded .slov-win-label::before { content: var(--slov-win-label); font-size: calc(var(--slov-size) * 0.52); }
.slov-root.is-worded .slov-board-label::before { content: var(--slov-board-label); font-size: calc(var(--slov-size) * 0.52); }
.slov-root.is-worded .slov-round-word::before { content: var(--slov-round-word); font-size: calc(var(--slov-size) * 0.58); }
/* В ленте характеры ставят ник перед словом, как в титрах: «murkicat · лиса». */
.slov-root.is-worded .slov-item-word { display: flex; align-items: baseline; gap: 8px; }
.slov-root.is-worded .slov-item-by { order: -1; display: inline; font-size: .95em; font-weight: 700; flex-shrink: 0; }
.slov-root.is-worded .slov-item-rank { letter-spacing: .06em; text-transform: uppercase; }

/* ------------------------------------------------------------------ */
/* Эмбер (id «aurora»): уголь, янтарь, моно-подписи, LED в шапке        */
/* ------------------------------------------------------------------ */

.slov-root[data-skin="aurora"] {
  --slov-font: "Onest", "Manrope", Inter, system-ui, sans-serif;
  --slov-display: "Unbounded", "Arial Black", sans-serif;
  --slov-mono: "JetBrains Mono", Consolas, monospace;
  --slov-ink: #efe6d4;
  --slov-ink-2: #8a7b63;
  --slov-title: "Словотрон";
  --slov-best-label: "Ближе всех";
  --slov-hint-label: "Подсказка";
  --slov-win-label: "Слово угадано";
  --slov-cta: "Пишите слова в чат · ближе = горячее";
  gap: 8px;
  padding: 0;
  border: 1px solid rgba(239, 230, 214, .12);
  border-radius: 4px;
}
.slov-root[data-skin="aurora"] .slov-glow i { display: none; }
.slov-root[data-skin="aurora"] .slov-head {
  align-items: center;
  padding: 11px 14px;
  border-bottom: 1px solid rgba(239, 230, 214, .1);
}
.slov-root[data-skin="aurora"] .slov-eyebrow { display: inline-flex; align-items: center; gap: 8px; }
.slov-root[data-skin="aurora"] .slov-eyebrow::after {
  content: "";
  order: -1;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--slov-accent);
  box-shadow: 0 0 8px var(--slov-accent);
  animation: slov-led 1.6s infinite;
}
@keyframes slov-led { 50% { opacity: .4; } }
.slov-root[data-skin="aurora"] .slov-eyebrow::before,
.slov-root[data-skin="aurora"] .slov-round,
.slov-root[data-skin="aurora"] .slov-round-word::before,
.slov-root[data-skin="aurora"] .slov-best-label::before,
.slov-root[data-skin="aurora"] .slov-best-rank,
.slov-root[data-skin="aurora"] .slov-best-by,
.slov-root[data-skin="aurora"] .slov-hint > span::before,
.slov-root[data-skin="aurora"] .slov-item-rank,
.slov-root[data-skin="aurora"] .slov-win-label::before,
.slov-root[data-skin="aurora"] .slov-win-by,
.slov-root[data-skin="aurora"] .slov-win-next,
.slov-root[data-skin="aurora"] .slov-board-label::before,
.slov-root[data-skin="aurora"] .slov-foot { font-family: var(--slov-mono); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }
.slov-root[data-skin="aurora"] .slov-eyebrow::before { font-size: calc(var(--slov-size) * 0.53); letter-spacing: .2em; }
.slov-root[data-skin="aurora"] .slov-round { letter-spacing: .12em; font-size: calc(var(--slov-size) * 0.5); }
.slov-root[data-skin="aurora"] .slov-best {
  padding: 8px 14px 2px;
  border: 0;
  background: none;
}
.slov-root[data-skin="aurora"] .slov-best-label::before { font-size: calc(var(--slov-size) * 0.45); letter-spacing: .18em; }
.slov-root[data-skin="aurora"] .slov-best-word { font-family: var(--slov-display); font-size: calc(var(--slov-size) * 1.22); font-weight: 900; color: #ffb454; text-transform: uppercase; }
.slov-root[data-skin="aurora"] .slov-best-rank { font-size: calc(var(--slov-size) * 0.5); letter-spacing: .1em; }
.slov-root[data-skin="aurora"] .slov-best-by { font-size: calc(var(--slov-size) * 0.5); letter-spacing: .04em; text-transform: none; }
.slov-root[data-skin="aurora"] .slov-best-by::before { content: "от "; }
.slov-root[data-skin="aurora"] .slov-hint {
  margin: 4px 14px 0;
  padding: 8px 11px;
  border: 1px dashed rgba(255, 180, 84, .4);
  border-radius: 2px;
  background: none;
}
.slov-root[data-skin="aurora"] .slov-hint > span::before { color: #ffb454; font-size: calc(var(--slov-size) * 0.45); }
.slov-root[data-skin="aurora"] .slov-feed { gap: 0; margin-top: 4px; }
.slov-root[data-skin="aurora"] .slov-item {
  padding: 6px 14px;
  border-radius: 0;
  border-top: 1px solid rgba(239, 230, 214, .08);
  background: none;
  animation: slov-ember-row .5s both;
}
.slov-root[data-skin="aurora"] .slov-item.is-settled { animation: none; }
@keyframes slov-ember-row {
  from { opacity: 0; transform: translateX(-14px); filter: drop-shadow(0 0 8px rgba(255, 180, 84, .6)); }
  to { opacity: 1; transform: none; filter: none; }
}
.slov-root[data-skin="aurora"] .slov-item-by { color: #5fbfc9; }
.slov-root[data-skin="aurora"] .slov-item:nth-child(3n+2) .slov-item-by { color: #8cc97e; }
.slov-root[data-skin="aurora"] .slov-item:nth-child(3n) .slov-item-by { color: #e091c9; }
.slov-root[data-skin="aurora"] .slov-item-rank { font-size: calc(var(--slov-size) * 0.5); letter-spacing: .1em; }
.slov-root[data-skin="aurora"] .slov-item[data-heat="cold"] .slov-item-rank { color: var(--slov-ink-2); }
.slov-root[data-skin="aurora"] .slov-item[data-heat="warm"] .slov-item-rank { color: #c9a065; }
.slov-root[data-skin="aurora"] .slov-item[data-heat="hot"] .slov-item-rank { color: #ffb454; }
.slov-root[data-skin="aurora"] .slov-item[data-heat="burning"] .slov-item-rank { color: var(--slov-accent); animation: slov-ember-hot 2.2s infinite; }
@keyframes slov-ember-hot { 50% { color: #ffb454; text-shadow: 0 0 10px rgba(255, 180, 84, .8); } }
.slov-root[data-skin="aurora"] .slov-win {
  margin: 6px 14px 0;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--slov-accent) 50%, transparent);
  border-radius: 3px;
  background: color-mix(in srgb, var(--slov-accent) 8%, transparent);
  text-align: center;
  animation: slov-win-grow .55s both, slov-ember-glow 3s .7s infinite;
}
@keyframes slov-win-grow { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: none; } }
@keyframes slov-ember-glow { 50% { box-shadow: 0 0 24px color-mix(in srgb, var(--slov-accent) 40%, transparent); border-color: #ff8a54; } }
.slov-root[data-skin="aurora"] .slov-win-label::before { color: var(--slov-accent); letter-spacing: .2em; font-size: calc(var(--slov-size) * 0.45); }
.slov-root[data-skin="aurora"] .slov-win-word { font-family: var(--slov-display); font-size: calc(var(--slov-size) * 1.55); text-transform: uppercase; }
.slov-root[data-skin="aurora"] .slov-letter { animation: slov-letter-in .35s calc(.25s + var(--n, 0) * 70ms) both; }
@keyframes slov-letter-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.slov-root[data-skin="aurora"] .slov-win-by { color: #ffb454; font-size: calc(var(--slov-size) * 0.52); letter-spacing: .04em; text-transform: none; }
.slov-root[data-skin="aurora"] .slov-win-next { font-size: calc(var(--slov-size) * 0.45); letter-spacing: .12em; }
.slov-root[data-skin="aurora"] .slov-board { padding: 6px 14px 0; }
.slov-root[data-skin="aurora"] .slov-foot {
  padding: 9px 14px;
  border-top: 1px solid rgba(239, 230, 214, .1);
  font-size: calc(var(--slov-size) * 0.45);
  letter-spacing: .12em;
}

/* ------------------------------------------------------------------ */
/* Вечернее шоу: тёмно-синий бархат, золото, гирлянда лампочек         */
/* ------------------------------------------------------------------ */

.slov-root[data-skin="show"] {
  --slov-font: "Manrope", Inter, system-ui, sans-serif;
  --slov-display: "Playfair Display", Georgia, serif;
  --slov-ink: #f3ecd9;
  --slov-ink-2: #8f96c6;
  --slov-gold: #e8c15a;
  --slov-gold-2: #f5d98a;
  --slov-title: "Словотрон";
  --slov-round-word: "Вечернее шоу · раунд";
  --slov-best-label: "Ближе всех";
  --slov-hint-label: "Подсказка:";
  --slov-win-label: "Победитель";
  --slov-board-label: "Звёзды вечера";
  --slov-cta: "";
  --slov-heat-burning: "★ горячо";
  --slov-rank-prefix: "";
  --slov-heat-sep: " · ";
  gap: 6px;
  padding: 22px 0 22px;
  border-radius: 14px;
  border: 2px solid var(--slov-gold);
  background: radial-gradient(140% 110% at 50% 0%, #232a52, #141833 60%, #0d1023);
  box-shadow: 0 0 0 5px #141833, 0 0 0 6px rgba(232, 193, 90, .5), 0 22px 50px rgba(0, 0, 0, .6);
}
/* Две гирлянды: точки-лампочки, два слоя моргают в противофазе — бегут по кругу. */
.slov-root[data-skin="show"]::before,
.slov-root[data-skin="show"]::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px;
  height: 8px;
  background-image:
    radial-gradient(circle, var(--slov-gold-2) 0 3px, transparent 3.5px),
    radial-gradient(circle, var(--slov-gold-2) 0 3px, transparent 3.5px);
  background-size: 36px 8px, 36px 8px;
  background-position: 0 0, 18px 0;
  background-repeat: repeat-x;
  filter: drop-shadow(0 0 5px var(--slov-gold));
  animation: slov-bulbs 1.6s linear infinite;
  pointer-events: none;
}
.slov-root[data-skin="show"]::before { top: 8px; }
.slov-root[data-skin="show"]::after { bottom: 8px; animation-delay: .8s; }
@keyframes slov-bulbs {
  0%, 100% { background-position: 0 0, 18px 0; opacity: 1; }
  49% { opacity: 1; }
  50% { background-position: 18px 0, 0 0; opacity: .45; }
  99% { opacity: .45; }
}
.slov-root[data-skin="show"] .slov-glow i { display: none; }
.slov-root[data-skin="show"] .slov-head {
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 0 14px 2px;
}
.slov-root[data-skin="show"] .slov-eyebrow::before {
  font-family: var(--slov-display);
  font-size: calc(var(--slov-size) * 1.3);
  font-weight: 900;
  letter-spacing: .04em;
  color: var(--slov-gold-2);
  text-shadow: 0 2px 0 #7a5f1e, 0 4px 14px rgba(232, 193, 90, .4);
}
.slov-root[data-skin="show"] .slov-round { font-size: calc(var(--slov-size) * 0.55); font-weight: 800; letter-spacing: .3em; text-transform: uppercase; }
.slov-root[data-skin="show"] .slov-round-word::before { font-size: calc(var(--slov-size) * 0.55); letter-spacing: .3em; }
.slov-root[data-skin="show"] .slov-best {
  justify-items: center;
  text-align: center;
  grid-template-columns: auto auto;
  justify-content: center;
  padding: 10px 14px 6px;
  border: 0;
  background: none;
}
.slov-root[data-skin="show"] .slov-best-label::before { letter-spacing: .3em; }
/* Лучшее слово — плитки-буквы, как на табло: подложка слоновой кости и тень. */
.slov-root[data-skin="show"] .slov-best-word {
  font-family: var(--slov-display);
  font-size: calc(var(--slov-size) * 1.35);
  font-weight: 900;
  color: #2b2013;
  padding: 4px 12px;
  border-radius: 5px;
  background: linear-gradient(180deg, #faf3df, #e7d9b8);
  box-shadow: 0 3px 0 #b09a67, 0 5px 10px rgba(0, 0, 0, .5);
  text-transform: uppercase;
  letter-spacing: .12em;
  animation: slov-flip .5s .2s both;
}
@keyframes slov-flip { from { opacity: 0; transform: rotateX(88deg); } to { opacity: 1; transform: none; } }
.slov-root[data-skin="show"] .slov-best-rank { color: var(--slov-gold-2); font-size: calc(var(--slov-size) * 0.6); font-weight: 800; letter-spacing: .08em; text-transform: lowercase; }
.slov-root[data-skin="show"] .slov-best-by { font-size: calc(var(--slov-size) * 0.58); color: #aeb4dd; }
.slov-root[data-skin="show"] .slov-hint {
  justify-content: center;
  padding: 0 20px 8px;
  border-radius: 0;
  background: none;
  color: #aeb4dd;
  font-size: calc(var(--slov-size) * 0.6);
}
.slov-root[data-skin="show"] .slov-hint > span::before { color: #aeb4dd; text-transform: none; letter-spacing: 0; font-size: calc(var(--slov-size) * 0.6); font-weight: 600; }
.slov-root[data-skin="show"] .slov-hint b { color: var(--slov-ink); }
.slov-root[data-skin="show"] .slov-feed { gap: 0; }
.slov-root[data-skin="show"] .slov-item {
  padding: 6px 14px;
  border-radius: 0;
  border-top: 1px solid rgba(232, 193, 90, .14);
  background: none;
  animation: slov-show-row .5s both;
}
.slov-root[data-skin="show"] .slov-item:first-child { border-top-color: rgba(232, 193, 90, .25); }
.slov-root[data-skin="show"] .slov-item.is-settled { animation: none; }
@keyframes slov-show-row { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.slov-root[data-skin="show"] .slov-item[data-heat="burning"] { background: rgba(232, 193, 90, .09); }
.slov-root[data-skin="show"] .slov-item-by { color: #8fd0da; }
.slov-root[data-skin="show"] .slov-item:nth-child(3n+2) .slov-item-by { color: #a9dd8f; }
.slov-root[data-skin="show"] .slov-item:nth-child(3n) .slov-item-by { color: #e0a3d1; }
.slov-root[data-skin="show"] .slov-item-rank { font-size: calc(var(--slov-size) * 0.55); letter-spacing: .08em; text-transform: lowercase; }
.slov-root[data-skin="show"] .slov-item[data-heat="cold"] .slov-item-rank { color: var(--slov-ink-2); }
.slov-root[data-skin="show"] .slov-item[data-heat="warm"] .slov-item-rank { color: #b9a56a; }
.slov-root[data-skin="show"] .slov-item[data-heat="hot"] .slov-item-rank { color: #c9b06a; }
.slov-root[data-skin="show"] .slov-item[data-heat="burning"] .slov-item-rank { color: var(--slov-gold-2); }
.slov-root[data-skin="show"] .slov-win {
  margin: 8px 14px 4px;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid var(--slov-gold);
  background: linear-gradient(180deg, rgba(232, 193, 90, .2), rgba(232, 193, 90, .08));
  text-align: center;
  animation: slov-show-row .55s both, slov-gold-glow 3s .7s infinite;
}
@keyframes slov-gold-glow { 50% { box-shadow: 0 0 26px rgba(232, 193, 90, .55); } }
.slov-root[data-skin="show"] .slov-win-label::before { color: var(--slov-gold-2); letter-spacing: .3em; font-weight: 800; }
.slov-root[data-skin="show"] .slov-win-word { font-family: var(--slov-display); font-size: calc(var(--slov-size) * 1.7); color: #fff; text-transform: uppercase; perspective: 400px; }
.slov-root[data-skin="show"] .slov-letter { animation: slov-flip .5s calc(.2s + var(--n, 0) * 120ms) both; }
.slov-root[data-skin="show"] .slov-win-by { font-weight: 600; font-size: calc(var(--slov-size) * 0.6); }
.slov-root[data-skin="show"] .slov-board { padding: 4px 14px 0; }
.slov-root[data-skin="show"] .slov-board li span { color: var(--slov-gold-2); }
.slov-root[data-skin="show"] .slov-foot { padding: 6px 14px 0; }

/* ------------------------------------------------------------------ */
/* Аркада: чёрный CRT, циан и маджента, Press Start 2P                */
/* ------------------------------------------------------------------ */

.slov-root[data-skin="arcade"] {
  --slov-font: "Rubik", Inter, system-ui, sans-serif;
  --slov-px: "Press Start 2P", "Pixelify Sans", monospace;
  --slov-cyan: #27e8f0;
  --slov-pink: #ff3fa4;
  --slov-yellow: #f8e341;
  --slov-ink: #d8f6ff;
  --slov-ink-2: #6f7fae;
  --slov-title: "Slovotron";
  --slov-round-word: "Round";
  --slov-best-label: "Hi-score · ближе всех";
  --slov-hint-label: "Hint:";
  --slov-win-label: "*** You win ***";
  --slov-board-label: "Top players";
  --slov-cta: "Insert word in chat ▸ continue";
  --slov-heat-burning: "hot";
  --slov-heat-hot: "warm";
  --slov-heat-warm: "cool";
  --slov-heat-cold: "cold";
  --slov-rank-prefix: "";
  --slov-heat-sep: " ";
  gap: 6px;
  padding: 0;
  border: 2px solid var(--slov-cyan);
  border-radius: 2px;
  background: #07070d;
  box-shadow: 0 0 18px rgba(39, 232, 240, .35), inset 0 0 40px rgba(39, 232, 240, .06);
}
/* Скан-линии CRT едут постоянно. */
.slov-root[data-skin="arcade"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .22) 0, rgba(0, 0, 0, .22) 1px, transparent 1px, transparent 3px);
  pointer-events: none;
  animation: slov-scan 1.2s linear infinite;
  z-index: 2;
}
@keyframes slov-scan { to { background-position: 0 6px; } }
.slov-root[data-skin="arcade"] .slov-glow i { display: none; }
.slov-root[data-skin="arcade"] .slov-head { align-items: center; padding: 12px 12px 6px; }
.slov-root[data-skin="arcade"] .slov-eyebrow::before,
.slov-root[data-skin="arcade"] .slov-round,
.slov-root[data-skin="arcade"] .slov-round-word::before,
.slov-root[data-skin="arcade"] .slov-best-label::before,
.slov-root[data-skin="arcade"] .slov-best-word,
.slov-root[data-skin="arcade"] .slov-best-rank,
.slov-root[data-skin="arcade"] .slov-best-by,
.slov-root[data-skin="arcade"] .slov-hint > span::before,
.slov-root[data-skin="arcade"] .slov-item-rank,
.slov-root[data-skin="arcade"] .slov-win-label::before,
.slov-root[data-skin="arcade"] .slov-win-word,
.slov-root[data-skin="arcade"] .slov-win-by,
.slov-root[data-skin="arcade"] .slov-win-next,
.slov-root[data-skin="arcade"] .slov-board-label::before,
.slov-root[data-skin="arcade"] .slov-foot { font-family: var(--slov-px); font-weight: 400; letter-spacing: 0; text-transform: uppercase; line-height: 1.6; }
.slov-root[data-skin="arcade"] .slov-eyebrow::before { font-size: calc(var(--slov-size) * 0.6); color: var(--slov-pink); animation: slov-neon 2.2s infinite; }
@keyframes slov-neon { 50% { text-shadow: 0 0 6px var(--slov-pink), 0 0 18px var(--slov-pink); } }
.slov-root[data-skin="arcade"] .slov-round { font-size: calc(var(--slov-size) * 0.38); color: var(--slov-cyan); }
.slov-root[data-skin="arcade"] .slov-best { padding: 2px 12px 8px; border: 0; background: none; }
.slov-root[data-skin="arcade"] .slov-best-label::before { font-size: calc(var(--slov-size) * 0.33); color: var(--slov-ink-2); }
.slov-root[data-skin="arcade"] .slov-best-word { font-size: calc(var(--slov-size) * 1); color: var(--slov-yellow); text-shadow: 2px 2px 0 #b8860b; }
.slov-root[data-skin="arcade"] .slov-best-rank { font-size: calc(var(--slov-size) * 0.38); color: var(--slov-pink); }
.slov-root[data-skin="arcade"] .slov-best-by { font-size: calc(var(--slov-size) * 0.33); color: var(--slov-ink-2); }
.slov-root[data-skin="arcade"] .slov-best-by::before { content: "by "; }
.slov-root[data-skin="arcade"] .slov-hint {
  margin: 0 12px;
  padding: 7px 10px;
  border-radius: 0;
  border: 1px solid rgba(248, 227, 65, .5);
  background: rgba(248, 227, 65, .06);
  font-size: calc(var(--slov-size) * 0.64);
}
.slov-root[data-skin="arcade"] .slov-hint > span::before { color: var(--slov-yellow); font-size: calc(var(--slov-size) * 0.33); }
.slov-root[data-skin="arcade"] .slov-hint b { font-weight: 600; }
.slov-root[data-skin="arcade"] .slov-feed { gap: 0; margin-top: 4px; }
.slov-root[data-skin="arcade"] .slov-item {
  padding: 7px 12px;
  border-radius: 0;
  border-top: 1px dashed rgba(39, 232, 240, .25);
  background: none;
  animation: slov-arcade-row .4s both;
}
.slov-root[data-skin="arcade"] .slov-item:first-child { border-top: 1px solid rgba(39, 232, 240, .4); }
.slov-root[data-skin="arcade"] .slov-item.is-settled { animation: none; }
@keyframes slov-arcade-row { from { opacity: 0; transform: translateX(-12px); filter: brightness(2); } to { opacity: 1; transform: none; filter: brightness(1); } }
.slov-root[data-skin="arcade"] .slov-item-by { color: var(--slov-cyan); font-weight: 800; }
.slov-root[data-skin="arcade"] .slov-item:nth-child(3n+2) .slov-item-by { color: #7bff9e; }
.slov-root[data-skin="arcade"] .slov-item:nth-child(3n) .slov-item-by { color: #ffb3e2; }
.slov-root[data-skin="arcade"] .slov-item-rank { font-size: calc(var(--slov-size) * 0.38); }
.slov-root[data-skin="arcade"] .slov-item[data-heat="cold"] .slov-item-rank { color: var(--slov-ink-2); }
.slov-root[data-skin="arcade"] .slov-item[data-heat="warm"] .slov-item-rank { color: #9ad0ff; }
.slov-root[data-skin="arcade"] .slov-item[data-heat="hot"] .slov-item-rank { color: var(--slov-yellow); }
.slov-root[data-skin="arcade"] .slov-item[data-heat="burning"] .slov-item-rank { color: var(--slov-pink); animation: slov-hot-blink 1.6s infinite; }
@keyframes slov-hot-blink { 50% { color: #fff; text-shadow: 0 0 8px var(--slov-pink); } }
.slov-root[data-skin="arcade"] .slov-win {
  margin: 6px 12px 0;
  padding: 14px 12px;
  border-radius: 0;
  border: 2px solid var(--slov-pink);
  background: rgba(255, 63, 164, .07);
  box-shadow: 0 0 16px rgba(255, 63, 164, .3);
  text-align: center;
  animation: slov-arcade-row .4s both, slov-pink-glow 2.6s 1s infinite;
}
@keyframes slov-pink-glow { 50% { box-shadow: 0 0 24px rgba(255, 63, 164, .6); } }
/* Экран «вспыхивает» белым кадром на победе. */
.slov-root[data-skin="arcade"] .slov-win::before {
  content: "";
  position: absolute;
  inset: -2px;
  background: #fff;
  opacity: 0;
  animation: slov-flash .9s .1s both;
  pointer-events: none;
}
@keyframes slov-flash { 0% { opacity: .5; } 12% { opacity: 0; } 20% { opacity: .35; } 28% { opacity: 0; } 100% { opacity: 0; } }
.slov-root[data-skin="arcade"] .slov-win-label::before { font-size: calc(var(--slov-size) * 0.38); color: var(--slov-pink); }
.slov-root[data-skin="arcade"] .slov-win-word { font-size: calc(var(--slov-size) * 1.1); color: #fff; text-shadow: 0 0 12px var(--slov-cyan); margin: 6px 0; }
.slov-root[data-skin="arcade"] .slov-letter { animation: slov-type .01s calc(.3s + var(--n, 0) * 90ms) both; }
@keyframes slov-type { from { opacity: 0; } to { opacity: 1; } }
.slov-root[data-skin="arcade"] .slov-win-by { font-size: calc(var(--slov-size) * 0.33); color: #7bff9e; }
.slov-root[data-skin="arcade"] .slov-win-next { font-size: calc(var(--slov-size) * 0.3); }
.slov-root[data-skin="arcade"] .slov-board { padding: 6px 12px 0; }
.slov-root[data-skin="arcade"] .slov-board-label::before { font-size: calc(var(--slov-size) * 0.33); }
.slov-root[data-skin="arcade"] .slov-board li span { color: var(--slov-yellow); }
.slov-root[data-skin="arcade"] .slov-foot {
  padding: 8px 12px 10px;
  border-top: 1px dashed rgba(39, 232, 240, .25);
  font-size: calc(var(--slov-size) * 0.33);
  color: var(--slov-ink-2);
}

/* ------------------------------------------------------------------ */
/* Меловая доска: зелёная доска в деревянной раме, Caveat и Neucha     */
/* ------------------------------------------------------------------ */

.slov-root[data-skin="chalk"] {
  --slov-font: "Neucha", "Comic Sans MS", cursive, system-ui;
  --slov-display: "Caveat", "Neucha", cursive;
  --slov-ink: #e9f2ea;
  --slov-ink-2: #b9cbbd;
  --slov-chalk: #ffe9a8;
  --slov-title: "Словотрон";
  --slov-round-word: "раунд";
  --slov-best-label: "ближе всех:";
  --slov-hint-label: "подсказка:";
  --slov-win-label: "слово угадано!";
  --slov-board-label: "лучшие ученики";
  --slov-cta: "пишите слова в чат";
  --slov-rank-prefix: "";
  --slov-heat-sep: " · ";
  gap: 6px;
  padding: 10px 0 8px;
  border: 10px solid #6d4a2f;
  border-radius: 6px;
  background: radial-gradient(140% 120% at 30% 10%, #2e4a3d, #24382f 55%, #1d2e27);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .55), inset 0 0 60px rgba(0, 0, 0, .4);
}
/* Меловая пыль: две крошки медленно осыпаются. */
.slov-root[data-skin="chalk"] .slov-glow i {
  width: 3px; height: 3px;
  filter: none;
  opacity: 0;
  background: #f5f9f4;
  animation: slov-dust 3.2s 1s infinite;
}
.slov-root[data-skin="chalk"] .slov-glow i:nth-child(1) { top: auto; right: auto; left: 22%; bottom: 40px; }
.slov-root[data-skin="chalk"] .slov-glow i:nth-child(2) { left: 66%; bottom: 44px; background: var(--slov-chalk); animation-duration: 3.8s; animation-delay: 2.2s; }
@keyframes slov-dust { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: .9; } 100% { opacity: 0; transform: translateY(26px); } }
.slov-root[data-skin="chalk"] .slov-head {
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 4px 14px 4px;
  text-transform: none;
}
.slov-root[data-skin="chalk"] .slov-eyebrow::before {
  display: inline-block;
  font-family: var(--slov-display);
  font-size: calc(var(--slov-size) * 1.85);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: #f5f9f4;
  transform: rotate(-2deg);
  text-shadow: 0 0 6px rgba(245, 249, 244, .25);
}
.slov-root[data-skin="chalk"] .slov-round { font-size: calc(var(--slov-size) * 0.7); font-weight: 400; text-transform: none; letter-spacing: 0; }
.slov-root[data-skin="chalk"] .slov-round-word::before { font-size: calc(var(--slov-size) * 0.7); text-transform: none; letter-spacing: 0; }
.slov-root[data-skin="chalk"] .slov-round::after { content: " ~"; }
/* Штриховая меловая линия под шапкой. */
.slov-root[data-skin="chalk"] .slov-head::after {
  content: "";
  width: calc(100% - 28px);
  height: 2px;
  margin-top: 6px;
  background: repeating-linear-gradient(90deg, rgba(233, 242, 234, .55) 0 14px, transparent 14px 20px);
  border-radius: 2px;
  opacity: .6;
}
.slov-root[data-skin="chalk"] .slov-best { padding: 4px 16px 0; border: 0; background: none; }
.slov-root[data-skin="chalk"] .slov-best-label::before { font-size: calc(var(--slov-size) * 0.66); font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--slov-ink-2); }
.slov-root[data-skin="chalk"] .slov-best-word { display: inline-block; font-family: var(--slov-display); font-size: calc(var(--slov-size) * 2.1); font-weight: 700; color: var(--slov-chalk); transform: rotate(-1deg); line-height: 1; }
.slov-root[data-skin="chalk"] .slov-best-rank { font-size: calc(var(--slov-size) * 0.7); font-weight: 400; color: #f0b7a4; text-transform: none; letter-spacing: 0; }
.slov-root[data-skin="chalk"] .slov-best-by { font-size: calc(var(--slov-size) * 0.66); margin-top: -4px; }
.slov-root[data-skin="chalk"] .slov-best-by::before { content: "— "; }
.slov-root[data-skin="chalk"] .slov-hint {
  margin: 6px 16px 2px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 2px dashed rgba(233, 242, 234, .4);
  background: none;
  transform: rotate(.6deg);
  font-size: calc(var(--slov-size) * 0.8);
}
.slov-root[data-skin="chalk"] .slov-hint > span::before { color: var(--slov-ink-2); font-size: calc(var(--slov-size) * 0.66); font-weight: 400; text-transform: none; letter-spacing: 0; }
.slov-root[data-skin="chalk"] .slov-hint b { font-weight: 400; color: #f5f9f4; }
.slov-root[data-skin="chalk"] .slov-feed { gap: 0; margin-top: 4px; }
.slov-root[data-skin="chalk"] .slov-item {
  padding: 5px 16px;
  border-radius: 0;
  background: none;
  font-size: calc(var(--slov-size) * 0.9);
  animation: slov-chalk-in .6s both;
}
.slov-root[data-skin="chalk"] .slov-item.is-settled { animation: none; }
@keyframes slov-chalk-in { from { opacity: 0; filter: blur(2px); transform: translateY(4px) rotate(-.4deg); } to { opacity: 1; filter: blur(0); transform: none; } }
/* Холодные догадки чуть стёрты — как мел, тронутый тряпкой. */
.slov-root[data-skin="chalk"] .slov-item[data-heat="cold"] { opacity: .72; filter: blur(.2px); }
.slov-root[data-skin="chalk"] .slov-item-word { font-size: inherit; font-weight: 400; }
.slov-root[data-skin="chalk"] .slov-item-by { color: #a8d8e8; font-weight: 700; }
.slov-root[data-skin="chalk"] .slov-item:nth-child(3n+2) .slov-item-by { color: #c9e8a8; }
.slov-root[data-skin="chalk"] .slov-item:nth-child(3n) .slov-item-by { color: #f0c4e0; }
.slov-root[data-skin="chalk"] .slov-item-rank { font-size: calc(var(--slov-size) * 0.7); font-weight: 400; letter-spacing: 0; text-transform: none; }
.slov-root[data-skin="chalk"] .slov-item[data-heat="cold"] .slov-item-rank { color: var(--slov-ink-2); }
.slov-root[data-skin="chalk"] .slov-item[data-heat="warm"] .slov-item-rank { color: #d9d2b0; }
.slov-root[data-skin="chalk"] .slov-item[data-heat="hot"] .slov-item-rank { color: #f0d9a4; }
.slov-root[data-skin="chalk"] .slov-item[data-heat="burning"] .slov-item-rank { color: var(--slov-chalk); }
.slov-root[data-skin="chalk"] .slov-item[data-heat="burning"] .slov-item-rank::after { content: " ✓"; }
.slov-root[data-skin="chalk"] .slov-win {
  margin: 8px 16px 2px;
  padding: 12px;
  border-radius: 10px;
  border: 3px solid var(--slov-chalk);
  background: rgba(255, 233, 168, .06);
  text-align: center;
  transform: rotate(-.8deg);
  animation: slov-chalk-frame .9s both, slov-frame-pulse 3.4s 1.2s infinite;
}
/* Рамка «обводится» мелом: штрих идёт по периметру за счёт clip-path. */
@keyframes slov-chalk-frame {
  0% { clip-path: polygon(0 0, 0 0, 0 0, 0 0); opacity: 0; }
  1% { opacity: 1; }
  25% { clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); }
  50% { clip-path: polygon(0 0, 100% 0, 100% 100%, 100% 100%); }
  75% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
  100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}
@keyframes slov-frame-pulse { 50% { box-shadow: 0 0 0 4px rgba(255, 233, 168, .18); } }
.slov-root[data-skin="chalk"] .slov-win-label::before { font-size: calc(var(--slov-size) * 0.72); font-weight: 400; letter-spacing: .06em; text-transform: none; color: var(--slov-chalk); }
.slov-root[data-skin="chalk"] .slov-win-word { font-family: var(--slov-display); font-size: calc(var(--slov-size) * 2.5); font-weight: 700; color: #fff; line-height: 1; }
.slov-root[data-skin="chalk"] .slov-letter { animation: slov-chalk-in .5s calc(.9s + var(--n, 0) * 90ms) both; }
.slov-root[data-skin="chalk"] .slov-win-by { font-weight: 400; color: #c9e8a8; font-size: calc(var(--slov-size) * 0.72); }
.slov-root[data-skin="chalk"] .slov-win-by::after { content: " ★"; }
.slov-root[data-skin="chalk"] .slov-win-next { font-size: calc(var(--slov-size) * 0.66); }
.slov-root[data-skin="chalk"] .slov-board { padding: 4px 16px 0; }
.slov-root[data-skin="chalk"] .slov-board-label::before { font-weight: 400; letter-spacing: 0; text-transform: none; font-size: calc(var(--slov-size) * 0.66); }
.slov-root[data-skin="chalk"] .slov-board li span { color: var(--slov-chalk); }
.slov-root[data-skin="chalk"] .slov-foot { padding: 4px 16px 0; font-size: calc(var(--slov-size) * 0.66); }
.slov-root[data-skin="chalk"] .slov-foot::before { text-transform: none; letter-spacing: 0; font-size: inherit; }
/* Кусочек мела на полочке. */
.slov-root[data-skin="chalk"] .slov-foot::after {
  content: "";
  position: absolute;
  right: 16px; bottom: 0;
  width: 44px; height: 14px;
  border-radius: 3px;
  background: linear-gradient(180deg, #f4f4f0, #cfcfc6);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .4);
}

/* ------------------------------------------------------------------ */
/* Таро: фиолетовая ночь, золото, звёзды, карта на нитке                */
/* ------------------------------------------------------------------ */

.slov-root[data-skin="tarot"] {
  --slov-font: "Jura", "Manrope", system-ui, sans-serif;
  --slov-display: "Playfair Display", Georgia, serif;
  --slov-gold: #d9b96a;
  --slov-gold-2: #f0dda6;
  --slov-rose: #c96a8d;
  --slov-ink: #e8e0f2;
  --slov-ink-2: #8d80ab;
  --slov-title: "Словотрон";
  --slov-round-word: "✦ гадание";
  --slov-best-label: "Карта ближе всех";
  --slov-hint-label: "знак судьбы:";
  --slov-win-label: "Пророчество сбылось";
  --slov-board-label: "Провидцы";
  --slov-cta: "✦ Шепните слово в чат ✦";
  --slov-heat-burning: "пламя";
  --slov-heat-hot: "искра";
  --slov-heat-warm: "тень";
  --slov-heat-cold: "лёд";
  --slov-rank-prefix: "";
  --slov-heat-sep: " · ";
  gap: 6px;
  padding: 18px 0 14px;
  border-radius: 12px;
  border: 1px solid var(--slov-gold);
  background: radial-gradient(130% 100% at 50% 0%, #241b3e, #171129 60%, #100b1e);
  box-shadow: inset 0 0 0 4px #171129, inset 0 0 0 5px rgba(217, 185, 106, .55), 0 20px 46px rgba(0, 0, 0, .6);
}
/* Звёзды: россыпь точек мерцает двумя слоями. */
.slov-root[data-skin="tarot"]::before,
.slov-root[data-skin="tarot"]::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle, var(--slov-gold) 0 1.5px, transparent 2px),
    radial-gradient(circle, var(--slov-gold) 0 1.5px, transparent 2px),
    radial-gradient(circle, var(--slov-gold) 0 1.5px, transparent 2px);
  background-size: 100% 100%;
  background-position: 8% 6%, 88% 9%, 50% 4%;
  background-repeat: no-repeat;
  opacity: .7;
  animation: slov-twinkle 3s infinite;
}
.slov-root[data-skin="tarot"]::after { background-position: 22% 16%, 72% 20%, 36% 11%; animation-delay: 1.4s; }
@keyframes slov-twinkle { 50% { opacity: .15; } }
.slov-root[data-skin="tarot"] .slov-glow i { display: none; }
.slov-root[data-skin="tarot"] .slov-head { flex-direction: column; align-items: center; gap: 3px; padding: 0 14px 4px; }
/* Символ гадания над заголовком. */
.slov-root[data-skin="tarot"] .slov-eyebrow { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.slov-root[data-skin="tarot"] .slov-eyebrow::after {
  content: "";
  order: -1;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1.4px solid var(--slov-gold);
  box-shadow: inset 0 0 0 3px transparent, 4px 0 0 -1px rgba(217, 185, 106, .5);
  opacity: .9;
}
.slov-root[data-skin="tarot"] .slov-eyebrow::before {
  font-family: var(--slov-display);
  font-size: calc(var(--slov-size) * 1.25);
  font-weight: 800;
  letter-spacing: .14em;
  color: var(--slov-gold-2);
}
.slov-root[data-skin="tarot"] .slov-round { font-size: calc(var(--slov-size) * 0.52); letter-spacing: .4em; text-transform: uppercase; font-weight: 500; }
.slov-root[data-skin="tarot"] .slov-round-word::before { font-size: calc(var(--slov-size) * 0.52); letter-spacing: .4em; }
.slov-root[data-skin="tarot"] .slov-round::after { content: " ✦"; }
.slov-root[data-skin="tarot"] .slov-best {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
  padding: 6px 16px 2px;
  border: 0;
  background: none;
}
.slov-root[data-skin="tarot"] .slov-best-label::before { letter-spacing: .28em; font-size: calc(var(--slov-size) * 0.5); font-weight: 500; }
/* Карта покачивается, как подвешенная на нитке. */
.slov-root[data-skin="tarot"] .slov-best-word {
  display: inline-block;
  margin-top: 6px;
  padding: 10px 26px 4px;
  border: 1px solid rgba(217, 185, 106, .6);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: rgba(217, 185, 106, .06);
  font-family: var(--slov-display);
  font-size: calc(var(--slov-size) * 1.5);
  font-weight: 700;
  color: var(--slov-gold-2);
  text-transform: uppercase;
  transform-origin: 50% -12px;
  animation: slov-sway 4.5s ease-in-out infinite;
}
@keyframes slov-sway { 50% { transform: rotate(1.8deg); } }
.slov-root[data-skin="tarot"] .slov-best-rank,
.slov-root[data-skin="tarot"] .slov-best-by {
  width: 100%;
  max-width: 230px;
  padding: 0 26px;
  border: 1px solid rgba(217, 185, 106, .6);
  border-top: 0; border-bottom: 0;
  background: rgba(217, 185, 106, .06);
  color: var(--slov-rose);
  font-size: calc(var(--slov-size) * 0.55);
  letter-spacing: .2em;
  text-transform: uppercase;
  transform-origin: 50% -60px;
  animation: slov-sway 4.5s ease-in-out infinite;
}
.slov-root[data-skin="tarot"] .slov-best-by { padding-bottom: 8px; border-bottom: 1px solid rgba(217, 185, 106, .6); border-radius: 0 0 8px 8px; color: var(--slov-ink-2); text-transform: none; letter-spacing: .06em; }
.slov-root[data-skin="tarot"] .slov-hint {
  justify-content: center;
  margin: 8px 16px 0;
  padding: 0 0 8px;
  border-radius: 0;
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, rgba(217, 185, 106, .6), transparent) 1;
  background: none;
  text-align: center;
  color: #bdb2d6;
  font-size: calc(var(--slov-size) * 0.64);
}
.slov-root[data-skin="tarot"] .slov-hint > span::before { color: #bdb2d6; font-weight: 500; text-transform: none; letter-spacing: 0; font-size: calc(var(--slov-size) * 0.64); }
.slov-root[data-skin="tarot"] .slov-hint b { font-weight: 700; color: var(--slov-ink); }
.slov-root[data-skin="tarot"] .slov-feed { gap: 0; margin-top: 4px; }
.slov-root[data-skin="tarot"] .slov-item { padding: 6px 16px; border-radius: 0; background: none; animation: slov-mist .7s both; }
.slov-root[data-skin="tarot"] .slov-item.is-settled { animation: none; }
@keyframes slov-mist { from { opacity: 0; filter: blur(5px); } to { opacity: 1; filter: blur(0); } }
.slov-root[data-skin="tarot"] .slov-item-by { color: #8fb8d9; }
.slov-root[data-skin="tarot"] .slov-item:nth-child(3n+2) .slov-item-by { color: #a4d99a; }
.slov-root[data-skin="tarot"] .slov-item:nth-child(3n) .slov-item-by { color: #d9a0c8; }
.slov-root[data-skin="tarot"] .slov-item-rank { font-size: calc(var(--slov-size) * 0.55); font-weight: 500; letter-spacing: .08em; text-transform: lowercase; }
.slov-root[data-skin="tarot"] .slov-item[data-heat="cold"] .slov-item-rank { color: var(--slov-ink-2); }
.slov-root[data-skin="tarot"] .slov-item[data-heat="warm"] .slov-item-rank { color: #b9a4c9; }
.slov-root[data-skin="tarot"] .slov-item[data-heat="hot"] .slov-item-rank { color: var(--slov-gold); }
.slov-root[data-skin="tarot"] .slov-item[data-heat="burning"] .slov-item-rank { color: var(--slov-rose); }
.slov-root[data-skin="tarot"] .slov-win {
  margin: 8px 16px 0;
  padding: 14px;
  border-radius: 10px;
  border: 1px solid var(--slov-gold);
  background: radial-gradient(120% 140% at 50% 0%, rgba(217, 185, 106, .16), rgba(217, 185, 106, .03));
  text-align: center;
  animation: slov-mist .8s both, slov-ring 2.8s .9s infinite;
}
@keyframes slov-ring { 0%, 100% { box-shadow: 0 0 0 0 rgba(217, 185, 106, .45); } 55% { box-shadow: 0 0 0 12px rgba(217, 185, 106, 0); } }
.slov-root[data-skin="tarot"] .slov-win-label::before { color: var(--slov-gold); letter-spacing: .34em; font-weight: 500; font-size: calc(var(--slov-size) * 0.48); }
.slov-root[data-skin="tarot"] .slov-win-word { font-family: var(--slov-display); font-size: calc(var(--slov-size) * 1.75); font-weight: 700; color: #fff; text-transform: uppercase; margin: 4px 0 2px; }
.slov-root[data-skin="tarot"] .slov-letter { color: var(--slov-gold-2); animation: slov-light-up .6s calc(.7s + var(--n, 0) * 110ms) both; }
@keyframes slov-light-up { from { opacity: .2; color: var(--slov-gold); text-shadow: 0 0 0 transparent; } 60% { text-shadow: 0 0 14px rgba(240, 221, 166, .9); } to { opacity: 1; color: #fff; text-shadow: 0 0 6px rgba(240, 221, 166, .5); } }
.slov-root[data-skin="tarot"] .slov-win-by { font-weight: 500; color: #bdb2d6; font-size: calc(var(--slov-size) * 0.6); }
.slov-root[data-skin="tarot"] .slov-board { padding: 6px 16px 0; }
.slov-root[data-skin="tarot"] .slov-board li span { color: var(--slov-gold); }
.slov-root[data-skin="tarot"] .slov-foot { justify-content: center; text-align: center; padding: 4px 16px 0; font-size: calc(var(--slov-size) * 0.5); letter-spacing: .1em; }
.slov-root[data-skin="tarot"] .slov-foot::before { letter-spacing: .2em; text-align: center; }

/* ------------------------------------------------------------------ */
/* Вампирский: кровь по кромке, Playfair, летучая мышь на новом раунде */
/* ------------------------------------------------------------------ */

.slov-root[data-skin="vampire"] {
  --slov-font: "Rubik", Inter, system-ui, sans-serif;
  --slov-display: "Playfair Display", Georgia, serif;
  --slov-blood: #c22740;
  --slov-blood-2: #e23d58;
  --slov-ink: #f2dfe2;
  --slov-ink-2: #8a4a56;
  --slov-title: "Словотрон";
  --slov-round-word: "† ночь";
  --slov-best-label: "Ближе всех к истине";
  --slov-hint-label: "Шёпот:";
  --slov-win-label: "Слово испито";
  --slov-board-label: "Клан";
  --slov-cta: "Пишите слова в чат · ночь длинна";
  --slov-heat-burning: "жажда";
  --slov-heat-hot: "сумрак";
  --slov-heat-warm: "туман";
  --slov-heat-cold: "склеп";
  --slov-rank-prefix: "";
  --slov-heat-sep: " · ";
  gap: 6px;
  padding: 22px 0 14px;
  border-radius: 4px;
  border: 1.5px solid var(--slov-blood);
  background: radial-gradient(130% 110% at 50% 0%, #1c0a10, #12060a 60%, #0b0407);
  box-shadow: 0 0 26px rgba(194, 39, 64, .3), inset 0 0 40px rgba(126, 16, 33, .25);
}
/* Потёки на верхней кромке набухают и опадают. */
.slov-root[data-skin="vampire"]::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 44px;
  pointer-events: none;
  background:
    radial-gradient(5px 26px at 36px 0, var(--slov-blood) 98%, transparent),
    radial-gradient(5px 40px at 150px 0, #8f142a 98%, transparent),
    radial-gradient(5px 20px at 296px 0, var(--slov-blood) 98%, transparent),
    linear-gradient(180deg, var(--slov-blood), #7e1021 60%, transparent 100%);
  background-repeat: no-repeat;
  background-size: auto, auto, auto, 100% 6px;
  transform-origin: 50% 0;
  animation: slov-drip 4s ease-in infinite;
}
@keyframes slov-drip { 0%, 70% { transform: scaleY(1); } 85% { transform: scaleY(1.22); } 100% { transform: scaleY(1); } }
/* Капля срывается с потёка; мышь пролетает при новом раунде. */
.slov-root[data-skin="vampire"] .slov-glow i { filter: none; }
.slov-root[data-skin="vampire"] .slov-glow i:nth-child(1) {
  top: 34px; right: auto; left: 150px;
  width: 5px; height: 11px;
  border-radius: 50% 50% 60% 60% / 30% 30% 70% 70%;
  background: linear-gradient(180deg, #a71b30, #7e1021);
  opacity: 0;
  animation: slov-drop 6.5s ease-in 2s infinite;
}
@keyframes slov-drop {
  0% { opacity: 0; transform: translateY(0) scaleY(.6); }
  4% { opacity: 1; transform: translateY(2px) scaleY(1); }
  16% { opacity: 1; transform: translateY(170px) scaleY(1.25); }
  19% { opacity: 0; transform: translateY(190px) scaleY(.5); }
  100% { opacity: 0; transform: translateY(190px); }
}
.slov-root[data-skin="vampire"] .slov-glow i:nth-child(2) {
  top: 28px; right: 24px; left: auto; bottom: auto;
  width: 30px; height: 16px;
  border-radius: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 20'><path d='M17 4c-2 4-5 5-8 4 1 3 0 6-3 8 5 0 8-1 11-5 3 4 6 5 11 5-3-2-4-5-3-8-3 1-6 0-8-4Z' fill='%233a1119'/></svg>") center / contain no-repeat;
  opacity: 0;
}
.slov-root[data-skin="vampire"].is-new-round .slov-glow i:nth-child(2) { animation: slov-bat 3.2s ease-in-out both; }
@keyframes slov-bat {
  0% { transform: translate(0, 0) scale(1); opacity: 0; }
  8% { opacity: 1; }
  45% { transform: translate(-150px, -18px) scale(.85); }
  80% { transform: translate(-300px, 8px) scale(.7); opacity: 1; }
  100% { transform: translate(-340px, -6px) scale(.65); opacity: 0; }
}
.slov-root[data-skin="vampire"] .slov-head { flex-direction: column; align-items: center; gap: 3px; padding: 0 14px 2px; }
.slov-root[data-skin="vampire"] .slov-eyebrow { display: flex; flex-direction: column; align-items: center; }
.slov-root[data-skin="vampire"] .slov-eyebrow::after {
  content: "";
  order: -1;
  width: 30px; height: 20px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 20'><path d='M17 4c-2 4-5 5-8 4 1 3 0 6-3 8 5 0 8-1 11-5 3 4 6 5 11 5-3-2-4-5-3-8-3 1-6 0-8-4Z' fill='%23c22740'/></svg>") center / contain no-repeat;
  opacity: .9;
}
.slov-root[data-skin="vampire"] .slov-eyebrow::before {
  font-family: var(--slov-display);
  font-size: calc(var(--slov-size) * 1.4);
  font-weight: 900;
  letter-spacing: .08em;
  color: var(--slov-ink);
  text-shadow: 0 0 14px rgba(194, 39, 64, .6);
}
.slov-root[data-skin="vampire"] .slov-round { font-size: calc(var(--slov-size) * 0.5); font-weight: 700; letter-spacing: .4em; text-transform: uppercase; }
.slov-root[data-skin="vampire"] .slov-round-word::before { font-size: calc(var(--slov-size) * 0.5); letter-spacing: .4em; }
.slov-root[data-skin="vampire"] .slov-round::after { content: " †"; }
.slov-root[data-skin="vampire"] .slov-best {
  grid-template-columns: auto auto;
  justify-content: center;
  justify-items: center;
  text-align: center;
  padding: 8px 16px 0;
  border: 0;
  background: none;
}
.slov-root[data-skin="vampire"] .slov-best-label::before { letter-spacing: .26em; font-size: calc(var(--slov-size) * 0.48); }
.slov-root[data-skin="vampire"] .slov-best-word { font-family: var(--slov-display); font-size: calc(var(--slov-size) * 1.65); font-weight: 900; color: var(--slov-blood-2); text-transform: uppercase; }
.slov-root[data-skin="vampire"] .slov-best-rank { font-size: calc(var(--slov-size) * 0.55); letter-spacing: .14em; text-transform: uppercase; color: #ff8fa0; animation: slov-pulse 2s infinite; }
@keyframes slov-pulse { 50% { opacity: .55; } }
.slov-root[data-skin="vampire"] .slov-best-by { font-size: calc(var(--slov-size) * 0.55); }
.slov-root[data-skin="vampire"] .slov-best-by::before { content: "кровь угадала: "; }
.slov-root[data-skin="vampire"] .slov-hint {
  margin: 6px 16px 0;
  padding: 8px 12px;
  border-radius: 2px;
  border: 1px solid rgba(194, 39, 64, .5);
  background: rgba(194, 39, 64, .07);
  font-size: calc(var(--slov-size) * 0.68);
}
.slov-root[data-skin="vampire"] .slov-hint > span::before { color: var(--slov-blood-2); letter-spacing: .2em; font-size: calc(var(--slov-size) * 0.5); }
.slov-root[data-skin="vampire"] .slov-feed { gap: 0; margin-top: 4px; }
.slov-root[data-skin="vampire"] .slov-item { padding: 6px 14px; border-radius: 0; border-top: 1px solid rgba(194, 39, 64, .22); background: none; animation: slov-ember-row .5s both; }
.slov-root[data-skin="vampire"] .slov-item.is-settled { animation: none; }
.slov-root[data-skin="vampire"] .slov-item[data-heat="burning"] { background: rgba(194, 39, 64, .08); }
.slov-root[data-skin="vampire"] .slov-item-by { color: #8fb8d9; font-weight: 800; }
.slov-root[data-skin="vampire"] .slov-item:nth-child(3n+2) .slov-item-by { color: #a4d99a; }
.slov-root[data-skin="vampire"] .slov-item:nth-child(3n) .slov-item-by { color: #d9a0c8; }
.slov-root[data-skin="vampire"] .slov-item-rank { font-size: calc(var(--slov-size) * 0.52); letter-spacing: .1em; text-transform: lowercase; }
.slov-root[data-skin="vampire"] .slov-item[data-heat="cold"] .slov-item-rank { color: #5d5560; }
.slov-root[data-skin="vampire"] .slov-item[data-heat="warm"] .slov-item-rank { color: #8a6a72; }
.slov-root[data-skin="vampire"] .slov-item[data-heat="hot"] .slov-item-rank { color: #c98a94; }
.slov-root[data-skin="vampire"] .slov-item[data-heat="burning"] .slov-item-rank { color: var(--slov-blood-2); animation: slov-pulse 2s infinite; }
.slov-root[data-skin="vampire"] .slov-win {
  margin: 8px 16px 0;
  padding: 13px;
  border-radius: 3px;
  border: 1.5px solid var(--slov-blood-2);
  background: linear-gradient(180deg, rgba(194, 39, 64, .2), rgba(126, 16, 33, .08));
  box-shadow: 0 0 18px rgba(226, 61, 88, .35);
  text-align: center;
  animation: slov-blood-flash .7s both, slov-blood-glow 3.2s 1s infinite;
}
@keyframes slov-blood-flash { 0% { opacity: 0; box-shadow: 0 0 0 rgba(226, 61, 88, 0); } 30% { opacity: 1; box-shadow: 0 0 60px rgba(226, 61, 88, .9); } 100% { opacity: 1; box-shadow: 0 0 18px rgba(226, 61, 88, .35); } }
@keyframes slov-blood-glow { 50% { box-shadow: 0 0 32px rgba(226, 61, 88, .6); border-color: #ff6f86; } }
.slov-root[data-skin="vampire"] .slov-win-label::before { color: var(--slov-blood-2); letter-spacing: .34em; }
.slov-root[data-skin="vampire"] .slov-win-word { font-family: var(--slov-display); font-size: calc(var(--slov-size) * 1.75); font-weight: 900; color: #fff; text-transform: uppercase; text-shadow: 0 0 16px rgba(226, 61, 88, .7); margin: 4px 0 2px; }
.slov-root[data-skin="vampire"] .slov-letter { animation: slov-seep 1.1s calc(.5s + var(--n, 0) * 60ms) both; }
@keyframes slov-seep { from { opacity: 0; filter: blur(7px); transform: scale(1.3); } to { opacity: 1; filter: blur(0); transform: none; } }
.slov-root[data-skin="vampire"] .slov-win-by { font-weight: 500; font-size: calc(var(--slov-size) * 0.6); }
.slov-root[data-skin="vampire"] .slov-board { padding: 6px 16px 0; }
.slov-root[data-skin="vampire"] .slov-board li span { color: var(--slov-blood-2); }
.slov-root[data-skin="vampire"] .slov-foot { justify-content: center; text-align: center; padding: 4px 16px 0; font-size: calc(var(--slov-size) * 0.48); letter-spacing: .1em; font-weight: 700; }
.slov-root[data-skin="vampire"] .slov-foot::before { letter-spacing: .24em; }

/* ------------------------------------------------------------------ */
/* Демонский: срезанные углы, пламя у кромки, Russo One, катакана       */
/* ------------------------------------------------------------------ */

.slov-root[data-skin="demon"] {
  --slov-font: "Rubik", Inter, system-ui, sans-serif;
  --slov-display: "Russo One", "Exo 2", sans-serif;
  --slov-red: #ff2e4d;
  --slov-fire: #ffb03d;
  --slov-ink: #f0e4ee;
  --slov-ink-2: #b0526e;
  --slov-title: "Словотрон";
  --slov-round-word: "Круг";
  --slov-best-label: "Ближе всех к бездне";
  --slov-hint-label: "Знамение:";
  --slov-win-label: "Душа забрана";
  --slov-board-label: "Легион";
  --slov-cta: "";
  --slov-heat-burning: "пекло";
  --slov-heat-hot: "жар";
  --slov-heat-warm: "пепел";
  --slov-heat-cold: "лёд";
  --slov-rank-prefix: "";
  --slov-heat-sep: " · ";
  gap: 6px;
  padding: 20px 0 46px;
  border-radius: 3px;
  border: 1.5px solid var(--slov-red);
  background: linear-gradient(180deg, #150812, #1c0716 55%, #240612);
  box-shadow: 0 0 30px rgba(255, 46, 77, .35), inset 0 -30px 60px rgba(122, 10, 40, .4);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
}
/* Катакана тлеет справа. */
.slov-root[data-skin="demon"]::before {
  content: "悪魔の言葉";
  position: absolute;
  right: 8px; top: 64px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 900;
  font-size: calc(var(--slov-size) * 0.8);
  writing-mode: vertical-rl;
  letter-spacing: .3em;
  color: rgba(255, 46, 77, .4);
  pointer-events: none;
  animation: slov-pulse 5s infinite;
}
/* Пламя у нижней кромки: два слоя языков дышат в разных фазах. */
.slov-root[data-skin="demon"] .slov-glow i {
  top: auto; right: 8px; left: 8px; bottom: 0;
  width: auto; height: 44px;
  border-radius: 0;
  filter: none;
  opacity: .55;
  background: linear-gradient(180deg, #ff7a3d, #7a0a28);
  clip-path: polygon(0 100%, 10% 40%, 20% 100%, 30% 0, 40% 100%, 50% 25%, 60% 100%, 70% 10%, 80% 100%, 90% 35%, 100% 100%);
  transform-origin: 50% 100%;
  animation: slov-flame 1.6s ease-in-out infinite;
}
.slov-root[data-skin="demon"] .slov-glow i:nth-child(2) {
  opacity: .45;
  height: 32px;
  background: linear-gradient(180deg, var(--slov-red), #7a0a28);
  clip-path: polygon(0 100%, 8% 20%, 18% 100%, 28% 45%, 38% 100%, 52% 0, 62% 100%, 74% 30%, 84% 100%, 94% 15%, 100% 100%);
  animation: slov-flame 1.3s .3s ease-in-out infinite;
}
@keyframes slov-flame { 0%, 100% { transform: scaleY(1); opacity: .8; } 50% { transform: scaleY(1.25); opacity: 1; } }
.slov-root[data-skin="demon"] .slov-head { flex-direction: column; align-items: center; gap: 3px; padding: 0 14px 2px; }
.slov-root[data-skin="demon"] .slov-eyebrow { display: flex; flex-direction: column; align-items: center; }
/* Рога с глазами: глаза «моргают». */
.slov-root[data-skin="demon"] .slov-eyebrow::after {
  content: "";
  order: -1;
  width: 44px; height: 26px;
  background:
    radial-gradient(circle, var(--slov-fire) 0 2.4px, transparent 3px) 17px 18px / 6px 6px no-repeat,
    radial-gradient(circle, var(--slov-fire) 0 2.4px, transparent 3px) 27px 18px / 6px 6px no-repeat,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 26' fill='none'><path d='M6 24C2 16 2 8 4 2c4 6 8 8 12 8M38 24c4-8 4-16 2-22-4 6-8 8-12 8' stroke='%23ff2e4d' stroke-width='3' stroke-linecap='round'/></svg>") center / contain no-repeat;
  animation: slov-eyes 4s infinite;
}
@keyframes slov-eyes { 0%, 90%, 100% { filter: none; } 94% { filter: brightness(.35); } }
.slov-root[data-skin="demon"] .slov-eyebrow::before {
  font-family: var(--slov-display);
  font-size: calc(var(--slov-size) * 1.3);
  font-weight: 400;
  letter-spacing: .1em;
  color: #fff;
  text-shadow: 0 0 18px rgba(255, 46, 77, .8), 2px 2px 0 #7a0a28;
}
.slov-root[data-skin="demon"] .slov-round { font-size: calc(var(--slov-size) * 0.5); font-weight: 800; letter-spacing: .4em; text-transform: uppercase; }
.slov-root[data-skin="demon"] .slov-round-word::before { font-size: calc(var(--slov-size) * 0.5); letter-spacing: .4em; }
.slov-root[data-skin="demon"] .slov-round::after { content: " · печать снята"; }
.slov-root[data-skin="demon"] .slov-best { padding: 8px 16px 0; border: 0; background: none; }
.slov-root[data-skin="demon"] .slov-best-label::before { letter-spacing: .26em; font-weight: 800; font-size: calc(var(--slov-size) * 0.48); }
.slov-root[data-skin="demon"] .slov-best-word { font-family: var(--slov-display); font-size: calc(var(--slov-size) * 1.45); font-weight: 400; color: var(--slov-fire); text-shadow: 0 0 12px rgba(255, 176, 61, .6); text-transform: uppercase; }
.slov-root[data-skin="demon"] .slov-best-rank { font-size: calc(var(--slov-size) * 0.55); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--slov-red); }
.slov-root[data-skin="demon"] .slov-best-by { font-size: calc(var(--slov-size) * 0.55); }
.slov-root[data-skin="demon"] .slov-best-by::before { content: "контракт заключён: "; }
.slov-root[data-skin="demon"] .slov-hint {
  margin: 6px 16px 0;
  padding: 8px 14px;
  border-radius: 0;
  border: 1px solid rgba(255, 176, 61, .45);
  background: rgba(255, 176, 61, .06);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 100%, 10px 100%);
  font-size: calc(var(--slov-size) * 0.68);
}
.slov-root[data-skin="demon"] .slov-hint > span::before { color: var(--slov-fire); letter-spacing: .2em; font-weight: 800; font-size: calc(var(--slov-size) * 0.5); }
.slov-root[data-skin="demon"] .slov-feed { gap: 0; margin-top: 4px; }
.slov-root[data-skin="demon"] .slov-item { padding: 6px 14px; border-radius: 0; border-top: 1px solid rgba(255, 46, 77, .2); background: none; animation: slov-ember-row .45s both; }
.slov-root[data-skin="demon"] .slov-item.is-settled { animation: none; }
.slov-root[data-skin="demon"] .slov-item[data-heat="burning"] { background: rgba(255, 46, 77, .08); }
.slov-root[data-skin="demon"] .slov-item-by { color: #8fb8d9; font-weight: 800; }
.slov-root[data-skin="demon"] .slov-item:nth-child(3n+2) .slov-item-by { color: #a4d99a; }
.slov-root[data-skin="demon"] .slov-item:nth-child(3n) .slov-item-by { color: #d9a0c8; }
.slov-root[data-skin="demon"] .slov-item-rank { font-size: calc(var(--slov-size) * 0.52); letter-spacing: .1em; text-transform: lowercase; }
.slov-root[data-skin="demon"] .slov-item[data-heat="cold"] .slov-item-rank { color: #5d4a5c; }
.slov-root[data-skin="demon"] .slov-item[data-heat="warm"] .slov-item-rank { color: #9a6a72; }
.slov-root[data-skin="demon"] .slov-item[data-heat="hot"] .slov-item-rank { color: #ff8a5e; }
.slov-root[data-skin="demon"] .slov-item[data-heat="burning"] .slov-item-rank { color: var(--slov-red); animation: slov-hot-flare 1.8s infinite; }
@keyframes slov-hot-flare { 50% { color: #fff; text-shadow: 0 0 10px var(--slov-red); } }
.slov-root[data-skin="demon"] .slov-win {
  margin: 8px 16px 0;
  padding: 13px;
  border-radius: 0;
  border: 1.5px solid var(--slov-fire);
  background: linear-gradient(180deg, rgba(255, 46, 77, .16), rgba(122, 10, 40, .1));
  box-shadow: 0 0 20px rgba(255, 46, 77, .4);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  text-align: center;
  animation: slov-seal .9s both, slov-seal-burn 2.8s 1.2s infinite, slov-shake 6s 1.5s infinite;
}
/* Печать прожигается по кругу: рамка проявляется через conic-маску. */
@keyframes slov-seal {
  from { opacity: 0; transform: scale(.92); -webkit-mask: conic-gradient(#000 0deg, transparent 0deg); mask: conic-gradient(#000 0deg, transparent 0deg); }
  to { opacity: 1; transform: none; -webkit-mask: conic-gradient(#000 360deg, transparent 360deg); mask: conic-gradient(#000 360deg, transparent 360deg); }
}
@keyframes slov-seal-burn { 50% { box-shadow: 0 0 34px rgba(255, 46, 77, .7); border-color: #ffd08a; } }
@keyframes slov-shake { 0%, 93%, 100% { transform: none; } 95% { transform: translateX(-1.5px); } 97% { transform: translateX(1.5px); } }
.slov-root[data-skin="demon"] .slov-win-label::before { color: var(--slov-fire); letter-spacing: .34em; font-weight: 800; }
.slov-root[data-skin="demon"] .slov-win-word { font-family: var(--slov-display); font-size: calc(var(--slov-size) * 1.65); font-weight: 400; color: #fff; text-transform: uppercase; text-shadow: 0 0 18px rgba(255, 46, 77, .9); margin: 5px 0 2px; }
.slov-root[data-skin="demon"] .slov-letter { animation: slov-light-up .5s calc(.9s + var(--n, 0) * 80ms) both; }
.slov-root[data-skin="demon"] .slov-win-by { font-weight: 500; font-size: calc(var(--slov-size) * 0.6); }
.slov-root[data-skin="demon"] .slov-board { padding: 6px 16px 0; }
.slov-root[data-skin="demon"] .slov-board li span { color: var(--slov-fire); }
.slov-root[data-skin="demon"] .slov-foot { padding: 4px 16px 0; font-size: calc(var(--slov-size) * 0.5); letter-spacing: .1em; font-weight: 800; }

/* ------------------------------------------------------------------ */
/* Старые характеры: бумага, неон, без фона — как были                  */
/* ------------------------------------------------------------------ */

.slov-root[data-skin="paper"] {
  --slov-ink: #241f33;
  --slov-ink-2: #6b6280;
  background: #f5f1e8;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .35);
}
.slov-root[data-skin="paper"] .slov-item { background: rgba(0, 0, 0, .05); }
.slov-root[data-skin="paper"] .slov-hint { background: rgba(0, 0, 0, .06); }
.slov-root[data-skin="paper"] .slov-glow { display: none; }
/* Тепловая шкала рисовалась под тёмный фон: на бумаге светлые оттенки
   сливаются с подложкой, поэтому здесь свои — темнее и насыщеннее. */
.slov-root[data-skin="paper"] .slov-item[data-heat="cold"] .slov-item-rank { color: #4a5a80; }
.slov-root[data-skin="paper"] .slov-item[data-heat="warm"] .slov-item-rank { color: #85590c; }
.slov-root[data-skin="paper"] .slov-item[data-heat="hot"] .slov-item-rank { color: #c2451a; }
.slov-root[data-skin="paper"] .slov-item[data-heat="burning"] .slov-item-rank { color: #c01133; }
.slov-root[data-skin="paper"] .slov-item-by { color: #6b6280; }

.slov-root[data-skin="neon"] {
  background: rgba(6, 4, 14, .82);
  border: 1px solid color-mix(in srgb, var(--slov-accent) 60%, transparent);
}
.slov-root[data-skin="neon"] .slov-best-word,
.slov-root[data-skin="neon"] .slov-win-word { text-shadow: 0 0 18px var(--slov-accent); }
.slov-root[data-skin="neon"] .slov-item { background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .06); }

.slov-root[data-skin="minimal"] {
  background: none;
  padding: 0;
  gap: 8px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .8);
}
.slov-root[data-skin="minimal"] .slov-glow,
.slov-root[data-skin="minimal"] .slov-board { display: none; }
.slov-root[data-skin="minimal"] .slov-item { background: rgba(0, 0, 0, .45); }

@media (prefers-reduced-motion: reduce) {
  .slov-root, .slov-root::before, .slov-root::after,
  .slov-glow i, .slov-item, .slov-win, .slov-letter, .slov-best-word, .slov-best-rank, .slov-best-by,
  .slov-eyebrow::before, .slov-eyebrow::after, .slov-item-rank { animation: none !important; }
}