/* =========================================================================
   ЕХО ПОРОЖНЕЧІ — ark.css
   Єдиний шар стилів. Написаний з нуля за макетом «елементи гри» (E01–E20,
   зібрані екрани S1–S3). Замінює main.css + screen.css + elements.css
   і той CSS, що раніше вшивався рядками в media.js та perks.js.

   Інваріанти макета, від яких не відступаємо:
     · шрифт лише IBM Plex Mono;
     · жодних заокруглень і градієнтних заливок у плашках;
     · рамка 1 px, акцент — риска 2 px ліворуч;
     · мінімальна ціль 44 px;
     · текст у журналі не менший за 15 px.

   Стартовий екран і вікно входу тут не описані: вони лишились із минулого
   вигляду й живуть у своєму стилі (#startscreen, .ss-*, systems/expansion.js).
   ========================================================================= */

/* ═══════════════════════ 0 · ТОКЕНИ ТА БАЗА ═════════════════════════════ */

:root{
  /* палітра макета: зелений — світ і ти, бурштин — вибір і ризик,
     червоний — бій і втрата, синій — Янус, фіолетовий — Хор і марення */
  --bg:#020604;
  --surface:#060c09;
  --surface-2:#08120d;
  --deep:#04100b;
  --head:#04120d;

  --hair:rgba(110,231,160,.16);
  --hair-soft:rgba(110,231,160,.08);
  --hair-strong:rgba(110,231,160,.34);

  --green:#6ee7a0;
  --ink:#cfeedd;
  --ink-hi:#dbffea;
  --mut:#86b79c;
  --dim:#4e7a64;
  --faint:#2f4a3d;

  --amber:#f0b757;
  --red:#ff6b5e;
  --blue:#7cc6ff;
  --violet:#c6a3ff;
  --ink-red:#ffd9d3;
  --ink-violet:#e0d2ff;
  --ink-amber:#ffdfa8;
  --ink-blue:#cfe8ff;
  --ink-green:#bff2d4;
  --ink-teal:#8fe0c4;
  --ink-steel:#bfe0e8;
  --ink-coral:#ffb09c;

  --font:"IBM Plex Mono","Cascadia Mono","Consolas","Courier New",ui-monospace,monospace;

  /* сітка */
  --panel-w:380px;
  --pad-x:46px;
  --head-h:109px;
  --strip-h:34px;

  /* розміри елементів */
  --foe-port:84px;
  --portrait:78px;
  --vn-gap:15px;
  /* Спільна ліва межа реплік: і портретні блоки, і картки безтілесних
     голосів починають текст рівно тут. */
  --speech-x:calc(var(--portrait) + var(--vn-gap));
  --fs-log:15px;
  --lh-log:1.75;

  --loc-img:none;
  --el-toast-bottom:120px;
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{ height:100%; }

body{
  margin:0;
  display:grid;
  place-items:center;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-size:13px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}

/* ── ФОН 16a · ТЕХНІЧНА СІТКА ──────────────────────────────────────────
   Дві сітки (64 px і 320 px), світіння по центру й вінʼєтка. Фон працює
   тільки поки його не помічають першим: він темніший за екран, нерухомий
   і не має жодної деталі, яскравішої за текст гри. На вікні, вужчому за
   екран, його просто не видно — екран накриває все.                    */
body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(110,231,160,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(110,231,160,.055) 1px,transparent 1px),
    linear-gradient(rgba(110,231,160,.11) 1px,transparent 1px),
    linear-gradient(90deg,rgba(110,231,160,.11) 1px,transparent 1px);
  background-size:64px 64px,64px 64px,320px 320px,320px 320px;
  background-position:center;
}
body::after{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(90% 70% at 50% 44%,rgba(110,231,160,.07),transparent 62%),
    radial-gradient(120% 100% at 50% 50%,transparent 34%,rgba(2,6,4,.92) 100%);
}

/* службові написи й координатні засічки — тільки коли навколо екрана
   справді є місце, інакше вони лізуть на рамку */
/* шар фону виведений із потоку: інакше він стає елементом сітки body
   й забирає в екрана висоту */
.ark-bg{
  display:none;
  position:fixed; inset:0; z-index:1; pointer-events:none;
}
.ark-bg span{
  position:fixed;
  color:#1f3d33;
  font-size:10px; letter-spacing:.34em;
  white-space:nowrap;
}
.ark-bg i{ position:fixed; background:rgba(110,231,160,.2); }

@media (min-width:1560px) and (min-height:920px){
  .ark-bg{ display:block; }
  .ark-bg .tl{ left:40px;  top:clamp(10px,3vh,34px); }
  .ark-bg .tr{ right:40px; top:clamp(10px,3vh,34px); }
  .ark-bg .bl{ left:40px;  bottom:clamp(10px,3vh,34px); }
  .ark-bg .br{ right:40px; bottom:clamp(10px,3vh,34px); }
  .ark-bg .ml{ left:40px;  top:50%; width:22px; height:1px; }
  .ark-bg .mr{ right:40px; top:50%; width:22px; height:1px; }
  .ark-bg .mt{ left:50%; top:clamp(10px,3vh,34px);    width:1px; height:22px; }
  .ark-bg .mb{ left:50%; bottom:clamp(10px,3vh,34px); width:1px; height:22px; }
}

button,input,select,textarea{ font-family:inherit; }

.sr-only{
  position:absolute !important;
  width:1px; height:1px;
  margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%);
  white-space:nowrap; border:0;
}

::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:rgba(110,231,160,.2); }
::-webkit-scrollbar-thumb:hover{ background:rgba(110,231,160,.34); }
*{ scrollbar-width:thin; scrollbar-color:rgba(110,231,160,.24) transparent; }


/* ═══════════════════════ 1 · СІТКА ЕКРАНА ══════════════════════════════ */
/* Рядки: шапка · стрічка завдання · журнал · дії.
   Панель тримає два останні рядки правою колонкою.
   Волосяні лінії — це проміжок 1 px, підсвічений тлом сітки.            */

#screen{
  position:relative;
  z-index:2;
  /* полотно макета: більшим екран не стає, менше вікно — займає все */
  width:min(100%,1440px);
  height:min(100%,880px);
  display:grid;
  grid-template-columns:minmax(0,1fr) var(--panel-w);
  grid-template-rows:var(--head-h) var(--strip-h) minmax(140px,1fr) auto;
  gap:0 1px;
  background:var(--hair);
  border:1px solid rgba(110,231,160,.2);
  box-shadow:0 40px 120px -30px rgba(0,0,0,.95),0 0 60px -20px rgba(110,231,160,.12);
  overflow:hidden;
}

#topbar         { grid-column:1 / -1; grid-row:1; }
#objective-strip{ grid-column:1 / -1; grid-row:2; }
#logpanel       { grid-column:1; grid-row:3; }
#side           { grid-column:2; grid-row:3 / span 2; }
#actpanel       { grid-column:1; grid-row:4; }
#mobilebar      { display:none; }

.panel{ background:var(--surface); min-width:0; min-height:0; }


/* ═══════════════════════ 2 · ШАПКА ═════════════════════════════════════ */
/* Кадр локації лежить під градієнтами макета: арт видно, але контраст
   тексту той самий, що й на градієнтній шапці без кадру.                */

#topbar{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:0 26px;
  background-color:var(--head);
  overflow:hidden;
}
/* Кадр локації 320×180 у смузі 13:1 при cover перетворюється на невиразну
   пляму: видно 13% висоти картинки, розтягнутої вчетверо. Тому кадр займає
   праву частину шапки, де немає великої назви, і розчиняється з обох боків —
   ліворуч у градієнт під назву, праворуч з-під показників. */
#topbar::before{
  content:"";
  position:absolute; inset:0 0 0 38%; z-index:0;
  background:var(--loc-img) center 42% / cover no-repeat;
  image-rendering:pixelated;
  filter:saturate(.9) contrast(1.04);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 46%,#000 74%,rgba(0,0,0,.28) 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 46%,#000 74%,rgba(0,0,0,.28) 100%);
}
#topbar::after{
  content:"";
  position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(70% 80% at 62% 40%,rgba(110,231,160,.14),transparent 72%),
    linear-gradient(90deg,rgba(4,10,7,.94) 0%,rgba(4,10,7,.68) 44%,rgba(4,10,7,.32) 100%);
}
#topbar > *{ position:relative; z-index:2; }

.tb-left{ display:flex; flex-direction:column; gap:9px; min-width:0; }

.tb-brand{ display:flex; align-items:center; gap:11px; }
.tb-mark{
  width:20px; height:20px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(110,231,160,.4);
  font-size:10px; color:var(--green);
}
.tb-name{ font-size:11px; letter-spacing:.22em; color:var(--mut); }
.tb-os  { font-size:10px; letter-spacing:.18em; color:var(--dim); }

.tb-loc{
  margin:0;
  font-size:26px; font-weight:600; letter-spacing:.14em;
  color:var(--ink-hi);
  text-shadow:0 2px 16px rgba(0,0,0,.95);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.tb-right{ display:flex; flex-direction:column; align-items:flex-end; gap:9px; flex:0 0 auto; }

.flight-status{
  display:flex; align-items:center; gap:18px;
  font-size:11px; letter-spacing:.18em;
}
.link-ok{ display:inline-flex; align-items:center; gap:7px; color:var(--mut); white-space:nowrap; }
.online-dot{ width:6px; height:6px; flex:0 0 auto; background:var(--green); }
#shipclock{ color:var(--amber); white-space:nowrap; }
#shiploc{ position:absolute; }


/* ═══════════════════════ 3 · СТРІЧКА ЗАВДАННЯ ══════════════════════════ */

#objective-strip{
  display:flex; align-items:center; gap:14px;
  padding:0 26px;
  background:var(--deep);
  overflow:hidden;
}
.obj-kicker{ font-size:10px; letter-spacing:.24em; color:var(--amber); white-space:nowrap; }
.obj-sep{ width:1px; height:12px; flex:0 0 auto; background:var(--hair-strong); }
.obj-text{
  min-width:0;
  font-size:12px; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.obj-ship{
  margin-left:auto; flex:0 0 auto;
  font-size:10px; letter-spacing:.14em; color:var(--dim);
  white-space:nowrap;
}
.obj-ship b{ color:var(--mut); font-weight:600; }
.obj-ship b.crit{ color:var(--red); }
.obj-ship b.ok  { color:var(--green); }


/* ═══════════════════════ 4 · МОБІЛЬНА СМУГА ════════════════════════════ */

#mobilebar{
  align-items:center; gap:10px;
  padding:0 14px;
  background:var(--deep);
}
.mb-lab{ font-size:9px; letter-spacing:.16em; color:var(--dim); flex:0 0 auto; }
.mb-bar{ position:relative; flex:1 1 auto; height:5px; background:rgba(110,231,160,.12); }
.mb-bar > span{ position:absolute; top:0; bottom:0; left:0; width:100%; }
.mb-bar.hp  > span{ background:var(--red); }
.mb-bar.san > span{ background:var(--violet); }
.mb-lv{ font-size:10px; color:var(--mut); white-space:nowrap; flex:0 0 auto; }
.mb-lv b{ color:var(--ink-hi); font-weight:600; }
#panel-toggle{
  width:30px; height:30px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(110,231,160,.3); background:transparent;
  color:var(--green); font-size:13px; cursor:pointer;
}


/* ═══════════════════════ 5 · ЖУРНАЛ ════════════════════════════════════ */

#logpanel{ display:flex; flex-direction:column; overflow:hidden; }

#story{
  flex:1 1 0; min-height:0;
  padding:26px var(--pad-x) 28px;
  overflow-y:auto;
  overscroll-behavior:contain;
  font-size:var(--fs-log);
  line-height:var(--lh-log);
  color:var(--ink);
  white-space:pre-line;              /* сцени приходять рядками, не абзацами */
  text-wrap:pretty;
}

/* голоси й маркери тексту */
#story p{ margin:0 0 12px; }
#story .prompt{ color:var(--dim); }
#story .speaker{ color:var(--amber); font-weight:600; }
#story .ai     { color:var(--blue); }
#story .good   { color:var(--green); font-weight:600; }
#story .dmg    { color:var(--red); font-weight:600; }
#story .amber  { color:var(--amber); }
/* .hint — СЛУЖБОВА підказка: витрата ресурсу, час, незворотність, керування.
   .echo-line — тихий підсумковий рядок епілогу («що по тобі лишилось»).
   Класи розділено свідомо: § TEXT-01 специфікації забороняє маскувати
   оповідь під ігрову підказку. Вигляд однаковий, призначення різне. */
#story .hint   { color:var(--mut); }
#story .echo-line { color:var(--mut); }
#story .sys    { color:var(--dim); font-size:.82em; letter-spacing:.14em; }
#story b       { color:var(--ink-hi); font-weight:600; }

#story hr.div{
  height:1px; margin:16px 0; border:0;
  background:repeating-linear-gradient(90deg,var(--hair) 0 5px,transparent 5px 10px);
}

/* блокові вставки в журналі не успадковують pre-line */
#story .el-foe,
#story .cbt,
#story .check-anim,
#story .janus-card,
#story .el-end-hd,
#story .el-end-stats,
#story .el-reg,
#story .el-death-hd{ white-space:normal; }

/* --- портретна репліка (E13) --- */
#story .vn-line{ position:relative; display:flex; gap:var(--vn-gap); margin:14px 0; }
.vn-portrait{
  position:relative; flex:0 0 auto;
  width:var(--portrait); height:var(--portrait);
  border:1px solid #357e69;
  background:#061a12;
}
.vn-portrait img{
  width:100%; height:100%; display:block;
  object-fit:cover;
  image-rendering:pixelated;
}
/* Кадру немає — рамку лишаємо порожньою: відступ репліки не має стрибати. */
.vn-line.no-img .vn-portrait{ border-color:var(--hair); }
.vn-line.no-img .vn-portrait img{ visibility:hidden; }
.vn-text{ flex:1 1 auto; min-width:0; color:var(--ink); }

.vn-nameplate{
  position:absolute; left:-1px; right:-1px; bottom:-1px;
  padding:2px 0;
  border:1px solid rgba(240,183,87,.4);
  background:var(--deep);
  font-size:9px; letter-spacing:.14em; color:var(--amber);
  text-align:center; text-transform:uppercase;
  white-space:nowrap; overflow:hidden;
}

.enemy-portrait{ border-color:rgba(255,107,94,.5); }
.enemy-line .vn-text{ color:var(--ink-red); }

/* --- пряма мова в діалозі ---
   У репліці два шари: те, що персонаж СКАЗАВ («…»), і те, що він при
   цьому РОБИТЬ. Мова світиться тоном мовця, дія відступає в --mut.
   Клас has-say ставить ui/media.js — блок без лапок лишається звичайним.
   Тони беремо з тієї ж палітри: бурштин — Марко, зелений — Тесс і Гермес,
   фіолетовий — люди Хору, червоний — вороги, решта — світлий --ink-hi. */
#story .vn-line.has-say .vn-text{ color:var(--mut); }
#story .vn-say.has-say          { color:var(--mut); }
#story .say     { color:var(--tone,var(--ink-hi)); }
#story .say-nar { color:var(--mut); }

/* Тон мовця несе змінна --tone, а не сам колір: тоді вкладені наголоси
   (<b>, .amber-text, .good, .dmg) перекривають його простим `inherit`,
   без гонки за вагою селекторів.
   Свій тон має кожен, хто говорить: бурштин — Марко (інженер, тепла
   людська лінія), сталь — Іда (холод командирки), корал — Осія
   («Незламні»), зелений — Тесс, глибший зелений — Гермес (штурман-ШІ),
   фіолетовий — люди Хору, синій — Янус, червоний — вороги.
   Голос гравця лишається світлим --ink-hi: його маркує бурштинова
   мітка «Ти:», а не барва персонажа. */
#story .say-amber  { --tone:var(--ink-amber);  }
#story .say-green  { --tone:var(--ink-green);  }
#story .say-teal   { --tone:var(--ink-teal);   }
#story .say-steel  { --tone:var(--ink-steel);  }
#story .say-coral  { --tone:var(--ink-coral);  }
#story .say-violet { --tone:var(--ink-violet); }
#story .say-you    { --tone:var(--ink-hi);     }
#story .vn-line.enemy-line { --tone:var(--ink-red); }

#story .amber-text .say,
#story b .say,
#story .good .say,
#story .dmg .say{ color:inherit; }


/* ═══════════════════════ 6 · БОРТОВА ПАНЕЛЬ ════════════════════════════ */

#side{ display:flex; flex-direction:column; overflow:hidden; }

#dossier-close{ display:none; }

.side-tabs{ display:flex; flex:0 0 auto; border-bottom:1px solid var(--hair); }
.side-tab{
  flex:1; height:40px;
  display:flex; align-items:center; justify-content:center;
  border:0; border-bottom:1px solid transparent;
  background:transparent;
  font-size:11px; letter-spacing:.22em; color:var(--dim);
  cursor:pointer;
}
.side-tab:hover{ color:var(--mut); }
.side-tab.active{ color:var(--green); border-bottom-color:var(--green); }

.side-content{
  display:none;
  flex:1 1 0; min-height:0;
  padding:20px 22px 22px;
  overflow-y:auto;
}
.side-content.active{ display:flex; flex-direction:column; gap:22px; }
#journal-content.active{ gap:24px; }

.side-section{ min-width:0; }
.section-mark{ display:none; }

#side h3{
  margin:0 0 9px;
  padding-bottom:9px;
  border-bottom:1px solid rgba(110,231,160,.18);
  font-size:11px; font-weight:600; letter-spacing:.24em;
  color:var(--green);
  display:flex; align-items:center; gap:10px;
}
#side h3 small{ font-size:inherit; font-weight:inherit; letter-spacing:inherit; }

/* --- особа Вартового: роль ліворуч, позивний праворуч --- */
.side-section.identity{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(110,231,160,.12);
}
.id-role{
  min-width:0;
  font-size:15px; font-weight:600; letter-spacing:.14em; color:var(--dim);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.id-role small{ font-size:inherit; }
.id-role b{ color:inherit; font-weight:600; }
.id-name{
  flex:0 0 auto;
  font-size:15px; font-weight:600; letter-spacing:.14em;
  color:var(--green);
  text-align:right;
  white-space:nowrap;
}

/* --- стан: HP / SAN / XP (E10) --- */
.vital-label{
  display:flex; align-items:baseline; justify-content:space-between;
  font-size:13px; letter-spacing:.12em; color:var(--mut);
}
.vital-label b{ font-size:15px; font-weight:600; }
.hp-label  b{ color:var(--red); }
.san-label b{ color:var(--violet); }
.xp-label  b{ color:var(--amber); }

.bar{
  position:relative;
  height:7px; margin:4px 0 7px;
  background:rgba(110,231,160,.12);
}
.bar:last-of-type{ margin-bottom:0; }
.bar > span{
  position:absolute; top:0; bottom:0; left:0;
  width:100%;
  transition:width .2s linear;
}
.bar.hp  > span{ background:var(--red); box-shadow:0 0 10px rgba(255,107,94,.5); }
.bar.san > span{ background:var(--violet); }
.bar.xp  > span{ background:var(--amber); }
.bar.low > span{ animation:ark-pulse 1.4s ease-in-out infinite; }

@keyframes ark-pulse{ 0%,100%{opacity:1} 50%{opacity:.5} }

/* --- характеристики й набуті риси (E07) --- */
.stats-section{ display:grid; grid-template-columns:1fr 1fr; gap:5px 20px; }
.stats-section h3{ grid-column:1 / -1; margin-bottom:0; }
.stats-section .stat-row{
  display:flex; align-items:center; gap:9px;
  min-height:28px;
  font-size:13px; color:var(--mut);
}
.stats-section .stat-row > b{ margin-left:auto; font-size:15px; font-weight:600; color:var(--ink-hi); }

#side h3 #statpts{
  padding:2px 7px;
  background:var(--amber);
  color:#020604;
  font-size:10px; font-weight:400; letter-spacing:.16em;
  white-space:nowrap;
}
#statpts:empty{ display:none; }

.stat-plus{
  width:24px; height:24px; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(240,183,87,.5); background:transparent;
  color:var(--amber); font-size:13px; line-height:1; padding:0;
  cursor:pointer;
}
.stat-plus:hover{ background:rgba(240,183,87,.16); }

/* набуті риси — плашками, а не рядками */
#perk-section{ grid-column:1 / -1; }
#perk-section h3{ margin-bottom:8px; }
#perk-section .perk-count{ margin-left:auto; font-size:11px; font-weight:400; letter-spacing:0; color:var(--dim); }
#perk-section .stat-row{
  display:inline-flex; align-items:center; gap:6px;
  margin:0 6px 6px 0;
  padding:4px 9px;
  border:1px solid rgba(110,231,160,.28);
  font-size:11px; letter-spacing:.06em; color:var(--ink);
  min-height:0;
}
#perk-section .stat-row::before{ content:"◈"; color:var(--green); }
#perk-section .stat-row b{ display:none; }

#sign-section .stat-row{
  display:flex; align-items:center; justify-content:space-between;
  min-height:28px; font-size:12px; color:var(--mut);
}
#sign-section .stat-row b{ color:var(--violet); font-weight:600; }

/* --- журнал: завдання, стан корабля, лог подій (E20) --- */
.objective-section h3{ border-bottom-color:rgba(240,183,87,.3); color:var(--amber); }
#el-saved{
  display:inline-flex; align-items:center; gap:5px;
  margin-left:auto;
  font-size:9px; font-weight:400; letter-spacing:.14em; color:var(--dim);
  white-space:nowrap;
}
#el-saved::before{ content:""; width:5px; height:5px; background:var(--green); }
#el-saved:empty{ display:none; }

#objective-text{ margin:0; font-size:13px; line-height:1.7; color:var(--ink); }

.ship-row{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:6px 0;
  font-size:12px; color:var(--mut);
}
.ship-row b{ color:var(--ink-hi); font-weight:600; }
.danger-text{ color:var(--red) !important; }
.amber-text { color:var(--amber) !important; }

#event-log{ margin:0; padding:0; list-style:none; }
#event-log li{
  display:flex; gap:12px;
  padding:6px 0;
  font-size:12px; line-height:1.5; color:var(--mut);
}
#event-log li:first-child{ color:var(--ink); }
#event-log time{ flex:0 0 auto; color:var(--dim); }

.session-actions{ display:flex; gap:6px; margin-top:auto; }
.session-actions button{
  flex:1;
  min-height:36px;
  border:1px solid rgba(110,231,160,.24); background:transparent;
  color:var(--mut);
  font-size:10px; letter-spacing:.16em;
  cursor:pointer;
}
.session-actions button:hover{ border-color:var(--green); color:var(--green); }


/* ═══════════════════════ 7 · ПАНЕЛЬ ДІЙ ════════════════════════════════ */

#actpanel{
  border-top:1px solid var(--hair);
  padding-bottom:22px;
  max-height:52dvh;
  overflow-y:auto;
  overscroll-behavior:contain;
}

.panel-hd{
  position:sticky; top:0; z-index:2;
  display:flex; align-items:center;
  height:28px;
  padding:0 var(--pad-x);
  background:var(--surface);
}
.panel-hd .hd-l{ font-size:11px; letter-spacing:.24em; color:var(--amber); }
.panel-hd .hd-r{ margin-left:auto; font-size:10px; letter-spacing:.18em; color:var(--mut); }
#actpanel.el-combat .panel-hd .hd-l{ color:var(--red); }

#choices{
  display:flex; flex-direction:column; gap:6px;
  padding:0 var(--pad-x);
}

/* Позначка перевірки стоїть правим краєм рядка, а не перед текстом: так
   дії починаються з однієї вертикалі незалежно від того, чи є в них СК,
   і список не «дихає» від сцени до сцени.
   Проміжки задаємо падінгами, а не gap: порожній .car тоді нічого не
   з’їдає, і нетеговані рядки мають повну ширину тексту.
   --row-h — висота першого рядка тексту: номер і позначка центруються
   саме по ньому, а не по всій висоті кнопки з переносами. */
#choices button{
  --row-h:calc(15px * 1.45);
  display:grid;
  grid-template-columns:28px minmax(0,1fr) auto;
  column-gap:0;
  align-items:start;
  width:100%;
  min-height:44px;
  padding:7px 15px;
  border:1px solid var(--hair);
  background:transparent;
  color:var(--ink);
  font-size:15px; line-height:1.45; text-align:left;
  cursor:pointer;
  transition:border-color .12s,background .12s;
}

/* Рядок задаємо явно: у розмітці .car іде перед .body, і без grid-row
   автопотік відкинув би текст на другий рядок сітки. */
#choices button .num{
  grid-column:1; grid-row:1; padding-right:12px;
  display:flex; align-items:center; min-height:var(--row-h);
  font-size:12px; color:var(--dim);
}
#choices button .body{ grid-column:2; grid-row:1; min-width:0; }
#choices button .car{
  grid-column:3; grid-row:1; min-width:0; justify-self:end;
  display:flex; align-items:center; min-height:var(--row-h);
}
#choices button .car:not(:empty){ padding-left:20px; }

#choices button .tag{
  display:inline-flex; align-items:center; gap:5px;
  font-size:10px; letter-spacing:.16em; color:var(--amber);
  text-transform:uppercase;
  white-space:nowrap;
}
#choices button .tag .ic{ width:13px; height:13px; }
/* причина блокування лишається в рядку — вона дочитує саму дію */
#choices button .body .tag{ color:var(--amber); margin-left:8px; }
#choices button .body .tag.t-lock{ color:var(--red); }
/* ціна ходу читається кольором: зелений — набираєш, червоний — платиш дорого */
#choices button .tag.cost-gain{ color:var(--green); }
#choices button .tag.cost-hi  { color:var(--red); }
#choices button .tag.cost-item{ color:var(--mut); }

#choices button:hover,
#choices button.sel{
  border-color:var(--green);
  background:rgba(110,231,160,.07);
}
#choices button.sel .num{ color:var(--green); }
#choices button.sel .body{ color:var(--ink-hi); }

/* E05 · дія з вимогою: пунктир = «не зараз», суцільна = «можна» */
#choices button.locked{
  border-style:dashed;
  color:var(--dim);
  cursor:default;
}
#choices button.locked:hover{ border-color:var(--hair); background:transparent; }
#choices button.locked .body .tag{ color:var(--red); }

.ic{ width:1em; height:1em; vertical-align:-.12em; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }

/* E19 · розвилка палуби: дві колонки, відвідане гасне */
#choices.rd-many{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:4px 20px;
}
#choices.rd-many button{
  --row-h:calc(13px * 1.45);
  grid-template-columns:26px minmax(0,1fr) auto;
  min-height:30px; height:auto;
  padding:4px 12px;
  border:0;
  border-left:2px solid rgba(110,231,160,.25);
  font-size:13px;
}
#choices.rd-many button .num{ font-size:11px; }
#choices.rd-many button .car:not(:empty){ padding-left:14px; }
#choices.rd-many button .tag{ font-size:10px; letter-spacing:.14em; }
#choices.rd-many button .body{ white-space:normal; overflow:visible; }
#choices.rd-many button:hover,
#choices.rd-many button.sel{
  border-left-color:var(--green);
  background:rgba(110,231,160,.06);
}
/* тег задає колір рядка — так розвилка читається як карта палуби */
#choices.rd-many button.acc-violet{ border-left-color:rgba(198,163,255,.5); }
#choices.rd-many button.acc-violet .body{ color:var(--ink-violet); }
#choices button.acc-violet .tag{ color:var(--violet); }
#choices.rd-many button.acc-blue{ border-left-color:rgba(124,198,255,.5); }
#choices button.acc-blue .tag{ color:var(--blue); }
#choices.rd-many button.acc-red{ border-left-color:rgba(255,107,94,.5); }
#choices.rd-many button.acc-red .body{ color:var(--ink-red); }
#choices button.acc-red .tag{ color:var(--red); }

/* відвідане не зникає — гасне й отримує ✓ */
#choices.rd-many button.visited{ border-left-color:rgba(110,231,160,.12); }
#choices button.visited .num,
#choices button.visited .tag,
#choices button.visited .body{ color:var(--dim); }
#choices button.visited:hover .body,
#choices button.visited.sel .body{ color:var(--ink); }

#choices.rd-many button.locked{
  border-left:2px dashed rgba(110,231,160,.2);
  background:transparent;
  height:auto; padding:5px 12px;
}
#choices.rd-many button.locked .body{ white-space:normal; overflow:visible; text-overflow:clip; }

/* E03 · бій має власний режим і перебиває сітку розвилки */
#choices.el-combat{
  display:flex; flex-direction:column; gap:6px;
}
#screen #choices.el-combat button{
  grid-template-columns:28px minmax(0,1fr) auto;
  min-height:44px; height:auto;
  padding:7px 15px;
  border:1px solid var(--hair); border-left-width:1px;
  font-size:15px;
}
#choices.el-combat button .body{ white-space:normal; overflow:visible; text-overflow:clip; }
#choices.el-combat button .body .ic{ display:none; }
#choices.el-combat button:hover,
#choices.el-combat button.sel{
  border-color:rgba(255,107,94,.5);
  background:rgba(255,107,94,.09);
}
#choices.el-combat button.sel .num{ color:var(--red); }
#choices.el-combat button.locked{ border:1px dashed var(--hair); background:transparent; }

/* кінцівка й смерть — дії стають вертикальним стосом кнопок-написів */
#choices.el-stack{ gap:8px; }
#choices.el-stack button{
  --row-h:calc(12px * 1.45);
  grid-template-columns:0 minmax(0,1fr) 0;
  justify-content:flex-start;
  min-height:44px;
  padding:10px 18px;
  border-color:rgba(110,231,160,.24);
  font-size:12px; letter-spacing:.2em;
  color:var(--mut);
}
#choices.el-stack button .num{ display:none; }
#choices.el-stack button:first-child{ border-color:var(--green); color:var(--green); }
#choices.el-stack button:hover,
#choices.el-stack button.sel{ border-color:var(--green); color:var(--ink-hi); }


/* ═══════════════════════ E01 · РАМКА СУТИЧКИ ═══════════════════════════ */
/* Один блок на всю сутичку, що перемальовується на місці.               */

.el-foe{
  margin:0 0 14px;
  border:1px solid rgba(255,107,94,.34);
  border-left:2px solid var(--red);
  background:linear-gradient(90deg,rgba(255,107,94,.07),transparent 60%);
}
.el-foe.is-over{ opacity:.5; }

.el-foe .ef-hd{
  display:flex; align-items:center; gap:10px;
  padding:7px 14px;
  border-bottom:1px solid rgba(255,107,94,.22);
}
.el-foe .ef-kick{ font-size:10px; letter-spacing:.28em; color:var(--red); }
.el-foe .ef-rule{
  flex:1 1 auto; height:1px;
  background:repeating-linear-gradient(90deg,rgba(255,107,94,.4) 0 4px,transparent 4px 8px);
}
.el-foe .ef-turn{ font-size:10px; letter-spacing:.18em; color:var(--mut); }

.el-foe .ef-body{ display:flex; gap:18px; padding:13px 14px 14px; }

.el-foe .ef-port{
  width:var(--foe-port); height:var(--foe-port); flex:0 0 auto;
  border:1px solid rgba(255,107,94,.42);
  background:#120806 radial-gradient(70% 70% at 50% 35%,rgba(255,107,94,.28),transparent 70%);
  overflow:hidden;
}
.el-foe .ef-port img{ width:100%; height:100%; object-fit:cover; display:block; image-rendering:pixelated; }
.el-foe .ef-port.no-img{ display:none; }

.el-foe .ef-main{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:11px; }

.el-foe .ef-name{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; }
.el-foe .ef-title{ font-size:17px; font-weight:600; letter-spacing:.08em; color:var(--ink-red); }
.el-foe .ef-sub{ font-size:10px; letter-spacing:.2em; color:var(--mut); }
.el-foe .ef-hp{
  margin-left:auto;
  font-size:15px; font-weight:600; color:var(--red); white-space:nowrap;
}
.el-foe .ef-hp i{ font-style:normal; font-size:12px; color:var(--mut); }

.el-foe .ef-bar{ position:relative; height:9px; background:rgba(255,107,94,.14); }
.el-foe .ef-bar > span{
  position:absolute; top:0; bottom:0; left:0;
  background:var(--red);
  box-shadow:0 0 12px rgba(255,107,94,.45);
  transition:width .25s ease-out;
}
.el-foe .ef-bar > i{                       /* сегменти: 20 у ворога, 10 в енергії */
  position:absolute; inset:0;
  background:repeating-linear-gradient(90deg,transparent 0 calc(5% - 2px),var(--surface) calc(5% - 2px) 5%);
}
.el-foe .ef-bar.you,
.el-foe .ef-bar.en{ height:5px; flex:1 1 90px; }
.el-foe .ef-bar.you > span{ box-shadow:none; }
.el-foe .ef-bar.en{ background:rgba(240,183,87,.14); }
.el-foe .ef-bar.en > span{ background:var(--amber); box-shadow:none; }
.el-foe .ef-bar.en > i{
  background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 2px),var(--surface) calc(10% - 2px) 10%);
}
.el-foe .ef-bar.you > i{ background:none; }

.el-foe .ef-you{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding-top:4px;
  border-top:1px solid rgba(110,231,160,.12);
}
.el-foe .ey-lab{ font-size:10px; letter-spacing:.22em; color:var(--dim); white-space:nowrap; }
.el-foe .ey-lab.en{ color:var(--amber); }
.el-foe .ey-val{ font-size:13px; font-weight:600; color:var(--red); white-space:nowrap; }
.el-foe .ey-val.en{ color:var(--amber); }
.el-foe .ey-val i{ font-style:normal; color:var(--dim); }


/* ═══════════════════════ E02 · БОЙОВИЙ ЛОГ ═════════════════════════════ */
/* Чотири тони: ти, крит, промах, ворог. Ціна енергії — правим краєм.    */

#story .cbt{
  display:flex; align-items:baseline; gap:12px;
  margin:7px 0 0;
  padding:6px 12px;
  border-left:2px solid var(--hair);
  font-size:15px; line-height:1.55;
}
#story .cbt .cb-line{ flex:1 1 auto; min-width:0; }
#story .cbt .cb-cost{
  flex:0 0 auto;
  font-size:10px; letter-spacing:.16em; color:var(--dim); white-space:nowrap;
}
#story .cbt .cb-cost.gain{ color:var(--amber); }
#story .cbt .cb-cost:empty{ display:none; }

#story .cbt.cb-you  { border-left-color:var(--green); background:rgba(110,231,160,.05); }
#story .cbt.cb-crit { border-left-color:var(--amber); background:rgba(240,183,87,.05); }
#story .cbt.cb-miss { color:var(--mut); font-style:italic; }
#story .cbt.cb-good { border-left-color:var(--green); }
#story .cbt.cb-foe  { border-left-color:var(--red); background:rgba(255,107,94,.07); color:var(--ink-red); }
#story .cbt.cb-down { border-left-color:var(--red); background:rgba(255,107,94,.12); color:var(--ink-red); }

#story .cbt.cb-win{
  align-items:center;
  margin-top:9px;
  padding:9px 12px;
  border:1px solid rgba(110,231,160,.3);
  background:rgba(110,231,160,.07);
}
#story .cbt.cb-win .cb-line{ font-size:11px; letter-spacing:.24em; color:var(--green); text-transform:uppercase; }
#story .cbt.cb-win .cb-line .good{ color:var(--green); font-weight:400; }
#story .cbt.cb-win .cb-cost{ font-size:12px; letter-spacing:0; color:var(--amber); }


/* ═══════════════════════ E04 · КАРТКА КИДКА ════════════════════════════ */
/* Кубик у квадраті ліворуч, розклад бонусів у рядок, вердикт — плашкою. */

#story .check-anim{
  display:grid;
  grid-template-columns:46px minmax(0,1fr) auto;
  grid-template-areas:"die head verdict" "die math verdict";
  align-items:center;
  column-gap:22px; row-gap:5px;
  margin:14px 0;
  padding:14px 18px;
  border-left:2px solid var(--amber);
  background:rgba(240,183,87,.05);
}
#story .ck-fray{ color:var(--violet); }
#story .ck-die{
  grid-area:die;
  width:46px; height:46px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--amber);
  background:rgba(240,183,87,.09);
  font-size:19px; font-weight:600; color:var(--amber);
}
#story .ck-die.spin{ animation:ark-die-spin .13s ease-out; }
#story .ck-die.land{ animation:ark-die-land .3s ease-out; }
#story .ck-head{
  grid-area:head;
  font-size:10px; letter-spacing:.22em; color:var(--amber);
}
#story .ck-math{ grid-area:math; font-size:14px; color:var(--ink); }
#story .ck-math b{ color:var(--ink-hi); }
#story .ck-math .ck-total{ font-size:16px; }
#story .ck-op{ color:var(--dim); }
#story .ck-verdict{
  grid-area:verdict;
  padding:5px 12px;
  background:var(--green); color:#020604;
  font-size:12px; letter-spacing:.24em; white-space:nowrap;
}

#story .check-anim.el-fail{ border-left-color:var(--red); background:rgba(255,107,94,.05); }
#story .check-anim.el-fail .ck-die{ border-color:rgba(255,107,94,.6); background:rgba(255,107,94,.09); color:var(--red); }
#story .check-anim.el-fail .ck-head{ color:var(--red); }
#story .check-anim.el-fail .ck-verdict{ background:var(--red); }

#story .check-anim.el-crit20{ border-left-color:var(--green); background:rgba(110,231,160,.07); box-shadow:inset 0 0 40px rgba(110,231,160,.08); }
#story .check-anim.el-crit20 .ck-die{ border-color:var(--green); background:rgba(110,231,160,.14); color:var(--green); box-shadow:0 0 18px rgba(110,231,160,.3); }
#story .check-anim.el-crit20 .ck-head{ color:var(--green); }
#story .check-anim.el-crit1 .ck-die{ box-shadow:0 0 18px rgba(255,107,94,.3); }

/* перекид «Холодного розуму» — видно, що саме врятувало кидок */
#story .ck-reroll{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  margin:-8px 0 14px;
  padding:12px 18px;
  border-left:2px solid var(--violet);
  background:rgba(198,163,255,.05);
  white-space:normal;
}
#story .ck-reroll .rr-lab{ font-size:10px; letter-spacing:.22em; color:var(--violet); white-space:nowrap; }
#story .ck-reroll .rr-math{ font-size:14px; color:var(--mut); }
#story .ck-reroll .rr-math s{ color:var(--dim); }
#story .ck-reroll .rr-math b{ color:var(--ink-hi); }
#story .ck-reroll .rr-verdict{ margin-left:auto; font-size:11px; letter-spacing:.2em; color:var(--green); }
#story .ck-reroll .rr-verdict.dmg{ color:var(--red); }
#story .check-anim .ck-math b{ color:var(--ink-hi); }

@keyframes ark-die-spin{ from{transform:translateY(-4px) scale(1.1);opacity:.45} to{transform:none;opacity:1} }
@keyframes ark-die-land{ 0%{transform:scale(1)} 45%{transform:scale(1.14)} 100%{transform:scale(1)} }


/* ═══════════════════════ E06 · ОВЕРЛЕЙ ВИБОРУ РИСИ ═════════════════════ */

.lvl-overlay{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  padding:26px;
  background:rgba(2,6,4,.72);
}
.lvl-box{
  width:min(720px,96vw);
  max-height:90vh;
  overflow-y:auto;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;
  border:1px solid var(--hair-strong);
  background:var(--hair);
  box-shadow:0 0 60px rgba(0,0,0,.8),0 0 90px rgba(110,231,160,.06);
}
.lvl-hd{
  order:1; grid-column:1 / -1;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:14px 20px;
  background:var(--surface);
  border-bottom:1px solid rgba(110,231,160,.2);
  font-size:13px; font-weight:600; letter-spacing:.26em;
  color:var(--green);
}
.lvl-hd .lvl-lv{ color:var(--green); }
.lvl-hd .lvl-sep{ width:1px; height:14px; background:rgba(110,231,160,.24); }
.lvl-hd .lvl-pick{ color:var(--ink-hi); }
.lvl-gain{
  margin-left:auto;
  font-size:10px; font-weight:400; letter-spacing:.18em; color:var(--amber);
}
.lvl-perk{
  order:2;
  display:flex; flex-direction:column; gap:9px;
  padding:20px 18px;
  border:0; border-top:2px solid transparent;
  background:var(--surface);
  text-align:left; cursor:pointer;
  transition:background .12s,border-color .12s;
}
.lvl-perk::before{ content:"◇"; font-size:19px; color:var(--dim); }
.lvl-perk b{ font-size:15px; font-weight:600; letter-spacing:.06em; color:var(--ink); }
.lvl-perk small{ font-size:12px; line-height:1.6; color:var(--mut); }
.lvl-perk:hover,
.lvl-perk:focus-visible{
  border-top-color:var(--green);
  background:var(--surface-2);
  outline:none;
}
.lvl-perk:hover::before,
.lvl-perk:focus-visible::before{ content:"◈"; color:var(--green); }
.lvl-perk:hover b{ color:var(--ink-hi); }
.lvl-sub{
  order:3; grid-column:1 / -1;
  padding:12px 20px;
  background:var(--surface);
  border-top:1px solid var(--hair);
  font-size:11px; line-height:1.6; color:var(--dim);
}
.lvl-note{ display:block; margin-top:6px; color:var(--dim); }
.lvl-note b{ color:var(--mut); font-weight:500; }


/* ═══════════════════════ E08 · СТЕК СПОВІЩЕНЬ ══════════════════════════ */

#toast{ display:none !important; }

#el-toasts{
  position:absolute; right:calc(var(--panel-w) + 23px); bottom:var(--el-toast-bottom); z-index:180;
  display:flex; flex-direction:column; gap:9px;
  width:min(340px,calc(100% - var(--panel-w) - 46px));
  pointer-events:none;
}
.el-toast{
  display:flex; align-items:center; gap:11px;
  padding:9px 14px;
  border-left:2px solid var(--green);
  background:var(--deep);
  box-shadow:0 10px 30px rgba(0,0,0,.6);
  font-size:13px; color:var(--ink-hi);
  animation:ark-toast-in .18s ease-out;
}
.el-toast .tm{ flex:0 0 auto; color:var(--green); }
.el-toast .tt{ min-width:0; }
.el-toast.out{ animation:ark-toast-out .24s ease-in forwards; }

.el-toast.t-bad { border-left-color:var(--red); color:var(--ink-red); }
.el-toast.t-bad .tm{ color:var(--red); }
.el-toast.t-lvl { border-left-color:var(--amber); color:var(--amber); letter-spacing:.1em; }
.el-toast.t-lvl .tm{ color:var(--amber); }
.el-toast.t-mind{ border-left-color:var(--violet); color:var(--violet); font-style:italic; }
.el-toast.t-mind .tm{ color:var(--violet); font-style:normal; }

@keyframes ark-toast-in { from{opacity:0;transform:translateX(14px)} to{opacity:1;transform:none} }
@keyframes ark-toast-out{ to{opacity:0;transform:translateX(14px)} }


/* ═══════════════════════ E09 · ДАТЧИК «МАНЕВР ЯНУСА» ══════════════════ */

.janus-maneuver{
  display:flex; align-items:center; gap:12px;
  padding:5px 12px;
  border:1px solid rgba(110,231,160,.24);
  background:var(--deep);
  white-space:nowrap;
}
.janus-maneuver .tg-label{ font-size:10px; letter-spacing:.2em; color:var(--dim); }
.janus-maneuver .tg-track{ display:flex; gap:3px; width:110px; flex:0 0 auto; }
.janus-maneuver .tg-track i{ flex:1; height:7px; background:rgba(110,231,160,.14); }
.janus-maneuver .tg-track i.on{ background:var(--green); }
.janus-maneuver .tg-val{ font-size:11px; font-weight:600; color:var(--green); min-width:34px; text-align:right; }

.janus-maneuver.warn{ border-color:rgba(240,183,87,.4); background:rgba(240,183,87,.05); }
.janus-maneuver.warn .tg-label,
.janus-maneuver.warn .tg-val{ color:var(--amber); }
.janus-maneuver.warn .tg-track i{ background:rgba(240,183,87,.16); }
.janus-maneuver.warn .tg-track i.on{ background:var(--amber); }

.janus-maneuver.crit{
  border-color:rgba(255,107,94,.55); background:rgba(255,107,94,.08);
  animation:ark-pulse 2.4s ease-in-out infinite;
}
.janus-maneuver.crit .tg-label,
.janus-maneuver.crit .tg-val{ color:var(--red); }
.janus-maneuver.crit .tg-track i{ background:rgba(255,107,94,.16); }
.janus-maneuver.crit .tg-track i.on{ background:var(--red); }


/* ═══════════════════════ E10 · СТАТУСИ ═════════════════════════════════ */

.el-chips{ display:flex; flex-wrap:wrap; gap:5px; margin-top:12px; }
.el-chips:empty{ display:none; }
.el-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 8px;
  border:1px solid var(--hair);
  font-size:10px; letter-spacing:.12em;
}
.el-chip b{ font-weight:600; }
.el-chip.c-bleed { border-color:rgba(255,107,94,.45);  background:rgba(255,107,94,.08);  color:var(--red); }
.el-chip.c-bleed b{ color:var(--ink-red); }
.el-chip.c-spore { border-color:rgba(198,163,255,.45); background:rgba(198,163,255,.08); color:var(--violet); }
.el-chip.c-poison{ border-color:rgba(240,183,87,.45);  background:rgba(240,183,87,.08);  color:var(--amber); }
.el-chip.c-fray  { border:1px dashed rgba(255,107,94,.45); color:var(--red); }
.el-chip.c-mind  { border:1px solid rgba(198,163,255,.45); color:var(--violet); }


/* ═══════════════════════ E11 · ПОРОГИ РОЗСУДКУ ═════════════════════════ */
/* Фантомний рядок ніколи не виглядає як звичайний абзац: фіолетова риска
   ліворуч і курсив. Гравець мусить помічати, що йому щось домалювали.   */

#story .fray-line{
  display:block;
  margin:9px 0;
  padding-left:14px;
  border-left:1px solid rgba(198,163,255,.4);
  color:var(--violet);
  font-style:italic;
  opacity:.9;
}

#logpanel.el-deepfray{
  background:
    radial-gradient(120% 140% at 50% 0%,rgba(198,163,255,.07),transparent 70%),
    var(--surface);
}


/* ═══════════════════════ E12 · ІНВЕНТАР ════════════════════════════════ */

#invlist{ margin:0; padding:0; list-style:none; }
#invlist li{
  display:flex; align-items:flex-start; gap:10px;
  padding:7px 0;
  border-bottom:1px solid var(--hair-soft);
  font-size:13px; color:var(--ink-hi);
  cursor:default;
}
#invlist li[data-id]{ cursor:pointer; }
#invlist li[data-id]:hover{ background:rgba(110,231,160,.05); }
#invlist li .ic{ width:14px; height:14px; margin-top:3px; flex:0 0 auto; color:var(--green); }
#invlist li .inv-main{ flex:1 1 auto; min-width:0; }
#invlist li:has(.r-hand) .ic{ color:var(--red); }
#invlist li:has(.r-key)  .ic{ color:var(--amber); }
#invlist li:has(.r-pass) .ic{ color:var(--mut); }
#invlist li:has(.r-mind) .ic{ color:var(--violet); }
#invlist li:has(.r-mind){ background:rgba(110,231,160,.05); }
#invlist li small{
  display:block;
  font-size:11px; line-height:1.3; color:var(--dim);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#invlist li .inv-qty{ margin-left:6px; color:var(--amber); font-size:11px; font-weight:400; }
#invlist li.empty{ border:0; color:var(--dim); font-style:italic; }

#invlist li .el-role{
  margin-left:auto; flex:0 0 auto;
  padding:2px 6px;
  font-size:9px; letter-spacing:.14em; white-space:nowrap;
  color:var(--dim);
}
#invlist li .el-role.r-hand{ border:1px solid rgba(255,107,94,.45); color:var(--red); }
#invlist li .el-role.r-key { border:1px solid rgba(240,183,87,.45); color:var(--amber); }
#invlist li .el-role.r-use { background:var(--green); color:#020604; }
#invlist li .el-role.r-mind{ background:var(--violet); color:#020604; }
#invlist li .el-role.r-pass{ color:var(--dim); }


/* ═══════════════════════ E13 · ГОЛОСИ БЕЗ ТІЛА ═════════════════════════ */

/* Голос без тіла має ту саму ліву межу тексту, що й портретна репліка:
   знак голосу стоїть у колонці завширшки з портрет, тож і Янус, і Марко
   говорять з однієї вертикалі. Ширину рахуємо від --speech-x за відрахунком
   власних відступів картки (риска 2px + падінг 16px). */
#story .janus-card{
  display:flex; gap:var(--vn-gap);
  margin:14px 0;
  padding:13px 16px 13px 0;
  border-left:2px solid var(--blue);
  background:rgba(124,198,255,.05);
}
/* Знак голосу займає рівно те місце, де в живого мовця стоїть портрет:
   квадрат --portrait ліворуч, знак — по центру. Тіла нема, кадру нема —
   лишається сам знак у порожній рамці кадру. */
#story .janus-card .jc-icon{
  flex:0 0 auto;
  width:calc(var(--portrait) - 2px);        /* мінус риска 2px ліворуч */
  display:flex; align-items:center; justify-content:center;
  font-size:calc(var(--portrait) * .48);    /* знак росте разом із кадром */
  line-height:1; color:var(--blue);
}
#story .janus-card .jc-body{ flex:1 1 auto; min-width:0; }
#story .janus-card .jc-kicker{
  display:block; margin-bottom:5px;
  font-size:10px; letter-spacing:.2em; color:var(--blue);
}
#story .janus-card .jc-kicker em{ font-style:normal; color:var(--dim); }
#story .janus-card .ai{ color:var(--ink); }

#story .janus-card.voice-choir{ border-left-color:var(--violet); background:rgba(198,163,255,.05); }
#story .janus-card.voice-choir .jc-icon,
#story .janus-card.voice-choir .jc-kicker{ color:var(--violet); }
#story .janus-card.voice-choir .ai{ color:var(--ink-violet); }

#story .janus-card.voice-hermes{ border-left-color:var(--green); background:rgba(110,231,160,.05); }
#story .janus-card.voice-hermes .jc-icon,
#story .janus-card.voice-hermes .jc-kicker{ color:var(--green); }

/* Пряма мова голосу — його барвою, дія навколо неї — тьмяно.
   Правило .ai.has-say стоїть після варіантів голосу, щоб перекрити їх. */
#story .janus-card                { --tone:var(--ink-blue);   }
#story .janus-card.voice-choir    { --tone:var(--ink-violet); }
#story .janus-card.voice-hermes   { --tone:var(--ink-teal);   }
#story .janus-card .ai.has-say    { color:var(--mut); }


/* ═══════════════════════ E14 · КІНЦІВКА + ЖУРНАЛ ВАРТОВОГО ═════════════ */

#logpanel.el-ending #story{ padding-top:28px; }

.el-end-hd{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  margin-bottom:18px;
  padding-bottom:16px;
  border-bottom:1px solid rgba(240,183,87,.28);
}
.el-end-hd .eh-chip{
  padding:4px 10px;
  background:var(--amber); color:#020604;
  font-size:11px; letter-spacing:.24em; white-space:nowrap;
}
.el-end-hd .eh-title{
  font-size:22px; font-weight:600; letter-spacing:.1em; color:var(--ink-hi);
}
.el-end-hd .eh-meta{
  margin-left:auto;
  font-size:11px; letter-spacing:.14em; color:var(--dim); white-space:nowrap;
}

.el-reg-hd{
  display:block;
  margin:22px 0 0;
  padding-bottom:9px;
  border-bottom:1px solid var(--hair);
  font-size:10px; letter-spacing:.24em; color:var(--dim);
}
.el-reg{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:2px 34px;
  padding:14px 0 6px;
}
.el-reg .rg{
  display:flex; gap:11px;
  padding:6px 0;
  font-size:13px; line-height:1.6; color:var(--ink);
}
.el-reg .rg::before{ content:"▪"; flex:0 0 auto; color:var(--green); }
.el-reg .rg.rg-loss{ color:var(--mut); }
.el-reg .rg.rg-loss::before{ color:var(--red); }
.el-reg .rg.rg-cost::before{ color:var(--amber); }
.el-reg .rg.rg-mind::before{ color:var(--violet); }

.el-end-stats{
  display:flex; flex-wrap:wrap; gap:26px;
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid var(--hair);
}
.el-end-stats > div{ display:flex; flex-direction:column; gap:4px; }
.el-end-stats span{ font-size:10px; letter-spacing:.2em; color:var(--dim); }
.el-end-stats b{ font-size:19px; font-weight:600; color:var(--ink-hi); }
.el-end-stats b.alive{ color:var(--green); }
.el-end-stats b.san{ color:var(--violet); }


/* ═══════════════════════ E15 · БІОСИГНАЛ ВТРАЧЕНО ═════════════════════ */

#logpanel.el-death #story{ font-size:13px; line-height:1.7; color:var(--mut); }
#logpanel.el-death{
  background:
    radial-gradient(90% 80% at 50% 30%,rgba(255,107,94,.08),transparent 70%),
    var(--surface);
}
.el-death-hd{
  display:flex; flex-direction:column; gap:16px; align-items:flex-start;
  margin-bottom:18px;
}
.el-death-hd .dh-kick{ font-size:10px; letter-spacing:.3em; color:var(--red); }
.el-death-hd .dh-title{ font-size:24px; font-weight:600; letter-spacing:.12em; color:var(--ink-red); }
.el-death-hd .dh-rule{
  width:100%; height:1px;
  background:repeating-linear-gradient(90deg,rgba(255,107,94,.4) 0 5px,transparent 5px 10px);
}


/* ═══════════════════════ E16 · ПАРАМЕТРИ ТЕРМІНАЛА ════════════════════ */

#settings-dialog{
  width:min(420px,92vw);
  padding:0;
  border:1px solid rgba(110,231,160,.28);
  background:var(--deep);
  color:var(--ink);
  font-family:var(--font);
}
#settings-dialog::backdrop{ background:rgba(2,6,4,.78); }
#settings-dialog form{ display:flex; flex-direction:column; }

#settings-dialog header{
  display:flex; align-items:center; gap:16px;
  padding:11px 16px;
  border-bottom:1px solid rgba(110,231,160,.18);
  font-size:11px; letter-spacing:.24em; color:var(--green);
}
#settings-dialog header button{
  margin-left:auto;
  width:28px; height:28px;
  border:1px solid var(--hair); background:transparent;
  color:var(--dim); font-size:12px; cursor:pointer;
}
#settings-dialog header button:hover{ border-color:var(--green); color:var(--green); }

#settings-dialog label{
  display:flex; flex-direction:column; gap:8px;
  padding:14px 16px 0;
  font-size:12px; color:var(--mut);
}
#settings-dialog label.toggle-row{
  flex-direction:row; align-items:center; gap:12px;
  min-height:44px; padding-top:0; padding-bottom:0;
  cursor:pointer;
}
#settings-dialog label.toggle-row span{ flex:1 1 auto; }

#settings-dialog .set-row{ display:flex; align-items:baseline; gap:12px; }
#settings-dialog .set-row output{ margin-left:auto; }
#settings-dialog output{ font-size:12px; color:var(--amber); }

#settings-dialog input[type=range]{
  -webkit-appearance:none; appearance:none;
  width:100%; height:3px; margin:0;
  background:linear-gradient(90deg,var(--green) 0 var(--rng,34%),rgba(110,231,160,.16) var(--rng,34%));
  cursor:pointer;
}
#settings-dialog input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:10px; height:11px; border:0; border-radius:0;
  background:var(--green);
}
#settings-dialog input[type=range]::-moz-range-thumb{
  width:10px; height:11px; border:0; border-radius:0;
  background:var(--green);
}

#settings-dialog input[type=checkbox]{
  -webkit-appearance:none; appearance:none;
  position:relative; flex:0 0 auto;
  width:38px; height:18px; margin:0;
  border:1px solid rgba(110,231,160,.28);
  background:transparent;
  cursor:pointer;
}
#settings-dialog input[type=checkbox]::after{
  content:"";
  position:absolute; left:2px; top:2px; bottom:2px;
  width:14px;
  background:rgba(110,231,160,.28);
  transition:left .12s,background .12s;
}
#settings-dialog input[type=checkbox]:checked{ border-color:var(--green); }
#settings-dialog input[type=checkbox]:checked::after{ left:20px; background:var(--green); }
#settings-dialog input#fray-toggle{ border-color:rgba(198,163,255,.4); }
#settings-dialog input#fray-toggle:checked{ border-color:var(--violet); }
#settings-dialog input#fray-toggle:checked::after{ background:var(--violet); }

#settings-dialog .dialog-done{
  margin:16px;
  padding:9px 0;
  border:1px solid var(--green); background:transparent;
  color:var(--green);
  font-size:11px; letter-spacing:.22em;
  cursor:pointer;
}
#settings-dialog .dialog-done:hover{ background:rgba(110,231,160,.1); }


/* ═══════════════════════ E17 · ВВІД ПОЗИВНОГО ══════════════════════════ */
/* Курсор — блок, як у терміналі, а не системна рисочка.                 */

#choices .name-entry{
  display:flex; gap:8px; align-items:stretch;
  padding:0;
}
#choices .name-entry .el-field{
  position:relative;
  flex:1 1 auto; min-width:0;
  display:flex; align-items:center; gap:10px;
  min-height:48px;
  padding:0 16px;
  border:1px solid var(--green);
  background:rgba(110,231,160,.05);
  box-shadow:inset 0 0 24px rgba(110,231,160,.12);
}
#choices .name-entry .el-field::before{ content:"▸"; flex:0 0 auto; color:var(--green); font-size:15px; }
#choices .el-field .name-input{
  flex:1 1 auto; min-width:0;
  border:0; background:transparent; padding:0;
  font-size:17px; letter-spacing:.1em;
  color:var(--ink-hi);
  caret-color:transparent;
  outline:none;
}
#choices .name-entry .el-caret{
  flex:0 0 auto;
  width:9px; height:18px;
  background:var(--green);
  animation:ark-blink 1.1s steps(1) infinite;
}
#choices .name-entry .el-count{
  flex:0 0 auto; margin-left:auto;
  font-size:10px; letter-spacing:.16em; color:var(--dim);
}
#choices .name-entry .el-count:empty{ display:none; }

/* форма коду доступу — два звичайні поля в мові макета */
#choices .name-entry > .name-input{
  min-height:48px;
  padding:0 16px;
  border:1px solid var(--hair);
  background:var(--deep);
  font-size:15px; letter-spacing:.06em;
  color:var(--ink-hi);
  outline:none;
}
#choices .name-entry > .name-input:focus{ border-color:var(--green); }
#choices .name-input::placeholder{ color:var(--dim); letter-spacing:.06em; }
/* форма з двома полями (код доступу) — рівні половини, кнопка окремим рядком */
#choices .name-entry:has(.name-input + .name-input){ flex-wrap:wrap; }
#choices .name-entry:has(.name-input + .name-input) > .name-input{ flex:1 1 calc(50% - 4px); min-width:0; }
#choices .name-entry:has(.name-input + .name-input) .name-submit{ flex:1 1 100%; }

#choices .name-submit{
  display:flex; align-items:center; justify-content:center;
  flex:0 0 auto;
  width:auto;                        /* кнопки дій тягнуться на всю ширину — ця ні */
  min-height:48px;
  padding:0 20px;
  border:1px solid var(--green);
  background:rgba(110,231,160,.1);
  color:var(--green);
  font-size:12px; letter-spacing:.2em; white-space:nowrap;
  cursor:pointer;
}
#choices .name-submit:hover{ background:rgba(110,231,160,.2); color:var(--ink-hi); }

@keyframes ark-blink{ 0%,100%{opacity:1} 50%{opacity:.45} }


/* ═══════════════════════ E18 · ПЕРЕДІСТОРІЯ ════════════════════════════ */
/* Єдине місце, де дії стають картками: три профілі порівнюються разом.  */

#choices.el-cards{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;
  background:var(--hair);
  background-clip:content-box;
}
#choices.el-cards button{
  display:flex; flex-direction:column; align-items:flex-start; gap:11px;
  min-height:150px;
  padding:18px 16px;
  border:0; border-top:2px solid transparent;
  background:var(--surface);
}
#choices.el-cards button .num{ display:none; }
#choices.el-cards button .car{
  display:block; overflow:visible;
  padding-left:0; min-height:0;
  font-size:10px; letter-spacing:.2em;
}
#choices.el-cards button .car .tag{ white-space:normal; }
#choices.el-cards button .body{
  font-size:15px; font-weight:600; line-height:1.5;
  color:var(--ink);
  white-space:normal;
}
#choices.el-cards button .bg-desc{
  font-size:12px; line-height:1.6; color:var(--mut);
  white-space:normal;
}
#choices.el-cards button .bg-chips{
  display:flex; flex-wrap:wrap; gap:4px;
  margin-top:auto; padding-top:10px;
}
#choices.el-cards .bg-chip{
  padding:2px 7px;
  border:1px solid rgba(110,231,160,.24);
  font-size:10px; color:var(--mut);
}
#choices.el-cards .bg-chip.c-red   { border-color:rgba(255,107,94,.4);  color:var(--red); }
#choices.el-cards .bg-chip.c-blue  { border-color:rgba(124,198,255,.4); color:var(--blue); }
#choices.el-cards .bg-chip.c-violet{ border-color:rgba(198,163,255,.4); color:var(--violet); }
#choices.el-cards .bg-chip.c-amber { border-color:rgba(240,183,87,.4);  color:var(--amber); }
#choices.el-cards button:hover,
#choices.el-cards button.sel{ border-top-color:var(--green); background:var(--surface-2); }
#choices.el-cards button.bg-sec .tag{ color:var(--red); }
#choices.el-cards button.bg-sec:hover,
#choices.el-cards button.bg-sec.sel{ border-top-color:var(--red); }
#choices.el-cards button.bg-eng .tag{ color:var(--blue); }
#choices.el-cards button.bg-eng:hover,
#choices.el-cards button.bg-eng.sel{ border-top-color:var(--blue); }
#choices.el-cards button.bg-psy .tag{ color:var(--violet); }
#choices.el-cards button.bg-psy:hover,
#choices.el-cards button.bg-psy.sel{ border-top-color:var(--violet); }


/* ═══════════════════════ CRT ЯК ОПЦІЯ ══════════════════════════════════ */
/* Корпуса, вінʼєтки й мерехтіння в макеті немає. Лишається тонка сітка
   рядків — і лише поки перемикач «CRT-ефекти» ввімкнено.                */

#screen::after{
  content:"";
  position:absolute; inset:0; z-index:150;
  pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.16) 3px,rgba(0,0,0,0) 4px);
}
body.no-crt #screen::after{ display:none; }

#scrim{ display:none; }

/* збільшений текст — опція доступності */
body.large-text{ --fs-log:17px; --lh-log:1.8; }
body.large-text #choices button{ font-size:16px; }
body.large-text .side-content{ font-size:14px; }

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


/* ═══════════════════════ АДАПТИВ ═══════════════════════════════════════ */
/* Чотири точки зламу: 1360 · 1100 · 820 — рівно ті, що в макеті.        */

@media (max-width:1359px){
  :root{ --panel-w:340px; --pad-x:32px; }
}

@media (max-width:1099px){
  :root{ --panel-w:300px; --head-h:88px; }
  .tb-loc{ font-size:21px; }
  /* розвилка стає одним стовпчиком; позначка й тут лишається правим краєм */
  #choices.rd-many{ grid-template-columns:minmax(0,1fr); }
  #choices.el-cards button{ min-height:0; padding:14px 12px; }
  .el-reg{ grid-template-columns:minmax(0,1fr); }
  :root{ --foe-port:64px; }
}

@media (max-width:819px){
  :root{ --pad-x:14px; --head-h:72px; --portrait:56px; --foe-port:56px; }

  #screen{
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:44px var(--head-h) minmax(140px,1fr) auto;
    gap:1px 0;
  }
  #mobilebar      { display:flex; grid-column:1; grid-row:1; }
  #topbar         { grid-column:1; grid-row:2; padding:0 14px; }
  #objective-strip{ display:none; }
  #logpanel       { grid-column:1; grid-row:3; }
  #actpanel       { grid-column:1; grid-row:4; padding-bottom:12px; max-height:56dvh; }

  #story{ padding:16px var(--pad-x) 20px; line-height:1.7; }
  .mb-bar.hp { background:rgba(255,107,94,.14); }
  .mb-bar.san{ background:rgba(198,163,255,.14); }

  .tb-left{ gap:5px; }
  .tb-name{ display:none; }
  .tb-brand{ gap:8px; }
  .tb-mark{ width:16px; height:16px; font-size:8px; }
  .tb-os{ font-size:9px; }
  .tb-loc{ font-size:17px; letter-spacing:.1em; }
  .tb-right{ position:absolute; right:14px; top:8px; align-items:flex-end; gap:4px; }
  #topbar::before{ inset:0 0 0 46%; }
  .flight-status{ gap:10px; font-size:9px; letter-spacing:.16em; }
  .link-ok{ display:none; }
  .janus-maneuver{ padding:3px 8px; gap:8px; }
  .janus-maneuver .tg-label{ display:none; }
  .janus-maneuver .tg-track{ width:70px; }

  /* панель — шухляда праворуч */
  #side{
    position:fixed; top:0; right:0; bottom:0; z-index:160;
    width:min(340px,88vw);
    border-left:1px solid var(--hair-strong);
    transform:translateX(102%);
    transition:transform .18s ease-out;
  }
  body.drawer #side{ transform:none; }
  #dossier-close{
    display:flex; align-items:center; justify-content:center;
    flex:0 0 auto;
    height:38px;
    border:0; border-bottom:1px solid var(--hair);
    background:transparent;
    color:var(--mut); font-size:10px; letter-spacing:.2em;
    cursor:pointer;
  }
  #scrim{
    display:block;
    position:fixed; inset:0; z-index:155;
    background:rgba(2,6,4,.72);
    opacity:0; pointer-events:none;
    transition:opacity .18s;
  }
  body.drawer #scrim{ opacity:1; pointer-events:auto; }

  /* дії — один стовпчик, ціль завжди 44 px, тег над рядком */
  #choices.rd-many,
  #choices.el-cards{ grid-template-columns:minmax(0,1fr); }
  #choices button,
  #choices.rd-many button,
  #choices.el-combat button{
    grid-template-columns:26px minmax(0,1fr);
    column-gap:10px;
    min-height:44px; height:auto;
    padding:6px 11px;
    border:1px solid var(--hair); border-left-width:1px;
    font-size:14px;
  }
  /* на вузькому екрані правий край з’їв би текст — позначка стає над рядком */
  #choices button .num{
    grid-column:1; grid-row:1 / span 2;
    padding-right:0; min-height:0; align-self:center;
  }
  #choices button .body,
  #choices.rd-many button .body,
  #choices.el-combat button .body{ grid-column:2; grid-row:2; white-space:normal; overflow:visible; text-overflow:clip; }
  #choices button .car,
  #choices.rd-many button .car,
  #choices.el-combat button .car{
    grid-column:2; grid-row:1;
    display:block; justify-self:start;
    min-height:0; margin-bottom:2px;
  }
  #choices button .car:not(:empty),
  #choices.rd-many button .car:not(:empty){ padding-left:0; }
  #choices button .car:empty{ display:none; }
  #choices.rd-many button.locked,
  #choices button.locked{ border:1px dashed var(--hair); }
  #choices.el-cards button{ min-height:44px; }
  #choices.el-cards button .car{ grid-column:auto; grid-row:auto; }
  #choices.el-stack button{ grid-template-columns:minmax(0,1fr); }

  /* бойова рамка на мобільному губить портрет, шапку й смугу Вартового:
     лишається імʼя, HP ворога і рядок «ти / енергія» */
  .el-foe .ef-port{ display:none; }
  .el-foe .ef-hd{ display:none; }
  .el-foe .ef-body{ padding:11px 12px 12px; }
  .el-foe .ef-title{ font-size:13px; }
  .el-foe .ef-sub{ display:none; }
  .el-foe .ey-lab{ display:none; }
  .el-foe .ey-val{ font-size:11px; }
  .el-foe .ef-you{ gap:10px; }
  .el-foe .ef-bar.foe{ height:7px; }
  .el-foe .ef-bar.foe > i{
    background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 2px),var(--surface) calc(10% - 2px) 10%);
  }
  .el-foe .ef-bar.you{ display:none; }
  .el-foe .ef-bar.en{ height:4px; }

  .panel-hd{ height:26px; }
  .panel-hd .hd-l{ font-size:10px; letter-spacing:.22em; }
  .panel-hd .hd-r{ display:none; }
  #choices button .num{ font-size:11px; }
  #choices button .tag{ font-size:9px; letter-spacing:.14em; }

  #story .check-anim{
    grid-template-columns:38px minmax(0,1fr);
    grid-template-areas:"die head" "die math" "verdict verdict";
    column-gap:14px;
    padding:12px 14px;
  }
  #story .ck-die{ width:38px; height:38px; font-size:16px; }
  #story .ck-verdict{ justify-self:start; }

  .lvl-box{ grid-template-columns:minmax(0,1fr); }
  .el-end-hd .eh-title{ font-size:18px; }
  .el-end-hd .eh-meta{ margin-left:0; }
  #el-toasts{ right:12px; bottom:12px; width:calc(100% - 24px); }
  #choices.el-combat{ gap:5px; }
  #actpanel .panel-hd{ border-bottom:1px solid var(--hair-soft); }
  .el-end-stats{ gap:16px; }
}

@media (max-width:419px){
  .tb-loc{ font-size:15px; }
  .el-end-stats > div{ flex:1 1 40%; }
}