/* ===== SCP: Sector-404 — холодный научный стиль ============================
 *
 * Один файл на весь сайт: страницы об игре, новости, лог, кабинет и
 * служебная страница редактора. Характер — «научный отчёт / терминал
 * комплекса»: тёмное поле, линии в 1 px, уголки-скобки, моноширинные метки,
 * заглавные заголовки с разрядкой, сетка и развёртка фоном.
 *
 * Палитра — одна на сайт, меню игры и Discord, и других цветов здесь нет:
 * только эти значения и их прозрачные варианты. Красный — редкий и значимый:
 * опасность, ошибки, «вживую», необратимые действия. Никакого янтаря.
 *
 * Шрифты: JetBrains Mono (метки) и PT Sans Narrow (заголовки) — с Google
 * Fonts, но грузятся не блокируя страницу; без них всё читается системными.
 * Картинок нет: фон, рамки и значки — градиенты и встроенный SVG.
 */

:root{
  /* фон */
  --bg:#05080c;          /* самый тёмный */
  --panel:#0a1119;       /* панели */
  --raised:#101a25;      /* приподнятые */
  /* линии */
  --line:#1c2a38;
  --line2:#2a3d50;
  /* холодный свет — главный акцент */
  --acc:#5cc8ff;
  --acc-hi:#a8e4ff;
  --acc-lo:#2b6f99;
  --glow:rgba(92,200,255,.28);
  /* аварийный красный */
  --red:#ff3340;
  --red-lo:#8f1d25;
  --red-glow:rgba(255,51,64,.35);
  /* текст */
  --tx:#e3eef6;
  --tx2:#9db2c2;
  --tx3:#5f7486;
  /* статусы */
  --ok:#4fe0c8;
  --warn:#ffd166;

  --f-ui:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --f-head:"PT Sans Narrow","Arial Narrow","Roboto Condensed","Helvetica Neue",Arial,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,"Cascadia Mono",Consolas,"DejaVu Sans Mono",Menlo,monospace;

  /* прежние имена — ими пользуются встроенные стили служебной страницы */
  --text:var(--tx);--dim:var(--tx2);--line-hi:var(--line2);
  --ui:var(--f-ui);--mono:var(--f-mono);--pane:rgba(10,17,25,.92);--deep:var(--bg);
}

/* ------------------------------------------------------------ основа */

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{background-color:var(--bg);-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:84px}
body{
  min-height:100vh;color:var(--tx2);font:16px/1.65 var(--f-ui);
  background:transparent;overflow-x:hidden;transition:opacity .18s ease;
  -webkit-font-smoothing:antialiased;
}
/* Пока решается язык первого визита (до 0.9 с), страница не мигает чужим. */
html[data-wait] body{opacity:0}

/* Два языка в одной разметке: видно только выбранный. Без скрипта
   (атрибута data-lang нет) показываются оба — текст не теряется. */
html[data-lang="ru"] [lang="en"],
html[data-lang="en"] [lang="ru"]{display:none!important}

/* Фон: сетка комплекса, холодное свечение сверху, развёртка строк. Лежит на
   html и прокручивается вместе со страницей: так он покрывает её целиком и не
   заставляет телефон перерисовывать неподвижный слой на каждом кадре. */
html{
  background:
    repeating-linear-gradient(180deg,rgba(92,200,255,.022) 0 1px,transparent 1px 3px),
    radial-gradient(900px 520px at 78% 0,rgba(92,200,255,.11),transparent 62%),
    radial-gradient(760px 520px at -6% 420px,rgba(43,111,153,.10),transparent 60%),
    linear-gradient(rgba(28,42,56,.34) 1px,transparent 1px) 0 0/44px 44px,
    linear-gradient(90deg,rgba(28,42,56,.34) 1px,transparent 1px) 0 0/44px 44px,
    var(--bg);
}

img,svg{max-width:100%}
a{color:var(--acc);text-decoration:none;text-underline-offset:3px;overflow-wrap:anywhere}
a:hover{color:var(--acc-hi);text-decoration:underline}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
::selection{background:rgba(92,200,255,.28);color:var(--tx)}
b,strong{color:var(--tx);font-weight:600}
[hidden]{display:none!important}

.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 28px}
.wrap.narrow{max-width:780px}
.wrap.wide{max-width:980px}
main{display:block;padding-bottom:40px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.ic{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:square;vertical-align:-3px}
.ic.fill{fill:currentColor;stroke:none}

/* ------------------------------------------------------------ шрифты */

h1,h2,h3,h4{color:var(--tx);font-family:var(--f-head);font-weight:700;text-transform:uppercase;line-height:1.05}
h1{font-size:clamp(40px,6.2vw,80px);letter-spacing:.015em;line-height:.96;text-wrap:balance}
h1 em,h2 em{font-style:normal;color:var(--acc)}
h2{font-size:clamp(28px,3.4vw,40px);letter-spacing:.05em}
h3{font-size:21px;letter-spacing:.06em;line-height:1.15}
h4{font-size:15px;letter-spacing:.12em}
p{max-width:70ch;text-wrap:pretty}
p+p{margin-top:12px}
/* Пары абзацев на двух языках идут подряд: ru, en, ru, en. Скрытый русский
   абзац остаётся соседом, и без этой поправки первый английский получал бы
   лишний отступ сверху, которого нет у русского. */
html[data-lang="en"] p[lang="ru"]+p[lang="en"]{margin-top:0}
html[data-lang="en"] p[lang="en"]+p[lang="ru"]+p[lang="en"]{margin-top:12px}
.lede{font-size:clamp(17px,1.6vw,19px);line-height:1.6;color:var(--tx2);max-width:62ch}
.lede b{color:var(--tx)}
.mono{font-family:var(--f-mono)}

/* моноширинная метка: коды документов, номера, «уровень допуска» */
.lbl{
  display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px 12px;
  font:500 11px/1.5 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--tx3);
}
.lbl b{color:var(--acc);font-weight:500}
.lbl i{font-style:normal;color:var(--line2)}
.kicker{
  display:block;margin-bottom:12px;
  font:500 11.5px/1.5 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--acc);
}
.small{font:12.5px/1.8 var(--f-mono);color:var(--tx2)}
.small b{color:var(--tx);font-weight:600}
.note{font:12px/1.7 var(--f-mono);color:var(--tx3)}
.rule{height:1px;margin:22px 0;background:linear-gradient(90deg,var(--line2),var(--line) 60%,transparent)}

/* ------------------------------------------------------------ панель с уголками */

.panel,.pane{
  position:relative;min-width:0;
  background:linear-gradient(180deg,rgba(16,26,37,.72),rgba(10,17,25,.94) 38%);
  border:1px solid var(--line);padding:24px 26px;
}
.panel::before,.pane::before{
  content:"";position:absolute;inset:-1px;pointer-events:none;--k:var(--acc-lo);
  background:
    linear-gradient(var(--k),var(--k)) 0 0/12px 1px no-repeat,
    linear-gradient(var(--k),var(--k)) 0 0/1px 12px no-repeat,
    linear-gradient(var(--k),var(--k)) 100% 0/12px 1px no-repeat,
    linear-gradient(var(--k),var(--k)) 100% 0/1px 12px no-repeat,
    linear-gradient(var(--k),var(--k)) 0 100%/12px 1px no-repeat,
    linear-gradient(var(--k),var(--k)) 0 100%/1px 12px no-repeat,
    linear-gradient(var(--k),var(--k)) 100% 100%/12px 1px no-repeat,
    linear-gradient(var(--k),var(--k)) 100% 100%/1px 12px no-repeat;
}
.pane.dark,.panel.flat{background:rgba(5,8,12,.86)}
.panel.lift{background:linear-gradient(180deg,rgba(16,26,37,.96),rgba(10,17,25,.96))}
.pane+.pane{margin-top:14px}
a.panel{display:block;color:inherit;text-decoration:none;transition:border-color .15s,box-shadow .15s}
a.panel:hover{border-color:var(--line2);box-shadow:0 0 0 1px rgba(92,200,255,.08),0 18px 40px -24px var(--glow);text-decoration:none}
a.panel:hover::before{--k:var(--acc)}

/* шапка документа внутри панели */
.doc-h{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:4px 14px;
  margin:-24px -26px 20px;padding:9px 16px;border-bottom:1px solid var(--line);
  font:500 10.5px/1.5 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--tx3);
  background:rgba(5,8,12,.45);
}
.doc-h b{color:var(--acc);font-weight:500}

/* ------------------------------------------------------------ кнопки */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;
  padding:12px 20px;border:1px solid var(--acc-lo);border-radius:0;cursor:pointer;
  background:rgba(92,200,255,.07);color:var(--acc-hi);text-decoration:none;
  font:600 12.5px/1.2 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;
  transition:background-color .15s,border-color .15s,box-shadow .15s,color .15s,transform .05s;
  -webkit-tap-highlight-color:transparent;
}
.btn:hover{background:rgba(92,200,255,.14);border-color:var(--acc);color:var(--tx);box-shadow:0 0 22px -4px var(--glow);text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn:disabled,.btn.off{background:transparent;border-color:var(--line);color:var(--tx3);box-shadow:none;cursor:not-allowed}
.btn .ic{width:17px;height:17px}
.btn.ghost{background:rgba(5,8,12,.5);border-color:var(--line2);color:var(--tx)}
.btn.ghost:hover:not(:disabled){border-color:var(--acc);color:var(--acc-hi);background:rgba(92,200,255,.08)}
.btn.solid{background:var(--acc);border-color:var(--acc);color:var(--bg)}
.btn.solid:hover:not(:disabled){background:var(--acc-hi);border-color:var(--acc-hi);color:var(--bg);box-shadow:0 0 30px -2px var(--glow)}
.btn.danger{background:rgba(255,51,64,.05);border-color:var(--red-lo);color:var(--red)}
.btn.danger:hover:not(:disabled){background:rgba(255,51,64,.12);border-color:var(--red);color:var(--red);box-shadow:0 0 24px -4px var(--red-glow)}
.btn.sm{min-height:36px;padding:8px 13px;font-size:11.5px}
.btn.wide{width:100%}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.btns .btn{flex:0 1 auto}

/* Главная кнопка «Играть»: фаска по двум углам, холодное свечение. */
.play{
  position:relative;display:inline-flex;align-items:center;gap:16px;min-height:66px;
  padding:0 34px 0 26px;background:var(--acc);color:var(--bg);text-decoration:none;
  font:700 26px/1 var(--f-head);letter-spacing:.2em;text-transform:uppercase;
  clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px);
  transition:background-color .15s,transform .05s;
}
.play-wrap{display:inline-block;filter:drop-shadow(0 0 18px rgba(92,200,255,.28));transition:filter .2s}
.play-wrap:hover{filter:drop-shadow(0 0 30px rgba(92,200,255,.5))}
.play:hover{background:var(--acc-hi);color:var(--bg);text-decoration:none}
.play:active{transform:translateY(1px)}
.play svg{width:22px;height:22px;fill:currentColor}
.play small{display:block;font:600 10px/1 var(--f-mono);letter-spacing:.18em;opacity:.72;margin-top:6px}

/* Кнопка Discord: официальный знак, цвет текста. */
.btn-dc{gap:12px}
.btn-dc svg{width:22px;height:17px;fill:currentColor;flex:none}

/* ------------------------------------------------------------ метки-статусы */

.chip,.tag{
  display:inline-flex;align-items:center;gap:7px;padding:3px 9px;min-height:22px;
  font:500 10.5px/1.3 var(--f-mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--tx2);border:1px solid var(--line2);background:rgba(5,8,12,.35);white-space:nowrap;
}
.chip.acc,.tag.acc{color:var(--acc-hi);border-color:var(--acc-lo);background:rgba(92,200,255,.07)}
.chip.ok,.tag.ok{color:var(--ok);border-color:rgba(79,224,200,.4);background:rgba(79,224,200,.06)}
.chip.warn,.tag.warn{color:var(--warn);border-color:rgba(255,209,102,.4);background:rgba(255,209,102,.05)}
.chip.red,.tag.red{color:var(--red);border-color:var(--red-lo);background:rgba(255,51,64,.07)}
.chip.dim,.tag.gray{color:var(--tx3);border-color:var(--line)}
.dot{width:7px;height:7px;border-radius:50%;flex:none;background:currentColor;box-shadow:0 0 8px currentColor}
.dot.live{color:var(--red);animation:live 1.6s ease-in-out infinite}
@keyframes live{50%{opacity:.35;box-shadow:0 0 2px currentColor}}

/* ------------------------------------------------------------ шапка сайта */

.hdr{
  position:sticky;top:0;z-index:50;
  background:rgba(5,8,12,.82);border-bottom:1px solid var(--line);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.hdr-in{display:flex;align-items:center;gap:18px;min-height:64px}
.brand{display:inline-flex;align-items:center;gap:11px;flex:none;color:var(--tx);text-decoration:none}
.brand:hover{color:var(--tx);text-decoration:none}
.brand svg,.brand-mk{width:34px;height:34px;flex:none}
/* знак «Матрица» — квадрат со своим тёмным полем; тонкая рамка отделяет его от шапки */
.brand-mk{display:block;border:1px solid var(--line)}
.brand-t{display:flex;flex-direction:column;line-height:1}
.brand-t b{font:700 19px/1 var(--f-head);letter-spacing:.14em;color:var(--tx)}
.brand-t span{font:500 9.5px/1 var(--f-mono);letter-spacing:.24em;color:var(--tx3);margin-top:5px}

.nav{display:flex;align-items:center;gap:2px;margin-left:10px;min-width:0}
.nav a{
  position:relative;padding:8px 10px;color:var(--tx2);text-decoration:none;white-space:nowrap;
  font:500 11.5px/1 var(--f-mono);letter-spacing:.13em;text-transform:uppercase;
}
.nav a:hover{color:var(--acc-hi);text-decoration:none}
.nav a::after{content:"";position:absolute;left:10px;right:10px;bottom:-12px;height:2px;background:transparent}
body[data-page="index"] .nav a[data-nav="index"],
body[data-page="news"] .nav a[data-nav="news"],
body[data-page="devlog"] .nav a[data-nav="devlog"],
body[data-page="ideas"] .nav a[data-nav="ideas"],
body[data-page="community"] .nav a[data-nav="community"],
body[data-page="credits"] .nav a[data-nav="credits"]{color:var(--tx)}
body[data-page="index"] .nav a[data-nav="index"]::after,
body[data-page="news"] .nav a[data-nav="news"]::after,
body[data-page="devlog"] .nav a[data-nav="devlog"]::after,
body[data-page="ideas"] .nav a[data-nav="ideas"]::after,
body[data-page="community"] .nav a[data-nav="community"]::after,
body[data-page="credits"] .nav a[data-nav="credits"]::after{background:var(--acc);box-shadow:0 0 10px var(--glow)}

.tools{display:flex;align-items:center;gap:10px;margin-left:auto}
.langs{display:inline-flex;border:1px solid var(--line2)}
.langs button{
  min-width:38px;height:32px;padding:0 8px;border:0;background:transparent;cursor:pointer;
  font:600 11px/1 var(--f-mono);letter-spacing:.12em;color:var(--tx3);
}
.langs button+button{border-left:1px solid var(--line2)}
.langs button:hover{color:var(--tx)}
html[data-lang="ru"] .langs [data-set-lang="ru"],
html[data-lang="en"] .langs [data-set-lang="en"]{background:rgba(92,200,255,.12);color:var(--acc-hi)}
.icon-btn{
  display:inline-grid;place-items:center;width:36px;height:34px;flex:none;
  border:1px solid var(--line2);color:var(--tx);background:transparent;cursor:pointer;
}
.icon-btn:hover{border-color:var(--acc);color:var(--acc-hi);box-shadow:0 0 16px -4px var(--glow)}
.icon-btn svg{width:19px;height:15px;fill:currentColor}
.acc-link{
  display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 4px;color:var(--tx2);
  font:500 11.5px/1 var(--f-mono);letter-spacing:.13em;text-transform:uppercase;white-space:nowrap;
}
.acc-link:hover{color:var(--acc-hi);text-decoration:none}
.acc-link .ic{width:15px;height:15px;vertical-align:0}
.hdr .btn.solid{min-height:36px;padding:0 16px;font-size:12px}
.burger{display:none}
.burger span{display:block;width:16px;height:1.5px;background:currentColor;box-shadow:0 5px 0 currentColor,0 -5px 0 currentColor}

/* меню на узких экранах: выпадает под шапкой */
@media (max-width:1139px){
  .burger{display:inline-grid}
  .hdr .acc-link,.hdr .tools>.btn.solid{display:none}
  .nav{
    display:none;position:absolute;left:0;right:0;top:100%;margin:0;flex-direction:column;align-items:stretch;gap:0;
    padding:10px 20px 18px;background:var(--bg);border-bottom:1px solid var(--line2);
    box-shadow:0 30px 40px -20px rgba(5,8,12,.9);
  }
  .hdr.open .nav{display:flex}
  .nav a{padding:15px 4px;font-size:13px;border-bottom:1px solid var(--line)}
  .nav a::after{left:auto;right:4px;top:50%;bottom:auto;width:6px;height:6px;border-radius:50%}
  .nav .nav-extra{display:flex;flex-wrap:wrap;gap:10px;padding-top:16px}
  .nav .nav-extra .btn{flex:1 1 150px}
}
@media (min-width:1140px){ .nav .nav-extra{display:none} }

/* ------------------------------------------------------------ подвал */

.ftr{margin-top:70px;border-top:1px solid var(--line);background:rgba(5,8,12,.7)}
.ftr-in{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:34px;padding:44px 0 30px}
.ftr .brand{margin-bottom:14px}
.ftr p{font-size:14px;color:var(--tx3);max-width:40ch}
.ftr h4{font:500 10.5px/1 var(--f-mono);letter-spacing:.18em;color:var(--tx3);margin-bottom:14px}
.ftr ul{list-style:none;display:grid;gap:9px}
.ftr ul a{color:var(--tx2);font-size:14.5px}
.ftr ul a:hover{color:var(--acc-hi)}
.ftr .btn-dc{margin-top:18px}
.ftr-bot{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;padding:18px 0 34px;
  border-top:1px solid var(--line);font:11px/1.8 var(--f-mono);letter-spacing:.06em;color:var(--tx3);
}
.ftr-bot a{color:var(--tx2)}

/* ------------------------------------------------------------ заголовок раздела */

.sec{padding-top:88px}
.sh{display:flex;align-items:center;gap:16px;margin-bottom:14px}
.sh-n{font:500 12px/1 var(--f-mono);letter-spacing:.12em;color:var(--acc);padding:6px 8px;border:1px solid var(--acc-lo)}
.sh-line{flex:1;height:1px;background:linear-gradient(90deg,var(--line2),transparent)}
.sh-code{font:500 10.5px/1 var(--f-mono);letter-spacing:.2em;color:var(--tx3);text-transform:uppercase}
.sec-lead{margin:0 0 30px;max-width:64ch;color:var(--tx2);font-size:17px}

/* шапка страницы (не главной) */
.phead{padding:62px 0 8px}
.phead h1{font-size:clamp(40px,5.4vw,68px);margin:14px 0 18px}
.phead .lede{margin-bottom:6px}

/* ------------------------------------------------------------ главная: герой */

.hero{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:48px;align-items:center;padding:58px 0 10px}
.hero h1{margin:18px 0 22px}
.hero .lede{margin-bottom:34px}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px 18px}
.hero-sub{margin-top:18px}
.panel.specimen{padding:0}
.specimen .doc-h{margin:0}
.spec-body{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;padding:22px 24px 24px}
/* знак «Матрица» в карточке объекта: светящееся табло 404 */
.emblem{display:block;width:min(230px,62%);height:auto;margin:6px auto 2px;border:1px solid var(--line);box-shadow:0 0 40px -12px var(--glow)}
.readout{display:grid;gap:9px;font:12px/1.35 var(--f-mono);letter-spacing:.08em;text-transform:uppercase}
.ro{display:flex;align-items:baseline;gap:8px;min-width:0}
.ro-k{color:var(--tx3);flex:none}
.ro-d{flex:1;min-width:14px;border-bottom:1px dotted var(--line2);transform:translateY(-4px)}
.ro-v{color:var(--tx);text-align:right;display:inline-flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.ro-v.acc{color:var(--acc-hi)}
.ro-v .dot{width:6px;height:6px}
.st-on{color:var(--ok)}
.st-off{color:var(--tx3)}
/* живой статус: пока ждём ответа — «проверяем», дальше «в сети» или «нет связи» */
[data-live] .l-on,[data-live] .l-off{display:none}
[data-live="on"] .l-on,[data-live="off"] .l-off{display:inline-flex}
[data-live="on"] .l-wait,[data-live="off"] .l-wait{display:none}
.l-on,.l-off,.l-wait{align-items:center;gap:7px;flex-wrap:wrap}
.l-wait{display:inline-flex;color:var(--tx3)}

/* ------------------------------------------------------------ задумка: карточки */

.grid{display:grid;gap:18px}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.vcard{display:flex;flex-direction:column;gap:12px;padding:24px 24px 26px}
.vcard .vc-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.vcard .vc-ic{display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--line2);color:var(--acc);background:rgba(92,200,255,.05)}
.vcard .vc-ic .ic{width:22px;height:22px}
.vcard h3{margin-top:4px}
.vcard p{font-size:15px;color:var(--tx2)}
.vc-x{margin-top:auto;padding-top:8px;display:flex;flex-wrap:wrap;gap:8px}
.seg{display:inline-flex;border:1px solid var(--line2)}
.seg span{padding:6px 12px;font:500 10.5px/1 var(--f-mono);letter-spacing:.13em;text-transform:uppercase;color:var(--tx3)}
.seg span+span{border-left:1px solid var(--line2)}
.seg span.on{color:var(--acc-hi);background:rgba(92,200,255,.1)}
.toggles{display:grid;gap:7px;width:100%}
.tg{display:flex;align-items:center;justify-content:space-between;gap:10px;font:500 11px/1.3 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--tx2)}
.tg i{position:relative;width:30px;height:14px;flex:none;border:1px solid var(--line2);background:rgba(5,8,12,.6)}
.tg i::after{content:"";position:absolute;top:2px;left:2px;width:8px;height:8px;background:var(--tx3)}
.tg.on i{border-color:var(--acc-lo);background:rgba(92,200,255,.12)}
.tg.on i::after{left:18px;background:var(--acc);box-shadow:0 0 8px var(--glow)}

/* ------------------------------------------------------------ где мы сейчас */

.now{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:22px;align-items:start}
.tl{list-style:none;position:relative;padding:4px 0 0}
.tl::before{content:"";position:absolute;left:11px;top:14px;bottom:14px;width:1px;background:linear-gradient(var(--acc-lo),var(--line) 40%,var(--line))}
.tl li{position:relative;padding:0 0 26px 44px}
.tl li:last-child{padding-bottom:0}
.tl li::before{
  content:"";position:absolute;left:5px;top:6px;width:13px;height:13px;
  border:1px solid var(--line2);background:var(--bg);
}
.tl li.cur::before{border-color:var(--acc);background:var(--acc);box-shadow:0 0 0 4px rgba(92,200,255,.12),0 0 16px var(--glow)}
.tl .tl-k{display:block;font:500 10.5px/1.4 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--tx3);margin-bottom:5px}
.tl li.cur .tl-k{color:var(--acc)}
.tl h3{font-size:22px;margin-bottom:6px}
.tl p{font-size:15.5px}
.side-stack{display:grid;gap:18px}
.status-panel .status-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.status-panel .big{font:700 44px/1 var(--f-head);color:var(--tx);letter-spacing:.04em}
.status-panel .big small{font:500 11px/1 var(--f-mono);letter-spacing:.14em;color:var(--tx3);margin-left:8px;text-transform:uppercase}
.checklist{list-style:none;display:grid;gap:10px;margin-top:6px}
.checklist li{position:relative;padding-left:26px;font-size:15px;color:var(--tx2)}
.checklist li::before{content:"";position:absolute;left:3px;top:.55em;width:10px;height:5px;border-left:1.5px solid var(--ok);border-bottom:1.5px solid var(--ok);transform:rotate(-45deg)}
.checklist li b{color:var(--tx)}

/* ------------------------------------------------------------ платформы */

.plats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.plat{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:20px 18px}
.plat .ic{width:30px;height:30px;color:var(--acc);stroke-width:1.4}
.plat h3{font-size:19px}
.plat .chip{white-space:normal}

/* ------------------------------------------------------------ Discord */

.dc{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:34px;align-items:center;padding:38px 40px;
  background:
    radial-gradient(420px 220px at 12% 50%,rgba(92,200,255,.12),transparent 70%),
    linear-gradient(180deg,rgba(16,26,37,.9),rgba(10,17,25,.96));
}
.dc-mark{display:grid;place-items:center;width:112px;height:112px;border:1px solid var(--line2);color:var(--tx);background:rgba(5,8,12,.5);position:relative}
.dc-mark::after{content:"";position:absolute;inset:8px;border:1px dashed var(--line)}
.dc-mark svg{width:62px;height:47px;fill:currentColor;filter:drop-shadow(0 0 14px rgba(92,200,255,.35))}
.dc h2{margin:10px 0 12px}
.dc p{font-size:16.5px}
.dc-side{display:flex;flex-direction:column;align-items:stretch;gap:10px;min-width:230px}
.dc-side .btn{min-height:54px}
.dc-side .note{text-align:center}

/* ------------------------------------------------------------ новости и лог */

.feed{display:grid;gap:18px}
.bulletin .b-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-bottom:12px}
.bulletin time{font:500 11.5px/1 var(--f-mono);letter-spacing:.14em;color:var(--acc);text-transform:uppercase}
.bulletin h3{font-size:clamp(22px,2.4vw,28px);margin-bottom:12px}
.bulletin .b-body p{font-size:16px}
.bulletin .b-body p+p{margin-top:12px}
.bulletin .btns{margin-top:18px}
.bulletin.short h3{font-size:22px}
.bulletin.short .b-body p{font-size:15px}
.feed-empty{font:13px/1.8 var(--f-mono);color:var(--tx3)}

.days{display:grid;gap:0}
.day{display:grid;grid-template-columns:170px minmax(0,1fr);gap:28px;padding:28px 0;border-top:1px solid var(--line)}
.day:first-child{border-top:0;padding-top:6px}
.day-date{position:sticky;top:84px;align-self:start}
.day-date b{display:block;font:700 44px/1 var(--f-head);color:var(--tx);letter-spacing:.04em}
.day-date span{display:block;margin-top:6px;font:500 10.5px/1.5 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--tx3)}
.day h3{font-size:22px;margin-bottom:12px}
.day ul{list-style:none;display:grid;gap:11px}
.day li{position:relative;padding-left:24px;font-size:15.5px;line-height:1.6;max-width:74ch}
.day li::before{content:"";position:absolute;left:2px;top:.72em;width:9px;height:1px;background:var(--acc);box-shadow:0 0 6px var(--glow)}

/* ------------------------------------------------------------ идеи */

.legend{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 30px}
.igroup+.igroup{margin-top:52px}
.igroup>h2{font-size:clamp(24px,2.6vw,30px);margin-bottom:18px;display:flex;align-items:center;gap:14px}
.igroup>h2 .sh-n{font-size:11px}
.idea{display:flex;flex-direction:column;gap:10px;padding:22px 22px 24px}
.idea h3{font-size:20px}
.idea p{font-size:15px}
.idea .i-top{display:flex;justify-content:space-between;align-items:center;gap:10px}

/* ------------------------------------------------------------ кредиты, лор */

.attrib{font:13px/1.8 var(--f-mono);color:var(--tx);overflow-wrap:anywhere}
.attrib+.small{margin-top:10px}
.ttable{width:100%;border-collapse:collapse;font-size:15px}
.ttable th{font:500 10.5px/1.4 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--tx3);text-align:left;padding:10px 12px;border-bottom:1px solid var(--line2)}
.ttable td{padding:13px 12px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--tx2)}
.ttable tr:last-child td{border-bottom:0}
.ttable td:first-child{color:var(--tx)}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.stack{display:grid;gap:18px}
.toc{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 0}
.toc a{padding:7px 11px;border:1px solid var(--line);background:rgba(5,8,12,.5);color:var(--tx2);font:500 11px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase}
.toc a:hover{border-color:var(--acc-lo);color:var(--acc-hi);text-decoration:none}
.term{
  margin:18px 0;padding:16px 18px;border:1px solid var(--line);background:rgba(5,8,12,.8);
  font:13px/1.85 var(--f-mono);color:var(--ok);white-space:pre-wrap;overflow-wrap:anywhere;
}
.term b{color:var(--tx3);font-weight:400}
.file{margin-top:18px;padding:14px 16px;border-left:2px solid var(--acc-lo);background:rgba(5,8,12,.6);font:13px/1.9 var(--f-mono);color:var(--tx2)}
.rd{color:var(--tx3)}
.facts{list-style:none;display:grid;gap:11px;margin-top:14px}
.facts li{position:relative;padding-left:22px;font-size:15.5px}
.facts li::before{content:"";position:absolute;left:1px;top:.7em;width:8px;height:1px;background:var(--acc)}
.docp .f{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr);gap:2px 16px;padding:8px 0;border-bottom:1px dashed var(--line);font-size:15px}
.docp .f .k{font:500 11px/1.5 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--tx3);padding-top:3px}
.docp .f .v{color:var(--tx)}
.docp .f+p{margin-top:16px}
.docp .sig{margin-top:16px;padding-top:12px;border-top:1px solid var(--line);font:12px/1.6 var(--f-mono);color:var(--tx3)}
.log{display:grid;gap:8px;font:13px/1.65 var(--f-mono);color:var(--tx2)}
.log div{display:grid;grid-template-columns:52px minmax(0,1fr);gap:12px}
.log .t{color:var(--acc)}
.log .lnote{grid-template-columns:1fr;color:var(--tx);border-top:1px solid var(--line);padding-top:10px;margin-top:4px}
.gloss div{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:4px 20px;padding:13px 0;border-bottom:1px solid var(--line)}
.gloss div:last-child{border-bottom:0}
.gloss .k{color:var(--tx);font:700 17px/1.3 var(--f-head);letter-spacing:.06em;text-transform:uppercase}
.gloss .v{font-size:15px}
.archive{border-color:rgba(255,209,102,.3)}
.archive::before{--k:var(--warn)}
.figure{margin:20px 0 6px}
.figure svg{display:block;width:100%;height:auto;border:1px solid var(--line);background:rgba(5,8,12,.8)}
.figure figcaption{margin-top:10px;font:12px/1.7 var(--f-mono);color:var(--tx3)}

/* финальная полоса «смена уже идёт» */
.band{
  margin-top:88px;padding:44px 40px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;
  background:
    repeating-linear-gradient(135deg,rgba(92,200,255,.05) 0 1px,transparent 1px 12px),
    linear-gradient(90deg,rgba(16,26,37,.95),rgba(10,17,25,.9));
}
.band h2{font-size:clamp(28px,3.6vw,44px)}
.band p{margin-top:8px}

/* ============================================================ кабинет и формы */

.acc-main{padding:44px 0 20px}
.acc-main section{margin-bottom:16px}
.acc-main h1{font-size:clamp(34px,5vw,54px);margin:4px 0 14px}
.acc-main h1 i{font-style:normal;color:var(--acc)}
.acc-main .lede{font-size:16.5px}
.h2{
  display:flex;align-items:center;gap:12px;margin:0 0 16px;
  font:700 22px/1.1 var(--f-head);letter-spacing:.08em;text-transform:uppercase;color:var(--tx);
}
.h2::before{content:"";width:8px;height:8px;flex:none;border:1px solid var(--acc);box-shadow:0 0 8px var(--glow)}
.h2 em{font:500 10.5px/1.3 var(--f-mono);font-style:normal;letter-spacing:.12em;color:var(--tx3);text-transform:uppercase}

.field{margin-bottom:18px;min-width:0}
.field>label{display:block;margin-bottom:7px;font:500 11px/1.4 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--tx2)}
.inbox{position:relative;display:flex;min-width:0}
.field input{
  width:100%;min-width:0;padding:13px 14px;border:1px solid var(--line2);border-radius:0;
  background:rgba(5,8,12,.85);color:var(--tx);font:15px/1.4 var(--f-mono);
  -webkit-appearance:none;appearance:none;transition:border-color .15s,box-shadow .15s;
}
.field input:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px rgba(92,200,255,.14)}
.field input::placeholder{color:var(--tx3)}
.field input:disabled,.field input[readonly]{color:var(--tx3);border-style:dashed}
.field .hint{margin-top:7px;font:11.5px/1.7 var(--f-mono);color:var(--tx3)}
.field .hint a{color:var(--acc)}
.field .say{min-height:1.7em;margin-top:7px;font:12px/1.7 var(--f-mono);overflow-wrap:anywhere}
.field.bad input{border-color:var(--red)}
.field.bad .say{color:var(--red)}
.field.good input{border-color:rgba(79,224,200,.6)}
.field.good .say{color:var(--ok)}
.field.wait .say{color:var(--tx2)}
.peek{
  flex:none;min-width:86px;padding:0 12px;border:1px solid var(--line2);border-left:0;background:rgba(16,26,37,.9);
  color:var(--tx2);cursor:pointer;font:500 10.5px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;
}
.peek:hover{color:var(--acc-hi);border-color:var(--acc-lo)}
.peek .p-hide,.peek[aria-pressed="true"] .p-show{display:none}
.peek[aria-pressed="true"] .p-hide{display:inline}
.field input:focus+.peek{border-color:var(--acc)}

/* сообщения: текст светлый, смысл — полосой и меткой */
.msg{
  position:relative;margin:0 0 16px;padding:12px 14px 12px 16px;
  border:1px solid var(--line);border-left:2px solid var(--line2);background:rgba(16,26,37,.9);
  font:13px/1.7 var(--f-mono);color:var(--tx);overflow-wrap:anywhere;
}
.msg b{color:var(--tx)}
.msg::before{display:block;margin-bottom:3px;font:600 10px/1.4 var(--f-mono);letter-spacing:.18em}
.msg.err{border-left-color:var(--red);box-shadow:inset 3px 0 12px -8px var(--red-glow)}
.msg.err::before{content:"ОШИБКА";color:var(--red)}
.msg.ok{border-left-color:var(--ok)}
.msg.ok::before{content:"ГОТОВО";color:var(--ok)}
.msg.warn{border-left-color:var(--warn)}
.msg.warn::before{content:"ВНИМАНИЕ";color:var(--warn)}
html[data-lang="en"] .msg.err::before{content:"ERROR"}
html[data-lang="en"] .msg.ok::before{content:"DONE"}
html[data-lang="en"] .msg.warn::before{content:"NOTICE"}

.spam{
  margin:16px 0 0;padding:13px 15px;border-left:2px solid var(--acc-lo);background:rgba(16,26,37,.75);
  font:12.5px/1.85 var(--f-mono);color:var(--tx2);
}
.spam b{color:var(--tx)}

.kv{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:8px 16px;margin-top:6px;font:13.5px/1.5 var(--f-mono)}
.kv dt{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--tx3);padding-top:3px}
.kv dd{color:var(--tx);overflow-wrap:anywhere}

.pick{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.pick label{position:relative;display:block;padding:14px 16px;cursor:pointer;border:1px solid var(--line2);background:rgba(5,8,12,.6)}
.pick label:hover{border-color:var(--acc-lo)}
.pick input{position:absolute;opacity:0;width:0;height:0}
.pick input:focus-visible+.in{outline:2px solid var(--acc);outline-offset:6px}
.pick .in{display:block}
.pick b{display:block;margin-bottom:3px;font:700 18px/1.2 var(--f-head);letter-spacing:.08em;text-transform:uppercase;color:var(--tx)}
.pick .in>span{display:block;font:11.5px/1.6 var(--f-mono);color:var(--tx3)}
.pick label:has(input:checked){border-color:var(--acc);background:rgba(92,200,255,.08)}
.pick label:has(input:checked) b{color:var(--acc-hi)}
.pick .mk{position:absolute;top:14px;right:14px;width:11px;height:11px;border:1px solid var(--line2)}
.pick label:has(input:checked) .mk{border-color:var(--acc);background:var(--acc);box-shadow:inset 0 0 0 2px var(--bg),0 0 8px var(--glow)}

.nickbox{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:14px 16px;border-left:2px solid var(--acc);background:rgba(16,26,37,.8)}
.nickbox .who{font:700 22px/1.2 var(--f-mono);color:var(--acc-hi);overflow-wrap:anywhere;min-width:0}

details.danger{border:1px solid var(--red-lo);background:rgba(10,17,25,.9)}
details.danger>summary{cursor:pointer;list-style:none;padding:14px 16px;font:600 11.5px/1.3 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--red)}
details.danger>summary::-webkit-details-marker{display:none}
details.danger>summary::before{content:"▸ "}
details.danger[open]>summary::before{content:"▾ "}
details.danger>summary:hover{text-shadow:0 0 10px var(--red-glow)}
details.danger .body{padding:0 16px 16px}

.load{padding:14px 0;font:13px/1.6 var(--f-mono);color:var(--tx2)}
.load::after{content:"_";margin-left:2px;color:var(--acc);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* цвет ника: табличка над головой, как в игре, на тёмной стене */
.scene{
  position:relative;margin-top:16px;padding:26px 16px 18px;border:1px solid var(--line);
  background:
    radial-gradient(120% 90% at 50% -10%,rgba(92,200,255,.08),transparent 62%),
    repeating-linear-gradient(90deg,rgba(157,178,194,.025) 0 2px,transparent 2px 6px),
    repeating-linear-gradient(180deg,rgba(5,8,12,.3) 0 1px,transparent 1px 3px),
    linear-gradient(180deg,var(--raised),var(--panel) 45%,var(--bg));
}
.scene .cap{position:absolute;top:-1px;right:-1px;padding:3px 8px;border:1px solid var(--line);background:rgba(5,8,12,.8);font:500 10px/1.3 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--tx3)}
.cgrid{display:grid;gap:14px 10px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.cgrid label{position:relative;display:block;min-width:0;text-align:center;cursor:pointer}
.cgrid input{position:absolute;opacity:0;width:0;height:0}
.plate{
  display:block;max-width:100%;margin:0 auto;padding:0 7px;border:1px solid transparent;
  background:rgba(5,8,12,.62);font:12px/19px var(--f-mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:border-color .12s,box-shadow .12s;
}
.cgrid label:hover .plate{border-color:var(--line2)}
.cgrid input:checked+.plate{border-color:var(--acc);box-shadow:0 0 0 2px rgba(92,200,255,.25)}
.cgrid input:focus-visible+.plate{outline:2px solid var(--tx);outline-offset:3px}
.cname{display:block;margin-top:7px;font:11px/1.4 var(--f-mono);color:var(--tx3)}
.cgrid input:checked~.cname{color:var(--acc-hi)}
.cgrid input:checked~.cname::before{content:"▸ "}

.code{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:16px;padding:16px 18px;border:1px solid var(--line2);background:rgba(5,8,12,.8)}
.code b{font:700 clamp(24px,6vw,34px)/1.1 var(--f-mono);letter-spacing:.18em;color:var(--acc-hi);text-shadow:0 0 18px var(--glow);user-select:all;-webkit-user-select:all}
.code .left{margin-left:auto;font:12px/1.4 var(--f-mono);color:var(--tx2);white-space:nowrap}
.code .left.soon{color:var(--red)}

.applist{list-style:none;margin:16px 0 0;border-top:1px solid var(--line)}
.applist li{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid var(--line)}
.applist .when{flex:1;min-width:180px;font:12px/1.6 var(--f-mono);color:var(--tx2)}
.applist .when b{color:var(--tx)}
.applist .btn{min-height:34px;padding:6px 12px;font-size:11px}

.count{font-variant-numeric:tabular-nums}

/* служебная страница редактора: её шапка и подвал в прежней разметке */
.top{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin:22px 0 16px;padding:12px 18px}
.mark{display:inline-flex;align-items:center;gap:10px;color:var(--tx);font:700 18px/1 var(--f-head);letter-spacing:.14em;text-transform:uppercase}
.mark span{color:var(--acc)}
.mark:hover{color:var(--tx);text-decoration:none}
.top .nav{margin-left:auto;display:flex;position:static;flex-direction:row;padding:0;background:none;border:0;box-shadow:none}
.top .nav a{padding:8px 10px;border:0;font-size:11.5px}
.top .nav a::after{display:none}
footer.plain{margin:26px 0 40px;font:12px/1.9 var(--f-mono);color:var(--tx3)}
footer.plain a{color:var(--tx2)}

/* ------------------------------------------------------------ адаптив */

@media (max-width:1139px){
  .plats{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:980px){
  .hero{grid-template-columns:minmax(0,1fr);gap:34px;padding-top:40px}
  .now{grid-template-columns:minmax(0,1fr)}
  .g3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dc{grid-template-columns:auto minmax(0,1fr);gap:24px 28px}
  .dc-side{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;align-items:center;min-width:0}
  .dc-side .btn{flex:1 1 240px}
  .ftr-in{grid-template-columns:1fr 1fr}
  .ftr-in>div:first-child{grid-column:1/-1}
  .day{grid-template-columns:120px minmax(0,1fr);gap:20px}
}
@media (max-width:680px){
  .wrap{padding:0 16px}
  .hdr-in{gap:10px;min-height:58px}
  .brand svg,.brand-mk{width:30px;height:30px}
  .brand-t b{font-size:17px;letter-spacing:.11em}
  .brand-t span{display:none}
  .tools{gap:7px}
  .langs button{min-width:34px;height:34px}
  .icon-btn{width:38px;height:36px}
  .burger{width:40px;height:36px}
  .sec{padding-top:64px}
  .panel,.pane{padding:20px 18px}
  .doc-h{margin:-20px -18px 16px;padding:8px 12px}
  .specimen .doc-h{margin:0}
  .spec-body{padding:18px}
  .g3,.g2{grid-template-columns:minmax(0,1fr)}
  .plats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .plat{padding:16px 14px}
  .play{min-height:60px;font-size:23px;padding:0 26px 0 20px}
  .play-wrap,.hero-cta .btn{width:100%}
  .play{width:100%;justify-content:center}
  .hero-cta .btn{min-height:52px}
  .sh{gap:10px}
  .sh-code{display:none}
  .dc{grid-template-columns:minmax(0,1fr);padding:26px 20px;gap:20px}
  .dc-mark{width:84px;height:84px}
  .dc-mark svg{width:46px;height:35px}
  .dc-side{flex-direction:column;align-items:stretch}
  .dc-side .btn{flex:none}
  .band{padding:28px 20px}
  .band .play-wrap{width:100%}
  .ftr-in{grid-template-columns:minmax(0,1fr);gap:26px}
  .day{grid-template-columns:minmax(0,1fr);gap:10px;padding:22px 0}
  .day-date{position:static;display:flex;align-items:baseline;gap:12px}
  .day-date b{font-size:32px}
  .day-date span{margin-top:0}
  .btns .btn{flex:1 1 100%}
  .kv{grid-template-columns:minmax(0,1fr);gap:2px}
  .kv dd{margin-bottom:8px}
  .docp .f,.gloss div{grid-template-columns:minmax(0,1fr);gap:2px}
  .log div{grid-template-columns:46px minmax(0,1fr);gap:9px}
  .nickbox .who{font-size:18px}
  .top .nav{margin-left:0}
  .phead{padding-top:40px}
  .ttable{font-size:14px}
}
@media (max-width:380px){
  .brand-t b{font-size:15px;letter-spacing:.08em}
  .langs button{min-width:30px;padding:0 5px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}