/* Вид GameOS — дизайн-система. Один файл, два экрана, одна рука.

   Собран 23.08.2026 по просьбе владельца: «супер современный хай-тек»,
   с логикой каждого решения. Направление выбиралось по двум скиллам —
   UI/UX Pro Max (101k★, стиль «HUD / Sci-Fi FUI»: тонкие линии 1px,
   свечение, моноширинные данные, стекло) и frontend-design от Anthropic
   (одна подпись, остальное тихо; не брать шрифты-умолчания; причина
   у каждого выбора).

   ## Подпись вида — лепесток
   Единственная смелая вещь: новая ветка растёт прямо из узла на карте,
   светящимся стеблем, и пишется на месте. Всё остальное — тихо: стекло,
   линии, свет по краю. Chanel: перед выходом снять одно украшение.

   ## Цвет
   Четыре цвета контуров НЕ тронуты — они значат сферу (канон VID.md §1).
   Новый акцент один: ионный циан #5CE1FF — «система говорит». Он ставится
   на фокус, выбранный узел, связь и живые числа, и больше никуда.
   Фон ушёл из чёрно-серого в сине-чёрный: глубина читается как объём,
   а не как выключенный экран. Контраст всех текстов ≥ 4.9:1 на самом
   светлом слое — посчитано дозором, не глазом.

   ## Шрифт
   Unbounded — заголовки экранов и знак; широкий геометрический, с кириллицей,
   и ни один ИИ-макет 2026 года на нём не стоит. Manrope — весь текст:
   ровный, с кириллицей, читается при 13px. JetBrains Mono — числа и id:
   табличные цифры, столбцы не дрожат (VID.md §4).
   Шрифты с Google с `display=swap`: не приехали — остаётся system-ui,
   и экран не ждёт.

   ## Движение
   Вход 280–320 мс ease-out, выход быстрее — 160 мс. Дыхание и искры —
   только там, где они несут смысл (мозг: граф живой). `prefers-reduced-motion`
   выключает всё необязательное разом. */

@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@500;600;700&family=Manrope:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  /* фон: три слоя, от глубины к стеклу */
  --fon:#070A12; --sloy:#0E1320; --sloy2:#141B2C; --kray:#24304A;
  --steklo:rgba(14,19,32,.72); --steklo2:rgba(20,27,44,.78);
  --kray-svet:rgba(92,225,255,.22);
  /* текст: четыре ступени, все ≥ 4.9:1 на #141B2C */
  --tekst:#EAF0FB; --tekst1:#C6D0E3; --tekst2:#9FACC6; --tekst3:#7C8AA8;
  /* контуры — значат сферу, не трогать */
  --delo:#f0a500; --telo:#35c07a; --lyudi:#f4665f; --duh:#8b7bf0;
  /* акцент системы: один */
  --ion:#5CE1FF; --ion-dim:#49B8D6; --ion-glow:rgba(92,225,255,.35);
  --zhdet:#f0a500; --tiho:#3a4150; --svyaz:#8B7BF0;
  --r:14px; --r2:10px;
  /* типографическая шкала в rem — слушается системы (VID.md §3) */
  --t-krupno:1.25rem; --t-zag:1.0625rem; --t-telo:0.9375rem;
  --t-melko:0.8125rem; --t-podpis:0.75rem;
  --f-display:"Unbounded",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-body:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --ten:0 18px 50px rgba(0,0,0,.55), 0 0 0 1px var(--kray);
  --dvizh:280ms cubic-bezier(.2,.8,.2,1);
  --dvizh-vyhod:160ms cubic-bezier(.4,0,1,1);
}

html{background:var(--fon)}
body{
  font-family:var(--f-body);
  background:
    radial-gradient(1200px 700px at 85% -10%, rgba(92,225,255,.07), transparent 60%),
    radial-gradient(900px 600px at -10% 110%, rgba(139,123,240,.08), transparent 60%),
    var(--fon);
  color:var(--tekst);
}

/* сетка HUD: едва видна, задаёт глубину; на слабых машинах — это один слой */
.hud-setka{
  background-image:
    linear-gradient(rgba(92,225,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(92,225,255,.035) 1px, transparent 1px);
  background-size:48px 48px;
}

/* ---- знак и заголовки ---- */
.znak, .zag-ekrana{font-family:var(--f-display);letter-spacing:-.01em}
.mono, .podtverzhdaet, .smeta, .chisla{font-family:var(--f-mono);font-variant-numeric:tabular-nums}

/* ---- кнопки: четыре веса, один язык ---- */
.kn, button{
  font-family:var(--f-body);font-size:var(--t-melko);font-weight:600;
  background:var(--steklo2);color:var(--tekst1);
  border:1px solid var(--kray);border-radius:var(--r2);padding:7px 12px;cursor:pointer;
  transition:border-color var(--dvizh), background var(--dvizh), color var(--dvizh), box-shadow var(--dvizh);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
button:hover{border-color:var(--ion-dim);color:var(--tekst)}
button.glav{background:linear-gradient(135deg,#5CE1FF 0%,#8B7BF0 100%);color:var(--fon);border-color:transparent;
  box-shadow:0 6px 22px rgba(92,225,255,.22)}
button.glav:hover{filter:brightness(1.08)}
button.tihiy{background:none;border-color:transparent;color:var(--tekst3);font-weight:500}
button.tihiy:hover{color:var(--tekst1);background:rgba(255,255,255,.04)}
button[aria-pressed="true"]{border-color:var(--ion);color:var(--tekst);
  box-shadow:inset 0 0 0 1px var(--ion-glow), 0 0 18px rgba(92,225,255,.12)}
button:disabled{opacity:.45;cursor:default}
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,a:focus-visible{
  outline:2px solid var(--ion);outline-offset:2px}

/* ---- поля ---- */
input,textarea,select{
  font-family:var(--f-body);font-size:var(--t-melko);color:var(--tekst);
  background:rgba(7,10,18,.8);border:1px solid var(--kray);border-radius:var(--r2);padding:8px 11px;
  transition:border-color var(--dvizh), box-shadow var(--dvizh);
}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--ion-dim);box-shadow:0 0 0 3px rgba(92,225,255,.12)}
::placeholder{color:var(--tekst3)}

/* ---- стекло ---- */
.steklo{background:var(--steklo);border:1px solid var(--kray);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2)}
.kray-svet{border-color:var(--kray-svet)}

/* ---- уголки HUD у выбранного: форма, не цвет (VID.md §2) ---- */
.ugolki{position:relative}
.ugolki::before,.ugolki::after{content:"";position:absolute;width:10px;height:10px;border:1.5px solid var(--ion);opacity:.9}
.ugolki::before{left:-4px;top:-4px;border-right:none;border-bottom:none}
.ugolki::after{right:-4px;bottom:-4px;border-left:none;border-top:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:0.01ms !important;animation-duration:0.01ms !important;animation-iteration-count:1 !important}
}