/* Единый каркас экранов: сверху слева «← Меню», сверху справа кошелёк
   (улов и звёзды). До этого у каждого режима были свои правила: на главной
   меню стояло справа, а монеты слева, в Плетёнке, Дуэли и Бухте наоборот, и
   звёзды были видны только в Бухте. Подключается последним, чтобы побеждать
   частные правила режимов. */

.hub-back,
.mode-switch {
  position: fixed;
  top: 8px;
  left: 8px;
  right: auto;
  z-index: 9998;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  height: 32px;
  padding: 0 12px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #cfcfcf;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  opacity: 1;
  cursor: pointer;
}
.hub-back:hover,
.mode-switch:hover { color: #fff; border-color: rgba(255, 255, 255, 0.34); }
.host-vk .hub-back,
.host-vk .mode-switch { top: 54px; }

.wallet {
  position: fixed;
  top: 8px;
  right: 8px;
  z-index: 9998;
  display: flex;
  align-items: center;
  gap: 6px;
}
.host-vk .wallet { top: 54px; }
body .wallet .currency-badge,
body .wallet .stars-badge {
  position: static;
  left: auto;
  right: auto;
  top: auto;
  box-sizing: border-box;
  height: 32px;
  padding: 0 11px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  border-radius: 20px;
}
body .wallet .stars-badge {
  color: #ffb08a;
  background: rgba(255, 140, 90, 0.14);
  border: 1px solid rgba(255, 140, 90, 0.42);
}
.stars-badge svg { width: 19px; height: 19px; display: block; flex-shrink: 0; }
.stars-badge.bump svg { animation: shellStar 0.5s ease-out; }
@keyframes shellStar { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
/* Меню – это и есть то, куда ведёт «← Меню»: на нём самой кнопки быть не должно.
   Класс ставит shell.js по состоянию #gameModePicker. Заголовку меню нужен
   запас сверху под кошелёк. */
/* Заголовок экрана уходит под верхнюю панель: с двумя плашками кошелька на
   узком экране они иначе ложатся на слово «СЛОВОЛОВ». В VK своя панель сверху и
   свои отступы (body.host-vk), там панель и так ниже заголовка. */
body:not(.host-vk) header { padding-top: 36px; }
/* В VK панель площадки занимает верх (54px у кнопок), body и так сдвинут на 34px. */
body.host-vk header { padding-top: 54px; }
body.menu-open #gameModeSwitch { display: none; }
body #gameModePicker { padding-top: 50px; }
/* На главной второй счётчик улова живёт внутри меню – общий кошелёк его заменил. */
#gameModePicker > .currency-badge { display: none; }

[data-tilestyle="pumpkin"] body .wallet .stars-badge,
[data-tilestyle="pumpkin"] .wallet .stars-badge {
  background: rgba(14, 11, 32, 0.78);
  border-color: rgba(200, 162, 78, 0.5);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  color: #ffb98f;
}
@media (prefers-reduced-motion: reduce) { .stars-badge.bump svg { animation: none; } }

/* копилка у потолка */
.wallet .at-cap { box-shadow: 0 0 0 1.5px #e0a53a, 0 2px 8px rgba(0, 0, 0, 0.3); }

/* В очень узком окне (десктоп, меньше ~210px) клавиатура шире экрана: страница начинала ездить вбок и слои сцены
   расходились полосой. Горизонтальный скролл страницы выключен совсем. */
html { overflow-x: hidden; overscroll-behavior-x: none; }