/* ============================================================
   igra-hero.css - первый экран /igra/: ниши как начала линий
   схемы метро. Токены: tokens.css сайта + igra-tokens.css.
   Подключается только на странице игры.
   ============================================================ */

.band { position: relative; overflow: hidden; }

/* ---------- Первый экран ---------- */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 0.76fr) minmax(0, 1.24fr);
  gap: var(--space-5);
  align-items: center;
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-5) var(--container-pad) var(--space-8);
}

.hero__title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-head);
  font-weight: var(--fw-bold);
  font-size: 2.875rem; /* запасной размер для детектора, clamp ниже */
  font-size: clamp(2.25rem, 1.5rem + 1.6vw, 2.875rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
}

.hero__lead {
  margin: 0 0 var(--space-4);
  max-width: 34ch;
  font-size: 1.3125rem; /* 21, отход: крупнее --fs-lead, первый экран держится на тексте */
  line-height: var(--lh-lead);
  color: var(--c-text-muted);
}

.hero__meta { display: grid; gap: var(--space-1); font-size: var(--fs-sm); color: var(--c-text-muted); }
.hero__meta p { margin: 0; }
.hero__meta a { color: var(--c-accent); text-underline-offset: 3px; }

/* ---------- Шаг 0: появляется на месте подзаголовка ---------- */

.step0 { display: none; scroll-margin-top: var(--space-3); }
.step0:focus { outline: none; }
.step0__done { margin: var(--space-3) 0 0; padding: var(--space-2); background: var(--c-accent-soft); border-radius: var(--r-md); }
.is-started .hero__intro { display: none; }
.is-started .step0 { display: block; animation: g-in var(--dur-slow) var(--ease-out) both; }

.step0__label { margin: 0 0 var(--space-1); font-size: var(--fs-sm); color: var(--c-text-muted); }
.step0__q { margin: 0 0 var(--space-3); font-family: var(--font-head); font-size: var(--fs-h2); line-height: var(--lh-head); }
.step0__choices { display: grid; gap: var(--space-2); max-width: 440px; }
.choice {
  display: block; width: 100%; padding: var(--space-2); text-align: left; text-decoration: none;
  font: inherit; color: var(--c-text); background: var(--c-surface);
  border: 1px solid var(--c-line-strong); border-radius: var(--r-md); cursor: pointer;
  transition: border-color var(--t-fast), transform var(--t-fast);
}
.choice:hover { border-color: var(--c-accent); }
.choice:active { transform: translateY(1px); }
.choice small { display: block; font-size: var(--fs-sm); color: var(--c-text-muted); }
.step0__back { margin-top: var(--space-3); font: inherit; font-size: var(--fs-sm); color: var(--c-accent); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

@keyframes g-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Карта ---------- */

.map {
  position: relative;
  margin: 0 calc((100vw - min(100vw, var(--container))) / -2) 0 0; /* лист уходит до правого края окна */
  padding: var(--space-3) 0 var(--space-2);
}

.map__stage { position: relative; max-width: 780px; }

.map__stage::before {
  content: "";
  position: absolute; inset: -24px -100vw -24px -32px;
  background-color: var(--g-paper);
  border-radius: var(--r-lg) 0 0 var(--r-lg);
  border: 1px solid var(--c-line);
  border-right: 0;
  z-index: -1;
}

.map__stage > svg { display: block; width: 100%; height: auto; overflow: visible; }

.map__legend {
  position: absolute; left: 0; top: 0; margin: 0; line-height: 1.3;
  font-weight: var(--fw-medium); font-size: var(--fs-body);
}

/* Фишки ниш: кнопки поверх левой колонки схемы */
.chips {
  position: absolute; left: 0; top: 7.5%; width: 32.9%; height: 40%;
  display: grid; grid-template-rows: repeat(4, 1fr); align-items: center;
  margin: 0; padding: 0; list-style: none;
}

.chip {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-1);
  width: 100%; min-height: 52px; padding: 0 var(--space-2);
  font: var(--fw-medium) var(--fs-sm)/1.25 var(--font-text);
  color: var(--c-text); text-align: left;
  background: var(--c-surface);
  border: 1px solid var(--c-line-strong); border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast), background-color var(--t-fast);
}
.chip svg { flex: none; width: 16px; height: 16px; transition: transform var(--t-base); }
.chip:hover, .chip.is-lit { border-color: var(--c-accent); box-shadow: inset 0 0 0 1px var(--c-accent); }
.chip:hover svg, .chip.is-lit svg { transform: translateX(3px); }
.chip:active { transform: translateY(1px); }
.chip.is-chosen { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-on-accent); }
.chip { text-decoration: none; }

/* Линии схемы */
.l-branch { fill: none; stroke: var(--g-branch); stroke-width: 10; stroke-linecap: round; transition: stroke var(--t-base); }
.l-branch.is-lit { stroke: var(--g-route); }
.l-main { fill: none; stroke: var(--g-route); stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; }
.l-hub { fill: var(--c-surface); stroke: var(--c-text); stroke-width: 3; transition: stroke var(--t-base); }
.is-any-lit .l-hub { stroke: var(--g-route); }
.l-end { stroke: var(--c-text); stroke-width: 12; stroke-linecap: round; }
.l-gate { fill: var(--c-surface); stroke: var(--g-route); stroke-width: 4; }

.st circle { fill: var(--c-surface); stroke: var(--g-route); stroke-width: 5; transform-box: fill-box; transform-origin: center; transition: transform var(--t-base), fill var(--t-base); }
.st.is-near circle { transform: scale(1.3); }
.st.is-here circle { fill: var(--g-route); }

.tx-name { font: var(--fw-medium) 17px/1.3 var(--font-text); fill: var(--c-text); }
.tx-min  { font: 400 14px/1.3 var(--font-text); fill: var(--c-text-muted); font-variant-numeric: tabular-nums; }
.tx-hub  { font: 400 14px/1.3 var(--font-text); fill: var(--c-text-muted); }
.tx-end  { font: var(--fw-bold) 22px/1.3 var(--font-head); fill: var(--c-text); }
.tx-goal { font: var(--fw-medium) 16px/1.3 var(--font-text); fill: var(--c-accent); }
.st.is-near .tx-name { fill: var(--c-accent); }

.token { fill: var(--c-surface); stroke: var(--c-text); stroke-width: 4; opacity: 0; }
.is-started .token { opacity: 1; }

/* Подпись станции под курсором */
.detail {
  position: absolute; left: 0; top: 57%; width: 40%;
  margin: 0; padding: var(--space-2) 0 0;
  border-top: 2px solid var(--c-text);
}
.detail__head, .detail__text { display: block; }
.detail__head { margin: 0 0 4px; font-size: var(--fs-sm); color: var(--c-text-muted); font-variant-numeric: tabular-nums; }
.detail__text { margin: 0; font-family: var(--font-head); font-size: 1.25rem; line-height: 1.35; transition: opacity var(--t-fast); }
.detail.is-swapping .detail__text, .detail.is-swapping .detail__head { opacity: 0; }
.detail__head { transition: opacity var(--t-fast); }

.map__foot { position: absolute; left: 0; bottom: 4%; width: 40%; margin: 0; font-size: var(--fs-sm); color: var(--c-text-muted); font-variant-numeric: tabular-nums; }

/* Маршрут текстом: на телефоне виден, на компьютере для читалки экрана */
@media (min-width: 768px) {
  .map.is-list .route { position: static; width: auto; height: auto; clip: auto; white-space: normal; margin: var(--space-6) 0 0; padding: 0; list-style: none; max-width: 640px; }
  .route { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ---------- Планшет: текст над схемой ---------- */

@media (max-width: 1023px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); padding-top: var(--space-3); }
  .hero__lead { max-width: 46ch; }
  .map { margin-right: 0; }
  .map__stage { max-width: none; }
  .map__stage::before { right: -24px; border-right: 1px solid var(--c-line); border-radius: var(--r-lg); }
}

/* ---------- Телефон: фишки сеткой, маршрут списком ---------- */

@media (max-width: 767px) {
  .hero { gap: var(--space-3); padding-bottom: var(--space-6); }
  .hero__title { margin-bottom: var(--space-2); }
  .hero__lead { font-size: var(--fs-lead); margin-bottom: var(--space-2); }
  .hero__meta { order: 3; }
  .map { padding: 0; }
  .map__stage::before, .map__stage > svg, .detail { display: none; }
  .map__legend { position: static; margin-bottom: var(--space-1); }
  .chips { position: static; width: auto; height: auto; grid-template-rows: none; grid-template-columns: 1fr 1fr; gap: var(--space-1); }
  .chip { min-height: 64px; align-items: center; }
  .route { margin: var(--space-4) 0 0; padding: 0; list-style: none; }
  .map__foot { position: static; width: auto; margin-top: var(--space-2); }
  .route-toggle { display: none; }
}

.route li { position: relative; padding: 0 0 var(--space-3) var(--space-5); }
.route li::before { content: ""; position: absolute; left: 9px; top: 14px; bottom: -14px; width: 4px; background: var(--g-route); }
.route li::after {
  content: ""; position: absolute; left: 0; top: 4px; width: 22px; height: 22px;
  background: var(--c-surface); border: 4px solid var(--g-route); border-radius: 50%;
}
.route li:last-child { padding-bottom: 0; }
.route li:last-child::before { display: none; }
.route .r-gate::after { border-radius: var(--r-sm); transform: rotate(45deg) scale(.8); }
.route .r-end::after { background: var(--c-text); border-color: var(--c-text); border-radius: var(--r-sm); height: 10px; top: 10px; }
.route .is-here::after { background: var(--g-route); }
.r-name { display: flex; justify-content: space-between; gap: var(--space-2); font-weight: var(--fw-bold); }
.r-name small { font-weight: var(--fw-regular); font-size: var(--fs-sm); color: var(--c-text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.r-text { margin: 2px 0 0; font-size: var(--fs-sm); line-height: var(--lh-lead); color: var(--c-text-muted); }
.r-end .r-text { color: var(--c-accent); font-weight: var(--fw-medium); }

.route-toggle { position: relative; margin: var(--space-3) 0 0; font: inherit; font-size: var(--fs-sm); color: var(--c-accent); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }