/* Язык взят с лендинга клуба: моноширинный шрифт, нулевые скругления,
   волосяные линии вместо теней, сетка со «швами», глифы вместо иконок. */
:root{
  color-scheme: dark;
  --bg:#0a0a09;
  --bg2:#111110;
  --line:#26251f;
  --white:#f3efe4;
  --dim:#8c877a;
  --dimmer:#565248;
  --amber:#ffb000;
  --amber-dim:#c98a05;
  --ok:#7bd88f;
  --danger:#ff6b57;
  --mono: ui-monospace, "SF Mono", "SFMono-Regular", "Cascadia Code", Menlo, Consolas, monospace;

  /* имена, на которые опираются игры */
  --panel:var(--bg2);
  --panel2:#16150f;
  --text:var(--white);
  --muted:#cec8ba;
  --amber-d:var(--amber-dim);
}
*{box-sizing:border-box; margin:0; padding:0}
body{
  background:var(--bg); color:var(--white);
  font-family:var(--mono); font-size:14.5px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  /* clip, а не hidden: hidden делает body скролл-контейнером и ломает sticky */
  overflow-x:clip;
}
/* Плёнка сканлайнов — та же, что на лендинге. */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:100; opacity:.5;
  background:repeating-linear-gradient(180deg, rgba(255,255,255,.014) 0 1px, transparent 1px 3px);
}
#app{max-width:620px; margin:0 auto; padding:0 18px calc(40px + env(safe-area-inset-bottom))}
button{font:inherit; cursor:pointer; border:0; border-radius:0; -webkit-tap-highlight-color:transparent}
a{color:inherit; text-decoration:none}

/* ── шапка станции ────────────────────────────────────────────────────────── */
.hero{position:relative; overflow:hidden; padding:26px 0 22px; border-bottom:1px solid var(--line)}
.techwall{
  position:absolute; inset:0 0 auto 0; height:200px; z-index:0;
  pointer-events:none; user-select:none;
  font-size:12px; line-height:2.1; color:#17160f; letter-spacing:.06em; word-spacing:.5em;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 55%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 55%,transparent 100%);
}
.hero > *:not(.techwall){position:relative; z-index:1}
.cmdline{color:var(--dim); font-size:12.5px; margin-bottom:14px}
.cmdline .a{color:var(--amber)}
.cursor{display:inline-block; width:8px; height:1em; background:var(--amber);
  translate:0 2px; animation:blink 1.05s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
h1{font-size:clamp(38px,11vw,62px); line-height:.9; font-weight:600; letter-spacing:-.035em}
h1 .cur{color:var(--amber)}
.slogan{margin-top:13px; font-size:15px; color:var(--amber); font-weight:600; letter-spacing:-.01em}
.lede{color:#cec8ba; font-size:13.5px; margin-top:13px; max-width:58ch; line-height:1.65}
.lede b{color:var(--white); font-weight:600}

/* Сетка фактов «со швами»: линия просвечивает в зазорах. */
.facts{display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); margin-top:20px}
.fact{background:var(--bg); padding:11px 12px; min-width:0}
.fact b{display:block; font-size:16px; color:var(--amber); font-weight:600}
.fact span{display:block; font-size:10px; color:var(--dimmer); letter-spacing:.08em;
  text-transform:uppercase; margin-top:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* ── заголовок раздела в стиле командной строки ───────────────────────────── */
.point{padding:26px 0 0}
.point-head{display:flex; align-items:baseline; gap:10px; margin-bottom:14px;
  color:var(--dim); font-size:12.5px; flex-wrap:wrap}
.point-num{color:var(--amber); font-weight:600}
.point-name{color:var(--white); font-weight:600; font-size:13.5px}
.point-head .rule{flex:1; height:1px; background:var(--line); min-width:24px}
.point-head .cmt{color:var(--dimmer); font-size:11.5px}

/* ── плитки как строки таблицы, а не парящие карточки ─────────────────────── */
.tiles{border:1px solid var(--line)}
.tile{display:block; position:relative; padding:14px 40px 14px 15px;
  border-bottom:1px solid var(--line); background:var(--bg2); transition:background .16s}
.tile:last-child{border-bottom:0}
.tile:hover{background:#161510}
.tile.mid{box-shadow:inset 2px 0 0 var(--amber-dim)}
.tile .lvl{font-size:10px; color:var(--dimmer); letter-spacing:.09em; text-transform:uppercase;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.tile .name{font-size:16px; font-weight:600; margin-top:7px; letter-spacing:-.01em}
.tile:hover .name{color:var(--amber)}
.tile .sub{font-size:12.5px; color:var(--dim); margin-top:4px; line-height:1.5}
.tile .go{position:absolute; right:15px; top:50%; translate:0 -50%;
  color:var(--dimmer); transition:translate .18s, color .18s}
.tile:hover .go{color:var(--amber); translate:4px -50%}
.tile.todo{background:transparent; box-shadow:none;
  background-image:repeating-linear-gradient(45deg,#0d0c0a 0 9px,transparent 9px 18px)}
.tile.todo .name{color:var(--dimmer)}
.tile.todo:hover{background-color:transparent}
.tile.spare{background:var(--bg)}
.tile.spare .name{color:var(--muted)}
.tile.spare .note{font-size:11.5px; color:var(--amber-dim); margin-top:6px; line-height:1.55}

/* Метки «вживую / онлайн» — прямоугольные теги, без пилюль. */
.mode{padding:2px 6px; font-size:9px; letter-spacing:.1em; text-transform:uppercase;
  border:1px solid var(--dimmer); color:var(--dim); white-space:nowrap}
.mode.live{border-color:var(--amber-dim); color:var(--amber)}
.lede .mode{display:inline-block; vertical-align:middle; margin:0 2px}

.spare-head{margin-top:34px; border-top:1px solid var(--line)}

/* ── оболочка игры ────────────────────────────────────────────────────────── */
.topbar{display:flex; align-items:center; gap:12px; padding:16px 0 14px;
  border-bottom:1px solid var(--line); margin-bottom:16px}
.back{background:transparent; border:1px solid var(--line); color:var(--dim);
  font-size:11.5px; padding:8px 10px; letter-spacing:.05em; transition:.16s}
.back:hover{border-color:var(--amber-dim); color:var(--amber)}
.topbar .who{flex:1; min-width:0}
.topbar .who b{display:block; font-size:15.5px; line-height:1.2; letter-spacing:-.01em}
.topbar .who span{display:block; font-size:10px; color:var(--dimmer);
  letter-spacing:.09em; text-transform:uppercase; margin-top:4px}
.clock{font-size:14px; color:var(--amber); font-weight:600; padding:7px 9px;
  border:1px solid var(--line)}
.clock.out{color:var(--danger); border-color:var(--danger)}

.rules{font-size:12.5px; color:var(--muted); background:var(--bg2);
  border:1px solid var(--line); border-left:2px solid var(--amber-dim);
  padding:12px 14px; margin-bottom:14px; line-height:1.65}
.rules b{color:var(--white); font-weight:600}

.bar{display:flex; gap:10px; align-items:center; margin:14px 0 0;
  position:sticky; bottom:0; z-index:5; padding:12px 0 14px;
  background:linear-gradient(to bottom, rgba(10,10,9,0) 0%, var(--bg) 24%)}
.bar .grow{flex:1}
.b-primary{background:var(--amber); color:#0a0a09; padding:12px 18px; font-weight:600;
  font-size:13px; border:1px solid var(--amber);
  transition:transform .16s cubic-bezier(.2,.8,.2,1), box-shadow .2s}
.b-primary:hover:not(:disabled){transform:translateY(-2px); box-shadow:0 6px 0 -2px var(--amber-dim)}
.b-primary:disabled{opacity:.35; cursor:default}
.b-ghost{background:transparent; color:var(--dim); border:1px solid var(--line);
  padding:12px 18px; font-size:13px}
.b-ghost:hover{border-color:var(--amber-dim); color:var(--amber)}

.score{font-size:12px; line-height:1.6; color:var(--dim)}
.score b{color:var(--amber); font-weight:600}

/* ── общие элементы игр ───────────────────────────────────────────────────── */
.card{background:var(--bg2); border:1px solid var(--line); padding:13px 14px}
.card.pick{border-color:var(--amber-dim); background:#16150f}
.card.good{border-color:#2f5c3a}
.card.bad{border-color:#5c2a22}
.card .t{font-size:14px; font-weight:600; letter-spacing:-.005em}
.card .c{font-size:11.5px; line-height:1.6; color:var(--dim); margin-top:6px}
/* Стопка карточек — единый блок с волосяными швами, а не россыпь плашек. */
.stack{display:grid; gap:1px; background:var(--line); border:1px solid var(--line)}
.stack > .card{border:0}
.chips{display:flex; flex-wrap:wrap; gap:6px}
.chip{background:transparent; color:var(--dim); border:1px solid var(--line);
  padding:8px 12px; font-size:12.5px; transition:.16s}
.chip:hover{border-color:var(--amber-dim); color:var(--amber)}
.chip.on{background:var(--amber); color:#0a0a09; border-color:var(--amber); font-weight:600}
.chip.good{border-color:var(--ok); color:var(--ok)}
.chip.bad{border-color:var(--danger); color:var(--danger)}
.big-btns{display:grid; gap:1px; margin-top:1px; background:var(--line);
  border:1px solid var(--line); border-top:0}
.big-btns button{background:var(--bg2); color:var(--white);
  padding:15px 14px; text-align:left; font-size:13.5px; font-weight:600}
.big-btns button::before{content:"▸ "; color:var(--amber)}
.big-btns button:hover{background:#161510; color:var(--amber)}
.flash{padding:11px 13px; font-size:12.5px; margin-top:12px; border:1px solid; line-height:1.6;
  scroll-margin-bottom:110px}
.flash.ok{background:#0f1a12; color:var(--ok); border-color:#2f5c3a}
.flash.no{background:#1a100e; color:var(--danger); border-color:#5c2a22}
.mono{font-family:var(--mono)}
.dim{color:var(--dim)}

.two{display:grid; grid-template-columns:1fr 1fr; gap:10px; align-items:start}
.col-head{font-size:10px; color:var(--dimmer); letter-spacing:.09em;
  text-transform:uppercase; margin:0 0 8px}
.col-head::before{content:"// "; color:var(--amber-dim)}
.two .card{padding:10px 11px}
.two .card .t{font-size:12.5px}
.two .card .c{font-size:10.5px}
@media (max-width:400px){
  .two{gap:6px}
  .two .card{padding:8px 9px}
  .two .card .t{font-size:11.5px}
  .two .card .c{font-size:10px}
}

/* Шкалы: прямые углы, никакого свечения. */
.meter{height:6px; background:#1a1914; border:1px solid var(--line); overflow:hidden; margin-top:8px}
.meter i{display:block; height:100%; background:var(--amber-dim); transition:width .25s}
.meter i.ok{background:var(--ok)} .meter i.no{background:var(--danger)}
.spark{display:flex; align-items:flex-end; gap:2px; height:52px; margin-top:10px}
.spark i{flex:1; background:var(--amber-dim); min-height:2px}
.spark i.hot{background:var(--danger)}

/* ── итог ─────────────────────────────────────────────────────────────────── */
.veil{position:fixed; inset:0; background:rgba(5,5,4,.88); display:flex;
  align-items:center; justify-content:center; padding:18px; z-index:20}
.sheet{width:100%; max-width:430px; background:var(--bg2); border:1px solid var(--line);
  padding:22px; position:relative}
/* Угловые засечки вместо скруглений и теней. */
.sheet::before, .sheet::after{content:""; position:absolute; width:12px; height:12px}
.sheet::before{top:-1px; left:-1px; border-top:1px solid var(--amber); border-left:1px solid var(--amber)}
.sheet::after{bottom:-1px; right:-1px; border-bottom:1px solid var(--amber); border-right:1px solid var(--amber)}
.sheet .tag{font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--amber)}
.sheet h2{font-size:23px; margin:10px 0 8px; letter-spacing:-.025em; line-height:1.15; font-weight:600}
.sheet p{color:var(--muted); font-size:13px; margin:0 0 14px; line-height:1.6}
.sheet.lost h2{color:var(--danger)} .sheet.won h2{color:var(--amber)}
.stickers{display:flex; align-items:center; gap:7px; margin:0 0 18px;
  font-size:11px; color:var(--dim); letter-spacing:.06em; text-transform:uppercase}
/* Стикеры — квадратные индикаторы, а не кружочки. */
.dot{width:13px; height:13px; background:var(--amber); display:inline-block}
.dot.off{background:transparent; border:1px solid var(--dimmer)}
.row{display:flex; gap:8px; flex-wrap:wrap}
.row button{flex:1; min-width:130px}

@media (prefers-reduced-motion:reduce){*{animation:none !important; transition:none !important}}

/* ── «Обнови без простоя»: закреплённый статус, график и сетка серверов ───── */
.sticky-status{position:sticky; top:0; z-index:6; background:var(--bg); padding-bottom:8px}

/* Одна панель вместо трёх карточек: статус строкой, под ним график и события. */
.panel{padding:11px 13px}
.p-head{display:flex; gap:5px 12px; align-items:baseline; flex-wrap:wrap}
.p-head b{font-size:14px; font-weight:600; letter-spacing:-.005em}
.p-head span{font-size:11px; color:var(--dim)}
.p-head span.hot{color:var(--danger)}
.p-chart{margin-top:8px}
.p-feed{margin-top:9px; padding-top:8px; border-top:1px solid var(--line)}
.p-feed .ev{font-size:11.5px; line-height:1.6; color:var(--dim)}
.p-feed .ev::before{content:"▸ "; color:var(--amber-dim)}
/* Последнее событие — самое важное, светим им ярче остальных. */
.p-feed .ev.fresh{color:var(--amber)}
.p-feed .ev.quiet{color:var(--dimmer)}
.p-feed .ev.quiet::before{content:""}


.chart{position:relative; height:66px; margin-top:13px}
.chart .bars{display:flex; align-items:flex-end; gap:1px; height:100%; position:relative; z-index:1}
.chart .bars i{flex:1; background:var(--amber-dim); min-height:2px}
.chart .bars i.past{background:#39342a}
.chart .bars i.hot{background:var(--danger)}
.chart .bars i.now{background:var(--amber)}
/* Деления шкалы: сколько запросов в секунду соответствует высоте. */
.chart .gl{position:absolute; left:0; right:0; border-top:1px solid #201f19; z-index:0}
.chart .gl b{position:absolute; left:0; top:1px; font-size:9px; color:var(--dimmer);
  background:var(--bg2); padding:0 3px; font-weight:400}
/* Пунктир — сколько мы держим сейчас. Всё, что выше него, уходит в потери. */
.chart .capline{position:absolute; left:0; right:0; border-top:1px dashed var(--amber-dim); z-index:2}
.chart .capline b{position:absolute; right:0; top:1px; font-size:9px; color:var(--amber);
  background:var(--bg2); padding:0 3px; font-weight:400}
.chart .nowline{position:absolute; top:-6px; bottom:-6px; width:1px; background:var(--amber); z-index:3}
.chart .band{position:absolute; top:0; bottom:0; z-index:0;
  background:rgba(255,107,87,.14); border-left:1px solid rgba(255,107,87,.45);
  border-right:1px solid rgba(255,107,87,.45)}
.axis{position:relative; height:13px; margin-top:6px}
.axis b{position:absolute; font-size:9px; color:var(--dimmer); font-weight:400; white-space:nowrap}
.axis b.now{color:var(--amber)}

.effects{display:flex; flex-wrap:wrap; gap:5px; margin-top:8px}
.effects span{font-size:9.5px; letter-spacing:.06em; text-transform:uppercase;
  border:1px solid var(--line); color:var(--dim); padding:2px 6px}
.effects span.hot{border-color:var(--danger); color:var(--danger)}
.effects span.stop{border-color:var(--amber-dim); color:var(--amber)}

/* Серверы плиткой 2×3, чтобы все были на экране. */
.srv-grid{display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--line); border:1px solid var(--line); margin-top:10px}

.srv-grid > .card{border:0; padding:9px 10px}
.srv-top{display:flex; gap:4px 8px; align-items:baseline; flex-wrap:wrap}
.srv-top b{font-size:12.5px; font-weight:600}
.srv-top span{font-size:10.5px; color:var(--dim)}
.srv-grid .chips{margin-top:7px; gap:4px}
.srv-grid .chip{padding:5px 8px; font-size:10.5px}
.srv-grid .meter{margin-top:6px; height:4px}

/* Только телефон: там статус прокручивается, иначе не остаётся места под кнопки.
   Признак — ширина. По высоте проверять нельзя: у ноутбука с невысоким окном
   закрепление отключалось, хотя места хватало. */
@media (max-width:520px){
  .sticky-status{position:static}
  .chart{height:46px}
}
@media (max-width:380px){
  .srv-top b{font-size:11.5px}
  .srv-top span{font-size:10px}
  .srv-grid .chip{padding:5px 7px; font-size:10px}
}

/* Мелкая ссылка на клуб внизу отдельной страницы игры. */
.clublink{margin-top:26px; padding-top:14px; border-top:1px solid var(--line);
  font-size:11.5px; color:var(--dimmer); text-align:center}
.clublink a{color:var(--dim); border-bottom:1px solid var(--line)}
.clublink a:hover{color:var(--amber); border-color:var(--amber-dim)}