:root{
  --bg:#16181b; --bg-raised:#1e2125; --bg-sunken:#121417;
  --line:#2b2f34; --line-strong:#3d434a;
  --text:#e6e3dc; --text-dim:#8d9299;
  --accent:#e3a63a; --accent-dim:#8a641f;
  --alive:#7fa05a; --danger:#c0392f; --danger-dim:#5e211b;
  --radius:3px;
  --font-display:'Bitter',Georgia,serif;
  --font-eyebrow:'IBM Plex Sans',system-ui,sans-serif;
  --font-body:'IBM Plex Sans',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  background:var(--bg);color:var(--text);font-family:var(--font-body);
  display:flex;flex-direction:column;align-items:center;
  padding:24px 16px calc(24px + env(safe-area-inset-bottom,0px));min-height:100%;
}
.wrap{width:100%;max-width:980px}
.eyebrow{font-family:var(--font-eyebrow);font-weight:600;font-size:12px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--accent);display:block;margin-bottom:8px}
h1{font-family:var(--font-display);font-weight:800;letter-spacing:.01em;text-transform:uppercase;
  line-height:1.02;margin:0 0 6px;font-size:clamp(28px,5.5vw,44px)}
.sub{color:var(--text-dim);font-size:14px;margin:0 0 18px;max-width:66ch;line-height:1.5}
.mono{font-family:var(--font-mono)}
.stage{position:relative;width:100%;aspect-ratio:16/10;background:#0c0d0f;
  border:1px solid var(--line-strong);border-radius:var(--radius);overflow:hidden}
canvas{display:block;width:100%;height:100%;touch-action:none;background:#0c0d0f}
/* ---------- HUD в духе L4D2 (размеры в em: .hud задаёт масштаб) ---------- */
.hud{position:absolute;inset:0;pointer-events:none;font-family:var(--font-mono);font-size:14px;color:var(--text)}
/* HUD растёт вместе с экраном игры: ~19px в окне 980px, до 26px на весь экран (старые браузеры — 14px) */
.stage{container-type:inline-size}
@supports (font-size:1cqw){.hud{font-size:clamp(13px,1.8cqw,26px)}}
.hud[hidden]{display:none}
.hud .panel,.mate,.mep,.ammo-box,.slot{background:rgba(10,11,13,.72);border:1px solid rgba(230,227,220,.14);border-radius:6px;
  box-shadow:0 2px 10px rgba(0,0,0,.45)}
.bar{display:block;height:.55em;background:rgba(0,0,0,.6);border:1px solid rgba(230,227,220,.18);border-radius:2px;overflow:hidden}
.bar > i{display:block;height:100%;width:100%;background:#7fbf4f;transition:width .12s linear}
.hurt .bar > i{background:#e3a63a}.crit .bar > i{background:#d23a2e}
.face{flex:none;border-radius:4px;background:#191c20;overflow:hidden;display:flex;align-items:center;justify-content:center}
.face canvas{width:100%;height:100%}
/* напарники — слева внизу */
.team{position:absolute;left:.85em;bottom:.85em;display:flex;gap:.55em}
.mate{display:flex;gap:.5em;align-items:center;width:11.5em;padding:.4em .5em;position:relative}
.mate .face{width:3.2em;height:3.2em}
.mate .mt{display:flex;flex-direction:column;gap:.28em;min-width:0;flex:1}
.mate .nm{font-weight:600;font-size:.9em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mate .st{font-size:.72em;color:#e36a5e;letter-spacing:.06em;min-height:1em}
.mate .ic{position:absolute;right:.45em;top:.3em;display:flex;gap:.25em}
.mate .ic canvas{width:1.4em;height:1.4em}
.mate.dead{opacity:.45}.mate.dead .nm{text-decoration:line-through}
.mate.down{border-color:rgba(210,58,46,.8);animation:hudPulse .8s infinite alternate}
@keyframes hudPulse{to{box-shadow:0 0 0 3px rgba(210,58,46,.35)}}
/* вы — справа внизу */
.mep{position:absolute;right:.85em;bottom:.85em;display:flex;gap:.6em;align-items:center;width:15.5em;padding:.5em .6em}
.mep .face{width:4.4em;height:4.4em}
.mep-t{flex:1;display:flex;flex-direction:column;gap:.25em;min-width:0}
.mep-t .nm{font-size:.8em;color:var(--accent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mep-t b{font-size:2.1em;line-height:1;font-weight:700;color:#e8e4da}
.mep-t b::before{content:'✚ ';font-size:.55em;vertical-align:.35em;color:#e36a5e}
.mep .bar{height:.7em}.mep .bar.stam{height:.3em;border-color:transparent;background:rgba(0,0,0,.35)}.mep .bar.stam > i{background:#d9c27a}
.mep.dead{opacity:.5}
/* снаряжение — справа, над вашей карточкой */
.gear{position:absolute;right:.85em;bottom:7.4em;display:flex;flex-direction:column;align-items:flex-end;gap:.35em}
.ammo-box{display:flex;align-items:baseline;gap:.45em;padding:.3em .7em;min-width:7.5em;justify-content:flex-end;border-color:rgba(160,200,90,.35)}
.ammo-box b{font-size:2.3em;line-height:1.05;font-weight:700;color:#b9e07a}
.ammo-box span{font-size:1.05em;color:#8fae62}
.ammo-box em{font-style:normal;font-size:.72em;color:#e3a63a;letter-spacing:.06em}
.ammo-box.low b{color:#e36a5e}
.slot{display:flex;align-items:center;justify-content:flex-end;gap:.4em;padding:.2em .5em;min-width:7.5em;height:2.1em;opacity:.55}
.slot.on{opacity:1;border-color:rgba(227,166,58,.6)}
.slot.empty{display:none}
.slot canvas{height:1.9em;width:auto}
.slot span{font-size:.72em;color:var(--text-dim);white-space:nowrap}
/* лента событий — слева вверху; где мы — справа вверху */
.feed{position:absolute;left:.85em;top:.7em;display:flex;flex-direction:column;gap:.25em;max-width:26em}
.feed div{background:rgba(10,11,13,.66);padding:.2em .55em;border-radius:4px;font-size:.82em;border-left:3px solid #d23a2e;animation:feedIn .2s ease-out;transition:opacity .6s}
.feed div.kill{border-left-color:#e3a63a}.feed div.old{opacity:0}
@keyframes feedIn{from{transform:translateX(-12px);opacity:0}}
.where{position:absolute;right:92px;top:.9em;font-size:.78em;color:var(--text-dim);text-shadow:0 1px 2px #000}
.overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:safe center;overflow-y:auto;
  text-align:center;padding:24px;
  background:radial-gradient(120% 120% at 50% 40%,rgba(12,13,15,.72),rgba(12,13,15,.94))}
.overlay h2{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(24px,4.5vw,38px);margin:0 0 8px;letter-spacing:.01em}
.overlay p{color:var(--text-dim);max-width:48ch;margin:0 0 22px;font-size:14px;line-height:1.5}
.tag{display:inline-block;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;color:var(--bg);
  background:var(--accent);padding:4px 10px;text-transform:uppercase;margin-bottom:16px}
.tag.red{background:var(--danger);color:#fff}
.btn{font-family:var(--font-eyebrow);font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:13px;
  background:var(--accent);color:#16181b;border:1px solid var(--accent);padding:13px 30px;border-radius:var(--radius);
  cursor:pointer;transition:filter .15s ease}
.btn:hover{filter:brightness(1.12)}
.btn.ghost{background:transparent;border-color:var(--line-strong);color:var(--text-dim)}
.btn.ghost:hover{color:var(--text);border-color:var(--text-dim)}
.cards{margin-bottom:20px}
.cards .cap{font-family:var(--font-mono);font-size:11px;color:var(--text-dim);margin:0 0 8px;letter-spacing:.04em}
.roster{display:flex;gap:22px;margin-bottom:16px;flex-wrap:wrap;justify-content:center}
.roster .r{display:flex;flex-direction:column;align-items:center;gap:6px;width:84px}
.bestiary .r span b{color:var(--danger);font-weight:500}
.roster canvas{width:60px;height:60px;background:#191c20;border:1px solid var(--line);border-radius:var(--radius)}
.roster span{font-family:var(--font-mono);font-size:11px;color:var(--text-dim);letter-spacing:.04em;line-height:1.4}
.legend{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:2px 20px;margin:16px 0 0;
  border-top:1px solid var(--line);padding-top:14px;font-size:13px;color:var(--text-dim)}
.legend div{padding:3px 0}
.legend kbd{font-family:var(--font-mono);color:var(--text);background:var(--bg-raised);border:1px solid var(--line);
  border-bottom-color:var(--line-strong);border-radius:3px;padding:1px 6px;font-size:12px}
.picker{margin-top:18px}
.pk-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pk-head .eyebrow{margin:0}
.btn.sm{padding:7px 14px;font-size:11px}
.pk-hint{font-family:var(--font-mono);font-size:12px;color:var(--text-dim);margin:6px 0 12px}
.pk-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px} /* по 4 в строке: одна строка — одна открываемая четвёрка */
@media (max-width:900px){.pk-grid{grid-template-columns:repeat(2,1fr)}}
.pk{position:relative;display:flex;gap:10px;align-items:flex-start;text-align:left;background:var(--bg-raised);
  border:1px solid var(--line);border-radius:var(--radius);padding:8px;cursor:pointer;color:var(--text);font:inherit;transition:border-color .15s}
.pk:hover{border-color:var(--line-strong)}
.pk canvas{width:56px;height:56px;flex-shrink:0;background:#191c20;border-radius:2px}
.pk-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.pk-t b{font-family:var(--font-display);font-size:15px;font-weight:700;overflow-wrap:anywhere}
.pk-role{font-family:var(--font-mono);font-size:11px;color:var(--accent)}
.pk-desc{font-size:12px;color:var(--text-dim);line-height:1.35}
.pk.you{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.pk.pkbot{border-color:var(--alive)}
.pk.locked{cursor:not-allowed;opacity:.5}.pk.locked canvas{filter:grayscale(1) brightness(.45)}.pk.locked:hover{border-color:var(--line)}
.pk-tag{position:absolute;top:6px;right:8px;font-style:normal;font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;
  background:var(--accent);color:var(--bg);padding:1px 6px}
.pk-tag.pkbot{background:var(--alive)}
@media (max-width:560px){.pk-grid{grid-template-columns:1fr 1fr}.pk{flex-direction:column;align-items:center;text-align:center}.pk-t{align-items:center}.pk-desc{display:none}}
.back{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:12px;color:var(--text-dim);text-decoration:none;margin-bottom:14px;transition:color .15s}
.back:hover{color:var(--accent)}
a.btn{text-decoration:none;display:inline-block}
.foot{margin-top:14px;font-size:12px;color:var(--text-dim);font-family:var(--font-mono)}
@media (max-width:560px){.legend{grid-template-columns:1fr 1fr}.roster{gap:10px}.roster .r{width:72px}.overlay p{margin-bottom:14px}}
@media (max-width:560px),(max-height:520px){.cards{display:none}.overlay p{display:none}}
@media (max-width:760px){
  .stage{aspect-ratio:auto}
  canvas{height:auto;aspect-ratio:16/10}
  .hud{font-size:9px}
}

/* итоги главы */
.stats{margin:12px auto 16px;border-collapse:collapse;font-family:var(--font-mono);font-size:12px;min-width:min(420px,100%)}
.stats th{color:var(--text-dim);font-weight:500;padding:3px 10px;text-align:right}.stats th:first-child{text-align:left}
.stats td{padding:4px 10px;border-top:1px solid var(--line);text-align:right}.stats td:first-child{text-align:left;color:var(--text)}
.stats tr.me td{color:var(--accent)}
/* «чёрно-белый»: упал дважды — ещё одно падение убьёт */
.bw .bar > i{background:#e6e6e6 !important}.bw{filter:grayscale(1)}
body.bwv #c{filter:saturate(.2) contrast(1.06)}
/* шапка над экраном: описание во всю ширину экрана игры, можно свернуть */
.sub{max-width:none}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.topbar .back{margin-bottom:0}
.intro-tg{font-family:var(--font-mono);font-size:12px;color:var(--text-dim);background:none;border:1px solid var(--line-strong);
  border-radius:var(--radius);padding:5px 10px;cursor:pointer;transition:color .15s,border-color .15s}
.intro-tg:hover{color:var(--accent);border-color:var(--accent)}
.intro[hidden]{display:none}

/* итоги главы: награды и достижения */
.awards{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:-6px auto 12px;max-width:640px}
.award{font-family:var(--font-mono);font-size:11px;color:var(--text-dim);border:1px solid var(--line-strong);border-radius:3px;padding:3px 8px;background:rgba(10,11,13,.5)}
.award b{color:var(--accent);font-weight:600}.award.me{border-color:var(--accent)}
.ach-new{font-family:var(--font-mono);font-size:12px;color:var(--text);margin:0 auto 14px}.ach-new b{color:var(--accent)}
.achs{margin-top:18px}
.ach-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px;margin-top:8px}
.ach{background:var(--bg-raised);border:1px solid var(--line);border-radius:var(--radius);padding:8px 10px;display:flex;flex-direction:column;gap:2px;opacity:.5}
.ach b{font-family:var(--font-display);font-size:14px;font-weight:700}
.ach span{font-size:12px;color:var(--text-dim);line-height:1.35}
.ach.got{opacity:1;border-color:var(--accent)}.ach.got b{color:var(--accent)}
.intro{padding-bottom:12px}.intro .sub{margin-bottom:6px}

/* ---------- статистика игроков, прогресс, комментарии ---------- */
.board,.profile,.comments{margin-top:22px}
.board-tot{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.board-tot .tile{background:var(--bg-raised);border:1px solid var(--line);border-radius:var(--radius);padding:8px 12px;min-width:120px}
.board-tot .tile b{display:block;font-family:var(--font-display);font-size:22px;color:var(--accent)}
.board-tot .tile span{font-family:var(--font-mono);font-size:11px;color:var(--text-dim)}
.board-wrap{overflow-x:auto}
.board-tbl{width:100%;border-collapse:collapse;font-size:13px}
.board-tbl th{font-family:var(--font-mono);font-size:11px;font-weight:500;color:var(--text-dim);text-align:right;padding:6px 8px;border-bottom:1px solid var(--line)}
.board-tbl td{text-align:right;padding:6px 8px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.board-tbl th:nth-child(2),.board-tbl td:nth-child(2){text-align:left}
.board-tbl tr.me td{color:var(--accent)}
.prof-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.prof-row code{font-family:var(--font-mono);font-size:18px;letter-spacing:.18em;font-weight:700;background:var(--bg-sunken);border:1px solid var(--line-strong);padding:7px 9px;border-radius:var(--radius);user-select:all;word-break:break-all}
.prof-row input,.com-form input,.com-form textarea{background:var(--bg-sunken);border:1px solid var(--line-strong);color:var(--text);padding:8px 10px;border-radius:var(--radius);font:inherit;font-size:13px}
.prof-row input{flex:1;min-width:200px}
.com-form{display:flex;flex-direction:column;gap:8px;margin:8px 0 14px}
.com-form textarea{resize:vertical;min-height:64px;font-family:var(--font-sans,inherit)}
.com-top{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.com-top input{width:180px}
.com-emo{display:flex;flex-wrap:wrap;gap:2px}
.com-emo button{background:none;border:1px solid transparent;border-radius:6px;font-size:18px;line-height:1;padding:3px 4px;cursor:pointer}
.com-emo button:hover{border-color:var(--line-strong);background:var(--bg-raised)}
.com-bot{display:flex;justify-content:space-between;align-items:center;gap:8px}
.com-bot .pk-hint{margin:0}
.com-list{display:flex;flex-direction:column;gap:8px}
.com{background:var(--bg-raised);border:1px solid var(--line);border-radius:var(--radius);padding:9px 12px}
.com-h{display:flex;gap:10px;align-items:baseline;font-family:var(--font-mono);font-size:12px}
.com-h b{color:var(--accent)}
.com-h span{color:var(--text-dim)}
.com-h .del{margin-left:auto;background:none;border:0;color:var(--danger,#c0392f);cursor:pointer;font-size:13px}
.com-t{white-space:pre-wrap;word-break:break-word;margin:5px 0 7px;font-size:14px;line-height:1.45}
.com-r{display:flex;flex-wrap:wrap;gap:4px}
.com-r button{background:var(--bg-sunken);border:1px solid var(--line);border-radius:12px;padding:2px 7px;font-size:13px;cursor:pointer;color:var(--text)}
.com-r button.on{border-color:var(--accent)}
.com-r button.z{opacity:.45}
.com-r button:hover{opacity:1}
.com-note{margin:6px 0 4px;padding:8px 12px;border-left:3px solid var(--accent);background:var(--bg-raised);border-radius:var(--radius);font-size:13px;line-height:1.45;color:var(--text)}
/* телефон: блок описания свёрнут целиком (заголовок тоже), пока не нажмут «Об игре» */
.intro.folded{display:none}

/* ---------- телефон: компактная страница ---------- */
@media (max-width:560px){
  .pk-head{flex-wrap:wrap;row-gap:4px}
  .pk-head .pk-hint{margin:0}
  /* персонажи — по 3 в ряд, мелко; закрытые — ещё компактнее */
  .pk-grid{grid-template-columns:repeat(3,1fr);gap:6px}
  .pk{padding:6px 4px;gap:4px}
  .pk canvas{width:44px;height:44px}
  .pk-name,.pk b{font-size:12px}
  .pk-role{font-size:9.5px;line-height:1.25}
  .pk-tag{top:3px;right:4px;font-size:8.5px;padding:0 3px}
  .pk.locked{padding:4px}.pk.locked canvas{width:30px;height:30px}.pk b{word-break:break-word;line-height:1.15}
  /* достижения — в два столбца */
  .ach-grid{grid-template-columns:1fr 1fr;gap:6px}
  .ach{padding:6px 8px}.ach b{font-size:12.5px}.ach span{font-size:11px}
  .board-tot .tile{min-width:0;flex:1 1 40%;padding:6px 10px}.board-tot .tile b{font-size:18px}
  .board-tbl{font-size:12px}.board-tbl th,.board-tbl td{padding:5px 5px}
  .prof-row input{min-width:0}
  .com-top input{width:100%}
  .com-emo button{font-size:20px;padding:4px 5px}
  .foot{font-size:12px}
}
/* сворачиваемые разделы (на телефоне): нажмите на заголовок */
.fold>.pk-head{cursor:pointer;user-select:none}
.fold>.pk-head .eyebrow::after{content:' ▾';color:var(--text-dim)}
.fold.shut>.pk-head .eyebrow::after{content:' ▸'}
.fold.shut>:not(.pk-head){display:none!important}
.feed div.sys{border-left-color:#5aa9e6;color:#dfe9f2}
/* мало здоровья: своя панель пульсирует красным — видно краем глаза в замесе */
.mep.crit{animation:mepCrit .8s ease-in-out infinite}.mep.crit .mep-t b{color:#ff5a4a}
.mep.hurt{border-color:rgba(227,166,58,.55)}
@keyframes mepCrit{0%,100%{background:rgba(10,11,13,.72);border-color:rgba(230,227,220,.14);box-shadow:none}
  50%{background:rgba(120,14,10,.82);border-color:#ff4a3a;box-shadow:0 0 .9em rgba(255,60,40,.75)}}
@media (prefers-reduced-motion:reduce){.mep.crit{animation:none;background:rgba(110,14,10,.8);border-color:#ff4a3a}}
/* номер слота (клавиши 1–4) */
.slot{position:relative}.slot::before{content:attr(data-k);position:absolute;left:.4em;top:.15em;font-size:.68em;font-weight:700;color:rgba(230,227,220,.55)}
.slot.on::before{color:var(--accent)}
body.is-touch .slot::before{display:none}
/* пройденная глава: галочка и зелёная рамка */
#chapBtns .btn.done{border-color:rgba(110,190,110,.75);color:#b8e6b0;background:rgba(40,70,40,.35)}
#chapBtns .btn.done .ck{font-style:normal;color:#7fdc7f;font-weight:700}

/* режим разработчика: панель кнопок полигона */
#devPanel{position:fixed;left:8px;top:8px;z-index:60;display:flex;flex-wrap:wrap;gap:4px;max-width:min(560px,calc(100vw - 16px));padding:6px;background:rgba(10,11,13,.82);border:1px solid rgba(230,200,90,.45);border-radius:6px;font:12px var(--font-mono)}
#devPanel[hidden]{display:none}
#devPanel b{color:#e6c85a;align-self:center;padding:0 4px}
#devPanel button{font:inherit;color:#e6e3dc;background:rgba(255,255,255,.06);border:1px solid rgba(230,227,220,.2);border-radius:4px;padding:4px 7px;cursor:pointer}
#devPanel button:hover{background:rgba(255,255,255,.14)}
#devPanel button.on{border-color:#7fbf4a;color:#bfe6a0}

/* без случайного масштабирования страницы на телефоне: двойной тап и щипок по игре не зумят (браузеры, игнорирующие user-scalable) */
html{touch-action:manipulation;-webkit-text-size-adjust:100%;text-size-adjust:100%}
.stage,.stage *{touch-action:none}
.stage .overlay,.stage .overlay *{touch-action:pan-y}

/* чат в лобби кооператива */
.lb-chat{margin-top:10px;border:1px solid var(--line-strong);border-radius:var(--radius);background:rgba(0,0,0,.25)}
.lb-chat-log{max-height:120px;min-height:52px;overflow-y:auto;padding:6px 8px;font-size:12.5px;line-height:1.45;text-align:left;touch-action:pan-y}
.lb-chat-log b{color:var(--accent,#e6c85a)}
.lb-chat form{display:flex;gap:6px;padding:6px;border-top:1px solid var(--line-strong)}
.lb-chat input{flex:1;min-width:0;background:var(--bg-sunken);border:1px solid var(--line-strong);color:var(--text);padding:6px 8px;border-radius:var(--radius);font:inherit;font-size:13px}
/* админ: кнопка «скрыть игрока» в таблице */
.board-tbl .del{background:none;border:0;color:var(--danger,#c0392f);cursor:pointer;font-size:13px;padding:0 4px}