/* ============================================================================
 * style.css — все стили экранов и меню.
 *
 * Сцена (#stage) всегда держит пропорции 16:10 и вписывается в окно.
 * Размеры текста внутри сцены заданы в cqw (1% ширины сцены), поэтому меню
 * масштабируется вместе с канвасом на любом экране. Для старых браузеров
 * перед каждым cqw стоит запасное значение в px.
 * ========================================================================== */

:root {
  --cocoa: #5b3b3f;         /* основной текст */
  --cocoa-soft: #8a6a6e;
  --cream: #fffaf4;
  --green: #8fd14f;         /* цвет Ам Няма */
  --green-dark: #4e8a2a;
  --green-tint: #e6f7d6;
  --pink: #ff9fc4;          /* цвет кошечки */
  --pink-dark: #d45d8e;
  --pink-tint: #ffe6ef;
  --shadow: 0 10px 30px rgba(120, 70, 90, 0.18);
  --font: 'Nunito', 'Comfortaa', 'Segoe UI Rounded', 'Arial Rounded MT Bold', 'Segoe UI', system-ui, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  font-family: var(--font);
  color: var(--cocoa);
  touch-action: manipulation;      /* без двойного тапа-зума на телефоне */
  -webkit-text-size-adjust: 100%;  /* мобильный Safari не увеличивает шрифты сам */
  background:
    radial-gradient(circle at 15% 20%, #fff3c9 0, transparent 35%),
    radial-gradient(circle at 85% 80%, #d8ecff 0, transparent 40%),
    linear-gradient(135deg, #ffe4ef 0%, #eaf3ff 100%);
  overflow: hidden;
  user-select: none;
}

#app {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

/* ---------- Сцена ---------- */
#stage {
  position: relative;
  width: min(calc(100vw - 32px), calc((100vh - 32px) * 1.6));
  aspect-ratio: 16 / 10;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--shadow), 0 0 0 6px #fff;
  background: #bfe6a4;
  container-type: size;
}

#game {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ---------- Экраны-оверлеи ---------- */
.screen {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
}
.screen.active { display: flex; }

kbd {
  display: inline-block;
  min-width: 1.7em;
  padding: 0.05em 0.4em;
  margin: 0 0.08em;
  border-radius: 0.45em;
  background: #fff;
  border: 2px solid #ead7da;
  border-bottom-width: 4px;
  font-family: var(--font);
  font-weight: 800;
  font-size: 0.85em;
  line-height: 1.4;
  text-align: center;
  color: var(--cocoa);
}

/* ---------- Загрузка ---------- */
#screen-loading { background: rgba(255, 250, 244, 0.85); }
.loading-box { text-align: center; width: 40%; }
.loading-title {
  font-size: 22px;
  font-size: 2.4cqw;
  font-weight: 900;
  margin-bottom: 1.2cqw;
}
.progress {
  height: 1.6cqw;
  min-height: 12px;
  border-radius: 99px;
  background: #f3dde3;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  width: 0;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--green), var(--pink));
  transition: width 0.2s;
}

/* ---------- Главное меню ---------- */
#screen-menu {
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.15) 0%, rgba(255, 228, 239, 0.35) 100%);
}

.menu-card {
  width: 74%;
  max-height: 96%;          /* меню всегда влезает целиком */
  overflow-y: auto;
  padding: 1.6cqw 3cqw 1.4cqw;
  border-radius: 3cqw;
  background: rgba(255, 250, 244, 0.9);
  box-shadow: var(--shadow), inset 0 0 0 0.35cqw #fff;
  text-align: center;
  animation: card-in 0.5s cubic-bezier(.2, 1.4, .4, 1) both;
}
@keyframes card-in {
  from { transform: translateY(20px) scale(0.94); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.title {
  margin: 0;
  font-size: 40px;
  font-size: 4.3cqw;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.title .t-green { color: var(--green-dark); }
.title .t-pink  { color: var(--pink-dark); }
.title .t-and   { color: var(--cocoa-soft); font-weight: 800; font-size: 0.75em; }

.subtitle {
  margin: 0.3cqw 0 1cqw;
  font-size: 16px;
  font-size: 1.7cqw;
  font-weight: 700;
  color: var(--cocoa-soft);
}

.heroes {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2cqw;
  margin-bottom: 1.1cqw;
}

.hero { margin: 0; width: 30%; }

.portrait {
  width: 11.5cqw;
  height: 11.5cqw;
  margin: 0 auto 0.5cqw;
  border-radius: 50%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 1.2cqw;
  overflow: hidden;
}
.hero-omnom .portrait { background: radial-gradient(circle at 50% 40%, #fff 0, var(--green-tint) 70%); box-shadow: inset 0 0 0 0.4cqw #cdeeb2; }
.hero-cat   .portrait { background: radial-gradient(circle at 50% 40%, #fff 0, var(--pink-tint) 70%);  box-shadow: inset 0 0 0 0.4cqw #ffd0e0; }

.portrait img {
  height: 78%;
  animation: bob 1.6s ease-in-out infinite;
  transform-origin: 50% 100%;
}
.hero-cat .portrait img { animation-delay: -0.8s; }
@keyframes bob {
  0%, 100% { transform: scale(1, 1); }
  50%      { transform: scale(1.04, 0.95); }
}

.hero figcaption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35cqw;
  font-size: 13px;
  font-size: 1.3cqw;
  font-weight: 700;
  color: var(--cocoa-soft);
}
.hero figcaption b {
  font-size: 1.45em;
  font-weight: 900;
  color: var(--cocoa);
}

.together {
  font-size: 4cqw;
  color: var(--pink);
  animation: beat 1.2s ease-in-out infinite;
}
@keyframes beat {
  0%, 100% { transform: scale(1); }
  15%      { transform: scale(1.25); }
  30%      { transform: scale(1); }
}

/* ---------- Кнопки ---------- */
.buttons {
  display: flex;
  justify-content: center;
  gap: 2cqw;
}

.btn {
  font-family: var(--font);
  cursor: pointer;
  border: 0;
  width: 26%;
  padding: 0.9cqw 1cqw 1.1cqw;
  border-radius: 1.8cqw;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.08s, box-shadow 0.08s, filter 0.15s;
}
.btn-title {
  font-size: 20px;
  font-size: 2.2cqw;
  font-weight: 900;
  line-height: 1.1;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.15);
}
.btn-sub {
  font-size: 11px;
  font-size: 1.15cqw;
  font-weight: 700;
  opacity: 0.92;
}
.btn-green { background: var(--green); box-shadow: 0 0.6cqw 0 var(--green-dark); }
.btn-pink  { background: var(--pink);  box-shadow: 0 0.6cqw 0 var(--pink-dark); }
.btn:hover { filter: brightness(1.06); transform: translateY(-2px); }
.btn:active { transform: translateY(0.5cqw); box-shadow: 0 0.1cqw 0 rgba(0, 0, 0, 0.2); }
.btn:focus-visible { outline: 0.35cqw solid #fff; outline-offset: 0.3cqw; }

.hint {
  margin: 1.4cqw 0 0;
  font-size: 12px;
  font-size: 1.2cqw;
  font-weight: 700;
  color: var(--cocoa-soft);
}

/* ---------- Кнопка лавки в меню ---------- */
.menu-extra {
  display: flex;
  justify-content: center;
  gap: 1cqw;
}

.btn-shop {
  margin-top: 0.9cqw;
  font-family: var(--font);
  font-size: 14px;
  font-size: 1.5cqw;
  font-weight: 800;
  color: var(--cocoa);
  background: #fff;
  border: 0;
  border-radius: 99px;
  padding: 0.7cqw 2.2cqw 0.9cqw;
  box-shadow: 0 0.4cqw 0 #ead7da;
  cursor: pointer;
}
.btn-shop:hover { transform: translateY(-2px); }

/* ============================================================================
 * Карта миров
 * ========================================================================== */
#screen-map {
  background: rgba(255, 245, 250, 0.94);
  align-items: stretch;
}
.map {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 1.4cqw 2cqw;
  gap: 0.8cqw;
}
.map-top { display: flex; align-items: center; justify-content: space-between; }
.map-top h2 { margin: 0; font-size: 2.8cqw; font-weight: 900; color: var(--cocoa); }
.map-right { display: flex; align-items: center; gap: 1cqw; }

.map-regions { overflow-y: auto; padding-right: 0.5cqw; }
body.touch .map-regions { touch-action: pan-y; }

.map-region { margin-bottom: 1cqw; }
.map-region-title {
  display: flex;
  align-items: baseline;
  gap: 1cqw;
  margin-bottom: 0.4cqw;
}
.map-region-title b { font-size: 1.7cqw; font-weight: 900; color: var(--cocoa); }
.map-region-title span { font-size: 1.15cqw; font-weight: 700; color: var(--cocoa-soft); }

.map-line { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1cqw; }

.map-node {
  position: relative;
  height: 9cqw;
  border: 0;
  border-radius: 1.6cqw;
  box-shadow: 0 0.35cqw 0 #ead7da;
  font-family: var(--font);
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.12s;
}
.map-node:hover:not(:disabled) { transform: translateY(-3px); }
.node-num {
  position: absolute;
  top: 0.5cqw;
  left: 0.8cqw;
  font-size: 1.6cqw;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.node-name {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.5cqw 0.4cqw 0.6cqw;
  background: rgba(255, 250, 244, 0.88);
  font-size: 1.25cqw;
  font-weight: 800;
  color: var(--cocoa);
}
.node-star {
  position: absolute;
  top: 0.4cqw;
  right: 0.7cqw;
  font-size: 2cqw;
  color: #ffd54a;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.node-lock {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.6cqw;
  background: rgba(80, 60, 70, 0.55);
}
.map-node.is-locked { cursor: default; filter: grayscale(0.5); box-shadow: 0 0.35cqw 0 #ddd0d3; }
.map-node.is-next { box-shadow: 0 0.35cqw 0 var(--green-dark), inset 0 0 0 0.3cqw var(--green); }
.map-node.is-cleared { box-shadow: 0 0.35cqw 0 #e6cf8e, inset 0 0 0 0.25cqw #ffd54a; }

@container (max-width: 720px) {
  .map-top h2 { font-size: 3.4cqw; }
  .map-region-title b { font-size: 2.4cqw; }
  .map-region-title span { font-size: 1.5cqw; }
  .map-line { grid-template-columns: repeat(2, 1fr); gap: 1.4cqw; }
  .map-node { height: 14cqw; }
  .node-name { font-size: 1.9cqw; }
  .node-num { font-size: 2.4cqw; }
}

/* ============================================================================
 * Лавка мечей
 * ========================================================================== */
#screen-shop {
  background: rgba(255, 240, 246, 0.92);
  align-items: stretch;
}

.shop {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 1.6cqw 2.2cqw;
  gap: 1.2cqw;
}

.shop-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.shop-top h2 {
  margin: 0;
  font-size: 24px;
  font-size: 2.8cqw;
  font-weight: 900;
  color: var(--cocoa);
}

.shop-top-right { display: flex; align-items: center; gap: 1cqw; }

/* Кнопка полного сброса — намеренно неяркая, чтобы не тянуло нажать */
.btn-reset {
  font-family: var(--font);
  font-size: 1.2cqw;
  font-weight: 800;
  color: #a9797f;
  background: transparent;
  border: 0.22cqw solid #e8d3d6;
  border-radius: 99px;
  padding: 0.45cqw 1.4cqw 0.55cqw;
  cursor: pointer;
}
.btn-reset:hover { color: #c0525f; border-color: #f0bcc2; background: #fff2f4; }

/* Предупреждение перед сбросом */
.confirm {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(60, 40, 45, 0.45);
  z-index: 10;
}
.confirm-box {
  width: 52%;
  padding: 2.4cqw 2.6cqw;
  border-radius: 2.4cqw;
  background: var(--cream);
  box-shadow: var(--shadow);
  text-align: center;
}
.confirm-title { font-size: 2.6cqw; font-weight: 900; color: var(--cocoa); }
.confirm-text {
  margin: 1cqw 0 1.6cqw;
  font-size: 1.4cqw;
  font-weight: 700;
  line-height: 1.4;
  color: var(--cocoa-soft);
}
.confirm-buttons { display: flex; justify-content: center; gap: 1.4cqw; }

/* Запрос напарнику «начинаем?» — поверх любого экрана */
.net-ask { z-index: 40; }
.net-ask .btn { min-width: 14cqw; }

/* Награда вдвоём: кто уже выбрал, кого ждём */
.levelup-wait {
  margin: 1cqw 0 0;
  font-size: 1.6cqw;
  font-weight: 900;
  color: var(--cocoa);
}
.levelup-cards.is-done .lvl-card { opacity: 0.45; pointer-events: none; }
.levelup-cards.is-done .lvl-card.is-picked { opacity: 1; box-shadow: 0 0 0 0.35cqw #ffdf5e; }
@container (max-width: 720px) {
  .levelup-wait { font-size: 2.2cqw; }
  .net-ask .btn { min-width: 22cqw; }
}
.btn-danger {
  font-family: var(--font);
  font-size: 1.5cqw;
  font-weight: 900;
  color: #fff;
  background: #ff6f8f;
  border: 0;
  border-radius: 99px;
  padding: 0.7cqw 2cqw 0.85cqw;
  box-shadow: 0 0.35cqw 0 #c94061;
  cursor: pointer;
}
.btn-danger:hover { filter: brightness(1.05); }

/* Вкладки героев с кошельками */
.shop-tabs {
  display: flex;
  gap: 1.2cqw;
}
.shop-tab {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.8cqw;
  padding: 0.5cqw 1.2cqw;
  border: 0;
  border-radius: 1.6cqw;
  background: #fff;
  box-shadow: 0 0.3cqw 0 #ead7da;
  font-family: var(--font);
  font-size: 1.5cqw;
  font-weight: 800;
  color: var(--cocoa-soft);
  cursor: pointer;
  opacity: 0.65;
}
.shop-tab img { height: 4cqw; }
.shop-tab .tab-name { font-size: 1.7cqw; color: var(--cocoa); }
.shop-tab .tab-coins { margin-left: auto; color: #d99b1e; font-size: 1.6cqw; }
.shop-tab .tab-dust {
  margin-left: 1cqw;
  padding: 0.15cqw 0.9cqw 0.25cqw;
  border-radius: 99px;
  background: linear-gradient(180deg, #fff6d8, #ffe9a8);
  color: #8a6320;
  font-size: 1.5cqw;
  white-space: nowrap;
}
.shop-tab.is-active { opacity: 1; }
.tab-omnom.is-active { box-shadow: 0 0.3cqw 0 var(--green-dark), inset 0 0 0 0.3cqw var(--green); }
.tab-cat.is-active { box-shadow: 0 0.3cqw 0 var(--pink-dark), inset 0 0 0 0.3cqw var(--pink); }

/* Карточки оружия */
.shop-items {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  align-content: start;
  gap: 0.8cqw;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.shop-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.6cqw 0.5cqw 0.65cqw;
  border-radius: 1.3cqw;
  background: var(--cream);
  box-shadow: 0 0.35cqw 0 #ead7da;
  text-align: center;
  transition: transform 0.15s, box-shadow 0.15s;
}
.shop-card.is-equipped { box-shadow: 0 0.35cqw 0 #ead7da, inset 0 0 0 0.35cqw #ffd36e; }
.shop-card.just-bought { transform: translateY(-4px) scale(1.03); }

.shop-pic {
  /* высота задана, ширина сама — иначе картинка растягивается */
  height: 5.2cqw;
  width: auto;
  max-width: 100%;
  margin-bottom: 0.2cqw;
}
.shop-info { display: flex; flex-direction: column; gap: 0.15cqw; margin-bottom: 0.4cqw; }
.shop-name { font-size: 1.3cqw; font-weight: 900; color: var(--cocoa); line-height: 1.12; }
.shop-desc {
  font-size: 0.95cqw;
  font-weight: 700;
  color: var(--cocoa-soft);
  line-height: 1.2;
  max-height: 2.4cqw;
  overflow: hidden;
}
.shop-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.22cqw; }
.chip {
  font-style: normal;
  font-size: 0.88cqw;
  font-weight: 800;
  padding: 0.1cqw 0.45cqw;
  border-radius: 99px;
  background: #f1e7e9;
  color: var(--cocoa-soft);
}
.chip.up { background: #e6f7d6; color: var(--green-dark); }
.chip.down { background: #ffe3e3; color: #c05858; }

.shop-buy {
  margin-top: auto;
  width: 100%;
  font-family: var(--font);
  font-size: 1.12cqw;
  font-weight: 900;
  color: #fff;
  background: var(--green);
  border: 0;
  border-radius: 99px;
  padding: 0.42cqw 0.3cqw 0.5cqw;
  box-shadow: 0 0.3cqw 0 var(--green-dark);
  cursor: pointer;
}
.shop-buy:hover:not(:disabled) { filter: brightness(1.06); }
.shop-buy.is-on { background: #ffd36e; box-shadow: 0 0.3cqw 0 #d99b1e; color: var(--cocoa); }
.shop-buy.is-poor { background: #e6dadd; box-shadow: 0 0.3cqw 0 #d3c3c7; color: #9b8589; cursor: default; }
.shop-buy b { font-weight: 900; }

/* Кнопка прокачки оружия */
.shop-up {
  margin-top: 0.45cqw;
  width: 100%;
  font-family: var(--font);
  font-size: 1.15cqw;
  font-weight: 800;
  color: var(--cocoa);
  background: #fff3c9;
  border: 0;
  border-radius: 99px;
  padding: 0.45cqw 0.4cqw 0.5cqw;
  box-shadow: 0 0.25cqw 0 #e6cf8e;
  cursor: pointer;
}
.shop-up:hover:not(:disabled) { filter: brightness(1.05); }

/* Что даст следующий уровень прокачки */
.shop-gain {
  margin-top: 0.45cqw;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 0.2cqw 0.3cqw;
  font-size: 0.82cqw; font-weight: 800;
  color: var(--green-dark);
}
.shop-gain b { color: #a08e92; }
.shop-gain span { background: #e6f7d6; border-radius: 1cqw; padding: 0.05cqw 0.45cqw; white-space: nowrap; }
.shop-gain span.is-none { background: #f1e7e9; color: #a08e92; }
.shop-up.is-poor, .shop-up:disabled { background: #f1e7e9; box-shadow: 0 0.25cqw 0 #ddd0d3; color: #a08e92; cursor: default; }
.shop-up.is-max { background: #e6f7d6; box-shadow: 0 0.25cqw 0 #b9dd97; color: var(--green-dark); }

/* Уровень оружия рядом с названием */
.lvl {
  font-style: normal;
  font-size: 0.85em;
  color: #d99b1e;
}

/* Секретное оружие — с золотой рамкой */
.shop-card.is-secret {
  background: linear-gradient(180deg, #fffaf0 0%, #fff4d8 100%);
  box-shadow: 0 0.35cqw 0 #e6cf8e, inset 0 0 0 0.25cqw #ffdf5e;
}
.shop-card.is-secret.is-equipped { box-shadow: 0 0.35cqw 0 #e6cf8e, inset 0 0 0 0.45cqw #ffc93c; }
.shop-card.is-locked .shop-pic { opacity: 0.72; }

/* Копилка звёздной пыли */
.dust-purse {
  display: flex;
  align-items: center;
  gap: 0.5cqw;
  padding: 0.5cqw 1.4cqw;
  border-radius: 1.6cqw;
  background: linear-gradient(180deg, #fff6d8, #ffe9a8);
  box-shadow: 0 0.3cqw 0 #e6cf8e;
  font-size: 1.4cqw;
  font-weight: 800;
  color: #8a6320;
  white-space: nowrap;
}
.dust-purse b { font-size: 1.8cqw; color: #e0a413; }

/* ---------- Переключатель «Оружие / Улучшения» ---------- */
.shop-sections { display: flex; gap: 0.8cqw; }
.shop-section {
  font-family: var(--font);
  font-size: 1.4cqw;
  font-weight: 800;
  color: var(--cocoa-soft);
  background: #fff;
  border: 0;
  border-radius: 99px;
  padding: 0.45cqw 1.6cqw 0.55cqw;
  box-shadow: 0 0.25cqw 0 #ead7da;
  cursor: pointer;
}
.shop-section.is-active { background: var(--cocoa); color: #fff; box-shadow: 0 0.25cqw 0 #3d2529; }

/* ---------- Карточки постоянных улучшений ---------- */
.shop-items.is-perks { grid-template-columns: repeat(6, 1fr); }

.perk-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2cqw;
  padding: 0.7cqw 0.6cqw 0.8cqw;
  border-radius: 1.3cqw;
  background: var(--cream);
  box-shadow: 0 0.35cqw 0 #ead7da;
  text-align: center;
}
.perk-card.is-secret {
  background: linear-gradient(180deg, #fffaf0 0%, #fff4d8 100%);
  box-shadow: 0 0.35cqw 0 #e6cf8e, inset 0 0 0 0.25cqw #ffdf5e;
}
.perk-icon { font-size: 2.4cqw; line-height: 1.1; }
.perk-name { font-size: 1.3cqw; font-weight: 900; color: var(--cocoa); line-height: 1.12; }
.perk-desc { font-size: 0.95cqw; font-weight: 700; color: var(--cocoa-soft); line-height: 1.2; max-height: 2.4cqw; overflow: hidden; }
.perk-pips { display: flex; gap: 0.3cqw; margin: 0.3cqw 0 0.45cqw; }
.pip {
  width: 0.8cqw;
  height: 0.8cqw;
  border-radius: 50%;
  background: #e6dadd;
}
.pip.on { background: #ffc93c; box-shadow: 0 0 0 0.15cqw #ffe9a8; }
.perk-card .shop-buy { margin-top: auto; }

/* ---------- Экипировка ---------- */
.shop-items.is-gear { display: block; }

.gear-slot-title {
  display: flex;
  align-items: baseline;
  gap: 0.8cqw;
  margin: 0.35cqw 0 0.35cqw;
}
.gear-slot-title b { font-size: 1.45cqw; font-weight: 900; color: var(--cocoa); }
.gear-slot-title span { font-size: 1cqw; font-weight: 700; color: var(--cocoa-soft); }

.gear-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.7cqw;
  margin-bottom: 0.8cqw;
}

.gear-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.5cqw 0.45cqw 0.6cqw;
  border-radius: 1.2cqw;
  background: var(--cream);
  box-shadow: 0 0.3cqw 0 #ead7da;
  text-align: center;
}
.gear-card.is-secret {
  background: linear-gradient(180deg, #fffaf0 0%, #fff4d8 100%);
  box-shadow: 0 0.3cqw 0 #e6cf8e, inset 0 0 0 0.22cqw #ffdf5e;
}
.gear-card.is-equipped { box-shadow: 0 0.3cqw 0 #ead7da, inset 0 0 0 0.3cqw #ffc93c; }
.gear-pic { height: 4.4cqw; width: auto; max-width: 100%; }
.gear-card .shop-name { font-size: 1.15cqw; line-height: 1.12; }
.gear-card .shop-desc { font-size: 0.9cqw; max-height: 2.2cqw; }
.gear-card .shop-buy { font-size: 1.02cqw; }
.gear-card .shop-up { font-size: 0.95cqw; }

/* Вторая цена — в звёздной пыли */
.shop-dust-pay {
  margin-top: 0.25cqw;
  width: 100%;
  font-family: var(--font);
  font-size: 0.92cqw;
  font-weight: 800;
  color: #8a6320;
  background: linear-gradient(180deg, #fff6d8, #ffe9a8);
  border: 0;
  border-radius: 99px;
  padding: 0.3cqw 0.4cqw 0.4cqw;
  box-shadow: 0 0.2cqw 0 #e6cf8e;
  cursor: pointer;
}
.shop-dust-pay b { color: #e0a413; }
.shop-dust-pay.is-poor { opacity: 0.45; cursor: default; }

/* ============================================================================
 * Экран награды на середине забега
 * ========================================================================== */
#screen-levelup {
  background: rgba(60, 40, 45, 0.45);
  backdrop-filter: blur(2px);
}
.levelup {
  width: 78%;
  padding: 2cqw 2.4cqw 1.6cqw;
  border-radius: 2.4cqw;
  background: var(--cream);
  box-shadow: var(--shadow);
  text-align: center;
  animation: card-in 0.35s cubic-bezier(.2, 1.4, .4, 1) both;
}
.levelup-title { margin: 0; font-size: 3cqw; font-weight: 900; color: var(--cocoa); }
.levelup-who {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1cqw;
  margin: 0.8cqw 0 1.4cqw;
  font-size: 1.8cqw;
  font-weight: 700;
  color: var(--cocoa-soft);
}
.levelup-who img { height: 6cqw; }
.levelup-who b { color: var(--cocoa); }

.levelup-cards { display: flex; gap: 1.4cqw; }
.lvl-card {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4cqw;
  padding: 1.6cqw 1cqw;
  border: 0;
  border-radius: 1.8cqw;
  background: #fff;
  box-shadow: 0 0.45cqw 0 #ead7da;
  font-family: var(--font);
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s;
}
.lvl-card:hover { transform: translateY(-4px); }
.lvl-omnom:hover { box-shadow: 0 0.45cqw 0 var(--green-dark), inset 0 0 0 0.3cqw var(--green); }
.lvl-cat:hover { box-shadow: 0 0.45cqw 0 var(--pink-dark), inset 0 0 0 0.3cqw var(--pink); }
.lvl-num {
  position: absolute;
  top: 0.7cqw;
  left: 0.9cqw;
  font-style: normal;
  font-size: 1.2cqw;
  font-weight: 900;
  color: #cbb8bc;
}
.lvl-icon { font-size: 3.6cqw; line-height: 1.1; }
.lvl-name { font-size: 1.9cqw; font-weight: 900; color: var(--cocoa); }
.lvl-desc { font-size: 1.3cqw; font-weight: 700; color: var(--cocoa-soft); }
.levelup-hint { margin: 1.2cqw 0 0; font-size: 1.2cqw; font-weight: 700; color: var(--cocoa-soft); }

/* На узком экране (телефон) карточки крупнее и в два ряда с прокруткой */
@container (max-width: 720px) {
  .shop-items { grid-template-columns: repeat(4, 1fr); gap: 1cqw; }
  .shop-up { font-size: 1.5cqw; padding: 0.7cqw 0.4cqw; }
  .shop-gain { font-size: 1.3cqw; }
  .btn-reset { font-size: 1.7cqw; padding: 0.7cqw 1.6cqw; }
  .confirm-box { width: 82%; }
  .confirm-title { font-size: 3.4cqw; }
  .confirm-text { font-size: 2cqw; }
  .btn-danger { font-size: 2.1cqw; padding: 1cqw 2.4cqw; }
  .shop-tab .tab-dust { font-size: 1.9cqw; }
  .shop-section { font-size: 1.9cqw; padding: 0.7cqw 1.8cqw; }
  .shop-items.is-perks { grid-template-columns: repeat(3, 1fr); }
  .gear-row { grid-template-columns: repeat(5, 1fr); gap: 0.9cqw; }
  .gear-slot-title b { font-size: 2.4cqw; }
  .gear-slot-title span { font-size: 1.6cqw; }
  .gear-card .shop-name { font-size: 1.5cqw; }
  .gear-card .shop-desc { display: none; }
  .gear-card .shop-buy { font-size: 1.5cqw; }
  .gear-card .shop-up { font-size: 1.4cqw; }
  .shop-dust-pay { font-size: 1.5cqw; padding: 0.5cqw 0.4cqw 0.6cqw; }
  .perk-name { font-size: 1.7cqw; }
  .perk-desc { font-size: 1.3cqw; }
  .perk-icon { font-size: 3cqw; }
  .levelup-title { font-size: 3.6cqw; }
  .lvl-name { font-size: 2.2cqw; }
  .lvl-desc { font-size: 1.6cqw; }
  .levelup-hint { font-size: 1.6cqw; }
  .shop-desc { display: none; }
  .shop-pic { height: 8cqw; width: auto; }
  .gear-pic { height: 6.5cqw; }
  .shop-name { font-size: 1.7cqw; }
  .chip { font-size: 1.15cqw; padding: 0.15cqw 0.6cqw; }
  .shop-gain { font-size: 1.1cqw; }
  .shop-buy { font-size: 1.5cqw; padding: 0.6cqw 0.3cqw 0.7cqw; }
  .shop-dust-pay { font-size: 1.3cqw; }
  .shop-top h2 { font-size: 3.4cqw; }
  .shop-tab img { height: 5.5cqw; }
  .shop-tab .tab-name, .shop-tab .tab-coins { font-size: 2.2cqw; }
}

/* Внутри магазина палец должен прокручивать список, а не управлять героем */
body.touch .shop-items { touch-action: pan-y; }

/* ============================================================================
 * Домик: комната рисуется на канвасе, а кнопки лежат поверх неё
 * ========================================================================== */
#screen-home {
  background: transparent;      /* комнату видно насквозь */
  align-items: stretch;
}

.home {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;          /* панель никогда не вылезает за экран */
  padding: 1.2cqw 1.8cqw 1.4cqw;
  gap: 0.8cqw;
}

.home-top {
  display: flex;
  align-items: center;
  gap: 1cqw;
}
.home-top h2 {
  margin: 0;
  font-size: 24px;
  font-size: 2.6cqw;
  font-weight: 900;
  color: var(--cocoa);
  text-shadow: 0 0.2cqw 0 #fff, 0 0 1cqw #fff;
}
.home-top-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.8cqw;
  flex: 0 0 auto;
}
.home-top-right .btn-small { white-space: nowrap; }
.home-status {
  font-size: 1.3cqw;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.86);
  color: var(--cocoa-soft);
  max-width: 46cqw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn-sleep {
  white-space: nowrap;
  font-family: var(--font);
  font-size: 1.4cqw;
  font-weight: 900;
  color: #fff;
  background: #8a6fb0;
  border: 0;
  border-radius: 99px;
  padding: 0.6cqw 1.8cqw 0.7cqw;
  box-shadow: 0 0.3cqw 0 #5f4a80;
  cursor: pointer;
}
.btn-sleep:hover:not(:disabled) { filter: brightness(1.08); }
.btn-sleep:disabled {
  background: #e0d7ea;
  color: #9b8fa8;
  box-shadow: 0 0.3cqw 0 #cbbfd8;
  cursor: default;
}

/* Пустое место, сквозь которое видно комнату */
.home-room { flex: 1 1 auto; min-height: 0; }

.home-panel {
  flex: 0 0 auto;
  max-height: 38cqh;         /* остальное — комната */
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.7cqw;
  padding: 0.8cqw;
  border-radius: 1.6cqw;
  background: rgba(255, 250, 244, 0.93);
  box-shadow: 0 -0.4cqw 2cqw rgba(120, 70, 90, 0.18);
}
.home-panel.is-build {
  grid-template-columns: repeat(5, 1fr);
  gap: 0.7cqw;
  max-height: 42cqh;
}
/* В обустройстве карточек вдвое больше — делаем их компактнее */
.home-panel.is-build .home-card { padding: 0.4cqw 0.35cqw 0.5cqw; }
.home-panel.is-build .home-pic { height: 4cqw; }
.home-panel.is-build .home-name { font-size: 1.1cqw; }
.home-panel.is-build .home-about { font-size: 0.85cqw; }

.home-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15cqw;
  padding: 0.5cqw 0.45cqw 0.6cqw;
  border-radius: 1.1cqw;
  background: #fff;
  box-shadow: 0 0.3cqw 0 #ead7da;
  text-align: center;
}
.home-card.is-built {
  background: linear-gradient(180deg, #f6fff0 0%, #e9f8dc 100%);
  box-shadow: 0 0.3cqw 0 #c9e3b0;
}
.home-pic { height: 5cqw; width: auto; max-width: 100%; }
.home-name { font-size: 1.25cqw; font-weight: 900; color: var(--cocoa); line-height: 1.12; }
.home-about {
  font-size: 0.92cqw;
  font-weight: 700;
  color: var(--cocoa-soft);
  line-height: 1.2;
  margin-bottom: 0.15cqw;
}
.home-good { margin-bottom: 0.4cqw; line-height: 1.2; }
/* В обустройстве карточек вдвое больше — оставляем только главное */
.home-panel.is-build .home-about { display: none; }
/* В гардеробе карточек мало — наряд видно крупнее */
.home-panel.is-wardrobe .home-pic { height: 6.4cqw; }
.home-card .shop-buy { margin-top: auto; }

/* Домашние вкладки чуть компактнее магазинных */
#home-tabs { gap: 0.8cqw; }
#home-tabs .shop-tab { padding: 0.4cqw 1cqw 0.5cqw; }

@container (max-width: 720px) {
  .home-top h2 { font-size: 3.2cqw; }
  .home-status { font-size: 1.8cqw; }
  .btn-sleep { font-size: 2cqw; padding: 0.8cqw 2cqw 0.9cqw; }
  .home-panel { grid-template-columns: repeat(4, 1fr); max-height: 42cqh; }
  .home-panel.is-build { grid-template-columns: repeat(5, 1fr); max-height: 46cqh; }
  .home-card { padding: 0.5cqw 0.4cqw 0.6cqw; }
  .home-pic { height: 6cqw; }
  .home-panel.is-build .home-pic { height: 5cqw; }
  .home-name { font-size: 1.7cqw; }
  .home-about { font-size: 1.3cqw; }
}

/* Внутри домика палец прокручивает список, а не управляет героем */
body.touch .home-panel { touch-action: pan-y; }

/* Кнопка звука — и в меню, и в шапке игры */
.btn-sound {
  font-family: var(--font);
  font-size: 1.6cqw;
  line-height: 1;
  background: #fff;
  border: 0;
  border-radius: 99px;
  padding: 0.55cqw 1.1cqw 0.65cqw;
  box-shadow: 0 0.3cqw 0 #ead7da;
  cursor: pointer;
}
.btn-sound-menu { margin-top: 0.9cqw; align-self: center; }
@container (max-width: 720px) {
  .btn-sound { font-size: 2.2cqw; padding: 0.7cqw 1.4cqw 0.8cqw; }
}

/* ============================================================================
 * Игра по сети: комната, код, выбор героя
 * ========================================================================== */
.btn-blue {
  background: linear-gradient(180deg, #8fd6ff 0%, #5ab0e8 100%);
  box-shadow: 0 0.5cqw 0 #2f6f9e;
  color: #fff;
  min-width: 34cqw;
}
.btn-blue .btn-sub { color: #e8f6ff; }

#screen-net { background: rgba(255, 244, 235, 0.95); }
.net-card {
  width: 62%;
  max-height: 92%;
  overflow-y: auto;
  padding: 2cqw 2.4cqw 1.8cqw;
  border-radius: 2.4cqw;
  background: var(--cream);
  box-shadow: var(--shadow);
  text-align: center;
}
.net-title { margin: 0; font-size: 3cqw; font-weight: 900; color: var(--cocoa); }
.net-hint { margin: 0.4cqw 0 1.2cqw; font-size: 1.4cqw; font-weight: 800; color: var(--cocoa-soft); }
.net-body { display: flex; flex-direction: column; align-items: center; gap: 0.9cqw; }
.net-body .btn { min-width: 26cqw; }
.net-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.8cqw; }
.net-row .btn { min-width: 22cqw; }
.net-sync { font-size: 1.25cqw; font-weight: 800; color: var(--cocoa-soft); }

.net-code-big {
  font-size: 6cqw;
  font-weight: 900;
  letter-spacing: 0.6cqw;
  color: var(--green-dark);
  background: #fff;
  border-radius: 1.6cqw;
  padding: 0.6cqw 2cqw 0.8cqw;
  box-shadow: 0 0.4cqw 0 #ead7da;
}
.net-link { white-space: nowrap; }
.net-label { font-size: 1.3cqw; font-weight: 800; color: var(--cocoa-soft); }

.net-join { display: flex; align-items: center; gap: 0.8cqw; }
.net-input {
  font-family: var(--font);
  font-size: 2.6cqw;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.3cqw;
  width: 9cqw;
  padding: 0.5cqw 0.4cqw;
  border: 0.25cqw solid #ead7da;
  border-radius: 1.2cqw;
  color: var(--cocoa);
  background: #fff;
}
.net-input:focus { outline: none; border-color: var(--green); }

.version-line {
  position: absolute;
  left: 1.2cqw;
  top: 1cqw;
  z-index: 30;
  margin: 0;
  font-size: 1.3cqw;
  font-weight: 900;
  color: #a58f93;
  background: rgba(255, 255, 255, 0.82);
  border-radius: 99px;
  padding: 0.3cqw 1cqw 0.4cqw;
  pointer-events: auto;
}
@container (max-width: 720px) { .version-line { font-size: 1.9cqw; } }

.btn-update {
  font-family: var(--font);
  font-size: 1.4cqw;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(180deg, #ffc93c 0%, #f0a91e 100%);
  border: 0;
  border-radius: 99px;
  padding: 0.5cqw 1.6cqw 0.6cqw;
  box-shadow: 0 0.3cqw 0 #b87a0d;
  cursor: pointer;
  animation: net-blink 1.6s ease-in-out infinite;
}
@container (max-width: 720px) { .btn-update { font-size: 2cqw; } }

.net-wrap { display: flex; flex-direction: column; align-items: center; gap: 0.5cqw; width: 100%; }
.net-journal {
  width: 100%;
  max-height: 14cqw;
  overflow-y: auto;
  text-align: left;
  background: #fff;
  border-radius: 1cqw;
  padding: 0.5cqw 1cqw 0.6cqw;
  box-shadow: 0 0.25cqw 0 #ead7da;
  font-size: 1.05cqw;
  font-weight: 700;
  line-height: 1.45;
  color: var(--cocoa-soft);
}
@container (max-width: 720px) {
  .net-journal { font-size: 1.5cqw; max-height: 20cqw; }
}

.net-check { display: flex; flex-direction: column; align-items: center; gap: 0.6cqw; }
.net-check-out {
  background: #fff;
  border-radius: 1.2cqw;
  padding: 0.7cqw 1.2cqw 0.8cqw;
  box-shadow: 0 0.3cqw 0 #ead7da;
  text-align: left;
}
.net-check-row {
  font-size: 1.25cqw;
  font-weight: 800;
  color: var(--cocoa-soft);
  line-height: 1.5;
}
.net-check-row.is-ok { color: var(--green-dark); }
.net-check-row.is-bad { color: #c05858; }
@container (max-width: 720px) { .net-check-row { font-size: 1.8cqw; } }

.net-status {
  display: flex;
  align-items: center;
  gap: 0.7cqw;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 1.3cqw;
  font-weight: 800;
  color: var(--cocoa-soft);
  background: #fff;
  border-radius: 1.2cqw;
  padding: 0.6cqw 1.2cqw 0.7cqw;
  box-shadow: 0 0.3cqw 0 #ead7da;
}
.net-dot {
  width: 0.9cqw;
  height: 0.9cqw;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 0.3cqw #e6f7d6;
  animation: net-blink 1.1s ease-in-out infinite;
}
.net-dot.is-bad { background: #ff8f8f; box-shadow: 0 0 0 0.3cqw #ffe3e3; }
@keyframes net-blink { 50% { opacity: 0.35; } }
.net-retry { white-space: nowrap; }

.net-heroes { display: flex; gap: 0.8cqw; }
.net-hero {
  display: flex;
  align-items: center;
  gap: 0.5cqw;
  font-family: var(--font);
  font-size: 1.5cqw;
  font-weight: 900;
  color: var(--cocoa);
  background: #fff;
  border: 0;
  border-radius: 99px;
  padding: 0.4cqw 1.4cqw 0.5cqw 0.5cqw;
  box-shadow: 0 0.3cqw 0 #ead7da;
  opacity: 0.55;
  cursor: pointer;
}
.net-hero img { height: 3.4cqw; }
.net-hero.is-active { opacity: 1; }
.net-hero.tab-omnom.is-active { box-shadow: 0 0.3cqw 0 var(--green-dark), inset 0 0 0 0.3cqw var(--green); }
.net-hero.tab-cat.is-active { box-shadow: 0 0.3cqw 0 var(--pink-dark), inset 0 0 0 0.3cqw var(--pink); }

.net-youare {
  display: flex;
  align-items: center;
  gap: 0.8cqw;
  font-size: 1.6cqw;
  font-weight: 800;
  color: var(--cocoa-soft);
  background: #fff;
  border-radius: 99px;
  padding: 0.4cqw 1.6cqw 0.5cqw 0.5cqw;
  box-shadow: 0 0.3cqw 0 #ead7da;
}
.net-youare img { height: 4cqw; }
.net-back { margin-top: 1.2cqw; }

@container (max-width: 720px) {
  .net-card { width: 80%; }
  .net-title { font-size: 4cqw; }
  .net-hint { font-size: 2cqw; }
  .net-label { font-size: 1.8cqw; }
  .net-hero { font-size: 2cqw; }
  .net-hero img { height: 4.6cqw; }
  .net-input { font-size: 3.4cqw; width: 13cqw; }
  .net-status { font-size: 1.8cqw; }
  .net-dot { width: 1.4cqw; height: 1.4cqw; }
  .net-code-big { font-size: 7cqw; }
  .btn-blue { min-width: 44cqw; }
}

/* ============================================================================
 * Бесконечная волна, пауза и итоги забега
 * ========================================================================== */
.menu-endless { display: flex; justify-content: center; margin-top: 0.7cqw; }
.btn-violet {
  background: linear-gradient(180deg, #b9a4ff 0%, #9a80f0 100%);
  box-shadow: 0 0.5cqw 0 #6a55c9;
  color: #fff;
  min-width: 34cqw;
}
.btn-violet .btn-sub { color: #f0eaff; }

.btn-pause { font-size: 1.5cqw; }

/* ---------- Пауза ---------- */
#screen-pause { background: rgba(60, 40, 60, 0.45); }
.pause-card {
  width: 46%;
  padding: 2.4cqw 2.6cqw 2cqw;
  border-radius: 2.4cqw;
  background: var(--cream);
  box-shadow: var(--shadow);
  text-align: center;
}
.pause-title { margin: 0; font-size: 3.4cqw; font-weight: 900; color: var(--cocoa); }
.pause-where { margin: 0.4cqw 0 1.4cqw; font-size: 1.5cqw; font-weight: 800; color: var(--cocoa-soft); }
.pause-buttons { display: flex; flex-direction: column; align-items: center; gap: 0.8cqw; }
.pause-buttons .btn { min-width: 22cqw; }
.pause-hint { margin: 1.2cqw 0 0; font-size: 1.2cqw; font-weight: 700; color: var(--cocoa-soft); }

/* ---------- Итоги ---------- */
#screen-result { background: rgba(60, 40, 60, 0.5); }
.result-card {
  width: 56%;
  padding: 2.2cqw 2.6cqw 2cqw;
  border-radius: 2.4cqw;
  background: var(--cream);
  box-shadow: var(--shadow);
  text-align: center;
}
#screen-result.is-good .result-card {
  background: linear-gradient(180deg, #fffaf0 0%, #fff3d8 100%);
  box-shadow: var(--shadow), inset 0 0 0 0.3cqw #ffdf5e;
}
.result-title { margin: 0; font-size: 3.2cqw; font-weight: 900; color: var(--cocoa); }
.result-sub { margin: 0.3cqw 0 1.2cqw; font-size: 1.5cqw; font-weight: 800; color: var(--cocoa-soft); }
.result-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5cqw 1.4cqw;
  margin-bottom: 1.4cqw;
  text-align: left;
}
.result-row {
  display: flex;
  align-items: center;
  gap: 0.6cqw;
  padding: 0.45cqw 1cqw;
  border-radius: 99px;
  background: #fff;
  box-shadow: 0 0.2cqw 0 #ead7da;
}
.result-ico { font-style: normal; font-size: 1.7cqw; }
.result-label { font-size: 1.3cqw; font-weight: 800; color: var(--cocoa-soft); }
.result-value { margin-left: auto; font-size: 1.6cqw; font-weight: 900; color: var(--cocoa); }
.result-buttons { display: flex; justify-content: center; align-items: center; gap: 0.8cqw; }
.result-net { margin: 0.8cqw 0 0; font-size: 1.3cqw; font-weight: 800; color: var(--cocoa-soft); }
.result-buttons .btn { min-width: 18cqw; }

@container (max-width: 720px) {
  .btn-violet { min-width: 44cqw; }
  .pause-card { width: 62%; }
  .pause-title { font-size: 4.4cqw; }
  .pause-where { font-size: 2.1cqw; }
  .pause-hint { display: none; }
  .result-card { width: 72%; padding: 2cqw 2.2cqw; }
  .result-title { font-size: 3.8cqw; }
  .result-sub { font-size: 2cqw; }
  .result-stats { grid-template-columns: 1fr; gap: 0.4cqw; }
  .result-label { font-size: 1.9cqw; }
  .result-value { font-size: 2.1cqw; }
  .result-ico { font-size: 2.2cqw; }
}

/* ---------- Временная панель в игре ---------- */
.topbar {
  position: absolute;
  top: 1.2cqw;
  left: 1.2cqw;
  right: 1.2cqw;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
}
.pill {
  padding: 0.4cqw 1.2cqw;
  border-radius: 99px;
  background: rgba(255, 250, 244, 0.9);
  font-size: 13px;
  font-size: 1.4cqw;
  font-weight: 800;
  box-shadow: 0 3px 10px rgba(120, 70, 90, 0.15);
}
.btn-small {
  pointer-events: auto;
  font-family: var(--font);
  font-size: 12px;
  font-size: 1.3cqw;
  font-weight: 800;
  color: var(--cocoa);
  padding: 0.4cqw 1.2cqw;
  border: 0;
  border-radius: 99px;
  background: #fff;
  box-shadow: 0 0.35cqw 0 #ead7da;
  cursor: pointer;
}
.btn-small:hover { transform: translateY(-1px); }

/* ============================================================================
 * Телефон и планшет
 * Класс touch на <body> ставит js/touch.js, если экран сенсорный.
 * Размер и поворот поля тоже считает он — здесь только оформление.
 * ========================================================================== */
body.touch {
  overscroll-behavior: none;   /* без «оттягивания» страницы и обновления свайпом */
}
body.touch #app { padding: 0; }

body.touch #stage {
  position: fixed;
  top: 0;
  left: 0;
  transform-origin: top left;
  border-radius: 0;
  box-shadow: none;
  touch-action: none;          /* пальцы управляют игрой, а не прокруткой */
}

/* Подсказки в меню: на компьютере про клавиши, на телефоне про палец */
.hint-touch { display: none; }
body.touch .hint-keys { display: none; }
body.touch .hint-touch { display: block; }

/* Крупнее кнопки в меню, чтобы попадать пальцем */
body.touch .btn { padding: 1.4cqw 1cqw 1.6cqw; }
body.touch .btn-small { padding: 0.9cqw 2cqw; font-size: 1.6cqw; }

/* Кнопка «во весь экран» — рядом с кнопкой меню, чтобы не мешать джойстику */
.topbar-right {
  display: flex;
  align-items: center;
  gap: 1cqw;
}
.btn-full {
  pointer-events: auto;
  width: 5cqw;
  height: 5cqw;
  min-width: 34px;
  min-height: 34px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 250, 244, 0.9);
  color: var(--cocoa);
  font-size: 2.2cqw;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(120, 70, 90, 0.15);
}

/* ---------- Подсказка «поверните телефон» ----------
   Игра рассчитана на клавиатуру, но в горизонтальном положении её хотя бы
   нормально видно. Подсказка показывается только на узких вертикальных экранах. */
#rotate-hint { display: none; }

@media (orientation: portrait) and (max-width: 820px) {
  #app { flex-direction: column; gap: 14px; }
  #rotate-hint {
    display: block;
    max-width: 320px;
    text-align: center;
    font-size: 14px;
    font-weight: 800;
    color: var(--cocoa-soft);
    background: rgba(255, 250, 244, 0.9);
    border-radius: 18px;
    padding: 12px 16px;
    box-shadow: var(--shadow);
  }
  #rotate-hint b { display: block; font-size: 16px; color: var(--cocoa); margin-bottom: 4px; }
}