/* ─────────────────────────────────────────────────────────────────────────────
   Airena UI Kit — общий слой для всех экранов.

   Источник истины по внешнему виду: боевой HUD вьювера
   (src/viewer/index.html + hud-skin.js) и его макет preview/arena.html —
   они прошли ручное поэлементное ревью (SPEC §10.6). Всё, что здесь есть,
   либо скопировано оттуда дословно, либо выведено из тех же токенов.

   Правило расхождения: расходиться с эталоном можно осознанно, но не по
   незнанию. Каждый блок ниже помечен: [эталон] — перенос, [новое] — то,
   чего в боевом HUD нет, потому что там не было такого случая.
   ────────────────────────────────────────────────────────────────────────── */

/* ── шрифты [новое, вынужденно] ──────────────────────────────────────────────
   Эталонный HUD набран Rajdhani (§10.6), и это работало ровно до того момента,
   когда язык продукта стал русским: у Rajdhani в Google Fonts подмножества
   latin, latin-ext, devanagari, vietnamese — КИРИЛЛИЦЫ НЕТ. Проверено запросом
   к fonts.googleapis.com 29.08: ни одного блока с U+0400-045F. Русский текст
   молча уезжал бы в системный sans, рядом с цифрами, набранными Rajdhani.

   Замена выбрана визуально, а не по описанию: семь гарнитур с кириллицей
   поставлены рядом на настоящем HUD (имена, клок, чипы кулдаунов, лента) и
   сравнены с эталоном. Tektur — единственная, которая держит характер
   Rajdhani: квадратные плечи, техническая цифра, узкий капс. Exo 2 взята
   на бегущий текст, где Tektur становится тесной.

   Обе — вариативные, обе лежат у нас (F6: сторонний домен в критическом пути
   первого кадра — это лишний DNS + TLS + два round-trip). 84 КБ на четыре
   файла, все веса 400-700. */
@font-face {
  font-family: 'Tektur'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('/fonts/tektur-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Tektur'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('/fonts/tektur-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Exo2'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('/fonts/exo2-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Exo2'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('/fonts/exo2-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── токены [эталон] ─────────────────────────────────────────────────────── */
:root {
  /* Тема тёмная: светлый вариант отменён решением основателя, вернулись к
     эталону UIKit. Одна роль на сторону — циан и оранж снова светящиеся. */
  --oct: #4fc8dc;
  --gor: #e2904e;
  --ink: #e8f1f7;
  --dim: #93a5b4;
  --name-cy: #74c6d4;
  --name-or: #cf854a;
  --red: #e04c3c;
  --panel: rgba(10, 18, 28, .18);
  --shadow: rgba(8, 15, 24, .5);

  /* [новое] — фоны страниц вне арены. Взяты из body вьювера (#0d0f14)
     и uikit (#10151f): экран-документ чуть светлее экрана-сцены. */
  --bg-scene: #0d0f14;
  --bg-page: #10151f;
  --bg-cell: #151b28;
  --line: #232c3c;

  /* [новое] — семантика состояний. Красный уже есть в эталоне (телеграф),
     зелёного в эталоне нет намеренно: победа красится циан/оранжем бойца. */
  --ok: #6fd0a0;
  --warn: #e0b34c;
  --bad: var(--red);

  /* Дисплейная — на всё, что кричит: имена, клок, капс, цифры, кнопки.
     Текстовая — на всё, что читают: карточка тактики, «не вошло», журнал. */
  --font-display: 'Tektur', 'Rajdhani', ui-monospace, sans-serif;
  --font-body: 'Exo2', 'Rajdhani', system-ui, sans-serif;
}

/* ── ритм и шкала [новое, этап 5] ────────────────────────────────────────────
   «Меньше плашек, меньше модалок, современный UI/UX, а не из 2020-го», и как
   ориентир — No Man's Sky. Что оттуда берётся и почему:

   ОДНА ПОВЕРХНОСТЬ. В NMS интерфейс лежит НА мире одним стеклом: внутри него
   больше нет коробок, только линии и воздух. У нас было наоборот — плашка в
   плашке в плашке, и каждая со своей рамкой и заливкой. Рамка — самый дорогой
   способ сказать «это отдельная вещь»; расстояние говорит то же самое даром.

   ЛИНИЯ ВМЕСТО КОРОБКИ. Заголовок раздела уводит вправо тонкую линию, и она
   же разделяет. Коробка при этом не нужна вовсе.

   ВЫБОР — ПОЛОСА, А НЕ ЗАЛИВКА. Выбранное отмечается акцентной полосой слева
   и яркостью текста. Заливка выбранного превращает список в набор кнопок и
   съедает контраст, ради которого выбор и делается.

   ШКАЛА. Отступы и кегли берутся из двух рядов ниже, а не назначаются на
   глаз в каждом месте. Ряд отступов геометрический (×1.6): соседние ступени
   различимы, но не спорят.

   ЧТО НЕ БЕРЁТСЯ ИЗ NMS: тёмно-синяя палитра оттуда — у нас своя (§10.6), и
   она утверждена вручную; и диегетические 3D-элементы — у нас за интерфейсом
   идёт настоящий бой, и объём поверх объёма читается хуже плоского. */
:root {
  --s1: 4px;   --s2: 7px;   --s3: 11px;  --s4: 18px;
  --s5: 29px;  --s6: 46px;  --s7: 74px;

  --t-hero: 34px;  --t-head: 15px;  --t-body: 14.5px;
  --t-label: 11px; --t-num: 26px;
}

/* Кавычки — русские ёлочки: браузер по умолчанию ставит английские лапки, и
   реплика существа выглядела бы иностранной цитатой. */
q { quotes: '«' '»' '„' '“'; }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg-page);
}

body {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* ── типографика [эталон] ────────────────────────────────────────────────── */
.t-name {
  font-size: 21px; font-weight: 500; letter-spacing: .1em;
  text-transform: uppercase; line-height: 1.1; color: var(--name-cy);
  text-shadow: 0 0 16px rgba(95, 180, 200, .35), 0 0 5px rgba(95, 180, 200, .2);
}
.t-name.or { color: var(--name-or); text-shadow: 0 0 16px rgba(210, 140, 75, .32), 0 0 5px rgba(210, 140, 75, .2); }
.t-name.big { font-size: 30px; }

.t-num {
  font-size: 44px; font-weight: 600; letter-spacing: .04em; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.t-sub { font-size: 11px; font-weight: 500; letter-spacing: .06em; color: var(--dim); }
.t-cap {
  font-size: 12px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--dim);
}
.t-body { font-family: var(--font-body); font-size: 14.5px; line-height: 1.5; color: var(--dim); }
.t-mono { font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; }
.t-stat { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--oct); }

/* Заголовок-гребёнка [эталон: .hcut вьювера] */
.hcut {
  position: relative; display: flex; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 600; letter-spacing: .16em; color: var(--oct);
  white-space: nowrap; text-transform: uppercase;
}
.hcut::before { content: "//"; letter-spacing: .05em; color: rgba(116, 180, 198, .85); }
.hcut svg { position: absolute; left: 0; top: 0; width: 400px; height: 40px; pointer-events: none; }
.hunder {
  width: 236px; height: 1px; margin-top: 8px;
  background: linear-gradient(90deg, rgba(127, 210, 226, .5) 0 62%, rgba(127, 210, 226, .18));
}

/* ── панель [эталон: #legend вьювера] ────────────────────────────────────── */
.panel { position: relative; }
.panel > .bg {
  position: absolute; inset: 0; background: var(--panel);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
}
.panel > .fr {
  position: absolute; inset: 0; pointer-events: none;
  background-image: var(--wf, none); background-size: 100% 100%;
}
.panel > .in { position: relative; padding: 17px 22px; }
/* Тень-подложка: не рамка, а вес. [эталон: #legend::before] */
.panel.lift::before {
  content: ""; position: absolute; inset: -12px -14px; z-index: -1;
  background: rgba(8, 15, 24, .42); border-radius: 18px; filter: blur(20px);
}
.panel .prow {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 11px 0 0; gap: 18px;
}
.panel .k {
  font-size: 13.5px; font-weight: 500; letter-spacing: .08em;
  color: var(--dim); text-transform: uppercase;
}
.panel .v { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--oct); }

/* ── HP-бар [эталон, 1:1 из вьювера] ─────────────────────────────────────── */
.hp { position: relative; width: 330px; height: 16px; }
.hp::before {
  content: ""; position: absolute; inset: 0;
  clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
  background: var(--panel);
}
.hp.mir::before { clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 100%, 5px 100%); }
.hp > i {
  position: absolute; inset: 0 auto 0 0; display: block; transition: width .12s linear;
  clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
  background-image: linear-gradient(90deg,
    #5896a8 0, #5896a8 66px, #68aabc 66px, #68aabc 132px,
    #76bed0 132px, #76bed0 198px, #82cee2 198px, #82cee2 264px,
    #8cdbef 264px, #8cdbef 330px);
  background-size: 330px 100%; background-position: left center; background-repeat: no-repeat;
  filter: drop-shadow(0 0 5px rgba(110, 205, 228, .5));
}
.hp.mir > i {
  left: auto; right: 0;
  clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 100%, 5px 100%);
  background-image: linear-gradient(90deg,
    #e28642 0, #e28642 66px, #d47b3d 66px, #d47b3d 132px,
    #c26f38 132px, #c26f38 198px, #ac6231 198px, #ac6231 264px,
    #965429 264px, #965429 330px);
  background-position: right center;
  filter: drop-shadow(0 0 5px rgba(226, 140, 70, .45));
}
.hp::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--wf, none); background-size: 100% 100%;
}

/* ── плитка / слот [эталон: .cd, .slot] ──────────────────────────────────── */
.cd {
  position: relative; min-width: 52px; height: 34px; padding: 2px 9px 0;
  display: grid; place-items: center; border-radius: 3px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  background: var(--panel); background-image: var(--wf, none); background-size: 100% 100%;
}
.cd.cy { color: var(--oct); }
.cd.or { color: var(--gor); }
.cd.cool { color: var(--dim); opacity: .75; }
.slot {
  position: relative; width: 50px; height: 50px; display: grid; place-items: center;
  border-radius: 3px; background: var(--panel);
  background-image: var(--wf, none); background-size: 100% 100%;
}
.slot svg { width: 29px; height: 29px; fill: #7fd0dd; opacity: .92; }

/* ── контролы [эталон: #controls вьювера] ────────────────────────────────── */
.btn {
  font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: .05em;
  color: var(--ink); background: rgba(16, 26, 38, .8);
  border: 1px solid rgba(120, 180, 205, .28); padding: 5px 9px;
  cursor: pointer; white-space: nowrap;
}
.btn:hover:not(:disabled) { border-color: rgba(120, 200, 225, .55); }
.btn:disabled { opacity: .42; cursor: not-allowed; }
.btn.accent { color: var(--oct); border-color: rgba(79, 200, 220, .5); }
/* [новое] — главное действие экрана. В боевом HUD такого нет: там всё
   второстепенное. Здесь экран обязан иметь одно главное действие (§10.3). */
.btn.primary {
  font-size: 15px; letter-spacing: .14em; text-transform: uppercase;
  padding: 12px 26px; color: #0d1219;
  background: linear-gradient(180deg, #a8e6f2, #63c3d6);
  border: 1px solid rgba(160, 230, 245, .8);
  box-shadow: 0 0 22px rgba(79, 200, 220, .22);
}
.btn.primary:hover:not(:disabled) { background: linear-gradient(180deg, #bdeef8, #74d0e2); }
.btn.ghost { background: transparent; border-color: rgba(120, 180, 205, .22); color: var(--dim); }
.btn.big { font-size: 14px; padding: 9px 18px; letter-spacing: .1em; text-transform: uppercase; }

.field {
  font-family: var(--font-body); font-size: 15px; font-weight: 500; color: var(--ink);
  background: rgba(8, 14, 22, .6); border: 1px solid rgba(120, 180, 205, .28);
  padding: 10px 14px; width: 100%; resize: vertical; line-height: 1.5;
}
.field:focus { outline: none; border-color: rgba(79, 200, 220, .55); }
.field::placeholder { color: var(--dim); }

label {
  font-size: 11px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--dim); white-space: nowrap;
}

/* ── лента событий [эталон: #feed] ───────────────────────────────────────── */
.feedrow {
  display: grid; grid-template-columns: 46px 1fr auto; gap: 10px;
  align-items: baseline; font-size: 14px; letter-spacing: .04em; color: var(--ink);
}
.feedrow .tm { font-variant-numeric: tabular-nums; color: var(--dim); }
.feedrow .who { font-weight: 500; letter-spacing: .05em; color: var(--oct); }
.feedrow .who.or { color: var(--gor); }

/* ── банер [эталон: #banner .box] ────────────────────────────────────────── */
.banner {
  text-align: center; background: rgba(8, 14, 22, .85);
  border: 1px solid rgba(120, 180, 205, .25); padding: 20px 44px; display: inline-block;
}
.banner .who {
  font-size: 38px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--oct);
}
.banner .why {
  font-size: 12px; color: var(--dim); letter-spacing: .26em;
  text-transform: uppercase; margin-top: 8px;
}

/* ── реплика мозга [эталон: .say] ──────────────────────────────────────────
   Только чип: рамка и цвет. Позиционирование пузыря над телом живёт в
   app.css под своим именем `.saybubble` — эти два никогда не должны
   называться одинаково, потому что один лежит в мире, а другой в тексте. */
.say {
  display: inline-block; background: rgba(10, 17, 26, .88);
  border: 1px solid var(--oct); color: var(--oct);
  padding: 3px 10px; font-size: 12.5px; font-weight: 600; letter-spacing: .04em;
}
.say.or { border-color: var(--gor); color: var(--gor); }

/* ── виньетка [эталон] ───────────────────────────────────────────────────── */
.vignette {
  position: fixed; inset: 0; pointer-events: none; z-index: 5;
  background:
    radial-gradient(120% 90% at 50% 42%, transparent 52%, rgba(3, 7, 13, .42) 100%),
    linear-gradient(to bottom, rgba(6, 12, 20, .32) 0%, transparent 13%),
    linear-gradient(to top, rgba(4, 9, 16, .45) 0%, transparent 14%);
}

/* ═════════════════════════════════════════════════════════════════════════
   [новое] — то, чего в боевом HUD нет, потому что там не было этих случаев.
   ═════════════════════════════════════════════════════════════════════════ */

/* Оболочка страницы-документа: существо, лестница, создание. */
.sheet { max-width: 1100px; margin: 0 auto; padding: 28px 30px 90px; }
.sheet.narrow { max-width: 720px; }

/* Ряд метрик — «панель статов» вьювера, разложенная в строку. */
.stats { display: flex; flex-wrap: wrap; gap: 26px; }
.stat { display: flex; flex-direction: column; gap: 3px; }
.stat .v { font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); line-height: 1; }
.stat .k { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.stat.up .v { color: var(--ok); }
.stat.down .v { color: var(--bad); }

/* Строка таблицы. Таблица строится от игрока (§10.4), поэтому это не «список
   мест», а ряд карточек-строк с явной подсветкой своей. */
.trow {
  display: grid; align-items: center; gap: 14px;
  grid-template-columns: 54px 1fr 92px 78px 96px;
  padding: 9px 14px; border-left: 2px solid transparent;
  font-size: 14px;
}
.trow + .trow { border-top: 1px solid rgba(35, 44, 60, .7); }
.trow .rank { font-variant-numeric: tabular-nums; color: var(--dim); font-weight: 600; }
.trow.me { background: rgba(79, 200, 220, .07); border-left-color: var(--oct); }
.trow.me .nm { color: var(--oct); }
.trow .nm { letter-spacing: .06em; text-transform: uppercase; font-weight: 500; color: var(--ink); }
.trow .num { font-variant-numeric: tabular-nums; text-align: right; color: var(--dim); }
.trow.head { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); border-left-color: transparent; }
.trow.head .num { text-align: right; }

/* Бейдж: топ-100, тренировочный соперник, «не вошло». */
.badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px;
  font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  border: 1px solid rgba(120, 180, 205, .3); color: var(--oct); background: rgba(10, 18, 28, .5);
}
.badge.warn { border-color: rgba(224, 179, 76, .45); color: var(--warn); }
.badge.bad { border-color: rgba(224, 76, 60, .45); color: var(--bad); }
.badge.ok { border-color: rgba(111, 208, 160, .4); color: var(--ok); }

/* Чип атома скилла. */
.atom {
  display: inline-block; padding: 2px 8px; font-size: 12px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid rgba(120, 180, 205, .26); color: var(--dim); background: rgba(10, 18, 28, .45);
}
.atom.trig { border-color: rgba(224, 179, 76, .4); color: var(--warn); }
.atom.deliv { border-color: rgba(79, 200, 220, .42); color: var(--oct); }
.atom.eff { border-color: rgba(226, 144, 78, .42); color: var(--gor); }
.atom.chan { border-color: rgba(160, 140, 220, .42); color: #b3a6e0; }
.atom.elem { border-color: rgba(150, 175, 195, .35); color: var(--oct); }

/* Полоса прогресса генерации. Не спиннер — §10.3 запрещает спиннер. */
.prog { position: relative; height: 3px; background: rgba(10, 18, 28, .7); overflow: hidden; }
.prog > i {
  display: block; height: 100%; background: linear-gradient(90deg, var(--oct), #8cdbef);
  box-shadow: 0 0 10px rgba(110, 205, 228, .6); transition: width .4s ease;
}
.prog.pulse > i { animation: prog-pulse 2.4s ease-in-out infinite; }
@keyframes prog-pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* Кольцо «существо ищет бой» вокруг главной кнопки (§6.2). */
.seeking { position: relative; display: inline-block; }
.seeking::after {
  content: ""; position: absolute; inset: -7px; pointer-events: none;
  border: 1px solid rgba(79, 200, 220, .34);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
  animation: seek 2.6s linear infinite;
}
@keyframes seek { 0%, 100% { opacity: .28; } 50% { opacity: .9; } }

/* Пустое состояние. Всегда объясняет причину и даёт следующий шаг. */
.empty { padding: 44px 20px; text-align: center; color: var(--dim); }
.empty .hd { font-size: 16px; letter-spacing: .12em; text-transform: uppercase; color: var(--oct); margin-bottom: 8px; }

/* Скелет загрузки — вместо спиннера. */
.skel { background: linear-gradient(90deg, #182031 25%, #1f2938 37%, #182031 63%); background-size: 400% 100%; animation: skel 1.4s ease infinite; }
@keyframes skel { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

@media (prefers-reduced-motion: reduce) {
  .prog.pulse > i, .seeking::after, .skel { animation: none; }
}

/* Ссылка-действие внутри текста. */
.lnk { color: var(--oct); cursor: pointer; border-bottom: 1px dotted rgba(127, 214, 230, .5); }
.lnk:hover { color: #a8e8f5; }

.row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.col { display: flex; flex-direction: column; }
.gap6 { gap: 6px; } .gap10 { gap: 10px; } .gap18 { gap: 18px; } .gap28 { gap: 28px; }
.grow { flex: 1; }
.mut { color: var(--dim); }
.hidden { display: none !important; }

/*
 * Полоса бюджета набора.
 *
 * Правило, по которому идёт вся сборка, до этого нигде не показывалось:
 * потолок в 52 очка игрок узнавал единственным способом — получив отказ на
 * «применить». Полоса делает потолок видимым во время правки, а не после неё.
 */
.budget { margin-top: 14px; }
.budget .bar {
  height: 3px; background: var(--line); overflow: hidden;
}
.budget .fill {
  height: 100%; background: var(--oct); transition: width .18s ease-out;
}
.budget .t-sub { margin-top: 6px; font-variant-numeric: tabular-nums; }
.budget.over .fill { background: var(--bad); }
.budget.over .t-sub { color: var(--bad); }

/* ═══ ЭТАП 5: ЯЗЫК ЭКРАНОВ ═══════════════════════════════════════════════════
   Всё ниже относится к ЭКРАНАМ и не трогает боевой HUD: он утверждён вручную
   (§10.6), и основатель отдельно сказал, что в арене во время боя было хорошо.
   Граница проходит по селекторам: здесь только то, что живёт внутри `#screen`.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Заголовок раздела: метка и уводящая вправо линия. Коробка не нужна. */
#screen .hcut {
  font-size: var(--t-head); letter-spacing: .22em; font-weight: 500;
  margin: 0 0 var(--s4);
}
#screen .hcut::after {
  content: ""; flex: 1; height: 1px; margin-left: var(--s3);
  background: linear-gradient(90deg, rgba(127, 210, 226, .34), rgba(127, 210, 226, 0));
}

/*
 * Мера строки. Длинная строка читается плохо не из-за длины, а из-за возврата:
 * глаз теряет начало следующей. 68 знаков — верх диапазона, ниже которого он
 * не теряется; заголовкам мера не нужна, они короткие по природе.
 *
 * Ставится на текст, а не на контейнер: контейнер держит таблицы и ряды, а им
 * мера мешает.
 */
#screen .t-body, #screen .t-sub, #screen .say, #screen .why { max-width: 68ch; }
#screen .t-body { font-size: var(--t-body); line-height: 1.55; }

/* Раздел — это воздух и линия сверху, а не рамка. */
#screen .section { margin-top: var(--s6); }
#screen .section + .section { padding-top: var(--s6); border-top: 1px solid rgba(127, 210, 226, .10); }

/*
 * ВЫБОР. Полоса слева и яркость текста; заливки и рамки нет.
 *
 * Три пресета набора стояли тремя обведёнными коробками в ряд — то есть
 * читались как три кнопки одинакового веса. Выбор среди них не был виден до
 * наведения, потому что все три уже выглядели «нажатыми».
 */
#screen .cards { display: flex; flex-direction: column; gap: 0; }
#screen .card {
  position: relative; flex: none; min-width: 0; cursor: pointer;
  background: none; border: none; border-left: 2px solid transparent;
  padding: var(--s4) 0 var(--s4) var(--s4);
  transition: border-color .18s ease, background .18s ease;
}
#screen .card + .card { border-top: 1px solid rgba(127, 210, 226, .08); }
#screen .card:hover { border-left-color: rgba(127, 210, 226, .35); }
#screen .card.on {
  border-left-color: var(--oct);
  background: linear-gradient(90deg, rgba(79, 200, 220, .07), transparent 62%);
}
#screen .card .hd {
  font-size: var(--t-head); letter-spacing: .14em; font-weight: 500;
  color: var(--dim); transition: color .18s ease;
}
#screen .card.on .hd { color: var(--oct); }
#screen .card .why { margin-top: var(--s1); font-size: 13px; }
#screen .card .atoms { margin-top: var(--s3); }
#screen .card .say, #screen .cards .say { margin-top: var(--s3); max-width: 62ch; }

/*
 * Атом — метка, а не кнопка. В NMS такие штуки набраны текстом с тонкой
 * подчёркивающей линией: рамка вокруг каждого слова превращает строку в
 * пунктирный забор.
 */
#screen .atom {
  border: none; border-bottom: 1px solid rgba(127, 210, 226, .28);
  background: none; padding: 2px 0; margin-right: var(--s3);
  letter-spacing: .1em;
}
#screen .atom.eff { border-bottom-color: rgba(226, 144, 78, .34); }
#screen .atom.chan { border-bottom-color: rgba(160, 140, 220, .34); }
#screen .atom.elem { border-bottom-color: rgba(150, 175, 195, .26); }

/*
 * ОДНА СТЕКЛЯННАЯ ПОВЕРХНОСТЬ вместо вложенных плашек.
 *
 * «Меньше плашек» — не «убрать фон». Первый заход снял его совсем, и текст
 * пошёл читаться сквозь идущий бой: буквы поверх движущихся кубов не читаются
 * вовсе. В NMS панель именно СТЕКЛЯННАЯ — тёмная, с размытием того, что за
 * ней; мир виден, но не спорит.
 *
 * Отсюда три слоя и ни одного лишнего: размытие (мир становится фоном), тёмная
 * заливка (буквам есть на чём стоять), волосяная рамка (у стекла есть край).
 * Внутри — больше ни одной рамки и ни одной заливки.
 */
#screen .overlay-card {
  max-width: 720px; margin: 7vh auto var(--s7);
  padding: var(--s5) var(--s5) var(--s6);
  background: rgba(9, 15, 24, .78);
  backdrop-filter: blur(16px) saturate(.85);
  -webkit-backdrop-filter: blur(16px) saturate(.85);
  border: 1px solid rgba(127, 210, 226, .16);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .5);
}
/*
 * Короткий диалог — узкий.
 *
 * Стена аккаунта это три строки и две кнопки, а стекло под ними было шириной
 * с экран создания. Пустое стекло вокруг короткого текста читается как «тут
 * чего-то не хватает»; ширина панели должна следовать за содержимым, а не за
 * соседней панелью.
 */
#screen .overlay-card.ask { max-width: 480px; }

/* Уголки — вместо толстой рамки: край читается, веса не добавляется. */
#screen .overlay-card::before,
#screen .overlay-card::after {
  content: ""; position: absolute; width: 18px; height: 18px; pointer-events: none;
  border: 1px solid var(--oct); opacity: .55;
}
#screen .overlay-card::before { top: -1px; left: -1px; border-width: 1px 0 0 1px; }
#screen .overlay-card::after { bottom: -1px; right: -1px; border-width: 0 1px 1px 0; }
#screen .overlay-card { position: relative; }

/* Внутренняя панель больше не рисует себя: стекло уже есть снаружи. */
#screen .panel > .bg, #screen .panel > .fr { display: none; }
#screen .panel > .in { padding: 0; }

/* Поле ввода — линия снизу, а не коробка: в стекле коробка в коробке. */
#screen .field {
  background: rgba(0, 0, 0, .22); border: none;
  border-bottom: 1px solid rgba(127, 210, 226, .3);
  padding: var(--s3) var(--s3) var(--s3) 0; font-size: var(--t-body);
}
#screen .field:focus { border-bottom-color: var(--oct); background: rgba(0, 0, 0, .3); }

/*
 * Кнопка-переключатель раздела: подчёркивание, а не коробка.
 *
 * «Лестница / модели / сезон» стояли тремя обведёнными кнопками — тем же
 * весом, что и действие «создать существо». Переключение раздела и поступок
 * не могут выглядеть одинаково: в NMS раздел отмечен линией под словом, а
 * рамка остаётся за действиями.
 */
#screen .btn.sub {
  background: none; border: none; border-bottom: 2px solid transparent;
  padding: var(--s2) 0; margin-right: var(--s4); color: var(--dim);
  letter-spacing: .16em; border-radius: 0;
}
#screen .btn.sub:hover:not(:disabled) { color: var(--oct); border-bottom-color: rgba(127, 210, 226, .35); }
#screen .btn.sub.on { color: var(--oct); border-bottom-color: var(--oct); }

/* Метка «эталон» — это пояснение, а не кнопка: рамку снимаем, оставляем цвет. */
#screen .badge {
  background: none; border: none; border-bottom: 1px solid currentColor;
  padding: 1px 0; margin-left: var(--s2); letter-spacing: .14em; opacity: .8;
}

/* Крупные числа и мелкие подписи — тот же приём, что в панели статов NMS. */
#screen .stat .v { font-size: var(--t-num); font-weight: 500; letter-spacing: .02em; }
#screen .stat .k { font-size: var(--t-label); letter-spacing: .18em; }
#screen .stats { gap: var(--s6); }

/* Появление: содержимое въезжает с малым сдвигом, разделы — по очереди.
   Это единственная анимация на экране и она короче, чем взгляд. */
@keyframes riseIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
#screen.on .section, #screen.on > * > .hcut { animation: riseIn .22s ease both; }
#screen.on .section:nth-child(2) { animation-delay: .04s; }
#screen.on .section:nth-child(3) { animation-delay: .08s; }
#screen.on .section:nth-child(4) { animation-delay: .12s; }
@media (prefers-reduced-motion: reduce) {
  #screen.on .section, #screen.on > * > .hcut { animation: none; }
}

/*
 * Последние две заливки на экранах — строка умения и предупреждение.
 *
 * Обе остались от языка коробок и обе не нужны: строку умения отделяет
 * волосяная линия, предупреждение — цветная полоса слева. Заливка внутри
 * стекла даёт третий слой там, где хватает первого.
 */
#screen .skillrow {
  background: none; border-left: 2px solid rgba(127, 210, 226, .22);
  padding: var(--s4) 0 var(--s4) var(--s4);
}
#screen .skillrow + .skillrow { border-top: 1px solid rgba(127, 210, 226, .08); }
#screen .unfit {
  background: none; border-left: 2px solid var(--warn);
  padding: var(--s3) 0 var(--s3) var(--s4);
}
#screen .note.warn { background: none; border-left: 2px solid var(--warn); padding-left: var(--s4); }

/*
 * Кнопка действия — единственное место, где рамка остаётся.
 *
 * После того как рамки ушли отовсюду, они снова стали значить ровно одно:
 * «здесь можно нажать и что-то произойдёт». Главное действие экрана при этом
 * заполнено, остальные — обведены.
 */
#screen .btn { border-radius: 0; letter-spacing: .1em; padding: var(--s3) var(--s4); }
#screen .btn.primary { padding: var(--s3) var(--s5); }
#screen .row { gap: var(--s3); }

/*
 * ── МЕЛОЧИ, БЕЗ КОТОРЫХ ИНТЕРФЕЙС «НЕ СДЕЛАН» ─────────────────────────────
 *
 * Их не замечают по отдельности и замечают все вместе: строка не отзывается
 * на курсор, фокус не видно с клавиатуры, полоса прокрутки чужая, выделение
 * текста системно-синее поверх бирюзового. Ни одна из них не про красоту —
 * каждая про то, отвечает ли программа на действие.
 */

/* Строка таблицы отзывается — и подсказывает, что по ней можно кликнуть. */
#screen .trow { transition: background .14s ease, border-color .14s ease; }
#screen .trow:hover { background: rgba(127, 210, 226, .05); }

/* Фокус виден ВСЕГДА, а не только у мыши. `:focus-visible`, а не `:focus`:
   обводка при клике мышью — визуальный мусор, при табуляции — необходимость. */
#screen :focus-visible,
#shell :focus-visible {
  outline: 2px solid var(--oct); outline-offset: 2px; border-radius: 1px;
}

/* Полоса прокрутки — часть интерфейса, а не окна. */
* { scrollbar-width: thin; scrollbar-color: rgba(127, 210, 226, .28) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(127, 210, 226, .22); border: 3px solid transparent;
  background-clip: content-box; border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(127, 210, 226, .38); background-clip: content-box; }

/* Выделение — своим цветом: системное синее поверх бирюзового читается как
   ошибка отрисовки. */
::selection { background: rgba(79, 200, 220, .3); color: var(--ink); }

/* Ссылка-действие внутри текста: подчёркивание появляется, а не исчезает. */
#screen .lnk { border-bottom-color: transparent; transition: border-color .14s ease; }
#screen .lnk:hover { border-bottom-color: currentColor; }

/* Курсор говорит правду: то, что кликается, показывает руку; то, что нет, — нет. */
#screen .card, #screen .trow[data-href], #screen .lnk { cursor: pointer; }