/* ============================================================
   Investor Duel — Direction A "Editorial Trading-Desk"
   Премиальная финансовая газета (Bloomberg Businessweek) × спорт-табло,
   на швейцарской типографике. Две краски соперников: зелёный против оранжевого.
   Краска-по-бумаге, волосяные линейки вместо карточек/теней, острые углы,
   конденсед-дисплей + моно-цифры с tabular-nums, ticker-tape, зерно.
   Имена контракта оставлены алиасами (chart.js/effects.js/JS).
   ============================================================ */
:root {
  /* --- Краска и бумага (Direction A) --- */
  --paper:   #F2EEE3;   /* тёплый офсет, никогда не чисто-белый */
  --paper-2: #ECE7DA;   /* чуть глубже — панели */
  --ink:     #191512;   /* почти-чёрный, тёплый — текст и линейки */
  --ink-a:   #15493A;   /* соперник A / игрок / БЫКИ / прибыль */
  --ink-b:   #C4521C;   /* соперник B / соперник / МЕДВЕДИ / убыток */
  --ink-a-bright: #3F9B6E;  /* рост на тёмном / тикер вверх */
  --ink-b-bright: #D8762F;  /* падение на тёмном / тикер вниз */
  --ash:     #6E6A62;
  --ash-2:   #A89E8A;

  /* --- Линейки (теней нет) --- */
  --rule:       #14110D;
  --rule-soft:  #C9C2B4;
  --hair:       1px;
  --rule-thick: 2.5px;

  /* --- График --- */
  --grid: #DCD5C7;
  --base: #A89E8A;

  /* --- Типографика --- */
  --font-display: "Anton", "Archivo Narrow", "Saira Condensed", "Oswald", "Helvetica Neue Condensed", sans-serif;
  --font-text:    "Archivo", "Space Grotesk", "Helvetica Neue", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", "IBM Plex Mono", "Space Mono", ui-monospace, Menlo, monospace;
  --t-hero: clamp(64px, 18vw, 140px);
  --track-tight: -0.02em;
  --track-caps:  0.14em;
  --num: "tnum" 1, "lnum" 1;

  --radius: 0px;
  --ease-mech:  cubic-bezier(.2,.7,.2,1);
  --ease-stamp: cubic-bezier(.7,-0.2,.4,1.4);
  --tape-speed: 30s;

  /* === Алиасы под исходный контракт (компоненты + chart.js/effects.js) === */
  --bg: var(--paper);   --surface: var(--paper);   --card: var(--paper);
  --fg: var(--ink);     --label: var(--ink);
  --muted: var(--ash);  --label2: var(--ash);      --label3: var(--ash-2);
  --accent: var(--ink); --blue: var(--ink);
  --p1: var(--ink-a);   --green: var(--ink-a);     --green-ink: var(--ink-a);
  --p2: var(--ink-b);   --orange: var(--ink-b);    --orange-ink: var(--ink-b);
  --err: var(--ink-b);  --red: var(--ink-b);
  --pos: var(--ink-a);  --neg: var(--ink-b);
  --border: var(--rule); --separator: var(--rule-soft);
  --fill: var(--paper-2);
  --font: var(--font-text);  --mono: var(--font-mono);
  --shadow: none;
  --spring: var(--ease-stamp);  --ease: var(--ease-mech);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font-text); font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
/* Зерно/халфтон поверх всего листа — тактильность печати */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9999;
  opacity: .5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}
a { color: var(--ink); text-decoration: none; }
:focus-visible { outline: var(--rule-thick) solid var(--ink); outline-offset: 2px; }

/* ---------- Навбар (масштабный мастхед) ---------- */
.navbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px; background: var(--paper);
  border-bottom: var(--rule-thick) solid var(--ink);
}
.navbar .brand {
  font-family: var(--font-display); font-weight: 400; font-size: 22px;
  letter-spacing: .02em; text-transform: uppercase; color: var(--ink);
}
.navbar a.nav-link {
  font-family: var(--font-text); font-size: 13px; font-weight: 600; color: var(--ink);
  text-transform: uppercase; letter-spacing: var(--track-caps);
  border-bottom: var(--hair) solid var(--ink); padding-bottom: 2px;
}

/* ---------- Ticker-tape (структурный хребет) ---------- */
.tape {
  overflow: hidden; border-bottom: var(--hair) solid var(--rule);
  font: 600 12px/1 var(--font-mono); letter-spacing: .08em;
  text-transform: uppercase; color: var(--ash); background: var(--paper-2);
}
.tape__row {
  display: flex; width: max-content;
  animation: tape var(--tape-speed) linear infinite;
}
.tape__seg { flex: none; white-space: nowrap; padding-block: 6px; }

/* QR ссылки-приглашения */
.invite-qr { margin: 12px auto 0; max-width: 220px; }
.invite-qr-cap { text-align: center; font-size: 11px; text-transform: uppercase; letter-spacing: var(--track-caps); color: var(--ash); margin-bottom: 8px; }
.invite-qr svg { width: 100%; height: auto; display: block; background: var(--paper); border: var(--hair) solid var(--rule); padding: 10px; }

/* ---------- Каркас ---------- */
.container { max-width: 600px; margin: 0 auto; padding: 10px 16px 64px; }
.large-title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(40px, 11vw, 64px); line-height: .96; letter-spacing: var(--track-tight);
  text-transform: uppercase; margin: 16px 0 6px;
}
.subtitle { color: var(--ash); margin: 0 0 14px; font-size: 15px; line-height: 1.5; }
.section-header {
  font-family: var(--font-text); font-size: 12px; font-weight: 600; color: var(--ash);
  text-transform: uppercase; letter-spacing: var(--track-caps); margin: 26px 2px 8px;
}
.error {
  color: var(--ink-b); min-height: 1.2em; margin: 12px 0 0; font-size: 14px; font-weight: 600;
}
.error:not(:empty) { border-left: var(--rule-thick) solid var(--ink-b); padding: 8px 12px; background: var(--paper-2); }
.hidden { display: none !important; }
.code {
  font-family: var(--font-mono); font-weight: 700; color: var(--ink); letter-spacing: .12em;
  border: var(--hair) solid var(--ink); border-radius: 0; padding: 1px 8px; background: var(--paper);
}
.muted { color: var(--ash); }
.caps { font-family: var(--font-text); text-transform: uppercase; letter-spacing: var(--track-caps); font-size: 12px; color: var(--ash); }
/* Раздвоенное герой-число */
.split-score {
  font-family: var(--font-display); font-weight: 400; font-size: var(--t-hero); line-height: .92;
  letter-spacing: var(--track-tight); font-feature-settings: var(--num);
  background: linear-gradient(90deg, var(--ink-a) 0 50%, var(--ink-b) 50% 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- Зоны (вместо grouped-списков) ---------- */
.list { background: var(--paper); border: var(--hair) solid var(--rule); border-radius: 0; overflow: hidden; }
.row { display: flex; align-items: center; gap: 12px; padding: 13px 16px; position: relative; min-height: 52px; }
.row + .row::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; height: var(--hair); background: var(--rule-soft); }
.row-main { flex: 1; min-width: 0; }
.row-sub { color: var(--ash); font-size: 12px; margin-top: 2px; text-transform: uppercase; letter-spacing: var(--track-caps); }

/* ---------- Поля (бумага + нижняя линейка) ---------- */
.field {
  width: 100%; border: none; border-bottom: var(--hair) solid var(--rule); background: transparent;
  font-family: var(--font-text); font-size: 17px; color: var(--ink); padding: 4px 0; border-radius: 0;
}
.field::placeholder { color: var(--ash-2); }
.field:focus { outline: none; border-bottom: var(--rule-thick) solid var(--ink); }

/* ---------- Кнопки (штамп / гост) ---------- */
.btn {
  display: block; width: 100%; text-align: center; cursor: pointer; border-radius: 0;
  padding: 14px; font-family: var(--font-text); font-size: 14px; font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--track-caps);
  background: var(--paper); color: var(--ink); border: var(--hair) solid var(--ink);
  transition: transform .12s var(--ease-mech), background .15s, color .15s;
}
.btn:active:not(:disabled) { transform: translate(1px, -1px); }
.btn:disabled { opacity: .4; cursor: default; }
.btn-primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn-plain { background: var(--paper); color: var(--ink); }
.btn-row { margin-top: 12px; }
.btn-sm {
  cursor: pointer; padding: 8px 16px; border-radius: 0; font-family: var(--font-text);
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-caps);
  background: var(--ink); color: var(--paper); border: var(--hair) solid var(--ink);
  transition: transform .12s var(--ease-mech);
}
.btn-sm:active { transform: translate(1px, -1px); }
.btn-ghost {
  cursor: pointer; padding: 7px 12px; border-radius: 0; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--track-caps);
  background: transparent; color: var(--ink); border: none; border-bottom: var(--hair) solid var(--ink);
}

/* ---------- Сегмент-контрол (small-caps переключатели) ---------- */
.segmented { display: flex; width: 100%; background: var(--paper-2); border: var(--hair) solid var(--rule); border-radius: 0; padding: 3px; gap: 3px; }
.segmented label {
  flex: 1; text-align: center; padding: 8px 6px; border-radius: 0; cursor: pointer;
  font-size: 12px; font-weight: 700; color: var(--ash); text-transform: uppercase; letter-spacing: var(--track-caps);
  transition: background .15s, color .15s;
}
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented label:has(input:checked) { background: var(--ink); color: var(--paper); }

/* ---------- Комната ---------- */
.room-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 16px 0 4px; }
.room-head .large-title { margin: 0; }
.room-id { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; }
.room-id .code { font-size: 24px; padding: 4px 12px; letter-spacing: .18em; line-height: 1.1; }
.pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 0;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-caps);
  background: var(--paper); border: var(--hair) solid var(--rule); color: var(--ash); margin: 4px 0 6px;
}
/* Период симуляции — зона в линейках, моно-даты */
.window-card {
  display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap;
  margin: 14px 0 4px; padding: 14px 18px; border: var(--hair) solid var(--rule); border-radius: 0; background: var(--paper-2);
}
.window-leg { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.window-cap { font-size: 10px; font-weight: 700; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ash); }
.window-date { font-family: var(--font-mono); font-size: 18px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; font-feature-settings: var(--num); }
.window-arrow { font-size: 18px; font-weight: 700; color: var(--ink); }
.window-span { margin-left: 4px; padding: 4px 10px; border: var(--hair) solid var(--ink); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-caps); }

.turn-banner {
  display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px;
  border-radius: 0; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-caps);
  margin: 14px 0; background: var(--paper); color: var(--ash);
  border: var(--hair) solid var(--rule); border-top: var(--rule-thick) solid var(--ash);
}
.turn-banner.mine { color: var(--ink-a); border-top-color: var(--ink-a); animation: pulse 1.6s ease-in-out infinite; }
.turn-banner.theirs { color: var(--ink-b); border-top-color: var(--ink-b); }
.turn-banner.neutral { color: var(--ash); border-top-color: var(--ash); }

/* ---------- Таймер хода ---------- */
.turn-timer { display: flex; flex-direction: column; gap: 5px; margin: -2px 0 8px; }
.turn-timer-track { height: 6px; border: var(--hair) solid var(--rule); overflow: hidden; background: var(--paper); }
.turn-timer-bar { height: 100%; width: 100%; background: var(--ink); transition: width 1s linear, background .2s; }
.turn-timer-text { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--ash); text-align: right; font-feature-settings: var(--num); }
.turn-timer.low .turn-timer-bar { background: var(--ink-b); }
.turn-timer.low .turn-timer-text { color: var(--ink-b); }

.offer-note { color: var(--ash); font-size: 11px; margin: 8px 0 0; text-align: center; text-transform: uppercase; letter-spacing: var(--track-caps); }

/* ---------- Сетка тикеров ---------- */
.ticker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; margin: 14px 0; }
.ticker {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-weight: 700; font-size: 14px; letter-spacing: .02em;
  padding: 11px 6px 12px; border-radius: 0; border: var(--hair) solid var(--rule);
  background: var(--paper); color: var(--ink); cursor: pointer;
  transition: transform .1s var(--ease-mech), background .15s, border-color .15s;
}
.ticker .spark { width: 100%; height: 22px; display: block; opacity: .9; pointer-events: none; }
.ticker .tk-label { line-height: 1; }
.ticker:disabled .spark { opacity: .55; }
.ticker:not(:disabled):hover { background: var(--paper-2); border-color: var(--ink); }
.ticker:not(:disabled):active { transform: translate(1px, -1px); }
.ticker:disabled { cursor: default; }
/* Выбранные бумаги — сильный контраст: цветная заливка-тинт + толстая правая линия краской соперника. */
.ticker.taken-p1, .ticker.taken-p2 { background: var(--paper-2); border-right-width: 6px; }
.ticker.taken-p1 { border-right-color: var(--ink-a); color: var(--ink-a); background: color-mix(in srgb, var(--ink-a) 16%, var(--paper)); }
.ticker.taken-p2 { border-right-color: var(--ink-b); color: var(--ink-b); background: color-mix(in srgb, var(--ink-b) 16%, var(--paper)); }
.ticker.taken-p1:disabled, .ticker.taken-p2:disabled { opacity: 1; }
.ticker.taken-p1 .spark, .ticker.taken-p2 .spark { opacity: 1; }
.ticker.pop { animation: stamp .42s var(--ease-stamp); }

/* ---------- Портфели ---------- */
.portfolios { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.port-card { background: var(--paper); border: var(--hair) solid var(--rule); border-top: var(--rule-thick) solid var(--rule); border-radius: 0; padding: 14px 16px; }
.port-card.p1 { border-top-color: var(--ink-a); }
.port-card.p2 { border-top-color: var(--ink-b); }
.port-card h3 { margin: 0 0 10px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-caps); }
.port-card.p1 h3 { color: var(--ink-a); }
.port-card.p2 h3 { color: var(--ink-b); }
.port-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.port-card li { font-family: var(--font-mono); font-weight: 700; font-size: 14px; padding: 8px 0; border-top: var(--hair) solid var(--rule-soft); }
.port-card li:first-child { border-top: none; }

/* ---------- Результаты ---------- */
.winner-banner {
  position: relative; text-align: center; padding: 24px 20px; border-radius: 0; margin-bottom: 16px;
  font-family: var(--font-display); font-weight: 400; font-size: clamp(26px, 7vw, 40px);
  line-height: .96; letter-spacing: var(--track-tight); text-transform: uppercase;
  background: var(--paper); color: var(--ash); border-block: var(--rule-thick) solid var(--ink);
}
.winner-banner.win-p1 { color: var(--ink-a); border-block-color: var(--ink-a); }
.winner-banner.win-p2 { color: var(--ink-b); border-block-color: var(--ink-b); }
.winner-banner.tie { color: var(--ink); border-block-color: var(--ink); }
.winner-banner.encourage { color: var(--ink); border-block-color: var(--ink); }
.winner-banner.reveal { animation: stamp .5s var(--ease-stamp) both; }
.winner-banner .trophy { display: block; font-size: 44px; margin-bottom: 6px; animation: stamp .55s var(--ease-stamp) .05s both; }
.winner-banner.encourage .trophy { animation: wiggle .75s var(--ease-stamp) .05s both; }

/* Конфетти поверх всего */
.confetti-canvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 60; }

/* Живые счётчики симуляции */
.sim-counters { display: flex; align-items: stretch; gap: 10px; margin-bottom: 14px; }
.sim-side { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 10px; background: var(--paper); border: var(--hair) solid var(--rule); border-top: var(--rule-thick) solid var(--rule); }
.sim-side.p1 { border-top-color: var(--ink-a); }
.sim-side.p2 { border-top-color: var(--ink-b); }
.sim-name { font-size: 11px; font-weight: 700; color: var(--ash); text-transform: uppercase; letter-spacing: var(--track-caps); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sim-val { font-family: var(--font-mono); font-size: 26px; font-weight: 700; letter-spacing: -.02em; font-feature-settings: var(--num); }
.sim-val.pos { color: var(--ink-a); }
.sim-val.neg { color: var(--ink-b); }
.sim-mid { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 54px; }
.sim-spin { font-size: 18px; animation: spin 1.4s linear infinite; }
.sim-cap { font-size: 9px; font-weight: 700; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ash); }

.chart-card { background: var(--paper); border: var(--hair) solid var(--rule); border-radius: 0; padding: 14px 14px 8px; }
.chart { width: 100%; height: auto; display: block; }
.line-p1 { stroke: var(--ink-a); }
.line-p2 { stroke: var(--ink-b); }
.legend { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; margin: 12px 0 4px; color: var(--ash); font-size: 12px; text-transform: uppercase; letter-spacing: var(--track-caps); font-weight: 600; }
.legend .dot { display: inline-block; width: 10px; height: 10px; border-radius: 0; margin-right: 6px; vertical-align: -1px; }
.legend .dot.p1 { background: var(--ink-a); }
.legend .dot.p2 { background: var(--ink-b); }

.results-tables { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0; }
.res-port { background: var(--paper); border: var(--hair) solid var(--rule); border-radius: 0; padding: 12px 15px; }
.res-port h3 { margin: 0 0 6px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-caps); }
.res-row { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 13px; padding: 7px 0; border-top: var(--hair) solid var(--rule-soft); }
.res-row:first-of-type { border-top: none; }
.res-sec { flex: 0 0 auto; font-weight: 700; }
.res-spark { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; }
.res-spark .spark2 { width: 100%; height: 24px; display: block; }
.res-row .pos, .res-row .neg { flex: 0 0 auto; }
.pos { color: var(--ink-a); font-weight: 700; }
.neg { color: var(--ink-b); font-weight: 700; }
.actions { display: flex; gap: 10px; margin-top: 18px; }
.actions .btn { flex: 1; }

/* ---------- Раунды / матч ---------- */
.round-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 10px 0 0; padding: 10px 14px; border: var(--hair) solid var(--rule); background: var(--paper-2);
}
.round-banner .rb-label { font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: var(--track-caps); }
.round-banner .rb-score { font-family: var(--font-mono); font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 6px; font-feature-settings: var(--num); }
.round-banner .rb-score .p1 { color: var(--ink-a); }
.round-banner .rb-score .p2 { color: var(--ink-b); }
.round-banner .rb-colon { color: var(--ash); }

.match-summary { background: var(--paper); border: var(--hair) solid var(--rule); border-radius: 0; padding: 12px 15px; margin-bottom: 14px; }
.match-summary .ms-score { text-align: center; font-family: var(--font-display); font-size: 28px; letter-spacing: var(--track-tight); text-transform: uppercase; margin-bottom: 6px; }
.match-summary .ms-score b { font-family: var(--font-mono); font-feature-settings: var(--num); }
.ms-row { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 7px 0; border-top: var(--hair) solid var(--rule-soft); }
.ms-row .ms-no { flex: 0 0 72px; color: var(--ash); text-transform: uppercase; letter-spacing: var(--track-caps); font-weight: 600; }
.ms-row .ms-ret { flex: 1 1 auto; font-family: var(--font-mono); text-align: center; font-feature-settings: var(--num); }
.ms-row .ms-win { flex: 0 0 auto; font-weight: 700; white-space: nowrap; }

.bot-note { text-align: center; font-size: 12px; font-weight: 600; color: var(--ash); text-transform: uppercase; letter-spacing: var(--track-caps); border: var(--hair) solid var(--rule); padding: 10px 14px; margin-bottom: 14px; }
.wait-eta { font-family: var(--font-mono); font-weight: 700; color: var(--ink); white-space: nowrap; font-feature-settings: var(--num); }

/* ---------- Авторизация по телефону ---------- */
.auth-card { background: var(--paper); border: var(--hair) solid var(--rule); border-top: var(--rule-thick) solid var(--ink); border-radius: 0; padding: 18px 18px 16px; margin-top: 16px; text-align: center; }
.auth-title { font-family: var(--font-display); font-size: 22px; text-transform: uppercase; letter-spacing: var(--track-tight); }
.auth-sub { color: var(--ash); font-size: 12px; margin: 6px 2px 12px; text-transform: uppercase; letter-spacing: var(--track-caps); }
.auth-row { display: flex; align-items: center; padding: 10px 0; margin-top: 4px; border-bottom: var(--hair) solid var(--rule); }
.auth-row .field { text-align: center; font-size: 18px; border-bottom: none; }
.auth-call { display: inline-block; font-family: var(--font-mono); font-weight: 700; font-size: clamp(18px, 6.4vw, 24px); white-space: nowrap; letter-spacing: .04em; color: var(--paper); margin: 8px 0; padding: 8px 16px; background: var(--ink); font-feature-settings: var(--num); }
.auth-qr { display: flex; justify-content: center; margin: 10px auto 2px; width: 168px; height: 168px; padding: 10px; background: var(--paper); border: var(--hair) solid var(--rule); }
.auth-qr svg { width: 100%; height: 100%; display: block; }
.auth-msg { color: var(--ink-b); min-height: 1.1em; margin: 8px 0 0; font-size: 13px; font-weight: 600; }
.auth-done { font-size: 14px; font-weight: 700; color: var(--ink-a); text-transform: uppercase; letter-spacing: var(--track-caps); border: var(--hair) solid var(--ink-a); padding: 16px; }

/* ---------- Лидерборд ---------- */
.lb-row { display: flex; align-items: center; gap: 12px; }
.lb-rank { width: 34px; text-align: center; font-family: var(--font-display); font-weight: 400; font-size: 22px; color: var(--ash); }
.lb-rank.top { color: var(--ink-a); }
.lb-name { flex: 1; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-stats { color: var(--ash); font-size: 11px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .06em; }
.lb-stars { font-family: var(--font-mono); font-weight: 700; color: var(--ink); white-space: nowrap; font-feature-settings: var(--num); }

/* ---------- Приглашённые + статистика по бумагам ---------- */
.zone-note { border: var(--hair) solid var(--rule); background: var(--paper); padding: 12px 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.inv-chip { border: var(--hair) solid var(--ink); padding: 4px 10px; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.stock-stats { border: var(--hair) solid var(--rule); background: var(--paper); }
.ss-row { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-top: var(--hair) solid var(--rule-soft); }
.ss-row:first-child { border-top: none; }
.ss-sec { flex: 0 0 64px; font-family: var(--font-mono); font-weight: 700; font-size: 13px; }
.ss-bar { flex: 1 1 auto; height: 9px; background: var(--paper-2); border: var(--hair) solid var(--rule-soft); overflow: hidden; }
.ss-fill { display: block; height: 100%; background: var(--ink-a); transition: width .8s var(--ease-mech); }
.ss-num { flex: 0 0 auto; font-family: var(--font-mono); font-size: 12px; color: var(--ash); font-feature-settings: var(--num); }

/* ============================================================
   Direction A — Editorial Trading-Desk: специфика
   ============================================================ */

/* Зелёно-оранжевый акцент-подчёркивание под мастхедом */
.masthead-rule { display: flex; height: 6px; width: 132px; margin: -2px 0 14px; }
.masthead-rule i { flex: 1; display: block; }
.masthead-rule i:first-child { background: var(--ink-a); }
.masthead-rule i:last-child { background: var(--ink-b); }

/* Рейтинг-строка игрока (звёзды + ELO-подобный счёт) */
.rating-strip { display: flex; align-items: center; gap: 10px; margin: 0 2px 14px; padding: 10px 0; border-block: var(--hair) solid var(--rule); }
.rating-strip .rs-stars { font-family: var(--font-mono); font-weight: 800; letter-spacing: .15em; color: var(--ink-a); font-size: 16px; }
.rating-strip .rs-elo { font-family: var(--font-mono); font-weight: 800; font-size: 17px; font-feature-settings: var(--num); }
.rating-strip .rs-cap { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-caps); color: var(--ash); margin-left: auto; }

/* Селектор формата матча — три крупных блока */
.bestof { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: var(--hair) solid var(--ink); }
.bestof label {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 16px 6px 12px; cursor: pointer; background: var(--paper); color: var(--ink);
  border-left: var(--hair) solid var(--ink); transition: background .12s var(--ease-mech), color .12s;
}
.bestof label:first-child { border-left: none; }
.bestof .bo-n { font-family: var(--font-display); font-weight: 400; font-size: clamp(30px, 9vw, 44px); line-height: .9; letter-spacing: var(--track-tight); }
.bestof .bo-cap { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-caps); color: var(--ash); }
.bestof input { position: absolute; opacity: 0; pointer-events: none; }
.bestof label:has(input:checked) { background: var(--ink-a); color: var(--paper); }
.bestof label:has(input:checked) .bo-cap { color: var(--paper); opacity: .8; }

/* ---------- Гигантский таймер хода «15» ---------- */
.bigtimer { text-align: center; margin: 16px 0 6px; padding: 10px 0 12px; border-block: var(--rule-thick) solid var(--ink); }
.bigtimer .bt-num {
  font-family: var(--font-mono); font-weight: 800; font-size: clamp(58px, 20vw, 104px); line-height: .9;
  letter-spacing: -.03em; font-feature-settings: var(--num); color: var(--ink); display: block;
}
.bigtimer .bt-cap { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-caps); color: var(--ash); }
.bigtimer.low .bt-num { color: var(--ink-b); animation: pulseNum 1s steps(2,end) infinite; }
.bigtimer.idle .bt-num { color: var(--ash-2); }

/* ---------- Сплит-индикатор хода (зелёный | оранжевый) ---------- */
.turn-split { display: flex; border: var(--hair) solid var(--ink); margin: 8px 0 14px; }
.turn-split .ts-side {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 11px 8px;
  text-align: center; transition: opacity .15s, background .15s;
}
.turn-split .ts-side.left { border-right: var(--hair) solid var(--ink); }
.turn-split .ts-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-caps); }
.turn-split .ts-name { font-family: var(--font-mono); font-weight: 700; font-size: 13px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.turn-split .ts-side.bulls { color: var(--ink-a); }
.turn-split .ts-side.bears { color: var(--ink-b); }
.turn-split .ts-side.active.bulls { background: var(--ink-a); color: var(--paper); }
.turn-split .ts-side.active.bears { background: var(--ink-b); color: var(--paper); }
.turn-split .ts-side.dim { opacity: .42; }

/* Бычий/медвежий маркер (стрелка-глиф) */
.mark { font-family: var(--font-mono); font-weight: 800; font-style: normal; }

/* ---------- Пик-рейлы: 5 явных слотов ---------- */
.pick-rail { background: var(--paper); border: var(--hair) solid var(--rule); border-top: var(--rule-thick) solid var(--rule); padding: 0; }
.pick-rail.p1 { border-top-color: var(--ink-a); }
.pick-rail.p2 { border-top-color: var(--ink-b); }
.pick-rail h3 { margin: 0; padding: 9px 14px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-caps); border-bottom: var(--hair) solid var(--rule); display: flex; align-items: center; gap: 6px; }
.pick-rail.p1 h3 { color: var(--ink-a); }
.pick-rail.p2 h3 { color: var(--ink-b); }
.pick-rail .slot { display: flex; align-items: center; gap: 8px; padding: 9px 14px; font-family: var(--font-mono); font-weight: 700; font-size: 14px; border-top: var(--hair) solid var(--rule-soft); min-height: 38px; }
.pick-rail .slot:first-of-type { border-top: none; }
.pick-rail .slot .slot-no { color: var(--ash-2); font-size: 11px; flex: 0 0 16px; }
.pick-rail .slot.empty { color: var(--ash-2); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; font-size: 11px; font-family: var(--font-text); }
.pick-rail.p1 .slot.filled { color: var(--ink-a); }
.pick-rail.p2 .slot.filled { color: var(--ink-b); }
.pick-rail .slot.pop { animation: stamp .42s var(--ease-stamp); }

/* ---------- Сплошные блоки симуляции (Direction A) ---------- */
.sim-counters.solid .sim-side { border: none; color: var(--paper); }
.sim-counters.solid .sim-side.p1 { background: var(--ink-a); }
.sim-counters.solid .sim-side.p2 { background: var(--ink-b); }
.sim-counters.solid .sim-name { color: var(--paper); opacity: .82; }
.sim-counters.solid .sim-val, .sim-counters.solid .sim-val.pos, .sim-counters.solid .sim-val.neg { color: var(--paper); }

/* ---------- Editorial-герой результата (оба варианта) ---------- */
.result-hero { text-align: center; padding: 8px 0 4px; margin-bottom: 14px; }
.result-hero .rh-kicker { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-caps); color: var(--ash); padding-bottom: 8px; margin-bottom: 12px; border-bottom: var(--hair) solid var(--rule); }
.result-hero .rh-head {
  font-family: var(--font-display); font-weight: 400; line-height: .9; letter-spacing: var(--track-tight);
  text-transform: uppercase; font-size: clamp(40px, 13vw, 78px); color: var(--ink);
}
.result-hero.win .rh-head { color: var(--ink-a); }
.result-hero .rh-big {
  font-family: var(--font-mono); font-weight: 800; font-size: clamp(52px, 17vw, 96px); line-height: 1;
  letter-spacing: -.03em; font-feature-settings: var(--num); margin: 6px 0 2px;
}
.result-hero .rh-big.pos { color: var(--ink-a); }
.result-hero .rh-big.neg { color: var(--ink-b); }
.result-hero .rh-sub { font-family: var(--font-mono); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--ash); font-feature-settings: var(--num); }
/* лента «рейтинг / разрыв» */
.result-hero .rh-rule { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 12px; padding-top: 10px; border-top: var(--hair) solid var(--rule); font-family: var(--font-mono); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-feature-settings: var(--num); }
.result-hero .rh-rule .gain { color: var(--ink-a); }
.result-hero .rh-rule .gap-chip { border: var(--hair) solid var(--ink); padding: 3px 9px; }
.result-hero .rh-analysis { margin: 12px auto 0; max-width: 32em; font-size: 13px; line-height: 1.5; color: var(--ink); text-align: left; border-left: var(--rule-thick) solid var(--ink); padding: 4px 0 4px 12px; }
.result-hero .rh-analysis b { text-transform: uppercase; letter-spacing: var(--track-caps); font-size: 11px; color: var(--ash); display: block; margin-bottom: 2px; }
/* Победа V1 — сплошная зелёная WINNER-полоса */
.result-hero.win.v1 .rh-band { background: var(--ink-a); color: var(--paper); font-family: var(--font-display); text-transform: uppercase; letter-spacing: var(--track-caps); font-size: 20px; padding: 12px; margin: 12px 0 0; }
.result-hero.win.v2 .rh-head { font-size: clamp(34px, 11vw, 64px); }
.result-hero.reveal { animation: stamp .5s var(--ease-stamp) both; }

/* ---------- Лидерборд: топ-3 крупными конденсед-цифрами ---------- */
.lb-row .lb-rank.big { font-size: 40px; line-height: .8; width: 44px; }
.lb-row .lb-rank.r1 { color: var(--ink); }
.lb-row .lb-rank.r2 { color: var(--ink-a); }
.lb-row .lb-rank.r3 { color: var(--ink-b); }
.lb-tag { font-family: var(--font-mono); font-weight: 800; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; border: var(--hair) solid currentColor; padding: 1px 6px; margin-left: 6px; vertical-align: 1px; white-space: nowrap; }
.lb-tag.bulls { color: var(--ink-a); }
.lb-tag.bears { color: var(--ink-b); }

/* ---------- Анимации (печатно-механические) ---------- */
@keyframes tape { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes stamp { 0% { opacity: 0; transform: scale(1.06) rotate(-1.5deg); } 100% { opacity: 1; transform: none; } }
@keyframes pop { 0% { transform: scale(1.06); } 100% { transform: none; } }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes bounce { 0% { transform: scale(0); } 100% { transform: scale(1); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes bannerPop { 0% { opacity: 0; transform: scale(1.06) rotate(-1.5deg); } 100% { opacity: 1; transform: none; } }
@keyframes wiggle { 0% { transform: rotate(0) scale(0); } 55% { transform: rotate(-12deg) scale(1.12); } 75% { transform: rotate(8deg) scale(1); } 100% { transform: rotate(0) scale(1); } }
@keyframes ctaPulse { 0%,100% { transform: none; } 50% { transform: translate(1px, -1px); } }
@keyframes pulseNum { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
@keyframes tkEnter { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: none; } }
@keyframes spkDraw { from { stroke-dashoffset: 260; } to { stroke-dashoffset: 0; } }

.ticker.enter { animation: tkEnter .4s var(--ease-mech) both; }
.res-spark .spk-post { stroke-dasharray: 260; animation: spkDraw .9s var(--ease-mech) .15s both; }
.btn.cta-pulse { animation: ctaPulse 1.4s ease-in-out infinite; }
.reveal { animation: fadeUp .4s var(--ease-mech) both; }

@media (max-width: 560px) {
  .portfolios, .results-tables { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, .reveal, .turn-banner.mine, .winner-banner .trophy, .ticker.pop, .tape__row, .btn.cta-pulse {
    animation: none !important; transition: none !important;
  }
}