/* Robotun — лэндинг.
   Язык самой игры: её жёлтый #FEE509 во весь экран, чёрный как краска, и
   цвета робота с его же анимации — фиолетовый, голубой, оранжевый. Шрифт
   Golos Text, он в игре и есть (GolosText-Black/Bold/Regular). Дисплейный
   Bender из игры сюда не тащим: его нет в вебе, а подменять похожим нечестно.
   Робот на странице — не картинка: это те же Lottie-файлы, что в приложении.
   Прокрутку страница не перехватывает. */

:root {
  --yellow: #fee509;
  --yellow-dim: #e5ce08;
  --ink: #080202;
  --ink-2: rgb(8 2 2 / 66%);
  --ink-3: rgb(8 2 2 / 42%);
  --line: rgb(8 2 2 / 16%);
  --card: #fff;
  --magenta: #b800ff;
  --cyan: #22d3ff;
  --orange: #ff5b00;
  --pad: clamp(20px, 4.4vw, 72px);
  --max: 1180px;
  --sans: "Golos Text", system-ui, -apple-system, sans-serif;
  --ease: cubic-bezier(.2, .7, .15, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 76px; }
body {
  margin: 0; color: var(--ink); background: var(--yellow);
  font: 400 17px/1.55 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
figure { margin: 0; }
[hidden] { display: none !important; }
::selection { background: var(--ink); color: var(--yellow); }

.wrap { max-width: calc(var(--max) + 2 * var(--pad)); margin: 0 auto; padding: 0 var(--pad); }
.h1 { margin: 0; font: 900 clamp(38px, 5.6vw, 78px)/1.02 var(--sans); letter-spacing: -.035em; text-wrap: balance; }
.h2 { margin: 0; font: 800 clamp(28px, 3.4vw, 48px)/1.06 var(--sans); letter-spacing: -.03em; text-wrap: balance; max-width: 18ch; }
.lead { margin: 0; max-width: 48ch; font: 400 clamp(17px, 1.3vw, 19px)/1.55 var(--sans); color: var(--ink-2); text-wrap: pretty; }
.note { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-3); max-width: 60ch; }

/* ── Шапка ─────────────────────────────────────────────────────────────── */
.top {
  position: sticky; top: 0; z-index: 20; display: flex; justify-content: space-between; align-items: center;
  height: 66px; padding: 0 max(var(--pad), calc((100vw - var(--max)) / 2));
  background: rgb(254 229 9 / 92%); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 2px solid transparent; transition: border-color .3s;
}
.top.is-scrolled { border-bottom-color: var(--ink); }
.top__brand { display: inline-flex; align-items: center; gap: 10px; font: 800 19px/1 var(--sans); letter-spacing: -.03em; text-decoration: none; }
.top__brand img { border-radius: 8px; }
.top__home { font: 600 15px/1 var(--sans); text-decoration: none; padding: 11px 15px; border-radius: 999px; border: 2px solid var(--ink); }
.top__home:hover { background: var(--ink); color: var(--yellow); }

/* ── Кнопки: плашки игры, чёрная и обводка ──────────────────────────────── */
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 24px;
  border: 2px solid var(--ink); border-radius: 14px; background: transparent; color: var(--ink);
  font: 700 16px/1 var(--sans); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform .12s var(--ease), background .2s, color .2s;
}
.btn:hover { background: rgb(8 2 2 / 8%); }
.btn:active { transform: scale(.96); }
.btn--ink { background: var(--ink); color: var(--yellow); }
.btn--ink:hover { background: #1c1010; }
.btn[disabled] { opacity: .4; cursor: default; }
.btn__icon { width: 18px; height: 18px; flex: none; }
.btn:focus-visible, .top a:focus-visible { outline: 3px solid var(--magenta); outline-offset: 3px; }

/* ── Разделы ───────────────────────────────────────────────────────────── */
.sec { padding: clamp(56px, 6.4vw, 104px) 0 0; }
.head { display: grid; gap: 16px; margin-bottom: clamp(22px, 2.6vw, 36px); max-width: 62ch; }

/* ── Первый экран: текст и живой робот ─────────────────────────────────── */
.hero { padding: clamp(20px, 2.6vw, 36px) 0 0; }
.hero__in { display: grid; gap: clamp(24px, 3.4vw, 52px); align-items: center; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .hero__in { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } }
.hero__copy { display: grid; gap: 24px; align-content: center; }
.robot { width: min(100%, 460px); justify-self: center; }
.robot svg { width: 100%; height: auto; }

/* ── Игра: робот ведёт, ты повторяешь ──────────────────────────────────── */
/* робот стоит слева, на четверть ширины секции, и ему позволено вылезать:
   на взмахе рука выходит за композицию, и резать её нельзя */
.play { display: grid; }
.play__robot { width: min(52%, 190px); overflow: visible; margin-bottom: 4px; }
.play__robot svg { width: 100%; height: auto; overflow: visible !important; }
/* на широком робот стоит в самой плашке, у её нижнего левого угла: он привязан
   к ней, а не к секции, поэтому на текст выше заехать не может. Содержимое
   плашки отодвинуто ровно на его ширину. */
@media (min-width: 880px) {
  .play__robot {
    position: absolute; left: clamp(-26px, -1.6vw, -10px); bottom: 0; margin: 0;
    width: clamp(170px, 16vw, 210px); z-index: 2; pointer-events: none;
  }
  .play .game { padding-left: clamp(170px, 16.5vw, 215px); }
}

.game {
  position: relative; display: grid; gap: 14px; padding: clamp(16px, 1.8vw, 22px);
  border: 2px solid var(--ink); border-radius: 22px; background: rgb(255 255 255 / 34%);
}
/* шапка карточки: робот, сердца, счёт и подсказка — одной строкой */
.game__bar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.game__lives { font-size: 24px; letter-spacing: 2px; line-height: 1; }
.game__score { font: 800 26px/1 var(--sans); }
.game__score span { font: 600 12px/1 var(--sans); color: var(--ink-3); display: block; margin-bottom: 3px; letter-spacing: .04em; text-transform: uppercase; }
/* лента: одна метка = одна полная секунда движения, «0» между движениями */
.ticks { display: flex; flex-wrap: wrap; gap: 6px; min-height: 38px; align-items: center; padding: 5px 9px;
  border: 2px dashed rgb(8 2 2 / 18%); border-radius: 12px; flex: 1; }
.tick { width: 22px; height: 22px; border-radius: 7px; background: var(--ink); }
.tick--gap { width: 10px; height: 10px; border-radius: 50%; background: rgb(8 2 2 / 26%); }
.tick--live { background: var(--magenta); }
.ticks--robot .tick { background: var(--ink); }
.ticks--you .tick { background: var(--cyan); }
/* подпись слева от дорожки, а не над ней: так строка вдвое ниже */
.game__row { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 12px; align-items: center; }
.ticks__label { font: 600 12px/1.2 var(--sans); color: var(--ink-3); letter-spacing: .04em; text-transform: uppercase; margin: 0; }
@media (max-width: 599px) { .game__row { grid-template-columns: minmax(0, 1fr); gap: 6px; } }
.game__controls { display: flex; gap: 10px; flex-wrap: wrap; align-items: stretch; margin-top: 2px; }
.game__controls .btn { flex: none; }
.hold {
  flex: 1; min-width: 200px; min-height: 58px; border-radius: 14px; border: 2px solid var(--ink); background: var(--ink); color: var(--yellow);
  font: 800 18px/1.2 var(--sans); cursor: pointer; touch-action: none; user-select: none;
  transition: transform .1s var(--ease), background .2s;
}
.hold:disabled { opacity: .35; cursor: default; }
.hold.is-held { background: var(--magenta); border-color: var(--magenta); transform: scale(.985); }
.game__status { margin: 0 0 0 auto; max-width: 34ch; font-size: 14px; line-height: 1.4; color: var(--ink-2); text-align: right; }
@media (max-width: 719px) { .game__status { margin: 0; text-align: left; } }
/* робот с рукой — тот же файл, которым он машет в тренировке в приложении */
.game__robot svg { width: 100%; height: auto; }

/* ── Ответ: реплика во всю плашку, как в комиксе ───────────────────────── */
.flash {
  position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 3;
  opacity: 0; visibility: hidden; border-radius: 20px;
}
.flash span {
  font: 900 clamp(38px, 6vw, 82px)/0.95 var(--sans); letter-spacing: -.04em; text-transform: uppercase;
  transform: rotate(-4deg) scale(.7); transition: transform .18s cubic-bezier(.2, 1.5, .5, 1);
  padding: 8px 22px; border: 4px solid var(--ink); border-radius: 18px; background: var(--yellow);
  box-shadow: 8px 8px 0 var(--ink);
}
.flash.is-on { opacity: 1; visibility: visible; }
.flash.is-on span { transform: rotate(-4deg) scale(1); }
.flash.is-bad span { background: var(--magenta); color: #fff; }
@media (prefers-reduced-motion: reduce) { .flash span { transition: none; } }

/* ── Таблица уровней ───────────────────────────────────────────────────── */
.levels { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; max-width: 560px; }
.levels th, .levels td { text-align: left; padding: 9px 14px 9px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.levels th { font: 600 13px/1 var(--sans); color: var(--ink-3); letter-spacing: .04em; text-transform: uppercase; }
.levels tr:last-child td { border-bottom: none; }

/* ── Телефон с роликом ─────────────────────────────────────────────────── */
.phone {
  --w: min(280px, 72vw);
  width: var(--w); padding: calc(var(--w) * 0.011);
  border-radius: calc(var(--w) * 0.165);
  background: #16130f; box-shadow: 0 22px 44px rgb(8 2 2 / 22%), inset 0 0 0 1px rgb(255 255 255 / 8%);
}
.phone__screen { position: relative; border-radius: calc(var(--w) * 0.154); overflow: hidden; background: #000; }
.phone__screen > video, .phone__screen > img { width: 100%; height: auto; display: block; }
.shot { display: grid; gap: 12px; justify-items: center; }
/* кадр без корпуса: снимок обрезан без строки статуса, корпус вокруг него
   изображал бы аппарат, которого на кадре нет */
.shot--bare img { width: min(260px, 70vw); border-radius: 18px; box-shadow: 0 18px 38px rgb(8 2 2 / 22%); }
.split { display: grid; gap: clamp(20px, 3vw, 44px); align-items: center; }
@media (min-width: 860px) { .split { grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); } }
/* лесенка слева, настоящий экран сразу за ней: колонка текста ужимается по
   самой таблице, чтобы между ними не оставалось пустого поля */
.split--wide { align-items: start; justify-content: start; }
@media (min-width: 860px) { .split--wide { grid-template-columns: minmax(0, 560px) minmax(180px, 240px); gap: clamp(24px, 3vw, 48px); } }
.split--wide .split__copy { gap: 18px; }
.split__copy { display: grid; gap: 16px; }

/* ── Звук ──────────────────────────────────────────────────────────────── */
.sounds { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); max-width: 760px; }
.sound { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border: 2px solid var(--ink); border-radius: 14px; background: transparent; cursor: pointer; text-align: left; }
.sound:hover { background: rgb(8 2 2 / 8%); }
.sound b { display: block; font: 700 15px/1.3 var(--sans); }
.sound span { display: block; font-size: 13px; color: var(--ink-2); }
.sound i { width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--ink); color: var(--yellow); display: grid; place-items: center; font-style: normal; }

/* ── Факты ─────────────────────────────────────────────────────────────── */
.facts { display: grid; gap: clamp(14px, 1.8vw, 22px); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.fact b { display: block; font: 800 clamp(26px, 2.6vw, 34px)/1 var(--sans); margin-bottom: 6px; }
.fact span { font-size: 14px; line-height: 1.45; color: var(--ink-2); }

/* ── Конец ─────────────────────────────────────────────────────────────── */
.end { padding: clamp(64px, 7vw, 116px) 0 clamp(48px, 5vw, 84px); }
.end__in { display: grid; gap: 22px; justify-items: start; }
.foot { border-top: 2px solid var(--ink); padding: 20px 0 40px; font-size: 14px; color: var(--ink-2); }
.foot__row { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }
.foot a { text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  .btn, .hold { transition: none; }
}