@font-face {
  font-family: 'dos';
  src: url('/fonts/DOSFont.ttf');
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Игровые токены: та же палитра, что была захардкожена по файлу, плюс
   семантические цвета для статусов. */
:root {
  --g-bg: #1a1a2e;
  --g-panel: #16213e;
  --g-line: #0f3460;
  --g-accent: #e94560;
  --g-text: #eee;
  --g-dim: #a3adc4;
  --g-ok: #3ad07a;
  --g-warn: #e8b13c;
  --g-blue: #3fa9f5;

  /* Доминантные цвета корон (из crown-{gold,silver,bronze}.png) — обводка карточек лидеров */
  --crown-gold: #c19625;
  --crown-silver: #a6a6a8;
  --crown-bronze: #ad6630;
}

/* ─────────────────────────────────────────────────────────────
   Шкала кеглей

   Базовый ярус — телефон, дальше 900 (появляется вторая колонка) и 1200
   (страница разъезжается до 1080px). Раньше шкала жила наоборот: в базе
   стояли 10–16px, а два медиаблока на сотню строк каждый поднимали размеры
   на широких экранах. То есть самый мелкий текст доставался устройству, где
   читать труднее всего.

   Отдельная поправка на шрифт: у DOSFont x-height 0.44em против 0.49em у
   системного моноширинного, то есть строчные ниже примерно на десятую часть
   и кегль «читается» мельче номинала. Отсюда база в 16px там, где для
   обычного шрифта хватило бы 15px.
   ───────────────────────────────────────────────────────────── */
:root {
  --fs-micro: 13px;  /* пилюли и служебные метки: .role-pill, .sg-stat, .lb-sub */
  --fs-cap: 14px;    /* подписи секций: .sect-label, .pts-head, .preview-sub */
  --fs-sm: 15px;     /* вторичный текст: .notice, .pay, .sart-now, .badge-meta */
  --fs-base: 16px;   /* основной текст и кнопки: .g-btn, .lb-name, .onb-text */
  --fs-md: 17px;     /* акценты в строках: .sg-money, .stat-label */
  --fs-lg: 18px;     /* заголовки строк: .srow-name, .sg-arch, .lb-rank */
  --fs-title: 22px;  /* заголовок шага онбординга */
  --fs-hero: 22px;   /* вывеска и имя в пропуске */
  --fs-auth: 28px;   /* заголовок экрана входа */
}

@media (min-width: 900px) {
  :root {
    --fs-micro: 14px;
    --fs-cap: 15px;
    --fs-sm: 16px;
    --fs-base: 17px;
    --fs-md: 18px;
    --fs-lg: 19px;
    --fs-title: 26px;
    --fs-hero: 28px;
  }
}

@media (min-width: 1200px) {
  :root {
    --fs-micro: 14px;
    --fs-cap: 15px;
    --fs-sm: 16px;
    --fs-base: 17px;
    --fs-md: 18px;
    --fs-lg: 19px;
    --fs-title: 28px;
    --fs-hero: 28px;
  }
}

/* Сайдбары симуляции шкале не подчиняются: ширина у них фиксированная
   (260/280px), лишнего места на широком экране не появляется, а на телефоне
   они вообще не рендерятся — SimView там показывает #compact-info. Поэтому
   внутри них шкала остаётся на прежних размерах. */
#sidebar,
#sidebar-right {
  --fs-micro: 11px;
  --fs-cap: 12px;
  --fs-sm: 13px;
  --fs-base: 14px;
  --fs-md: 15px;
  --fs-lg: 16px;
}

body {
  background: #1a1a2e;
  color: #eee;
  font-family: 'dos', monospace;
  line-height: 1.5;
}

button,
input,
select,
textarea {
  font: inherit;
}

#app {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* View page: full-screen layout, no scroll */
#app.view-layout {
  height: 100vh;
  height: 100dvh;
  flex-direction: row;
  overflow: hidden;
}

#app.view-layout #sidebar,
#app.view-layout #sidebar-right {
  overflow-y: auto;
}

#app.view-layout #main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

#app.view-layout #canvas-container {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.center-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(16px, 3.5vw, 32px) clamp(12px, 3.5vw, 28px);
  padding-bottom: calc(clamp(16px, 3.5vw, 32px) + env(safe-area-inset-bottom));
  min-height: 100vh;
  min-height: 100dvh;
}

.center-page h2 {
  width: 100%;
  max-width: 500px;
}

.shifts-page,
.welcome-page,
.profile-page {
  max-width: 900px;
}

#sidebar {
  width: 260px;
  background: #16213e;
  padding: 12px;
  overflow-y: auto;
  border-right: 1px solid #0f3460;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#sidebar-right {
  width: 280px;
  background: #16213e;
  padding: 12px;
  overflow-y: auto;
  border-left: 1px solid #0f3460;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#sidebar h2,
#sidebar-right h2 {
  font-size: var(--fs-lg);
  color: #888;
  text-transform: uppercase;
  letter-spacing: 1px;
}

#main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

#canvas-container {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#canvas-container canvas {
  display: block;
}

#canvas-container {
  position: relative;
}

.sprites-loader {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1a1a2e;
  color: #888;
  font-size: var(--fs-base);
  z-index: 10;
}

#controls {
  background: #16213e;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  border-top: 1px solid #0f3460;
}

/* Compact layout — mobile / narrow */
@media (max-width: 900px), (pointer: coarse) and (max-width: 1100px) {
  #app.view-layout {
    flex-direction: column;
  }

  #app.view-layout #main {
    flex: none;
    width: 100%;
  }

  #app.view-layout #canvas-container {
    height: auto;
    min-height: 0;
  }
}

#compact-info {
  background: #16213e;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-bottom: 1px solid #0f3460;
}

.ci-player {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-lg);
}

.ci-role {
  background: #e94560;
  color: #fff;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: var(--fs-cap);
  text-transform: uppercase;
  font-weight: 600;
}

.ci-role[data-role="receiving"] {
  background: #0f3460;
}

.ci-name {
  font-weight: 600;
  color: #fff;
}

.ci-balance {
  color: #e94560;
  font-weight: 700;
  margin-left: auto;
}

.ci-cargo,
.ci-order {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  font-size: var(--fs-sm);
  line-height: 1.5;
  align-items: center;
}

.ci-item {
  background: #0f3460;
  padding: 2px 6px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 2px;
}

.ci-label {
  color: #555;
  margin-right: 4px;
}

.ci-order-label {
  color: #555;
  margin-right: 4px;
}

.ci-oc {
  color: #888;
  font-size: var(--fs-sm);
  line-height: 1.5;
}

#play-btn {
  background: #e94560;
  border: none;
  color: #fff;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

#play-btn svg {
  display: block;
}

#seek {
  flex: 1;
  height: 4px;
  appearance: none;
  -webkit-appearance: none;
  background: #0f3460;
  border-radius: 2px;
  cursor: pointer;
}

#seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  background: #e94560;
  border-radius: 50%;
  cursor: pointer;
}

#speed {
  color: #888;
  font-size: var(--fs-base);
  cursor: pointer;
}

#frame-info {
  color: #888;
  font-size: var(--fs-base);
  min-width: 120px;
  text-align: right;
}

/* Player cards */
.player-card {
  display: flex;
  gap: 8px;
  background: #1a1a2e;
  border-radius: 6px;
  padding: 6px 8px;
  border: 1px solid #0f3460;
}

/* Обводка карточки по месту в топе заработка (в тон доминантному цвету короны) */
.player-card.is-gold   { border-color: var(--crown-gold);   box-shadow: 0 0 0 1px var(--crown-gold); }
.player-card.is-silver { border-color: var(--crown-silver); box-shadow: 0 0 0 1px var(--crown-silver); }
.player-card.is-bronze { border-color: var(--crown-bronze); box-shadow: 0 0 0 1px var(--crown-bronze); }

.player-card-sprite {
  width: 48px;
  height: 48px;
  border-radius: 4px;
  flex-shrink: 0;
  image-rendering: pixelated;
  background-color: transparent;
  background-size: cover;
  background-position: center;
}

.player-card-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--fs-sm);
  line-height: 1.5;
  min-width: 0;
}

.pc-row1 {
  font-size: var(--fs-base);
}

.pc-role-rcv {
  color: #e94560;
}

.pc-role-shp {
  color: #0af;
}

.pc-row2 {
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: #aaa;
  display: flex;
  align-items: center;
  gap: 3px;
  flex-wrap: wrap;
  min-height: 24px;
}

.pc-row3 {
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: #0f0;
}

.pc-order-num {
  color: #888;
  margin-right: 2px;
}

.pc-empty {
  color: #555;
}

/* Order cards */
.order-stats {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.order-stat {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-base);
}

.stat-bar {
  flex: 1;
  height: 6px;
  background: #0f3460;
  border-radius: 3px;
  overflow: hidden;
}

.stat-fill {
  height: 100%;
  background: #e94560;
  border-radius: 3px;
  transition: width 0.2s;
}

.order-list-header {
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: #555;
  margin-top: 8px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.order-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.order-card {
  background: #1a1a2e;
  border-radius: 6px;
  padding: 6px 8px;
  border: 1px solid #0f3460;
}

.order-card-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-base);
  margin-bottom: 4px;
}

.order-num {
  color: #888;
}

.order-type {
  color: #e94560;
}

.player-dot-sm {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.order-player-name {
  color: #eee;
  font-size: var(--fs-sm);
  line-height: 1.5;
}

.order-card-items {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.order-item {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: #aaa;
}

.order-item img {
  image-rendering: pixelated;
  height: 24px;
}

/* Auth pages */
.auth-page {
  flex-grow: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 16px 0;
}

.auth-stack {
  margin: auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  width: 100%;
}

.auth-logo {
  display: block;
  width: min(78vw, 480px);
  height: auto;
  max-height: clamp(84px, 22vh, 266px);
  max-height: clamp(84px, 22svh, 266px);
  object-fit: contain;
}

.auth-floor {
  display: block;
  width: min(94vw, 1100px);
  height: auto;
  max-height: clamp(72px, 24vh, 320px);
  max-height: clamp(72px, 24svh, 320px);
  object-fit: contain;
  object-position: bottom center;
  margin-top: 24px;
  user-select: none;
  pointer-events: none;
}

@media (max-height: 700px) {
  .auth-page {
    padding-top: 16px;
  }

  .auth-stack {
    gap: 14px;
  }

  .auth-logo {
    max-height: clamp(72px, 17vh, 140px);
    max-height: clamp(72px, 17svh, 140px);
  }

  .auth-floor {
    max-height: clamp(60px, 16vh, 130px);
    max-height: clamp(60px, 16svh, 130px);
    margin-top: 14px;
  }
}

.auth-content {
  background: #16213e;
  border: 1px solid #0f3460;
  border-radius: 12px;
  padding: 40px;
  min-width: 320px;
  max-width: 400px;
  margin: auto;
}

.auth-content h2 {
  text-align: center;
  margin-bottom: 28px;
  font-size: var(--fs-auth);
  color: #e94560;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.auth-stack .auth-content h2 {
  margin-bottom: 22px;
  font-size: var(--fs-lg);
  color: var(--g-dim);
  letter-spacing: 3px;
}

.form-error {
  color: #e94560;
  font-size: var(--fs-sm);
  line-height: 1.5;
  margin-bottom: 12px;
  min-height: 18px;
}

.form-success {
  color: #0f0;
  font-size: var(--fs-sm);
  line-height: 1.5;
  margin-bottom: 12px;
  min-height: 18px;
}

.auth-input {
  width: 100%;
  padding: 12px 14px;
  margin-bottom: 10px;
  background: #1a1a2e;
  border: 1px solid #0f3460;
  border-radius: 8px;
  color: #eee;
  font-size: var(--fs-lg);
  outline: none;
}

.auth-input:focus {
  border-color: #e94560;
}

.auth-input::placeholder {
  color: #555;
}

.name-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.name-input-wrap .auth-input {
  padding-right: 44px;
  margin-bottom: 10px;
}

.name-gen-btn {
  position: absolute;
  right: 8px;
  width: 30px;
  height: 30px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.welcome-page {
  align-items: stretch;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  gap: 0;
}

/* Главная: пропуск и кнопки слева, лидерборд справа.
   До 900px — одна колонка, порядок как в разметке. */
.welcome-layout {
  display: grid;
  gap: 0;
}

.welcome-main,
.welcome-aside {
  min-width: 0;
}

@media (min-width: 900px) {
  .welcome-page {
    max-width: 940px;
  }

  .welcome-layout {
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 28px;
    align-items: start;
  }

  .welcome-aside {
    position: sticky;
    top: clamp(16px, 3.5vw, 32px);
  }

  /* Заголовок секции выравнивается с верхом пропуска */
  .welcome-aside .sect-label {
    margin-top: 0;
  }
}

@media (min-width: 1200px) {
  .welcome-page {
    max-width: 1080px;
  }

  .welcome-layout {
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: 36px;
  }
}

.welcome-btn {
  padding: 14px 28px;
  border-radius: 8px;
  font-size: var(--fs-lg);
  cursor: pointer;
  border: none;
  letter-spacing: 1px;
}

.welcome-btn.primary {
  background: #e94560;
  color: #fff;
}

.welcome-btn.secondary {
  background: #16213e;
  color: #eee;
  border: 1px solid #0f3460;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

/* Кнопки тянутся по ширине карточки; длинная подпись переносит ряд в колонку */
.auth-content .btn-row .welcome-btn {
  flex: 1 1 auto;
}

.welcome-btn:hover {
  opacity: 0.9;
}

/* Profile page */
.profile-page {
  align-items: stretch;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  padding-bottom: 0;
}

/* Широкий экран: форма и предпросмотр рядом */
@media (min-width: 900px) {
  .profile-page {
    max-width: 940px;
  }
}

/* Shifts page */
.shifts-page {
  width: 100%;
}

/* Подписи статов в карточках заказов (сайдбар симуляции) */
.stat-label {
  width: 42px;
  font-size: var(--fs-md);
  line-height: 1.5;
  color: #eee;
  text-transform: uppercase;
  text-align: center;
}

.loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1a1a2e;
  font-size: var(--fs-lg);
  color: #e94560;
}

.name-input-wrap {
  margin-bottom: 8px;
}

.name-input-wrap .auth-input {
  margin-bottom: 0;
}

.wand-icon {
  height: 25px;
  width: 25px;
  image-rendering: pixelated;
}

/* ─────────────────────────────────────────────────────────────
   Игровой интерфейс: пропуск, очки, характеристики
   ───────────────────────────────────────────────────────────── */
.scr-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--fs-cap);
  letter-spacing: 2px;
  color: var(--g-dim);
  margin-bottom: 16px;
}

.scr-top b {
  font-size: var(--fs-hero);
  color: var(--g-accent);
  font-weight: 400;
  letter-spacing: 3px;
}

.scr-top-dim {
  color: var(--g-dim);
}

.g-help {
  border: 1px solid var(--g-line);
  border-radius: 5px;
  padding: 4px 10px;
  background: transparent;
  color: var(--g-dim);
  font-size: var(--fs-cap);
  cursor: pointer;
}

.g-help:hover {
  border-color: var(--g-accent);
  color: var(--g-accent);
}

.scr-help {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

@media (max-width: 420px) {
  .scr-help {
    gap: 5px;
  }

  .scr-help .g-help {
    padding: 4px 7px;
  }
}

/* Пропуск сотрудника */
.badge-card {
  background: var(--g-panel);
  border: 1px solid var(--g-line);
  border-radius: 10px;
  padding: 14px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: center;
  position: relative;
}

.badge-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  background: var(--g-accent);
  border-radius: 0 3px 3px 0;
}

.badge-sprite {
  width: 64px;
  height: 64px;
  image-rendering: pixelated;
  border-radius: 6px;
  background: #0f1428;
  border: 1px solid var(--g-line);
  object-fit: contain;
}

.badge-name {
  font-size: var(--fs-hero);
  line-height: 1.25;
}

.badge-meta {
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--g-dim);
  margin-top: 4px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.badge-arch {
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--g-blue);
  margin-top: 6px;
  letter-spacing: 1px;
}

.role-pill {
  border: 1px solid var(--g-line);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: var(--fs-micro);
  line-height: 1.5;
  letter-spacing: 1px;
}

.role-rcv {
  color: var(--g-accent);
  border-color: #4a1c2c;
}

.role-shp {
  color: var(--g-blue);
  border-color: #17395a;
}

.role-perk {
  color: var(--g-ok);
  border-color: #1d4636;
}

/* Сегментный бар очков */
.pts {
  margin-top: 18px;
}

.pts-head {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-cap);
  color: var(--g-dim);
  letter-spacing: 1px;
  margin-bottom: 7px;
}

.pts-head b {
  color: var(--g-text);
  font-weight: 400;
}

.seg {
  display: flex;
  gap: 2px;
}

.seg i {
  flex: 1;
  height: 12px;
  background: #101a33;
  border: 1px solid var(--g-line);
  border-radius: 2px;
  display: block;
  transition: background 0.12s;
}

.seg i.on {
  background: var(--g-accent);
  border-color: var(--g-accent);
}

.seg i.on.done {
  background: var(--g-ok);
  border-color: var(--g-ok);
}

.notice {
  margin-top: 14px;
  border: 1px solid var(--g-warn);
  border-left-width: 3px;
  border-radius: 6px;
  background: rgba(232, 177, 60, 0.09);
  padding: 9px 12px;
  font-size: var(--fs-sm);
  color: var(--g-warn);
  line-height: 1.45;
}

.notice.good {
  border-color: var(--g-ok);
  background: rgba(58, 208, 122, 0.08);
  color: var(--g-ok);
}

/* Кнопки игрового экрана */
.g-btns {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 18px;
}

/* iOS: гасим double-tap-to-zoom на всех кнопках (в т.ч. disabled — тач с них
   «проваливается» на родителя, поэтому правило глобальное). Пинч-зум остаётся. */
button {
  touch-action: manipulation;
}

.g-btn {
  font-size: var(--fs-base);
  padding: 13px 16px;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  letter-spacing: 1px;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.g-btn.primary {
  background: var(--g-accent);
  color: #fff;
}

.g-btn.secondary {
  background: var(--g-panel);
  color: var(--g-text);
  border-color: var(--g-line);
}

/* Тихое действие — служебным шрифтом, вне сетки вывески */
.g-btn.ghost {
  background: transparent;
  color: var(--g-dim);
  border-color: transparent;
  font-size: var(--fs-sm);
  line-height: 1.5;
  padding: 8px 16px;
  justify-content: center;
}

.g-btn .cnt {
  margin-left: auto;
  background: rgba(0, 0, 0, 0.28);
  border-radius: 20px;
  padding: 1px 9px;
  font-size: var(--fs-sm);
  line-height: 1.5;
}

.g-btn.secondary .cnt {
  background: transparent;
  color: var(--g-dim);
}

.g-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.g-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* На тач-устройствах кнопки не мельче 44px */
@media (pointer: coarse) {
  .g-btn {
    min-height: 48px;
  }

  .g-btn.ghost {
    min-height: 44px;
  }
}

.sect-label {
  font-size: var(--fs-cap);
  letter-spacing: 2px;
  color: var(--g-dim);
  margin: 20px 0 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sect-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--g-line);
}

/* Строка характеристики */
.srow {
  background: var(--g-panel);
  border: 1px solid var(--g-line);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
}

.srow-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.srow-name {
  font-size: var(--fs-lg);
  letter-spacing: 1px;
}

.srow-abbr {
  font-size: var(--fs-micro);
  line-height: 1.5;
  color: var(--g-dim);
  border: 1px solid var(--g-line);
  border-radius: 3px;
  padding: 0 5px;
}

.srow-q {
  margin-left: auto;
  width: 22px;
  height: 22px;
  border: 1px solid var(--g-line);
  border-radius: 4px;
  background: transparent;
  color: var(--g-dim);
  cursor: pointer;
  font-size: var(--fs-cap);
  line-height: 1;
}

.srow-q:hover,
.srow-q[aria-expanded="true"] {
  border-color: var(--g-accent);
  color: var(--g-accent);
}

.srow-ctl {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 9px;
  touch-action: manipulation;
}

.mini-seg {
  display: flex;
  gap: 2px;
  flex: 1;
}

.mini-seg i {
  flex: 1;
  height: 9px;
  background: #101a33;
  border: 1px solid var(--g-line);
  border-radius: 2px;
}

.mini-seg i.on {
  background: var(--g-accent);
  border-color: var(--g-accent);
}

.mini-seg i.lock {
  background: #20283f;
  border-color: #20283f;
}

.sbtn {
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 5px;
  border: 1px solid var(--g-line);
  background: var(--g-bg);
  color: var(--g-text);
  font-size: var(--fs-lg);
  cursor: pointer;
  line-height: 1;
  touch-action: manipulation;
}

.sbtn:hover:not(:disabled) {
  border-color: var(--g-accent);
  color: var(--g-accent);
}

.sbtn:disabled {
  opacity: 0.28;
  cursor: not-allowed;
}

.sval {
  width: 26px;
  text-align: center;
  font-size: var(--fs-lg);
  font-variant-numeric: tabular-nums;
}

.effect {
  font-size: var(--fs-sm);
  color: var(--g-ok);
  margin-top: 8px;
  line-height: 1.4;
}

.effect::before {
  content: "→ ";
  color: var(--g-dim);
}

/* Готовые сборки */
.presets {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 7px;
}

.preset {
  background: var(--g-panel);
  border: 1px solid var(--g-line);
  border-radius: 8px;
  padding: 9px 10px;
  cursor: pointer;
  text-align: left;
  color: var(--g-text);
}

.preset:hover {
  border-color: var(--g-accent);
}

.preset[aria-pressed="true"] {
  border-color: var(--g-accent);
  background: #221a30;
}

.preset b {
  display: block;
  font-size: var(--fs-base);
  font-weight: 400;
  letter-spacing: 1px;
}

.preset span {
  display: block;
  font-size: var(--fs-cap);
  color: var(--g-dim);
  margin-top: 3px;
  line-height: 1.35;
}

.presets-note {
  font-size: var(--fs-cap);
  color: var(--g-dim);
  line-height: 1.4;
  margin-top: 8px;
}

/* Тумблер перка */
.toggle-row {
  background: var(--g-panel);
  border: 1px solid var(--g-line);
  border-radius: 8px;
  padding: 11px 12px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 11px;
  align-items: center;
  cursor: pointer;
  width: 100%;
  margin-bottom: 8px;
  text-align: left;
  color: var(--g-text);
}

.toggle-row[aria-pressed="true"] {
  border-color: var(--g-ok);
}

.toggle-ico {
  width: 30px;
  height: 30px;
  image-rendering: pixelated;
  opacity: 0.45;
  object-fit: contain;
}

.toggle-row[aria-pressed="true"] .toggle-ico {
  opacity: 1;
}

.toggle-txt b {
  display: block;
  font-size: var(--fs-base);
  font-weight: 400;
  letter-spacing: 1px;
  color: var(--g-text);
}

.toggle-txt span {
  font-size: var(--fs-cap);
  color: var(--g-dim);
  line-height: 1.35;
  display: block;
  margin-top: 2px;
}

.switch {
  width: 38px;
  height: 20px;
  border-radius: 20px;
  background: #101a33;
  border: 1px solid var(--g-line);
  position: relative;
  flex: none;
}

.switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--g-dim);
  transition: 0.15s;
}

.toggle-row[aria-pressed="true"] .switch {
  background: #12301f;
  border-color: var(--g-ok);
}

.toggle-row[aria-pressed="true"] .switch::after {
  left: 20px;
  background: var(--g-ok);
}

/* Таблица оплаты */
.pay {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 10px;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--g-dim);
  background: var(--g-panel);
  border: 1px solid var(--g-line);
  border-radius: 8px;
  padding: 11px 12px;
}

.pay b {
  color: var(--g-text);
  font-weight: 400;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.pay .hi {
  color: var(--g-ok);
}

/* Липкий футер бюджета */
.sticky-foot {
  position: sticky;
  bottom: 0;
  padding: 16px 0;
  background: linear-gradient(to top, var(--g-bg) 72%, rgba(26, 26, 46, 0));
}

.sticky-foot .pts {
  margin-top: 4px;
}

.sticky-foot .form-error,
.sticky-foot .form-success {
  margin-bottom: 0;
  min-height: 0;
}

.foot-row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.foot-row .g-btn.primary {
  flex: 1;
  justify-content: center;
}

.foot-row .g-btn.secondary {
  width: auto;
  padding: 13px 14px;
}

/* Предпросмотр билда */
.profile-layout {
  display: grid;
  gap: 4px;
}

.profile-main {
  min-width: 0;
}

@media (min-width: 900px) {
  .profile-layout {
    grid-template-columns: 1fr 320px;
    gap: 28px;
    align-items: start;
  }

  .profile-aside {
    position: sticky;
    top: 24px;
  }
}

.preview {
  background: var(--g-panel);
  border: 1px solid var(--g-line);
  border-radius: 10px;
  padding: 16px;
  margin-top: 20px;
}

.preview-head {
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--g-line);
  padding-bottom: 12px;
  width: 100%;
  background: transparent;
  border-left: none;
  border-right: none;
  border-top: none;
  cursor: pointer;
  text-align: left;
  color: var(--g-text);
}

.preview-head img {
  width: 52px;
  height: 52px;
  image-rendering: pixelated;
  object-fit: contain;
}

.preview-arch {
  font-size: var(--fs-lg);
  color: var(--g-text);
  line-height: 1.15;
  display: block;
}

.preview-sub {
  font-size: var(--fs-cap);
  color: var(--g-dim);
  margin-top: 3px;
  display: block;
}

.preview-caret {
  margin-left: auto;
  color: var(--g-dim);
}

.preview ul {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  gap: 7px;
}

.preview ul.collapsed {
  display: none;
}

.preview li {
  font-size: var(--fs-base);
  color: #c5cde0;
  line-height: 1.45;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
}

.preview li::before {
  content: "▪";
  color: var(--g-accent);
}

.preview li.off {
  color: #5a6480;
}

.preview li.off::before {
  color: #3a4260;
}

/* Значение эффекта: в прозе строки оно и есть то, за чем сюда смотрят.
   Разметку акцентов задаёт stats.js — см. splitMarks. */
.preview .num {
  color: var(--g-warn);
}

/* На нуле подсвечивать нечего — строка гаснет целиком. */
.preview li.off .num {
  color: inherit;
}

/* Перк вынесен из списка: описание длиной в абзац рядом с однострочными
   статами читалось как стена текста в конце карточки. */
.preview-perk {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--g-line);
}

.preview-perk.collapsed {
  display: none;
}

.preview-perk-label {
  font-size: var(--fs-micro);
  letter-spacing: 0.5px;
  color: var(--g-accent);
  margin-bottom: 5px;
}

.preview-perk p {
  font-size: var(--fs-base);
  color: #c5cde0;
  line-height: 1.45;
}

/* История смен по билдам */
.shift-groups {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sg-empty {
  font-size: var(--fs-sm);
  color: var(--g-dim);
  line-height: 1.45;
}

.sg-group {
  background: var(--g-panel);
  border: 1px solid var(--g-line);
  border-radius: 8px;
  padding: 10px 12px;
}

.sg-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--g-text);
  text-align: left;
}

.sg-head-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.sg-arch {
  font-size: var(--fs-lg);
  color: var(--g-blue);
}

.sg-range {
  font-size: var(--fs-cap);
  color: var(--g-dim);
  letter-spacing: 1px;
}

.sg-head-sum {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex: none;
}

.sg-count {
  font-size: var(--fs-cap);
  color: var(--g-dim);
}

.sg-avg {
  font-size: var(--fs-cap);
  color: var(--g-dim);
  font-variant-numeric: tabular-nums;
}

.sg-money {
  font-size: var(--fs-md);
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

.sg-money.positive {
  color: var(--g-ok);
}

.sg-money.negative {
  color: var(--g-accent);
}

.sg-caret {
  color: var(--g-dim);
  font-size: var(--fs-cap);
}

.sg-build {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 9px;
}

.sg-stat {
  font-size: var(--fs-micro);
  line-height: 1.5;
  color: var(--g-text);
  background: #101a33;
  border: 1px solid var(--g-line);
  border-radius: 3px;
  padding: 1px 5px;
  letter-spacing: 0;
}

.sg-stat.zero {
  color: #4d566e;
}

.sg-perk {
  font-size: var(--fs-micro);
  line-height: 1.5;
  color: var(--g-ok);
  border: 1px solid #1d4636;
  border-radius: 3px;
  padding: 1px 5px;
}

.sg-shifts {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 10px;
}

.sg-shift {
  display: flex;
  align-items: baseline;
  gap: 8px;
  background: var(--g-bg);
  border: 1px solid var(--g-line);
  border-radius: 6px;
  padding: 7px 9px;
  cursor: pointer;
  color: var(--g-text);
  text-align: left;
  width: 100%;
}

/* Только мышь: на тач-устройствах :hover залипает под точкой касания
   и подсвечивает смену, оказавшуюся там после перехода на экран. */
@media (hover: hover) {
  .sg-shift:hover {
    border-color: var(--g-accent);
  }
}

.sg-shift-time {
  font-size: var(--fs-cap);
  color: var(--g-dim);
}

.sg-shift-role {
  font-size: var(--fs-micro);
  line-height: 1.5;
  color: var(--g-blue);
  letter-spacing: 1px;
}

.sg-shift-pos {
  font-size: var(--fs-cap);
  color: var(--g-dim);
}

.sg-shift-money {
  margin-left: auto;
  font-size: var(--fs-base);
  font-variant-numeric: tabular-nums;
}

.sg-shift-money.positive {
  color: var(--g-ok);
}

.sg-shift-money.negative {
  color: var(--g-accent);
}

/* Лидерборд */
.lb {
  background: var(--g-panel);
  border: 1px solid var(--g-line);
  border-radius: 8px;
  overflow: hidden;
}

.lb-row {
  display: grid;
  grid-template-columns: 26px 30px 1fr auto;
  align-items: center;
  gap: 9px;
  padding: 8px 11px;
  border-bottom: 1px solid var(--g-line);
  position: relative;
}

.lb-row:last-child {
  border-bottom: none;
}

.lb-place {
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--g-dim);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.lb-row.top1 .lb-place {
  color: var(--g-warn);
}

.lb-av {
  width: 30px;
  height: 30px;
  image-rendering: pixelated;
  border-radius: 4px;
  background: #0f1428;
  border: 1px solid var(--g-line);
  object-fit: contain;
}

.lb-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.lb-name {
  font-size: var(--fs-base);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lb-sub {
  font-size: var(--fs-micro);
  line-height: 1.5;
  color: var(--g-dim);
  letter-spacing: 0;
}

.lb-rank {
  font-size: var(--fs-lg);
  font-variant-numeric: tabular-nums;
}

.lb-row.me {
  background: rgba(233, 69, 96, 0.09);
}

.lb-row.me::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--g-accent);
}

.lb-row.me .lb-name,
.lb-row.me .lb-rank {
  color: var(--g-accent);
}

.lb-you {
  font-size: var(--fs-micro);
  letter-spacing: 1px;
  color: var(--g-accent);
  border: 1px solid #4a1c2c;
  border-radius: 3px;
  padding: 0 4px;
  margin-left: 6px;
  vertical-align: 1px;
}

.lb-gap {
  text-align: center;
  color: var(--g-dim);
  font-size: var(--fs-cap);
  padding: 4px 0;
  border-bottom: 1px solid var(--g-line);
  letter-spacing: 4px;
}

.lb-foot {
  font-size: var(--fs-cap);
  color: var(--g-dim);
  letter-spacing: 1px;
  text-align: center;
  margin-top: 9px;
}

.lb-foot b {
  color: var(--g-text);
  font-weight: 400;
}

.sg-more {
  font-size: var(--fs-cap);
  color: var(--g-dim);
  text-align: center;
  padding: 4px 0;
}

.sg-more-btn {
  width: 100%;
  margin-top: 8px;
  padding: 8px;
  background: transparent;
  border: 1px dashed var(--g-line);
  border-radius: 6px;
  color: var(--g-dim);
  font-size: var(--fs-cap);
  cursor: pointer;
}

.sg-more-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

/* ─────────────────────────────────────────────────────────────
   Онбординг — модалка первого входа

   Тиры те же, что у всего экрана: база — 900 — 1200. Но здесь на каждой
   ступени меняется не только шрифт, а и раскладка (лист → карточка,
   колонка футера → строка), поэтому медиазапросы живут рядом с блоком,
   а не в общей шкале в конце файла.
   ───────────────────────────────────────────────────────────── */
/* Кнопка входа, пока онбординг не читали: точка вместо автопоказа. */
.g-help.unseen {
  border-color: var(--g-accent);
  color: var(--g-text);
}

.g-help.unseen::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--g-accent);
  box-shadow: 0 0 0 3px rgba(233, 69, 96, 0.18);
  vertical-align: 1px;
}

.onb-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(7, 10, 20, 0.82);
  display: flex;
  align-items: stretch;
  justify-content: center;
}

/* База — лист во весь экран: на 360px рамка и радиус только съедают ширину. */
.onb-modal {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--g-bg);
  overflow: hidden;
}

.onb-modal:focus {
  outline: none;
}

.onb-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 0;
}

.onb-step {
  font-size: var(--fs-cap);
  letter-spacing: 2px;
  color: var(--g-dim);
}

.onb-skip {
  border: 1px solid var(--g-line);
  border-radius: 5px;
  padding: 4px 10px;
  background: transparent;
  color: var(--g-dim);
  font-size: var(--fs-cap);
  cursor: pointer;
}

.onb-skip:hover {
  border-color: var(--g-accent);
  color: var(--g-accent);
}

/* Скроллится только тело: счётчик шага и кнопка всегда на месте. */
.onb-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px 16px;
  /* Полоса убрана из потока: она нужна не на каждом слайде, и её ширина
     дёргала бы ширину текста при листании. Подсказку даёт затухание ниже. */
  scrollbar-width: none;
}

.onb-body::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* Сосед снизу — закреплённая строка значения или подвал с кнопками. Градиент
   висит над ним и гасит уходящий текст. На коротких слайдах он ложится на
   пустой фон того же цвета и не виден, поэтому включать его по условию не
   нужно. */
.onb-body + * {
  position: relative;
}

.onb-body + *::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 26px;
  background: linear-gradient(to top, var(--g-bg), transparent);
  pointer-events: none;
}

.onb-title {
  font-size: var(--fs-title);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 1px;
  margin-bottom: 10px;
}

.onb-text {
  font-size: var(--fs-base);
  color: #c5cde0;
  line-height: 1.55;
}

.onb-text b {
  color: var(--g-text);
  font-weight: 400;
}

.onb-text p + p {
  margin-top: 10px;
}

.onb-text .muted {
  color: var(--g-dim);
}

/* Иллюстрация шага: на телефоне борется с текстом за экран, дальше растёт. */
.onb-art {
  height: 96px;
  margin-bottom: 14px;
  border: 1px solid var(--g-line);
  border-radius: 8px;
  background: #12142a;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-around;
  /* нижний отступ — под полосу пола, чтобы ноды не наезжали на неё */
  padding: 0 12px 30px;
}

.onb-node {
  font-size: var(--fs-micro);
  color: var(--g-dim);
  text-align: center;
  letter-spacing: 1px;
  z-index: 1;
}

.onb-node i {
  display: block;
  width: 30px;
  height: 30px;
  margin: 0 auto 6px;
  border: 1px solid var(--g-line);
  border-radius: 4px;
  background: var(--g-bg);
  image-rendering: pixelated;
}

.onb-node.rcv i {
  border-color: var(--g-accent);
}

.onb-node.shp i {
  border-color: var(--g-blue);
}

/* Полоса пола внизу иллюстрации: спрайты персонажей почти чёрные и на тёмной
   панели пропадают, а на плитке склада читаются — как в самой симуляции. */
.onb-lane {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 30px;
  background: url('/assets/onboarding-lane-DU5vQ6s_.png') repeat-x;
  background-size: auto 30px;
  image-rendering: pixelated;
  border-top: 1px solid var(--g-line);
}

.onb-walker {
  position: absolute;
  bottom: 2px;
  width: 26px;
  height: 26px;
  image-rendering: pixelated;
  background: center / contain no-repeat;
  animation: onb-walk 6s linear infinite;
}

/* Входит из-за левого края и уходит за правый: проценты считаются от ширины
   иллюстрации, на 100% левый край фигуры равен правому краю панели. */
@keyframes onb-walk {
  0% {
    left: -12%;
  }
  45% {
    left: 45%;
  }
  55% {
    left: 45%;
  }
  100% {
    left: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .onb-walker {
    animation: none;
    left: 45%;
  }
}

/* Шаг 2 — роли */
.onb-roles {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.onb-role {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 11px;
  align-items: center;
  background: var(--g-panel);
  border: 1px solid var(--g-line);
  border-radius: 8px;
  padding: 10px 12px;
}

.onb-role img {
  width: 34px;
  height: 34px;
  image-rendering: pixelated;
  object-fit: contain;
}

.onb-role b {
  display: block;
  font-size: var(--fs-base);
  font-weight: 400;
  letter-spacing: 1px;
}

.onb-role.rcv b {
  color: var(--g-accent);
}

.onb-role.shp b {
  color: var(--g-blue);
}

.onb-role span span {
  display: block;
  font-size: var(--fs-cap);
  color: var(--g-dim);
  line-height: 1.4;
  margin-top: 2px;
}

/* Шаг 3 — тот же .pay, что на экране характеристик */
.onb-pay {
  margin-bottom: 14px;
}

/* Шаг 4 — два билда теми же мини-барами, что в характеристиках */
.onb-builds {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.onb-build {
  background: var(--g-panel);
  border: 1px solid var(--g-line);
  border-radius: 8px;
  padding: 10px 12px;
}

.onb-build b {
  display: block;
  font-size: var(--fs-base);
  font-weight: 400;
  letter-spacing: 1px;
  margin-bottom: 7px;
}

.onb-brow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 5px;
}

.onb-brow > span:first-child {
  font-size: var(--fs-micro);
  color: var(--g-dim);
  width: 30px;
}

.onb-bhint {
  font-size: var(--fs-cap);
  color: var(--g-dim);
  line-height: 1.4;
  margin-top: 8px;
}

/* Иллюстрация стата. Своя тёмная подложка идёт прямо в пикселях картинки,
   поэтому она лежит плашкой, а не сливается с телом модалки. */
.sart-img {
  display: block;
  width: 100%;
  height: auto;
  /* Место под картинку резервируется до её загрузки, иначе при открытии
     модалки заголовок с текстом подпрыгивают вниз. Пропорция файлов 688×384. */
  aspect-ratio: 688 / 384;
  border-radius: 8px;
  border: 1px solid var(--g-line);
  margin-bottom: 14px;
}

/* Итог под текущее значение: числа живут здесь, в тексте выше их нет.
   Стоит вне .onb-body, поэтому не уезжает вместе с прокруткой описания. */
.sart-now {
  flex: none;
  padding: 10px 16px;
  border-top: 1px solid var(--g-line);
  border-left: 3px solid var(--g-accent);
  background: var(--g-panel);
  font-size: var(--fs-sm);
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.sart-now-label {
  font-size: var(--fs-micro);
  letter-spacing: 2px;
  color: var(--g-dim);
}

.sart-now .off {
  color: var(--g-dim);
}

.onb-foot {
  padding: 12px 16px 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--g-line);
  background: var(--g-bg);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.onb-dots {
  display: flex;
  gap: 8px;
  justify-content: center;
}

/* Точка 7px, зона тапа 24×24 */
.onb-dot {
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.onb-dot i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2b3350;
  display: block;
  transition: background 0.15s;
}

.onb-dot.done i {
  background: #4a3050;
}

.onb-dot[aria-current="true"] i {
  background: var(--g-accent);
}

.onb-btns {
  display: flex;
  gap: 8px;
}

.onb-btns .g-btn {
  justify-content: center;
}

.onb-btns .g-btn.primary {
  flex: 1;
}

.onb-btns .g-btn.secondary {
  width: auto;
  flex: none;
  padding: 13px 18px;
}

/* ≥900 — лист собирается в карточку по центру, главная видна по краям */
@media (min-width: 900px) {
  .onb-modal {
    max-width: 560px;
    margin: auto;
    border: 1px solid var(--g-line);
    border-radius: 12px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
    /* Высота фиксированная, а не по контенту: иначе кнопка «Дальше» прыгает
       на каждом шаге. 580px — самый высокий шаг (четвёртый) плюс запас на
       перенос строк; на низком окне ужимаемся, тело уходит в скролл. */
    height: min(580px, calc(100% - 64px));
  }

  /* Статам нужно больше: иллюстрация 16:9 на всю ширину карточки — это уже
     под 290px, а под ней ещё описание и закреплённая строка значения. */
  .onb-modal.sart-modal {
    height: min(760px, calc(100% - 64px));
  }

  .sart-now {
    padding: 10px 22px;
  }

  .onb-head {
    padding: 18px 22px 0;
  }

  .onb-body {
    padding: 14px 22px 18px;
  }

  .onb-foot {
    padding: 14px 22px 18px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .onb-btns {
    flex: none;
  }

  .onb-btns .g-btn {
    width: auto;
    min-width: 132px;
  }

  .onb-art {
    height: 132px;
    padding-bottom: 38px;
  }

  .onb-lane {
    height: 38px;
    background-size: 38px 38px;
  }

  .onb-walker {
    width: 32px;
    height: 32px;
  }

  .onb-node i {
    width: 38px;
    height: 38px;
  }

  .onb-role img {
    width: 40px;
    height: 40px;
  }
}

/* ≥1200 — ширина не растёт: 640px это ≈66 знаков в строке */
@media (min-width: 1200px) {
  .onb-modal {
    max-width: 640px;
    height: min(600px, calc(100% - 80px));
  }

  .onb-art {
    height: 160px;
    padding-bottom: 44px;
  }

  .onb-lane {
    height: 44px;
    background-size: auto 44px;
  }

  .onb-walker {
    width: 38px;
    height: 38px;
  }

  .onb-node i {
    width: 44px;
    height: 44px;
  }
}

.rank-modal .onb-head {
  padding-bottom: 0;
}

.rank-flow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 16px;
  padding: 14px;
  border: 1px solid var(--g-line);
  border-radius: 8px;
  background: #12142a;
}

.rank-node {
  flex: 0 0 auto;
  width: 96px;
  text-align: center;
  font-size: var(--fs-micro);
  letter-spacing: 1px;
  color: var(--g-dim);
}

.rank-node i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin: 0 auto 6px;
  border: 1px solid var(--g-line);
  border-radius: 4px;
  background: var(--g-bg);
  font-style: normal;
}

.rank-node.hi {
  color: var(--g-text);
}

.rank-node.hi i {
  border-color: var(--g-accent);
  color: var(--g-accent);
}

.rank-arrow {
  flex: 1;
  display: flex;
  align-items: center;
  margin-bottom: 22px;
}

.rank-arrow::before {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--g-line);
}

.rank-arrow::after {
  content: "";
  border-left: 6px solid var(--g-line);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}

.rank-ladder {
  margin: 12px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--g-line);
  border-radius: 8px;
  background: #12142a;
}

.rank-ladder-head {
  display: flex;
  justify-content: space-between;
  padding-bottom: 6px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--g-line);
  font-size: var(--fs-micro);
  letter-spacing: 2px;
  color: #6f7a92;
}

.rank-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  font-size: var(--fs-sm);
}

.rank-place {
  width: 52px;
  color: var(--g-dim);
  font-size: var(--fs-micro);
}

.rank-delta {
  width: 52px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.rank-delta.up {
  color: var(--g-ok);
}

.rank-delta.down {
  color: var(--g-accent);
}

.rank-bar {
  flex: 1;
  height: 8px;
  border-radius: 2px;
  background: var(--g-line);
}

.rank-rows .rank-row:nth-child(1) .rank-bar { background: #3ad07a; }
.rank-rows .rank-row:nth-child(2) .rank-bar { background: #2f9e5f; }
.rank-rows .rank-row:nth-child(3) .rank-bar { background: #26794b; }
.rank-rows .rank-row:nth-child(4) .rank-bar { background: #1d5c39; }
.rank-rows .rank-row:nth-child(5) .rank-bar { background: #6b2634; }
.rank-rows .rank-row:nth-child(6) .rank-bar { background: #8f3040; }
.rank-rows .rank-row:nth-child(7) .rank-bar { background: #c03b50; }
.rank-rows .rank-row:nth-child(8) .rank-bar { background: #e94560; }

.rank-note {
  margin-top: 8px;
  font-size: var(--fs-micro);
  line-height: 1.45;
  color: var(--g-dim);
}

.rank-sect {
  margin: 16px 0 8px;
}

.rank-mine {
  font-weight: 400;
}

.rank-mine.up {
  color: var(--g-ok);
}

.rank-mine.down {
  color: var(--g-accent);
}

.rank-modal .onb-btns {
  flex: 1;
}

.rank-modal .onb-btns .g-btn {
  flex: 1;
}

@media (min-width: 900px) {
  .rank-modal {
    height: min(780px, calc(100% - 64px));
  }

  .rank-modal .onb-foot {
    justify-content: flex-end;
  }

  .rank-modal .onb-btns {
    flex: none;
  }
}

@media (min-width: 1200px) {
  .rank-modal {
    height: min(860px, calc(100% - 80px));
  }

  .rank-node i {
    width: 40px;
    height: 40px;
  }
}

@media (max-width: 400px) {
  .rank-flow {
    gap: 4px;
    padding: 12px 8px;
  }

  .rank-node {
    width: 78px;
  }
}

/* ─────────────────────────────────────────────────────────────
   Что в шкале токенами не выражается

   Кегли уехали в --fs-*, но вместе с ними на широком экране росли разрядка
   вывески и воздух вокруг неё, а строка лидерборда расширяла колонки под
   выросшие цифры. Это не размеры шрифта, поэтому остаётся медиазапросами.
   ───────────────────────────────────────────────────────────── */
@media (min-width: 900px) {
  .scr-top {
    margin-bottom: 20px;
  }

  .scr-top b {
    letter-spacing: 4px;
  }
}

@media (min-width: 1200px) {
  .scr-top {
    margin-bottom: 24px;
  }

  .scr-top b {
    letter-spacing: 6px;
  }

  .lb-row {
    grid-template-columns: 32px 36px 1fr auto;
    padding: 10px 13px;
  }

  .lb-av {
    width: 36px;
    height: 36px;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   Мобильный адаптив просмотра смены — предложение

   Что чинится:
   • канвас больше не 350×600 «как получится», а ровно по контейнеру;
   • шапка — одна строка фиксированной высоты, груз и заказ ушли поверх поля;
   • контролы дотягивают до 44px и не выезжают за 360px;
   • ландшафт отдаёт полю почти всю высоту.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 900px), (pointer: coarse) and (max-width: 1100px) {
  #app.view-layout {
    flex-direction: column;
    /* низ уводим из-под жестовой полосы iOS */
    padding-bottom: env(safe-area-inset-bottom);
  }

  /* ── Шапка: ровно одна строка, высота не пляшет ── */
  #compact-info {
    flex: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    height: 48px;
    padding: 0 12px;
    padding-top: env(safe-area-inset-top);
    box-sizing: content-box;
  }

  .ci-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  .ci-balance {
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
  }

  /* ── Сцена: канвас забирает всё, что осталось ── */
  #stage {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    overflow: hidden;
  }

  #app.view-layout #stage #canvas-container {
    flex: 1;
    min-height: 0;
    align-items: stretch;
    justify-content: stretch;
  }

  #stage canvas {
    display: block;
    width: 100%;
    height: 100%;
  }

  /* ── HUD поверх поля вместо второй и третьей строки шапки ── */
  .ci-hud {
    position: absolute;
    left: 8px;
    right: 8px;
    top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    pointer-events: none;
  }

  .ci-chip {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(22, 33, 62, 0.82);
    border: 1px solid var(--g-line);
    backdrop-filter: blur(2px);
  }

  .ci-hud .ci-label {
    color: var(--g-dim);
    font-size: var(--fs-micro);
    margin-right: 2px;
  }

  .ci-hud .ci-item {
    background: none;
    padding: 0;
  }

  /* ── Контролы: пальцем, а не курсором ── */
  #controls {
    flex: none;
    gap: 10px;
    padding: 8px 12px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
  }

  #play-btn {
    width: 44px;
    height: 44px;
  }

  #play-btn svg {
    width: 18px;
    height: 18px;
  }

  #speed {
    flex-shrink: 0;
    min-width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid var(--g-line);
    border-radius: 8px;
    color: var(--g-dim);
  }

  /* Полоса перемотки: 4px нитку не поймать пальцем. Трек оставляем тонким,
     а зону нажатия растим до 44px за счёт высоты самого input. */
  #seek {
    height: 44px;
    flex: 1;
    min-width: 0;
    background: transparent;
    appearance: none;
    -webkit-appearance: none;
  }

  #seek::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 3px;
    background: var(--g-line);
  }

  #seek::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    margin-top: -8px;
    border-radius: 50%;
    background: var(--g-accent);
  }

  #seek::-moz-range-track {
    height: 6px;
    border-radius: 3px;
    background: var(--g-line);
  }

  #seek::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 50%;
    background: var(--g-accent);
  }

  /* min-width: 120px + gap 16 + padding 40 не помещались в 360px, и счётчик
     кадров обрезало. Тянемся по содержимому и не даём себя сжать. */
  #frame-info {
    min-width: 0;
    flex-shrink: 0;
    font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
}

/* ── Ландшафт телефона: высоты нет, шапку убираем поверх поля ── */
@media (orientation: landscape) and (max-height: 500px) {
  #app.view-layout #compact-info {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 5;
    height: 40px;
    border-bottom: none;
    background: linear-gradient(to bottom, rgba(22, 33, 62, 0.92), rgba(22, 33, 62, 0));
    pointer-events: none;
  }

  #app.view-layout #stage {
    flex: 1;
  }

  #app.view-layout #controls {
    padding-top: 4px;
    padding-bottom: calc(4px + env(safe-area-inset-bottom));
  }

  /* Шапка здесь всплывает поверх поля — плашки уводим ей под низ */
  .ci-hud {
    top: 44px;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   Шторка со списками игроков и заказов

   На телефоне оба сайдбара не рендерятся, и заменить их было нечем. Шторка
   живёт внутри #stage: перекрывает поле, но не строку контролов — перемотку
   видно и с открытым списком.
   ═══════════════════════════════════════════════════════════════════════════ */

.sheet-root {
  --sheet-grab-h: 46px;
}

.sheet-backdrop {
  position: absolute;
  inset: 0;
  z-index: 8;
  background: rgba(10, 14, 28, .55);
}

/* Свёрнутая шторка — только полоса хвата. Градиент прибит к полосе высотой с
   хват: сквозь него видно поле, а глухой панелью хват зря съедал бы полосу
   склада. */
.sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9;
  display: flex;
  flex-direction: column;
  max-height: 74%;
  background: linear-gradient(to bottom, rgba(22, 33, 62, 0), rgba(22, 33, 62, .88));
  background-repeat: no-repeat;
  background-position: top;
  background-size: 100% var(--sheet-grab-h);
  border-radius: 14px 14px 0 0;
}

/* Развёрнутая — глухая панель. */
.sheet.is-open {
  background: var(--g-panel);
  border-top: 1px solid var(--g-line);
  box-shadow: 0 -6px 20px rgba(0, 0, 0, .38);
}

/* ── Хват ── */
.sheet-grab {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 100%;
  height: var(--sheet-grab-h);
  padding: 9px 12px 10px;
  border: 0;
  border-radius: 14px 14px 0 0;
  background: none;
  color: var(--g-dim);
  cursor: pointer;
  touch-action: none;
}

.sheet-grab-bar {
  width: 38px;
  height: 4px;
  border-radius: 2px;
  /* --g-line на фоне --g-panel почти не читается — хват должен быть заметен */
  background: var(--g-dim);
  opacity: .55;
}

.sheet-grab-label {
  font-size: var(--fs-micro);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.sheet-grab:focus-visible {
  outline: 2px solid var(--g-accent);
  outline-offset: -2px;
}

/* ── Табы ── */
.sheet-tabs {
  flex: none;
  display: flex;
  gap: 8px;
  padding: 0 12px 10px;
}

.sheet-tab {
  flex: 1;
  min-height: 44px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--g-line);
  border-radius: 8px;
  background: none;
  color: var(--g-dim);
  font-size: var(--fs-base);
  cursor: pointer;
}

.sheet-tab.active {
  background: var(--g-line);
  color: #fff;
}

.sheet-tab:focus-visible {
  outline: 2px solid var(--g-accent);
  outline-offset: 2px;
}

.sheet-count {
  font-size: var(--fs-micro);
  font-variant-numeric: tabular-nums;
  color: var(--g-dim);
  background: var(--g-bg);
  border-radius: 999px;
  padding: 1px 7px;
}

.sheet-tab.active .sheet-count {
  color: #fff;
}

/* ── Содержимое ── */
.sheet-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 12px 12px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
}

/* В сайдбаре расстояние между карточками задавал сам сайдбар; здесь его нет. */
.sheet-body #players {
  display: flex;
  flex-direction: column;
  gap: 8px;
}