@font-face { font-family: 'JetBrains Mono'; src: url('../assets/fonts/JetBrainsMono-Regular.woff2') format('woff2'); font-weight: 400; font-display: block; }
@font-face { font-family: 'JetBrains Mono'; src: url('../assets/fonts/JetBrainsMono-Medium.woff2') format('woff2'); font-weight: 500; font-display: block; }
@font-face { font-family: 'JetBrains Mono'; src: url('../assets/fonts/JetBrainsMono-Bold.woff2') format('woff2'); font-weight: 700; font-display: block; }
@font-face { font-family: 'JetBrains Mono'; src: url('../assets/fonts/JetBrainsMono-ExtraBold.woff2') format('woff2'); font-weight: 800; font-display: block; }
@font-face { font-family: 'AIM Brand'; src: url('../assets/fonts/aim-brand-mono-700.woff2') format('woff2'); font-weight: 700; font-display: block; }

:root {
  /* text scale: «крупнее» by default (Alex 13.10: read easier), the menu switches 1 / 1.12 / 1.24; cards scale their text by --fs-card */
  --fs: 1.12; --fs-card: 1.08;
  --ink-0: #050407;
  --ink-1: #0c0a11;
  --ink-2: #14111b;
  --ink-3: #1d1827;
  --line: rgba(244, 244, 239, 0.1);
  --line-2: rgba(244, 244, 239, 0.2);
  --paper: #f4f4ef;
  --paper-2: #c9c6cf;
  --muted: #7d7887;
  --red: #bf0909;
  --red-hot: #ff2b3c;
  --red-deep: #5a0710;
  --violet: #7b55ad;
  --violet-hot: #a77bff;
  --violet-deep: #2a1d44;
  --cyan: #1fb6d1;
  --cyan-deep: #0b4651;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --brand: 'AIM Brand', 'JetBrains Mono', monospace;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --card-w: 168px;
  --card-h: 236px;
  /* one hue per station, the same on cards, pads and charts */
  --st-signal: #1fb6d1;
  --st-context: #6f86ff;
  --st-decision: #a77bff;
  --st-delivery: #ff2b3c;
  --st-retro: #e9e4d6;
  /* run progress: 0 at the first node, 1 at the boss (set by main.js) */
  --heat: 0;
  --t-fast: .16s;
  --t-mid: .26s;
}
.st-signal { --stc: var(--st-signal); }
.st-context { --stc: var(--st-context); }
.st-decision { --stc: var(--st-decision); }
.st-delivery { --stc: var(--st-delivery); }
.st-retro { --stc: var(--st-retro); }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--ink-0); color: var(--paper); font-family: var(--mono); font-size: calc(14px * var(--fs)); -webkit-font-smoothing: antialiased; }
body { overflow: hidden; user-select: none; -webkit-user-select: none; }
button { font: inherit; color: inherit; }
::selection { background: var(--violet); color: var(--paper); }

.glyph-field { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.vignette { position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background:
    radial-gradient(120% 90% at 50% 45%, transparent 40%, rgba(5, 4, 7, 0.85) 100%),
    linear-gradient(180deg, rgba(42, 29, 68, 0.25), transparent 30%, transparent 70%, rgba(90, 7, 16, 0.18));
}
.scanlines { position: fixed; inset: 0; pointer-events: none; z-index: 50; opacity: .22; mix-blend-mode: overlay;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 3px); }

.brace { color: var(--muted); }
.brace b { color: var(--paper); font-weight: 500; }
.tag { display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px; border: 1px solid var(--line-2); font-size: calc(10px * var(--fs)); letter-spacing: .06em; text-transform: uppercase; color: var(--paper-2); }

.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 22px; background: var(--ink-2); border: 1px solid var(--line-2); color: var(--paper); cursor: pointer; letter-spacing: .08em; text-transform: lowercase; transition: background .18s var(--ease), border-color .18s, transform .12s; }
.btn:hover { background: var(--ink-3); border-color: var(--paper-2); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--red); border-color: var(--red-hot); box-shadow: 0 0 0 1px rgba(255,43,60,.25), 0 10px 30px -10px rgba(191,9,9,.7); }
.btn.primary:hover { background: #d40f12; }
.btn.danger { border-color: var(--red-hot); color: var(--paper); }
.btn.danger:hover { background: rgba(255,43,60,.18); }
.btn.violet { background: var(--violet-deep); border-color: var(--violet-hot); }
.btn:disabled { opacity: .35; cursor: default; pointer-events: none; }
.btn kbd { font-size: calc(10px * var(--fs)); padding: 1px 5px; border: 1px solid currentColor; opacity: .6; }

/* Reduced motion: no loops, no drift, state changes land instantly. Glitch stays a single frame. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .scanlines { display: none; }
}

/* v0.4 «сумерки», the default: a lighter field behind dark cards and panels, softer vignette, clearer secondary text.
   «ночь» (menu → тёмная тема) keeps the first look. */
html[data-text="normal"] { --fs: 1; --fs-card: 1; }
html[data-text="big"] { --fs: 1.24; --fs-card: 1.16; }
html[data-theme="dusk"] { --muted: #948ea2; --paper-2: #d6d2dc; --line: rgba(244, 244, 239, 0.13); --line-2: rgba(244, 244, 239, 0.24); }
html[data-theme="dusk"], html[data-theme="dusk"] body { background: #2a2338; }
html[data-theme="dusk"] body { background: radial-gradient(120% 90% at 50% 40%, #41365a 0%, #322a46 50%, #241e33 100%) fixed; }
html[data-theme="dusk"] .vignette { background:
    radial-gradient(130% 100% at 50% 45%, transparent 55%, rgba(10, 8, 15, 0.45) 100%),
    linear-gradient(180deg, rgba(123, 85, 173, 0.16), transparent 30%, transparent 70%, rgba(191, 9, 9, 0.08)); }
html[data-theme="dusk"] .glyph-field { opacity: .8; }
html[data-theme="dusk"] .scanlines { opacity: .12; }
/* a phone held upright (web/src/ui/fit.js): one plate at the bottom, shown only while the phone is upright */
.upright-plate { display: none; }
html.upright-phone .upright-plate { display: flex; align-items: center; gap: 14px; position: fixed; left: 24px; right: 24px; bottom: 24px; z-index: 600; padding: 22px 26px; font-size: 34px; color: var(--paper); background: rgba(20, 15, 30, .96); border: 2px solid var(--violet-hot); box-shadow: 0 20px 60px rgba(0,0,0,.6); }
html.upright-phone .upright-plate span { font-size: 54px; color: var(--violet-hot); }
html.upright-phone .upright-plate button { margin-left: auto; background: none; border: 2px solid var(--line); color: var(--paper); font-size: 40px; width: 64px; height: 64px; cursor: pointer; }