/* ERRON · «Тёплый привал» — общие токены и компоненты для Twitch, OBS и сайта */
@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@500;700;800&family=Manrope:wght@500;600;700&family=JetBrains+Mono:wght@500;700&display=swap');

:root {
  --night: #0f0b0a;     /* фон: тёплая ночь */
  --coal: #1a1311;      /* карточки: угли */
  --coal-2: #231915;
  --line: #2a1d18;
  --fire: #ff2d3c;      /* огонь */
  --mix: #9a3fd6;       /* смесь */
  --path: #2f6bff;      /* путь */
  --light: #ffb27a;     /* свет костра */
  --ink: #f3e9e2;
  --ink-2: #e8d5c8;
  --muted: #b9a69b;
  --grad: linear-gradient(90deg, var(--fire), var(--mix) 50%, var(--path));
  --f-display: 'Unbounded', sans-serif;
  --f-text: 'Manrope', sans-serif;
  --f-mono: 'JetBrains Mono', monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--f-text); color: var(--ink); }

/* Сцена фиксированного размера (OBS / экспорт) */
.canvas { position: relative; overflow: hidden; }
.bg-camp {
  background:
    radial-gradient(ellipse 70% 60% at 50% 118%, #ff5a3c44, transparent 60%),
    radial-gradient(ellipse 50% 40% at 12% -8%, #2f6bff24, transparent 60%),
    radial-gradient(ellipse 40% 40% at 92% 0%, #9a3fd61c, transparent 60%),
    var(--night);
}
.embers { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* Логотип: огонь-E + RRON, SIVORS тихой подписью */
.lockup { --cap: 46px; display: inline-flex; flex-direction: column; align-items: flex-end; gap: calc(var(--cap) * .24); }
.word { display: flex; align-items: flex-end; line-height: 1; }
.word .mark { height: calc(var(--cap) * 160 / 54); width: calc(var(--cap) * 120 / 54); margin-bottom: calc(var(--cap) * -24 / 54); margin-right: calc(var(--cap) * -.12); overflow: visible; }
.word .rr { font: 800 calc(var(--cap) / .74) / var(--cap) var(--f-display); letter-spacing: .03em; color: #fff4ec; display: block; height: var(--cap); }
.lockup .sv { font: 500 calc(var(--cap) * .28) var(--f-display); letter-spacing: .62em; margin-right: -.62em; color: var(--muted); }
.mark-solo { overflow: visible; }

/* Девиз ↔ new era */
.tag { position: relative; height: 1.5em; font-size: var(--tag, 16px); text-align: center; }
.tag span { position: absolute; left: 0; right: 0; white-space: nowrap; transition: opacity 1s, filter 1s, transform 1s; }
.tag .ru { font: 500 1em var(--f-text); color: var(--ink-2); letter-spacing: .02em; }
.tag .en { font: 500 .86em var(--f-mono); color: #9fb6ff; letter-spacing: .08em; text-shadow: 0 0 .5em #2f6bff99; top: .1em; }
.tag .off { opacity: 0; filter: blur(.4em); transform: translateY(-.5em); }

/* Карточки и акценты */
.card { background: var(--coal); border-radius: 18px; box-shadow: 0 0 0 1px var(--line), 0 14px 40px -14px #ff5a3c40; }
.h-display { font: 800 1em/1.1 var(--f-display); letter-spacing: .02em; }
.grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pill { display: inline-flex; align-items: center; gap: .5em; padding: .55em 1.1em; border-radius: 999px; background: var(--grad); color: #fff; font: 700 1em var(--f-text); box-shadow: 0 0 1.4em #ff2d3c55; }
.muted { color: var(--muted); }

/* Неоновый акцент (из направления B): алерты и сбой */
.neon { box-shadow: 0 0 0 1.5px var(--mix), 0 0 22px #9a3fd688, inset 0 0 14px #9a3fd633; }
.scan::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, #ffffff08 0 1px, transparent 1px 3px); }

/* Тропа «маршрут на вечер» */
.route { display: flex; align-items: center; gap: .6em; font: 600 1em var(--f-text); color: var(--ink-2); }
.route i { flex: 1; min-width: 1.4em; border-top: 2px dotted #6b4c3f; }
.route .stop { display: inline-flex; align-items: center; gap: .45em; white-space: nowrap; }
.route .stop::before { content: ''; width: .62em; height: .62em; border-radius: 50%; background: var(--c, var(--fire)); box-shadow: 0 0 .6em var(--c, var(--fire)); }
.route .stop.done { opacity: .5; }
.route .stop.now { color: #fff; }
.route .stop.now::before { box-shadow: 0 0 0 .22em #ffffff22, 0 0 .9em var(--c, var(--fire)); }