/* Начало игры: выбор персонажа, комикс, интро-бой и шаги проводки.
   Своих цветов тут нет, всё берётся токенами темы. */

/* Два арта стоят рядом и занимают экран поровну: выбор делается тапом,
   промежуточной кнопки «дальше» между ними нет */
.pick {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}
.pick-one { display: flex; }
.pick-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 6px 6px 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-second);
  color: var(--ink-bright);
  cursor: pointer;
  transition: transform .12s ease, opacity .12s ease;
}
.pick-btn:active { transform: scale(.98); }
/* Арт растёт вместе с экраном и встаёт на всю высоту до своего роста в 560:
   выше его тянуть некуда, картинка пойдёт мылом */
.pick-art {
  width: 100%;
  height: min(52vh, 560px);
  object-fit: contain;
  border-radius: 8px;
  display: block;
}
.pick-name {
  font-size: 15px;
  text-align: center;
  letter-spacing: .04em;
}

/* Кадры комикса лежат стопкой с лёгким наклоном, как снимки на столе.
   Наклон только через transform: перерисовки от него нет */
.comic { display: grid; gap: 10px; margin: 4px 0 12px; }
.comic-frame {
  margin: 0;
  padding: 5px;
  background: var(--bg-lift);
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: 0 3px 10px rgb(0 0 0 / .35);
}
.comic-frame img { width: 100%; height: auto; display: block; border-radius: 2px; }
.comic-frame:nth-child(odd) { transform: rotate(-1.1deg); }
.comic-frame:nth-child(even) { transform: rotate(.9deg); }

.bubble._comic .bubble-body { width: 100%; }

/* Над кнопкой удара стрелка стоит вдвое крупнее: это единственная живая
   кнопка на экране, и промахнуться мимо неё нельзя. Ряд кнопок при этом
   отодвигается вниз, иначе стрелка ложится на подсказку */
#introbox .zones { margin-top: 52px; }
.zbtn._point .pointer {
  width: 76px;
  height: 88px;
  margin: 0 0 -10px -38px;
}

.tile-form { display: contents; }

/* В проводке та же карточка, что в каталоге. Форма не меняет её раскладку. */
.catalog-buy { display: contents; }

/* Одинокая плитка меню на шаге проводки: та же разметка, что внизу,
   но кнопка. Ряд из одной плитки не растягивается на всю ширину */
.menu._one { grid-template-columns: repeat(3, 1fr); }
.menu._one form { display: contents; }
.menu._one .menu-item { width: 100%; border: 0; font: inherit; cursor: pointer; }

/* Плитка меню как кнопка: цель шага проводки закрывается прямо с неё. */
.menu-form { display: contents; }
.menu-form .menu-item { border: 0; font: inherit; cursor: pointer; width: 100%; }
/* Карточка вещи на шаге проводки это форма, а раскладка у неё карточки */
form.gcard { text-align: left; }