/* ============================================================================
   PRIZM GAMES — общее оформление для игровых страниц.

   Идея: то, что визуально одинаково (или почти одинаково) во всех играх,
   постепенно переезжает сюда — правим один раз, применяется везде, где
   подключён этот файл. Там, где цвет отличается от игры к игре (например,
   у Морского боя своя синяя палитра, у остальных — фиолетовая), используем
   CSS-переменные (--ad-bg, --ad-border и т.д.), которые каждая страница
   объявляет у себя в :root — так один и тот же файл корректно выглядит
   в разных играх, ничего не подгоняя вручную.

   Подключение: <link rel="stylesheet" href="shared/styles.css"> в <head>,
   после собственного <style> страницы (чтобы при желании локальные стили
   всё ещё могли переопределить что-то точечно, если понадобится).
   ========================================================================= */

/* ── Овальная кнопка-ссылка (переключение языка EN/RU, "Разместить рекламу"
   и подобные небольшие ссылки в шапке) — раньше определялась в каждом файле
   по отдельности, и кое-где (Морской бой) вообще не была определена, из-за
   чего ссылка на переключение языка оставалась без контура. */
.nav-link-sm {
  font-family: 'Orbitron', 'Segoe UI', Arial, sans-serif;
  font-size: clamp(.44rem, .9vw, .58rem);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(220,190,255,.9);
  border: 1px solid rgba(155,48,255,.45);
  border-radius: 20px;
  padding: 4px 10px;
  background: rgba(155,48,255,.1);
  transition: all .2s;
  white-space: nowrap;
}
body.theme-light .nav-link-sm {
  color: #fff;
  border-color: rgba(255,255,255,.35);
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(8px);
}
body.theme-blue .nav-link-sm {
  color: rgba(206,228,255,.9);
  border-color: rgba(94,196,255,.45);
  background: rgba(94,196,255,.1);
}
body.theme-blue.theme-light .nav-link-sm {
  color: #fff;
  border-color: rgba(255,255,255,.35);
  background: rgba(255,255,255,.08);
}
.nav-link-sm:hover {
  color: #fff;
  background: rgba(155,48,255,.25);
  border-color: rgba(199,125,255,.7);
  box-shadow: 0 0 12px rgba(155,48,255,.4);
}
body.theme-light .nav-link-sm:hover {
  color: #fff;
  background: rgba(53,216,255,.22);
  border-color: rgba(53,216,255,.7);
  box-shadow: 0 0 14px rgba(53,216,255,.4);
}
body.theme-blue .nav-link-sm:hover {
  color: #fff;
  background: rgba(94,196,255,.25);
  border-color: rgba(94,196,255,.7);
  box-shadow: 0 0 12px rgba(94,196,255,.4);
}

/* ── Группа кнопок в правом углу шапки (звук/вибрация, тема, профиль,
   ссылки) — раньше расстояние между ними задавалось на глаз инлайн-стилем
   в каждом файле отдельно (gap:8px), из-за чего с добавлением новых кнопок
   (профиль) группа стала визуально "расползаться". Теперь одно значение
   на весь сайт — компактнее, все элементы группируются плотнее. */
.header-btn-group {
  display: flex;
  align-items: center;
  gap: 2px;
}

/* ── Круглые кнопки-иконки в шапке (звук/вибрация, тема, профиль) ────────
   Раньше у каждой был непрозрачный синий кружок-фон в тёмной теме и
   прозрачный в светлой — два разных вида по темам, у каждой игры свой
   инлайн-стиль. Теперь единообразно: прозрачные в обеих темах, сама
   картинка-иконка внутри достаточно заметна на любом фоне сайта (ни один
   из двух фонов не белый). ────────────────────────────────────────────── */
.header-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  width: clamp(30px, 7.5vw, 36px);
  height: clamp(30px, 7.5vw, 36px);
  padding: 0;
  text-decoration: none;
  opacity: 1;
  /* Раньше здесь были transform:scale + filter:drop-shadow при :hover, а
     потом opacity — но точно такая же проблема уже была решена в Морском
     бое (кнопки выбора размера корабля при расстановке флота): там любой
     :hover-эффект пришлось убрать полностью, оставив только явные
     .selected/:disabled состояния по клику — GPU-перерисовка при hover
     "утекает" на непосредственно соседний элемент в этом WebView (Telegram
     Desktop) независимо от того, насколько лёгкое свойство меняется.
     Повторяем то же самое, уже проверенное решение здесь. */
}
.header-icon-btn img {
  width: 60%;
  height: 60%;
  object-fit: contain;
  pointer-events: none;
}

/* ── Цвет фона и рамки рекламных блоков ───────────────────────────────────
   Раньше это тоже было прописано в каждом файле отдельно (структура — display,
   padding, gap — по-прежнему у каждой игры своя, это нормально, а вот ЦВЕТ
   один и тот же почти везде). Теперь меняется здесь один раз. По умолчанию —
   фиолетовая палитра (все игры, кроме Морского боя). Синяя палитра
   Морского боя переопределяется ниже через класс на <body>. */
.ad-inline, .ad-side {
  background: rgba(32,0,62,.55);
  border: 1px dashed rgba(199,125,255,.5);
}
.start-ad-banner-link {
  border-color: rgba(255,209,102,.55);
}
body.theme-light .ad-inline, body.theme-light .ad-side {
  background: rgba(35,26,87,.45);
  backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border, rgba(107,181,255,.28));
}
body.theme-blue .ad-inline, body.theme-blue .ad-side {
  background: rgba(19,34,71,.55);
  border-color: rgba(94,196,255,.45);
}
body.theme-blue.theme-light .ad-inline, body.theme-blue.theme-light .ad-side {
  background: rgba(35,26,87,.72);
  border: 1px solid rgba(255,255,255,.25);
}

/* ── Эффекты привлечения внимания к рекламным блокам ─────────────────────
   Один из трёх эффектов ниже включается сам, по очереди, от партии к
   партии (см. shared/ad-effects.js) — на класс .ad-inline/.ad-side/
   .start-ad-banner добавляется ОДИН из fx-shine/fx-pulse/fx-glow.
   Здесь только описание того, как каждый выглядит, сама ротация — в JS.
   ────────────────────────────────────────────────────────────────────── */
.ad-inline,
.ad-side,
.start-ad-banner {
  position: relative;
  overflow: hidden;
}

/* ── 1. Блик — полоса света пробегает по блоку ──────────────────────────
   Длинная сторона полосы (90%) всегда идёт вдоль длинной стороны самого
   блока: у горизонтального .ad-inline/.start-ad-banner — слева направо,
   у вертикального .ad-side (широкий экран) — сверху вниз. Если сделать
   одинаково для обоих, плавный по одной оси переход "сжимается" по другой
   до резкой полосы — поэтому у них разные правила ниже. */
.fx-shine.ad-inline::after,
.fx-shine.start-ad-banner::after {
  content: '';
  position: absolute;
  top: 0;
  left: -170%;
  width: 90%;
  height: 100%;
  background: linear-gradient(120deg,
    transparent 0%,
    rgba(255,255,255,.12) 30%,
    rgba(255,255,255,.4) 50%,
    rgba(255,255,255,.12) 70%,
    transparent 100%);
  animation: ad-shine-h 60s ease-in-out infinite;
  pointer-events: none;
}
@keyframes ad-shine-h {
  0%   { left: -170%; }
  4%   { left: 170%; }
  100% { left: 170%; }
}
.fx-shine.ad-side::after {
  content: '';
  position: absolute;
  top: -170%;
  left: -20%;
  width: 140%;
  height: 90%;
  background: linear-gradient(195deg,
    transparent 0%,
    rgba(255,255,255,.12) 30%,
    rgba(255,255,255,.4) 50%,
    rgba(255,255,255,.12) 70%,
    transparent 100%);
  animation: ad-shine-v 60s ease-in-out infinite;
  pointer-events: none;
}
@keyframes ad-shine-v {
  0%   { top: -170%; }
  4%   { top: 170%; }
  100% { top: 170%; }
}

/* ── 2. Дыхание — блок едва заметно увеличивается и уменьшается ────────── */
.fx-pulse {
  animation: ad-fx-pulse 2.6s ease-in-out infinite;
}
@keyframes ad-fx-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.025); }
}

/* ── 3. Свечение — рамка блока плавно разгорается и затухает ───────────── */
.fx-glow {
  animation: ad-fx-glow 2.6s ease-in-out infinite;
}
@keyframes ad-fx-glow {
  0%, 100% { box-shadow: 0 0 4px rgba(94,196,255,.15); }
  50%      { box-shadow: 0 0 16px rgba(94,196,255,.55); }
}

/* ── Бонусный блок ("удвой выигрыш, перейдя по ссылке рекламодателя") ────
   Раньше был расписан в каждой игре по отдельности, с расхождениями:
   где-то адаптивный clamp() для размера шрифта, где-то фиксированный rem
   (забыли поправить при копировании), у группы игр на Судоку кнопки вообще
   без :hover. Хуже того — сам блок жёстко ограничен по высоте (родитель
   с фиксированной min-height + position:absolute;inset:0), и при длинном
   тексте объявления содержимое сжималось вместе с рамкой (flex-shrink по
   умолчанию), из-за чего золотая рамка снизу обрезалась. Теперь критичные
   элементы защищены от сжатия (flex-shrink:0) — сжимается в крайнем случае
   только дисклеймер, самый нейтральный текст, а сам блок компактнее и
   центрирован по высоте, чтобы обычно вообще ничего сжимать не пришлось. */
.bonus-block {
  position: absolute; inset: 0; z-index: 10;
  background: linear-gradient(160deg,rgba(0,60,15,.97),rgba(0,30,8,.99));
  border: 1px solid rgba(0,255,100,.4);
  border-radius: 12px;
  padding: clamp(8px,1.5vh,14px) clamp(10px,2.5vw,16px);
  display: flex; flex-direction: column;
  gap: clamp(4px,1vh,8px);
  animation: bonusFadeIn .35s ease;
  overflow-y: auto;
  justify-content: center;
}
@keyframes bonusFadeIn { from{opacity:0;transform:scale(.97)} to{opacity:1;transform:none} }
.bonus-block.hidden { display: none; }
.bonus-prize-header {
  flex-shrink: 0;
  background: rgba(0,0,0,.2);
  border-radius: 8px;
  padding: 6px 12px;
  text-align: center;
  border: 1px solid rgba(0,255,100,.15);
}
.bonus-prize-label {
  font-size: clamp(.5rem,1vw,.6rem);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(150,255,180,.7);
  margin-bottom: 2px;
}
.bonus-prize-amount {
  font-size: clamp(.95rem,2.3vw,1.2rem);
  font-weight: 900;
  color: #00ff80;
  letter-spacing: .04em;
  text-shadow: 0 0 12px rgba(0,255,100,.5);
}
.bonus-title {
  flex-shrink: 0;
  font-size: clamp(.65rem,1.4vw,.78rem);
  font-weight: 700;
  color: #00ff80;
  letter-spacing: .05em;
}
.bonus-disclaimer {
  font-size: clamp(.42rem,.85vw,.48rem);
  color: rgba(200,255,210,.45);
  line-height: 1.3;
}
.bonus-btns {
  flex-shrink: 0;
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  margin-top: 2px;
  align-items: center;
  justify-content: center;
}
.btn-bonus-go {
  flex-shrink: 0;
  background: linear-gradient(135deg,#007830,#004d1e);
  border: 1px solid #00cc55;
  border-radius: 8px;
  padding: 7px 14px;
  color: #00ff80;
  font-weight: 700;
  font-size: clamp(.58rem,1.2vw,.68rem);
  letter-spacing: .05em;
  cursor: pointer;
  transition: all .2s;
  white-space: nowrap;
}
.btn-bonus-go:hover {
  background: linear-gradient(135deg,#009940,#006625);
  box-shadow: 0 0 12px rgba(0,255,80,.4);
}
.btn-bonus-skip {
  flex-shrink: 0;
  background: transparent;
  border: 1px solid rgba(200,200,200,.25);
  border-radius: 8px;
  padding: 7px 12px;
  color: rgba(200,200,200,.55);
  font-size: clamp(.52rem,1.1vw,.6rem);
  cursor: pointer;
  transition: all .2s;
  white-space: nowrap;
}
.btn-bonus-skip:hover {
  border-color: rgba(200,200,200,.5);
  color: rgba(200,200,200,.8);
}
.bonus-block .start-ad-banner { flex-shrink: 0; }

/* Светлая тема бонусного блока — уже была единообразна во всех играх,
   делаем компактнее и добавляем ту же защиту от сжатия */
body.theme-light .bonus-block {
  position: absolute; inset: 0; z-index: 10;
  background: linear-gradient(135deg,#3236a3,#4f30aa);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  padding: clamp(8px,1.5vh,14px) clamp(10px,2.5vw,16px);
  display: flex; flex-direction: column;
  gap: clamp(4px,1vh,8px);
  animation: bonusFadeIn .35s ease;
  overflow-y: auto;
  justify-content: center;
  box-shadow: 0 8px 32px rgba(10,10,40,.25),0 0 30px rgba(53,216,255,.08);
}
body.theme-light .bonus-block.hidden { display: none; }
body.theme-light .bonus-prize-header {
  flex-shrink: 0;
  background: rgba(45,35,115,.4);
  border-radius: 10px;
  padding: 6px 12px;
  text-align: center;
  border: 1px solid var(--glass-border);
}
body.theme-light .bonus-prize-label {
  font-size: clamp(.46rem,1vw,.56rem);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--s1);
  margin-bottom: 2px;
}
body.theme-light .bonus-prize-amount {
  display: inline-block;
  font-size: clamp(.95rem,2.3vw,1.2rem);
  font-weight: 900;
  color: var(--gold);
  letter-spacing: .04em;
  border: 1px solid rgba(255,209,102,.5);
  border-radius: 16px;
  padding: 3px 14px;
  background: rgba(255,209,102,.08);
}
body.theme-light .bonus-title {
  flex-shrink: 0;
  font-size: clamp(.65rem,1.4vw,.78rem);
  font-weight: 700;
  color: #fff;
  letter-spacing: .05em;
  text-align: center;
}
body.theme-light .bonus-disclaimer {
  font-size: clamp(.42rem,.85vw,.48rem);
  color: var(--text-soft);
  opacity: .6;
  line-height: 1.3;
  text-align: center;
}
body.theme-light .bonus-btns {
  flex-shrink: 0;
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  margin-top: 2px;
  align-items: center;
  justify-content: center;
}
body.theme-light .btn-bonus-go {
  flex-shrink: 0;
  display: inline-block;
  font-family: 'Orbitron','Segoe UI',Arial,sans-serif;
  font-weight: 700;
  font-size: clamp(.58rem,1.2vw,.68rem);
  color: var(--gold);
  text-decoration: none;
  border: 1px solid rgba(255,209,102,.55);
  border-radius: 20px;
  padding: 8px 16px;
  background: rgba(255,209,102,.09);
  transition: all .2s;
  letter-spacing: .06em;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 0 12px rgba(255,209,102,.15);
}
body.theme-light .btn-bonus-go:hover {
  background: rgba(255,209,102,.2);
  box-shadow: 0 0 20px rgba(255,209,102,.35);
  transform: scale(1.02);
}
body.theme-light .btn-bonus-skip {
  flex-shrink: 0;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 10px;
  padding: 8px 12px;
  color: var(--text-soft);
  font-size: clamp(.52rem,1.1vw,.6rem);
  cursor: pointer;
  transition: all .2s;
  white-space: nowrap;
}
body.theme-light .btn-bonus-skip:hover {
  border-color: rgba(53,216,255,.6);
  background: rgba(53,216,255,.15);
  color: #fff;
}

/* ══════════════════════════════════════════════════════════════════════════
   СУНДУК СОКРОВИЩ МЕСЯЦА
   Иконка в шапке специально крупнее и ярче обычных .header-icon-btn (30-36px,
   прозрачные) — должна сразу бросаться в глаза, а не теряться рядом с ними.
   Показывается только тем, кто уже нашёл сундук (см. shared/treasure.js).
   ══════════════════════════════════════════════════════════════════════════ */
.treasure-icon-btn {
  display: none; /* показывается через JS, когда сундук найден */
  align-items: center;
  justify-content: center;
  width: clamp(52px, 13vw, 64px);
  height: clamp(52px, 13vw, 64px);
  background: none;
  border: none;
  cursor: pointer;
  position: fixed; /* отдельный слой поверх страницы — не влияет на высоту шапки и раскладку остального */
  top: clamp(6px, 1.5vh, 12px);
  right: clamp(6px, 2vw, 14px);
  z-index: 9998;
  padding: 0;
  animation: treasure-icon-bob 2.2s ease-in-out infinite;
}
.treasure-icon-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  animation: treasure-icon-glow 1.8s ease-in-out infinite;
}
.treasure-icon-map {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: clamp(42px, 10.5vw, 52px);
  line-height: 1;
  animation: treasure-icon-glow 1.8s ease-in-out infinite;
}
@keyframes treasure-icon-bob {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-2px) scale(1.05); }
}
@keyframes treasure-icon-glow {
  0%, 100% { filter: drop-shadow(0 0 5px rgba(255,209,102,.85)) drop-shadow(0 0 12px rgba(255,209,102,.5)); }
  50%      { filter: drop-shadow(0 0 11px rgba(255,209,102,1)) drop-shadow(0 0 24px rgba(255,209,102,.8)); }
}
.treasure-icon-badge {
  position: absolute;
  top: -3px;
  right: -6px;
  background: #ff4466;
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  border-radius: 10px;
  padding: 1px 5px;
  line-height: 1.4;
  border: 1px solid #fff;
  white-space: nowrap;
}

/* Полноэкранный показ — намеренно БЕЗ карточки/рамки с текстом: просто
   крупный сундук по центру, название сверху, статус снизу, замки прямо на
   сундуке (для экрана статуса). ────────────────────────────────────────── */
.treasure-overlay {
  position: fixed;
  inset: 0;
  background: rgba(6,4,20,.92);
  backdrop-filter: blur(4px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  z-index: 99999;
  padding: 24px;
  box-sizing: border-box;
  text-align: center;
  animation: treasure-fade-in .25s ease;
}
@keyframes treasure-fade-in { from { opacity: 0; } to { opacity: 1; } }
.treasure-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.treasure-title {
  font-size: 1.15rem;
  font-weight: 900;
  color: #ffe27a;
  margin-bottom: 18px;
  line-height: 1.35;
  text-shadow: 0 0 18px rgba(255,209,102,.55);
  max-width: 320px;
}
.treasure-chest-wrap {
  position: relative;
  width: min(80vw, 300px);
  margin-bottom: 20px;
  animation: treasure-bounce 1s ease-in-out .1s 2;
}
.treasure-chest-img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 0 22px rgba(255,209,102,.6)) drop-shadow(0 0 46px rgba(255,209,102,.3));
  animation: treasure-chest-glow 2.2s ease-in-out infinite;
}
.treasure-chest-emoji {
  display: block;
  font-size: min(40vw, 150px);
  line-height: 1;
  filter: drop-shadow(0 0 22px rgba(255,209,102,.6)) drop-shadow(0 0 46px rgba(255,209,102,.3));
  animation: treasure-chest-glow 2.2s ease-in-out infinite;
}
@keyframes treasure-chest-glow {
  0%, 100% { filter: drop-shadow(0 0 16px rgba(255,209,102,.5)) drop-shadow(0 0 34px rgba(255,209,102,.25)); }
  50%      { filter: drop-shadow(0 0 26px rgba(255,209,102,.8)) drop-shadow(0 0 54px rgba(255,209,102,.4)); }
}
@keyframes treasure-bounce {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-10px) rotate(-3deg); }
}
.treasure-text {
  font-size: .85rem;
  color: #eaf4ff;
  line-height: 1.6;
  max-width: 320px;
  margin-bottom: 4px;
}
/* Замочки — прямо поверх сундука, в районе передней панели с защёлкой. */
.treasure-locks {
  position: absolute;
  left: 50%;
  top: 58%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: clamp(1px, .8vw, 4px);
  z-index: 2;
}
.treasure-lock {
  width: clamp(40px, 11vw, 48px);
  height: clamp(40px, 11vw, 48px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(28px, 8vw, 36px);
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.7));
  transition: all .4s;
}
.treasure-lock.open {
  filter: drop-shadow(0 0 14px rgba(255,209,102,1)) drop-shadow(0 1px 3px rgba(0,0,0,.55));
  animation: treasure-lock-open .5s ease;
}
.treasure-lock.available {
  cursor: pointer;
  filter: drop-shadow(0 0 10px rgba(255,140,60,.9)) drop-shadow(0 1px 3px rgba(0,0,0,.6));
  animation: treasure-lock-pulse 1.3s ease-in-out infinite;
}
.treasure-lock.available:active {
  transform: scale(.9);
}
@keyframes treasure-lock-pulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 8px rgba(255,140,60,.75)) drop-shadow(0 1px 3px rgba(0,0,0,.6)); }
  50%      { transform: scale(1.12); filter: drop-shadow(0 0 16px rgba(255,140,60,1)) drop-shadow(0 1px 3px rgba(0,0,0,.6)); }
}
@keyframes treasure-lock-open {
  0%   { transform: scale(.6) rotate(-30deg); }
  60%  { transform: scale(1.15) rotate(8deg); }
  100% { transform: scale(1) rotate(0deg); }
}
.treasure-btn {
  background: linear-gradient(135deg, #ffd166, #d4a017);
  color: #1a0a2e;
  border: none;
  border-radius: 12px;
  padding: 10px 26px;
  font-size: .85rem;
  font-weight: 800;
  cursor: pointer;
  margin-top: 14px;
}
.treasure-instructions-link {
  margin-top: 14px;
  font-size: .72rem;
  color: rgba(255,209,102,.85);
  text-decoration: underline;
  cursor: pointer;
}
.treasure-instructions-link:hover {
  color: #ffd166;
}
.treasure-instructions-emoji {
  font-size: 64px;
  display: block;
  margin-bottom: 16px;
  filter: drop-shadow(0 6px 16px rgba(255,209,102,.4));
}
.treasure-instructions-img {
  display: block;
  max-width: min(80vw, 320px);
  max-height: 220px;
  width: auto;
  height: auto;
  margin: 0 auto 16px;
  border-radius: 14px;
  object-fit: cover;
  box-shadow: 0 8px 26px rgba(0,0,0,.5), 0 0 0 1px rgba(255,209,102,.35);
}
.treasure-instructions-text {
  font-size: .85rem;
  color: #eaf4ff;
  line-height: 1.7;
  max-width: 380px;
  white-space: pre-line;
  text-align: left;
}
/* Монеты, вылетающие при открытии сундука (opened_chest) — чистый CSS,
   без картинок: эмодзи-частицы разлетаются и падают под гравитацией. */
.treasure-coin {
  position: absolute;
  top: 45%;
  left: 50%;
  font-size: 22px;
  pointer-events: none;
  z-index: 3;
  animation: treasure-coin-fly 1.1s cubic-bezier(.2,.7,.4,1) forwards;
}
@keyframes treasure-coin-fly {
  0%   { transform: translate(-50%,-50%) scale(0); opacity: 1; }
  15%  { transform: translate(calc(-50% + var(--tx,0px)), calc(-50% + var(--ty,-40px))) scale(1); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--tx,0px) * 1.6), calc(-50% + 140px)) scale(.8) rotate(200deg); opacity: 0; }
}

