/* ============================================================
   F-1 BOSS — слой приложения поверх дизайн-системы.
   Токены и примитивы берутся из tokens.css и base.css.
   ============================================================ */

/* ============================================================
   Заставка. Полный экран телефона, ролик под интерфейсом,
   стартовые огни как индикатор готовности и как жест входа:
   по «Поехали» они гаснут — и заставка уходит.
   ============================================================ */

.splash-open, .splash-open body { overflow: hidden; }

.splash {
  position: fixed;
  inset: 0;
  z-index: 100;
  height: 100vh;
  height: 100dvh; /* на мобильных адресная строка не должна резать кадр */
  background: var(--carbon);
  overflow: hidden;
  transition: opacity 600ms ease;
}
.splash--out { opacity: 0; pointer-events: none; }

.splash__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Кадр слегка поджат — при уходе заставки он «выдыхает» наружу. */
  transform: scale(1.06);
  transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}
.splash--go .splash__video { transform: scale(1); }

/* Свет держится в середине кадра, края уходят в карбон под текст. */
.splash::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom,
      rgba(11,13,16,0.92) 0%, rgba(11,13,16,0.30) 26%,
      rgba(11,13,16,0.42) 52%, rgba(11,13,16,0.97) 88%),
    radial-gradient(120% 70% at 50% 42%, transparent 40%, rgba(11,13,16,0.75) 100%);
}

.splash__in {
  position: relative;
  z-index: 1;
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding:
    calc(var(--gap-5) + env(safe-area-inset-top)) var(--gap-5)
    calc(var(--gap-5) + env(safe-area-inset-bottom));
}

/* --- Верхняя строка: подпись и стартовые огни --- */
.splash__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-4);
}
.splash__eyebrow {
  font-family: var(--font-display);
  font-size: var(--step--1);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--slate);
}

.splash__lights {
  display: inline-flex;
  gap: 6px;
  padding: 7px 10px;
  background: rgba(5,7,10,0.72);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  backdrop-filter: blur(6px);
}
.splash__lights i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #23272E;
  transition: background 220ms ease, box-shadow 220ms ease;
}
/* Лампы загораются по очереди, пока грузится ролик; пятая — «готов». */
.splash--ready .splash__lights i {
  background: var(--kerb-red);
  box-shadow: 0 0 10px rgba(225,6,0,0.75);
}
.splash--ready .splash__lights i:nth-child(1) { transition-delay: 0ms; }
.splash--ready .splash__lights i:nth-child(2) { transition-delay: 130ms; }
.splash--ready .splash__lights i:nth-child(3) { transition-delay: 260ms; }
.splash--ready .splash__lights i:nth-child(4) { transition-delay: 390ms; }
.splash--ready .splash__lights i:nth-child(5) { transition-delay: 520ms; }
/* Lights out: гаснут разом, без задержек. */
.splash--go .splash__lights i {
  background: #23272E;
  box-shadow: none;
  transition-delay: 0ms !important;
}

/* --- Марка --- */
.splash__title {
  align-self: end;
  padding-bottom: var(--gap-6);
}
.splash__mark {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3.5rem, 21vw, 7.5rem);
  line-height: 0.84;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-shadow: 0 6px 40px rgba(0,0,0,0.85);
}
.splash__mark span { display: block; color: var(--kerb-red); }
.splash__sub {
  margin: var(--gap-3) 0 0;
  padding-left: 3px;
  font-family: var(--font-display);
  font-size: var(--step-0);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--slate);
}

/* Появление марки: буквы съезжаются из разрядки. */
@keyframes splash-mark {
  from { opacity: 0; letter-spacing: 0.3em; transform: translateY(10px); }
  to   { opacity: 1; letter-spacing: 0.01em; transform: none; }
}
.splash__mark { animation: splash-mark 900ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.splash__sub  { animation: splash-mark 900ms cubic-bezier(0.22, 1, 0.36, 1) 160ms both; }

/* --- Кнопки --- */
.splash__tape { margin-bottom: var(--gap-4); opacity: 0.6; }
.splash__actions { display: flex; gap: var(--gap-3); }

.splash__go {
  flex: 1;
  min-height: 60px;
  border: 1px solid #FF3B33;
  border-radius: var(--r-md);
  background: var(--kerb-red);
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(225,6,0,0.35);
  transition: background 140ms ease, transform 80ms ease;
}
.splash__go:hover { background: #FF1A12; }
.splash__go:active { transform: translateY(1px); }

.splash__horn {
  flex: none;
  width: 60px;
  min-height: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hairline-2);
  border-radius: var(--r-md);
  background: rgba(5,7,10,0.7);
  color: var(--slate);
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}
.splash__horn:hover { color: var(--flag-white); border-color: var(--slate); }
.splash__wave { opacity: 0.22; transition: opacity 160ms ease; }
.splash__horn[aria-pressed="true"] {
  color: var(--yellow-flag);
  border-color: rgba(245,197,24,0.55);
  background: rgba(245,197,24,0.12);
}
.splash__horn[aria-pressed="true"] .splash__wave { opacity: 1; }
.splash__horn[aria-pressed="true"] .splash__wave:nth-of-type(1) { animation: splash-horn 1.4s ease-in-out infinite; }
.splash__horn[aria-pressed="true"] .splash__wave:nth-of-type(2) { animation: splash-horn 1.4s ease-in-out 0.2s infinite; }
@keyframes splash-horn { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }

/* На широком экране кадр вертикальный — держим интерфейс колонкой по центру. */
@media (min-width: 760px) {
  .splash__in {
    width: min(560px, 100%);
    margin: 0 auto;
    padding-bottom: var(--gap-7);
  }
  .splash__mark { font-size: 6.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .splash__mark, .splash__sub { animation: none; }
  .splash__video { transform: none; }
}

/* --- Шапка --- */
.top { border-bottom: 1px solid var(--hairline); background: var(--pitwall); }
.top__in {
  max-width: 1360px; margin: 0 auto; padding: var(--gap-3) var(--gap-5);
  display: flex; align-items: center; gap: var(--gap-5); flex-wrap: wrap;
}
.brand {
  font-family: var(--font-display); font-size: var(--step-1); font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--flag-white); text-decoration: none;
}
.brand b { color: var(--kerb-red); }
.nav { display: flex; gap: 2px; flex: 1; }
.nav a {
  padding: 8px 14px; border-radius: var(--r-sm); color: var(--slate); text-decoration: none;
  font-family: var(--font-display); font-size: var(--step--1);
  letter-spacing: 0.12em; text-transform: uppercase;
}
.nav a:hover { background: var(--pitwall-2); color: var(--flag-white); }
.nav a[aria-current] { background: var(--pitwall-2); color: var(--flag-white); box-shadow: inset 0 -2px 0 var(--kerb-red); }
.top__user { display: flex; align-items: center; gap: var(--gap-3); }
.top__user form { margin: 0; }

/* --- Страница --- */
.page { max-width: 1360px; margin: 0 auto; padding: var(--gap-5) var(--gap-5) var(--gap-7); }
.narrow { max-width: 420px; margin: var(--gap-6) auto; display: flex; flex-direction: column; gap: var(--gap-4); }
.mt { margin-top: var(--gap-5); }
.small { font-size: var(--step--1); }

.round { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--gap-5); padding-bottom: var(--gap-5); flex-wrap: wrap; }
.round__title { font-family: var(--font-display); font-size: var(--step-4); font-weight: 700; line-height: 0.95; text-transform: uppercase; margin: 0; }
.round__no { font-family: var(--font-data); font-size: var(--step-0); color: var(--kerb-red); }
.round__team { text-align: right; }
.round__team b { font-family: var(--font-display); font-size: var(--step-1); letter-spacing: 0.06em; text-transform: uppercase; }

/* --- Окно трансферов: стартовые лампы и отсчёт --- */
.window { display: flex; align-items: center; gap: var(--gap-3); margin-bottom: var(--gap-4); }
.lights {
  display: inline-flex; align-items: center; gap: 5px; padding: 6px 9px;
  background: #05070A; border: 1px solid var(--hairline); border-radius: var(--r-md);
}
.lights i { width: 9px; height: 9px; border-radius: 50%; background: #23272E; }
.lights i.on { background: var(--kerb-red); box-shadow: 0 0 8px rgba(225,6,0,0.7); }
.window__t { font-family: var(--font-data); font-size: var(--step-1); }
.window__s { font-size: var(--step--1); }

/* --- Сообщения --- */
.alert { padding: var(--gap-3) var(--gap-4); border-radius: var(--r-sm); font-size: var(--step-0); margin: 0 0 var(--gap-3); }
.alert--warn { background: rgba(245,197,24,0.10); color: var(--yellow-flag); }
.alert--stop { background: rgba(225,6,0,0.12); color: #FF6B66; }
.alert--ok { background: rgba(43,213,118,0.12); color: var(--sector-green); }

/* --- Питлейн --- */
.layout { display: grid; grid-template-columns: 1fr 320px; gap: var(--gap-5); align-items: start; }
.slots { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap-3); }
.slot {
  display: flex; flex-direction: column; gap: var(--gap-3); padding: var(--gap-4);
  background: var(--pitwall); border: 1px solid var(--hairline); border-radius: var(--r-md);
}
.slot--locked { border-color: rgba(245,197,24,0.5); }

/* Иллюстрация слота: полоса-техночертёж, растворяющаяся в карточке.
   Вытянута в отрицательные отступы, чтобы лечь заподлицо с рамкой. */
.slot__art {
  position: relative;
  margin: calc(-1 * var(--gap-4)) calc(-1 * var(--gap-4)) 0;
  height: 118px;
  overflow: hidden;
  border-radius: calc(var(--r-md) - 1px) calc(var(--r-md) - 1px) 0 0;
  background: #05070A;
}
.slot__art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* Нижняя кромка уходит в цвет панели — линия обреза не читается. */
.slot__art::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 45%, var(--pitwall) 100%);
}
.slot--locked .slot__art img { filter: saturate(0.6); }
.slot__role {
  display: flex; align-items: center; justify-content: space-between; gap: var(--gap-2);
  font-family: var(--font-display); font-size: var(--step--1); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate);
}
.slot__name { font-family: var(--font-display); font-size: var(--step-2); font-weight: 700; line-height: 1.1; }

.side { display: flex; flex-direction: column; gap: var(--gap-3); position: sticky; top: var(--gap-4); }
.money { padding: var(--gap-4); background: var(--pitwall); border: 1px solid var(--hairline); border-radius: var(--r-md); }
.money__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--gap-3); padding: 7px 0; }
.money__row + .money__row { border-top: 1px solid rgba(42,50,60,0.6); }
.money__k { font-size: var(--step--1); color: var(--slate); }
.money__v { font-family: var(--font-data); font-variant-numeric: tabular-nums; font-size: var(--step-1); }
.money__v--big { font-size: var(--step-3); }
.money__v.over { color: var(--kerb-red); }
.actions { display: grid; gap: var(--gap-2); }
.actions .btn { width: 100%; }

/* --- Формы --- */
.form { display: flex; flex-direction: column; gap: var(--gap-3); }
.field { display: flex; flex-direction: column; gap: var(--gap-1); }
.field__k { font-family: var(--font-display); font-size: var(--step--1); letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate); }
.input, .select {
  width: 100%; padding: 9px 12px; background: var(--pitwall-2); color: var(--flag-white);
  border: 1px solid var(--hairline); border-radius: var(--r-sm);
  font-family: var(--font-body); font-size: var(--step-0);
}
.select { font-family: var(--font-data); }
.input:focus, .select:focus { outline: none; border-color: var(--hairline-2); }
.input--sm { padding: 5px 9px; font-size: var(--step--1); }
.input--num { width: 78px; text-align: right; font-family: var(--font-data); }
.check { display: inline-flex; align-items: center; gap: 6px; color: var(--slate); font-size: var(--step--1); }
.btn--sm { padding: 6px 12px; font-size: var(--step--1); }
.row { display: flex; align-items: center; gap: var(--gap-3); flex-wrap: wrap; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--gap-4); }
textarea.input { font-family: var(--font-data); font-size: var(--step--1); line-height: 1.5; resize: vertical; }
.row--tight { gap: var(--gap-2); }
.row form { margin: 0; }

/* --- Таблицы --- */
.scroll { overflow-x: auto; }
.panel { margin-bottom: var(--gap-5); }
.panel__body + .panel__body { padding-top: 0; }

@media (max-width: 1100px) {
  .layout { grid-template-columns: 1fr; }
  .side { position: static; }
}
@media (max-width: 620px) {
  .slots { grid-template-columns: 1fr; }
  .round__title { font-size: var(--step-3); }
}