/* ============================================================
   CONTRACT web — дизайн-система, перенос канона игры (RoN-стиль)
   Источник истины: contract-core ContractUiPalette + CanonTheme/CanonDraw.
   Композиция канона: hairline + скобки-уголки + subtle-wash, НЕ заливки.
   Альфа-конвенция §1: 0x26 hover (~.15), 0x33 selected (~.20),
   0x20 полосатость строк (~.125), 0xD8 панель (~.85), 0xE0 кнопка (~.88).
   Новые hex запрещены — только токены ниже + rgba от них.
   ============================================================ */

@font-face {
  font-family: 'Bender';
  src: url('bender.ttf') format('truetype');
  font-weight: 400;
  font-display: block;
}

:root {
  /* ContractUiPalette 1:1 */
  --screen-top: #0A0A0C;
  --screen-bottom: #050506;
  --panel: rgba(18, 18, 20, 0.85);          /* PANEL 0xD8121214 */
  --panel-alt: rgba(28, 28, 32, 0.85);      /* PANEL_ALT 0xD81C1C20 */
  --panel-opaque: #121214;                  /* OVERLAY_SURFACE (модалки непрозрачны) */
  --panel-alt-opaque: #1C1C20;              /* OVERLAY_PANEL */
  --edge: #4A4A4C;                          /* PANEL_EDGE */
  --edge-soft: #1E1E20;                     /* PANEL_EDGE_SOFT */
  --gold: #B0894A;                          /* ACCENT_GOLD (только hover-подсветка) */
  --gold-hi: #D1A85E;                       /* ACCENT_GOLD_STRONG (главный акцент) */
  --red: #A33A32;                           /* ACCENT_RED */
  --green: #5C8F5A;                         /* ACCENT_GREEN */
  --blue: #4A6478;                          /* ACCENT_BLUE (семантика команды) */
  --text: #E6E4DE;                          /* TEXT_PRIMARY */
  --text-2: #A8A9A6;                        /* TEXT_SECONDARY */
  --muted: #83847F;                         /* TEXT_MUTED, осветлён с #6E6F6C: WCAG AA на панелях */
  --disabled: #4E4F4C;                      /* TEXT_DISABLED */

  /* Канонные wash-альфы */
  --wash-hover: rgba(176, 137, 74, 0.15);       /* ACCENT_GOLD 0x26 */
  --wash-selected: rgba(209, 168, 94, 0.20);    /* ACCENT_GOLD_STRONG 0x33 */
  --wash-selected-hi: rgba(209, 168, 94, 0.31); /* buttonSolid primary hover 0x50 */
  --row-odd: rgba(28, 28, 32, 0.125);           /* PANEL_ALT 0x20 */
  --button-fill: rgba(28, 28, 32, 0.88);        /* BUTTON_FILL 0xE0 */
  --grid-line: rgba(255, 255, 255, 0.031);      /* GRID_LINE 0x08FFFFFF, шаг 28px */
  --scroll-track: rgba(30, 30, 32, 0.5);        /* SCROLL_TRACK */

  --display: 'Bender', 'Arial Narrow', sans-serif;
  --body: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --w: 1140px;
  /* BRACKET_OUTER=6 / INNER=4 GUI-px ≈ 12/8 web-px */
  --brk-outer: 12px;
  --brk-inner: 8px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Канонный backdrop: градиент SCREEN_TOP→SCREEN_BOTTOM + сетка 28px.
   Рисуется fixed-псевдоэлементом, НЕ background-attachment: fixed на body —
   fixed-фон заставляет перерисовывать весь вьюпорт на каждом кадре скролла. */
body {
  margin: 0;
  min-height: 100vh;
  background: var(--screen-bottom);
  color: var(--text);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, var(--grid-line) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, var(--grid-line) 0 1px, transparent 1px 28px),
    linear-gradient(var(--screen-top), var(--screen-bottom));
}
::selection { background: var(--wash-selected); }
a { color: var(--gold-hi); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; }
img, canvas { max-width: 100%; display: block; }

/* Канонный скроллбар: трек тише полосатости, ползунок — приглушённый акцент */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--scroll-track); }
::-webkit-scrollbar-thumb { background: rgba(176, 137, 74, 0.55); min-height: 24px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold-hi); }

.wrap { max-width: var(--w); margin: 0 auto; padding: 0 24px; }

/* ---------- скобки-уголки (CanonDraw.bracketCorners) ----------
   8 фоновых градиентов = 4 угла × (горизонтальный + вертикальный штрих).
   Рамка на 4 стороны в каноне запрещена везде, кроме полей ввода. */
.brk, .zone, .sect {
  --brk-c: var(--gold-hi);
  --brk-s: var(--brk-outer);
  background-image:
    linear-gradient(var(--brk-c), var(--brk-c)), linear-gradient(var(--brk-c), var(--brk-c)),
    linear-gradient(var(--brk-c), var(--brk-c)), linear-gradient(var(--brk-c), var(--brk-c)),
    linear-gradient(var(--brk-c), var(--brk-c)), linear-gradient(var(--brk-c), var(--brk-c)),
    linear-gradient(var(--brk-c), var(--brk-c)), linear-gradient(var(--brk-c), var(--brk-c));
  background-repeat: no-repeat;
  background-size:
    var(--brk-s) 1px, 1px var(--brk-s),
    var(--brk-s) 1px, 1px var(--brk-s),
    var(--brk-s) 1px, 1px var(--brk-s),
    var(--brk-s) 1px, 1px var(--brk-s);
  background-position:
    left top, left top,
    right top, right top,
    left bottom, left bottom,
    right bottom, right bottom;
}

/* Крупная зона: заливка PANEL + золотые скобки (CanonDraw.zone) */
.zone { background-color: var(--panel); padding: 28px; }
/* Внутренняя секция: приглушённые скобки EDGE_SOFT, size INNER (CanonDraw.section) */
.sect { --brk-c: var(--edge); --brk-s: var(--brk-inner); background-color: var(--panel); padding: 20px; }

/* Полоса шапки/футера (CanonDraw.headerStrip): PANEL_ALT + нижняя hairline */
.strip { background: var(--panel-alt); border-bottom: 1px solid var(--edge-soft); }

/* ---------- кнопки ---------- */
/* buttonSolid (канон модалок — «обязана читаться без наведения»):
   primary = wash 0x33 + рамка ACCENT + текст ACCENT; hover 0x50 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--display); font-size: 16px; letter-spacing: 0.14em;
  text-transform: uppercase; cursor: pointer;
  padding: 13px 30px; min-height: 44px; text-decoration: none !important;
  border: 1px solid transparent;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.btn-primary { background: var(--wash-selected); border-color: var(--gold-hi); color: var(--gold-hi); }
.btn-primary:hover { background: var(--wash-selected-hi); }
.btn-secondary { background: var(--button-fill); border-color: var(--edge-soft); color: var(--text-2); }
.btn-secondary:hover { border-color: var(--edge); background: var(--wash-hover); color: var(--text); }
.btn-danger { background: var(--button-fill); border-color: var(--edge-soft); color: var(--red); }
.btn-danger:hover { border-color: var(--red); background: rgba(163, 58, 50, 0.15); }
/* «скоро» вместо кнопки скачивания: тот же вес, что у secondary, но это
   статус, а не действие — курсор обычный, точка пульсирует */
.btn-soon {
  background: var(--button-fill); border-color: var(--edge-soft); color: var(--text-2);
  cursor: default; gap: 10px;
}
.btn-soon .soon-dot {
  width: 7px; height: 7px; flex: 0 0 7px; background: var(--gold-hi);
  animation: soon-pulse 2.2s ease-in-out infinite;
}
@keyframes soon-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .btn-soon .soon-dot { animation: none; } }

.btn[disabled], .btn.disabled { color: var(--disabled); border-color: var(--edge-soft); background: var(--button-fill); pointer-events: none; }

/* Кнопка-строка (CanonDraw.button / CustomMenuButton):
   покой — только нижняя hairline; hover — wash + левая полоса 2px */
.btn-line {
  display: flex; align-items: center; width: 100%; text-align: left; box-sizing: border-box;
  background: none; border: 0; border-bottom: 1px solid var(--edge-soft);
  font-family: var(--display); font-size: 16px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-2); cursor: pointer;
  padding: 12px 14px; min-height: 44px; box-shadow: inset 0 0 0 0 transparent;
  transition: background 0.18s, color 0.18s, box-shadow 0.18s;
}
.btn-line:hover { background: var(--wash-hover); color: var(--text); box-shadow: inset 2px 0 0 0 var(--gold-hi); }
.btn-line.active { background: var(--wash-selected); color: var(--gold-hi); box-shadow: inset 3px 0 0 0 var(--gold-hi); }

/* Таб (CanonDraw.tab): активный = wash + подчёркивание 2px, не заливка на высоту */
.tab {
  display: inline-flex; align-items: center; box-sizing: border-box;
  background: none; border: 0; border-bottom: 2px solid transparent;
  font-family: var(--display); font-size: 15px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-2); cursor: pointer;
  padding: 10px 18px; min-height: 44px; transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.tab:hover { background: var(--wash-hover); color: var(--text); }
.tab.active { background: var(--wash-selected); color: var(--gold-hi); border-bottom-color: var(--gold-hi); }

/* ---------- поля ввода (CanonTextField) ----------
   Единственное место канона с замкнутой 1px-рамкой. Фокус = ACCENT. */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label {
  font-family: var(--display); font-size: 13px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--muted);
}
.field input {
  background: var(--button-fill); border: 1px solid var(--edge-soft);
  color: var(--text); font-family: var(--body); font-size: 16px;
  padding: 11px 14px; width: 100%; min-height: 44px;
}
.field input:hover { border-color: var(--edge); }
.field input:focus { border-color: var(--gold-hi); outline: none; }
.field input::placeholder { color: var(--disabled); }

/* ---------- строки списков (CanonTheme ROW_*) ---------- */
.rows { list-style: none; margin: 0; padding: 0; }
.rows > li { border-bottom: 1px solid var(--edge-soft); }
.rows > li:nth-child(odd) { background: var(--row-odd); }
.rows > li:hover { background: var(--wash-hover); box-shadow: inset 2px 0 0 0 var(--gold-hi); }

/* ---------- типографика ----------
   Роли из MatrixFontManager: header 32 / name 24 / small 20 / tiny 16.
   Заголовок канона = крупный Bender + ACCENT_GOLD_STRONG. */
h1, h2, h3 { font-family: var(--display); font-weight: 400; margin: 0; text-wrap: balance; }
.t-header { font-size: 32px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-hi); }
.t-name { font-size: 22px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text); }
.t-small {
  font-family: var(--display); font-size: 15px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-2);
}
.t-tiny {
  font-family: var(--display); font-size: 12px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted);
}
.num { font-variant-numeric: tabular-nums; }

/* Семантика статусов (канон: зелёный ONLINE / красный OFFLINE-опасность) */
.ok { color: var(--green); }
.danger { color: var(--red); }

/* Гашение недоступной зоны (CanonTheme.DIM_OVERLAY): dim, не скрытие */
.dim { position: relative; }
.dim::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(5, 5, 6, 0.63); pointer-events: none;
}
.dim-note {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: 14px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--muted); text-align: center; padding: 0 20px;
}

/* XP/прогресс: трек тише контента, заполнение — акцент */
.bar { height: 6px; background: var(--scroll-track); position: relative; }
.bar > i { position: absolute; inset: 0 auto 0 0; background: var(--gold-hi); }

/* ---------- редкость предметов (CanonTheme.rarityColor) ----------
   UNCOMMON=ACCENT, RARE=ACCENT_BLUE, EPIC=#B07AC8 — единственный «чужой» hex,
   явно допущенный каноном для эпик-редкости. COMMON = обычный текст. */
:root { --rarity-epic: #B07AC8; }
.r-common { --rar: var(--text-2); }
.r-uncommon { --rar: var(--gold-hi); }
.r-rare { --rar: #6E8DA8; } /* ACCENT_BLUE осветлён для читаемости мелкого текста на панели */
.r-epic { --rar: var(--rarity-epic); }

/* Тайл предмета: панель + левая полоса редкости + счётчик */
.item-tile {
  position: relative; background: var(--panel-opaque);
  box-shadow: inset 2px 0 0 0 var(--rar, var(--edge));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--rar, var(--text-2));
  text-align: center; padding: 4px; overflow: hidden; user-select: none;
}
.item-tile .cnt {
  position: absolute; right: 3px; bottom: 1px;
  font-size: 10px; color: var(--text-2); letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

/* Строка таблицы данных (барахолка/лидерборд): canon rows + колонки */
.data-head {
  display: grid; gap: 14px; padding: 10px 14px;
  border-bottom: 1px solid var(--edge); /* контрастная hairline шапки таблицы — PANEL_EDGE */
  font-family: var(--display); font-size: 12px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--muted);
}
.data-row { display: grid; gap: 14px; padding: 10px 14px; align-items: center; }

/* Фильтр-панель: поле + чипсы + сортировка */
.filter-bar { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 20px; }
.filter-bar .field { flex: 1 1 220px; }
.chip {
  display: inline-flex; align-items: center;
  background: var(--button-fill); border: 0; border-bottom: 1px solid var(--edge-soft);
  box-shadow: inset 2px 0 0 0 var(--edge);
  font-family: var(--display); font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-2); cursor: pointer; padding: 8px 14px;
  min-height: 44px;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.chip:hover { background: var(--wash-hover); color: var(--text); }
.chip.active { background: var(--wash-selected); color: var(--gold-hi); box-shadow: inset 2px 0 0 0 var(--gold-hi); }

/* Индикатор статуса сервера */
.srv { display: inline-flex; align-items: center; gap: 8px; font-family: var(--display); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-2); }
.srv::before { content: ''; width: 8px; height: 8px; background: var(--green); flex: none; }
.srv.off::before { background: var(--red); }
.srv.off { color: var(--red); }

/* ---------- промо СХРОН (idle-тайкун, отдельная игра в game/) ---------- */
.game-promo { display: flex; align-items: center; gap: 24px; margin: 28px 0; }
.game-promo-head { display: flex; align-items: center; gap: 18px; flex: 1; min-width: 0; }
.game-promo-icon { flex: none; width: 48px; height: 48px; object-fit: contain; }
.game-promo-text h2 { font-size: 22px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-hi); margin: 2px 0 8px; }
.game-promo-text p { margin: 0; color: var(--text-2); font-size: 15px; max-width: 60ch; }
.game-promo-cta { flex: none; }
@media (max-width: 620px) {
  .game-promo { flex-direction: column; align-items: stretch; gap: 18px; }
  .game-promo-cta { width: 100%; }
}

/* ---------- шапка внутренних страниц: логотип закреплён, остальное скроллится ---------- */
.nav-scroll {
  display: flex; align-items: center; gap: inherit;
  flex: 1; min-width: 0; overflow-x: auto;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.nav-scroll::-webkit-scrollbar { display: none; }
.nav-scroll > * { flex: none; }
.nav > .logo { flex: none; }
/* лёгкая подсказка «тут можно листать вбок», не мешает клику по последней вкладке */
.nav-scroll::after {
  content: ''; position: sticky; right: -1px; top: 0; bottom: 0;
  flex: none; width: 26px; margin-left: -26px;
  background: linear-gradient(to right, transparent, var(--panel-alt-opaque));
  pointer-events: none;
}

/* ============================================================
   Вовлечение «Схрон → бонусы беты» (добавлено при правке лендинга/кабинета).
   Новые классы с префиксом ce- (index.html, account.html) + расширение
   существующего семейства .game-promo-* (используется на обеих страницах).
   ============================================================ */

/* .game-promo-status: строка живого прогресса или приглашение зарегистрироваться
   под описанием в блоке .game-promo (account.html) */
.game-promo-status { margin: 14px 0 0; color: var(--text-2); font-size: 14px; }
.game-promo-metrics {
  list-style: none; display: flex; flex-wrap: wrap; gap: 6px 24px;
  margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid var(--edge-soft);
}
.game-promo-metrics li {
  font-family: var(--display); font-size: 13px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-2);
}
.game-promo-metrics li b { color: var(--gold-hi); font-size: 17px; letter-spacing: 0; margin-right: 7px; }

/* ce-shots: витрина скриншотов Схрона на лендинге — плитки разной исходной
   пропорции, приводим к общему кадру через object-fit (как .shot) */
.ce-shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--edge-soft); border-block: 1px solid var(--edge-soft); }
.ce-shot { aspect-ratio: 4 / 3; position: relative; overflow: hidden; margin: 0; background: var(--panel-opaque); }
.ce-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ce-shot figcaption {
  position: absolute; left: 14px; bottom: 12px; z-index: 1;
  font-family: var(--display); font-size: 13px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-2);
  background: rgba(5, 5, 6, 0.6); padding: 4px 10px;
}
@media (max-width: 700px) { .ce-shots { grid-template-columns: 1fr; } }

/* ce-cta-card: колонка-призыв рядом со списком бонусов (реюз .brief-грида) */
.ce-cta-card { text-align: center; }
.ce-cta-card h3 { font-size: 19px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text); margin-bottom: 10px; }
.ce-cta-card p { color: var(--text-2); font-size: 14px; margin: 0 0 22px; }
.ce-cta-card .btn { width: 100%; }
.ce-cta-card .ce-cta-alt { display: block; margin-top: 16px; font-family: var(--display); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; }

/* ce-ladder: лестница вовлечения «регистрация → игра → вехи → бонус» */
.ce-ladder { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; background: var(--edge-soft); border-block: 1px solid var(--edge-soft); }
.ce-step { background: var(--panel-opaque); padding: 24px 22px; position: relative; }
.ce-step-n {
  font-family: var(--display); font-size: 34px; color: var(--edge);
  line-height: 1; margin-bottom: 14px;
}
.ce-step h3 { font-size: 16px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text); margin-bottom: 8px; }
.ce-step p { color: var(--text-2); font-size: 14px; margin: 0 0 16px; min-height: 70px; }
.ce-step a { font-family: var(--display); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; }
@media (max-width: 980px) { .ce-ladder { grid-template-columns: repeat(2, 1fr); } .ce-step p { min-height: 0; } }
@media (max-width: 560px) { .ce-ladder { grid-template-columns: 1fr; } }

/* ce-final-cta: две кнопки в закрывающей секции лендинга, по центру */
.ce-final-cta { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* Десятка Схрона на лендинге: витрина без «тебя» — просто кто впереди.
   Скрыта до успешного ответа API, чтобы пустая рамка не висела при недоступном
   бэкенде (см. renderSkhronBoard в app.js). */
.ce-board{border:1px solid var(--edge); background:var(--panel); padding:22px 24px; margin-bottom:22px}
.ce-board-head{display:flex; flex-wrap:wrap; align-items:baseline; gap:12px; margin-bottom:14px}
.ce-board-head h3{margin:0; font-family:var(--display); font-size:20px; letter-spacing:.1em; text-transform:uppercase}
.ce-board-note{font-family:var(--mono,monospace); font-size:13px; color:var(--text-2)}
.ce-board-list{list-style:none; margin:0; padding:0; display:grid; gap:1px; background:var(--edge-soft)}
.ce-board-list li{
  display:flex; align-items:center; gap:12px; background:var(--panel);
  padding:9px 12px; font-size:15px;
}
.ce-board-list li .rk{flex:0 0 30px; color:var(--text-2); font-variant-numeric:tabular-nums}
.ce-board-list li .nm{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ce-board-list li .pt{flex:none; color:var(--gold-hi); font-variant-numeric:tabular-nums}
.ce-board-list li.lead{box-shadow:inset 2px 0 0 var(--gold-hi)}
.ce-board-foot{margin:14px 0 0; font-size:14px; color:var(--text-2)}
@media (min-width:760px){
  .ce-board-list{grid-template-columns:1fr 1fr}
}


/* Шапка не рвёт слова: «ОБ ИГРЕ» и «ИГРАТЬ В СХРОН» переносились на две
   строки при узком окне — виноват не размер шрифта, а letter-spacing 0.14em,
   из-за которого пункты шире, чем выглядят. */
.nav .tab, .nav .btn, .nav .logo { white-space: nowrap; }
@media (max-width: 1180px) {
  .nav .tab { padding: 10px 11px; font-size: 14px; letter-spacing: 0.08em; }
  .nav .btn { padding: 8px 13px; font-size: 13px; letter-spacing: 0.1em; }
}