/* ============================================================
   PEOPLE OF THE LANTERN — survivor record
   Aesthetic: bright, airy, editorial minimal.
   White space, hairline rules, light geometric type, monochrome
   charcoal with a single restrained red for danger.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&display=swap');

:root{
  --bg:      #ffffff;
  --bg-soft: #f7f6f3;
  --ink:     #26262a;
  --ink-soft:#5f5f64;
  --muted:   #9b9aa0;
  --faint:   #c3c2bd;
  --hair:    #ebe9e4;
  --hair-2:  #d9d7d1;
  --danger:  #b23b32;
  --madness: #7b3fa8; /* disorders */
  --art:     #2f7d4a; /* fighting arts */
  --ability: #2f5fa8; /* courage / understanding abilities */
  --ability-2: #1e3a6e; /* other abilities (pill list) — darker blue */

  --r: 12px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:"Jost", system-ui, sans-serif;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  letter-spacing:.2px;
  min-height:100vh;
}
.lantern{ display:none; } /* atmosphere removed for clarity */

/* ============================================================ LAYOUT */
.app{ display:grid; grid-template-columns:320px 1fr; min-height:100vh; }
@media(max-width:1200px){ .app{ grid-template-columns:288px 1fr; } }

/* ---------- ROSTER ---------- */
.roster{
  position:sticky; top:0; align-self:start; height:100vh;
  display:flex; flex-direction:column;
  background:var(--bg-soft); border-right:1px solid var(--hair);
}
.roster__brand{ padding:34px 26px 22px; }
.roster__brand .kicker{
  font-size:9.5px; font-weight:500; letter-spacing:.34em; text-transform:uppercase;
  color:var(--muted); margin:0 0 12px;
}
.roster__brand h1{
  font-weight:300; font-size:25px; line-height:1.12; margin:0; color:var(--ink); letter-spacing:.01em;
}
.roster__brand p{ margin:10px 0 0; font-size:13px; color:var(--muted); font-weight:300; }

.roster__list{ flex:1; overflow-y:auto; padding:8px 14px; display:flex; flex-direction:column; gap:2px; }
.roster__list::-webkit-scrollbar{ width:8px; }
.roster__list::-webkit-scrollbar-thumb{ background:var(--hair-2); border-radius:8px; }

.survivor-chip{
  text-align:left; cursor:pointer; width:100%;
  padding:13px 12px; border-radius:8px; border:none; background:transparent; color:var(--ink-soft);
  font-family:inherit; font-size:15px; font-weight:400;
  display:flex; flex-direction:column; gap:5px;
  transition:background .3s var(--ease), color .25s;
}
.survivor-chip:hover{ background:#efedea; color:var(--ink); }
.survivor-chip.active{ background:var(--ink); color:#fff; }
.survivor-chip .name.unnamed{ font-style:italic; color:var(--muted); font-weight:300; }
.survivor-chip.dead .name{ text-decoration:line-through; opacity:.6; }
.survivor-chip.active .name.unnamed{ color:#bdbdbd; }
.survivor-chip .tags{ display:flex; gap:6px; flex-wrap:wrap; }
.chip-tag{
  font-size:8.5px; letter-spacing:.18em; text-transform:uppercase; font-weight:500;
  padding:2px 8px; border-radius:20px; border:1px solid var(--hair-2); color:var(--muted);
}
.survivor-chip.active .chip-tag{ border-color:rgba(255,255,255,.3); color:rgba(255,255,255,.75); }
.chip-tag.danger{ color:var(--danger); border-color:rgba(178,59,50,.35); }
.survivor-chip.active .chip-tag.danger{ color:#ffb3ab; border-color:rgba(255,179,171,.4); }

.roster__foot{ padding:16px; border-top:1px solid var(--hair); display:flex; flex-direction:column; gap:8px; }

/* right-click context menu (roster survivor) */
.ctx-menu{ position:fixed; z-index:300; min-width:172px; display:none; padding:6px;
  background:#fff; border:1px solid var(--hair-2); border-radius:10px; box-shadow:0 12px 34px rgba(0,0,0,.16); }
.ctx-menu.show{ display:block; }
.ctx-menu button{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; cursor:pointer;
  background:none; border:none; font-family:inherit; font-size:13px; font-weight:400; color:var(--ink);
  padding:9px 12px; border-radius:7px; transition:background .15s var(--ease); }
.ctx-menu button:hover{ background:#f1efec; }
.ctx-menu button.danger{ color:var(--danger); }
.ctx-menu button.danger:hover{ background:rgba(178,59,50,.09); }

/* survivor icon picker modal */
.imodal{ position:fixed; inset:0; z-index:400; display:none; align-items:center; justify-content:center;
  background:rgba(20,18,16,.42); padding:20px; }
.imodal.show{ display:flex; }
.imodal__box{ background:#fff; border:1px solid var(--hair-2); border-radius:14px; box-shadow:0 24px 60px rgba(0,0,0,.24);
  width:min(560px,100%); max-height:86vh; padding:22px; display:flex; flex-direction:column; }
.imodal__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.imodal__head h2{ margin:0; font-size:13px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.imodal__head h2 span{ color:var(--ink); text-transform:none; letter-spacing:normal; }
.imodal__close{ background:none; border:none; cursor:pointer; font-size:16px; color:var(--muted); padding:4px 6px; border-radius:6px; }
.imodal__close:hover{ color:var(--ink); background:#f1efec; }
.imodal__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; overflow-y:auto; padding-right:4px; }
.icon-toggle{ display:flex; flex-direction:column; align-items:center; gap:8px; cursor:pointer; text-align:center;
  font-family:inherit; padding:13px 8px; border:1px solid var(--hair); border-radius:10px; background:#fff;
  color:var(--ink-soft); transition:all .18s var(--ease); }
.icon-toggle:hover{ border-color:var(--hair-2); background:var(--bg-soft); }
.icon-toggle.on{ border-color:var(--ink); background:var(--ink); color:#fff; }
.icon-toggle .imark{ width:30px; height:30px; }
.icon-toggle__lbl{ font-size:11px; font-weight:400; letter-spacing:.02em; line-height:1.25; }
.icon-cat-h{ grid-column:1 / -1; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
  font-weight:500; margin:8px 0 0; }
.icon-cat-h:first-child{ margin-top:0; }
.icon-none{ display:flex; align-items:center; justify-content:center; width:30px; height:30px; font-size:24px; color:var(--muted); }
/* ---------- innovation tech tree (Innovations header → "Древо") ---------- */
/* small action button living inside a collapsible section header */
.head-btn{ margin-left:12px; font-family:inherit; font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  font-weight:500; color:var(--ink-soft); background:#fff; border:1px solid var(--hair-2); border-radius:7px;
  padding:5px 10px; cursor:pointer; transition:all .2s var(--ease); vertical-align:2px; }
.head-btn:hover{ border-color:var(--ink); color:var(--ink); }
/* full-screen canvas, same shell as the family tree */
#itModal{ position:fixed; inset:0; z-index:300; background:#fcfbf9; display:none; flex-direction:column; }
#itModal.open{ display:flex; animation:rise .25s var(--ease-out); }
#itSvg{ display:block; width:100%; height:100%; }
.it-search{ font-family:inherit; font-size:13px; font-weight:300; color:var(--ink); width:190px;
  background:var(--bg-soft); border:1px solid var(--hair); border-radius:8px; padding:9px 12px; }
.it-search:focus{ outline:none; border-color:var(--hair-2); background:#fff; }
.it-only{ display:flex; align-items:center; gap:7px; font-size:12px; font-weight:300; color:var(--ink-soft); cursor:pointer; white-space:nowrap; }
.it-only input{ width:15px; height:15px; accent-color:var(--ink); cursor:pointer; }
.it-extra{ padding:0 28px 14px; font-size:12px; color:var(--muted); }
.it-extra:empty{ display:none; }
/* edges */
.it-line{ fill:none; stroke:var(--hair-2); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
/* category head box */
.it-head-box{ fill:#fff; stroke:var(--cat); stroke-width:1.4; opacity:.9; }
.it-head-name{ font-family:"Jost", sans-serif; font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  fill:var(--cat); text-anchor:middle; }
.it-head-n{ font-family:"Jost", sans-serif; font-size:9.5px; font-weight:400; letter-spacing:.06em; fill:var(--muted); text-anchor:middle; }
/* innovation box: outlined = not built, filled in the category colour = built */
.it-node{ cursor:pointer; }
.it-box{ fill:#fff; stroke:var(--hair-2); stroke-width:1.5; stroke-dasharray:4 4; transition:fill .2s var(--ease), stroke .2s var(--ease); }
.it-name{ font-family:"Jost", sans-serif; font-size:14px; font-weight:400; fill:var(--muted); text-anchor:middle; }
.it-meta{ font-family:"Jost", sans-serif; font-size:8.5px; font-weight:400; letter-spacing:.12em; text-transform:uppercase;
  fill:var(--faint); text-anchor:middle; }
.it-node.on .it-box{ stroke:var(--cat); stroke-width:2; stroke-dasharray:none; fill:#fff; }
.it-node.on .it-name{ fill:var(--ink); }
.it-node.on .it-meta{ fill:var(--cat); }
.it-node:hover .it-box{ stroke:var(--ink); fill:var(--bg-soft); }
.it-node:hover .it-name{ fill:var(--ink); }
/* add-survivor popup */
.imodal__box--narrow{ width:min(420px,100%); }
.add-check{ display:flex; align-items:center; gap:9px; font-size:14px; font-weight:300; color:var(--ink); cursor:pointer; margin-bottom:18px; }
.add-check input{ width:16px; height:16px; accent-color:var(--ink); cursor:pointer; }
.add-hint{ color:var(--muted); font-size:13px; }
.add-lbl{ display:block; font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); font-weight:500; margin-bottom:8px; }
.add-parents__row{ display:flex; gap:10px; }
.add-parents__row .fam-select{ flex:1 1 0; min-width:0; }
.add-actions{ display:flex; justify-content:flex-end; margin-top:22px; }
.add-actions .btn{ min-width:140px; }

/* ---------- buttons ---------- */
.btn{
  font-family:inherit; font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:500;
  padding:12px 14px; border-radius:8px; cursor:pointer;
  border:1px solid var(--hair-2); background:#fff; color:var(--ink-soft);
  transition:all .25s var(--ease);
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
}
.btn:hover{ color:#fff; background:var(--ink); border-color:var(--ink); }
.btn--ghost:hover{ color:var(--ink); background:#efedea; border-color:var(--hair-2); }
.btn--block{ width:100%; }
.btn-row{ display:flex; gap:8px; }
.btn-row .btn{ flex:1; }

/* ============================================================ MAIN */
.main{ max-width:1560px; }
.scroll{ padding:52px 72px 120px; }
@media(max-width:1100px){ .scroll{ padding:40px 36px 100px; } }

.reveal{ opacity:0; transform:translateY(10px); animation:rise .55s var(--ease-out) forwards; }
@keyframes rise{ to{ opacity:1; transform:none; } }

/* ---------- hero ---------- */
.hero{ margin-bottom:54px; }
.hero__row{ display:flex; align-items:flex-end; gap:24px; flex-wrap:wrap; }
.name-field{ flex:1; min-width:260px; }
.name-field .label{ font-size:9.5px; letter-spacing:.34em; text-transform:uppercase;
  color:var(--muted); margin-bottom:10px; font-weight:500; }
.name-input{
  width:100%; background:transparent; border:none; outline:none; color:var(--ink);
  font-family:inherit; font-weight:300; font-size:clamp(30px,4.4vw,50px); line-height:1.05;
  padding:0 0 10px; border-bottom:1px solid var(--hair); transition:border-color .35s var(--ease);
}
.name-input::placeholder{ color:var(--faint); }
.name-input:focus{ border-color:var(--ink); }
.hero__tagline{ margin:18px 0 0; color:var(--muted); font-size:14.5px; font-weight:300; }
.hero__tagline b{ color:var(--ink-soft); font-weight:500; }

.hero__meta{ display:flex; gap:10px; align-items:center; }
.seg{ display:inline-flex; border:1px solid var(--hair-2); border-radius:30px; overflow:hidden; }
.seg button{ font-family:inherit; font-size:13px; letter-spacing:.06em; padding:9px 16px; cursor:pointer;
  background:#fff; border:none; color:var(--muted); transition:all .25s var(--ease); }
.seg button.on{ background:var(--ink); color:#fff; }
.seg button:hover:not(.on){ color:var(--ink); }

/* ---------- sections & cards ---------- */
.section{ margin:46px 0 0; }
.section > h2{
  font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--muted); font-weight:500;
  margin:0 0 22px; padding-bottom:12px; border-bottom:1px solid var(--hair);
}
.grid{ display:grid; gap:22px; }
.cols-2{ grid-template-columns:1fr 1fr; }
.cols-3{ grid-template-columns:repeat(3,1fr); }
@media (max-width:980px){ .cols-2,.cols-3{ grid-template-columns:1fr; } }

.card{
  background:#fff; border:1px solid var(--hair); border-radius:var(--r); padding:26px;
  transition:border-color .3s var(--ease);
}
.card:hover{ border-color:var(--hair-2); }
.card__title{
  font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); font-weight:500;
  margin:0 0 20px; display:flex; align-items:baseline; gap:10px;
}
.card__note{ font-size:11px; color:var(--faint); text-transform:none; letter-spacing:.02em; font-weight:300;
  font-style:italic; }

/* the stats row sits on open space, no heavy frame */
.card--stats{ border:1px solid var(--hair); }
.statline{ display:grid; grid-template-columns:auto 1px auto 1px 1fr; gap:30px; align-items:center; }
@media(max-width:880px){ .statline{ grid-template-columns:1fr; gap:26px; }
  .statline .vrule{ display:none; } }

.bigstat{ display:flex; flex-direction:column; align-items:center; gap:14px; }
.bigstat .cap{ font-size:10px; letter-spacing:.26em; text-transform:uppercase; color:var(--muted); font-weight:500; }
.bigstat .auto-note{ font-size:10px; letter-spacing:.08em; color:var(--muted); opacity:.75; margin-top:-6px; font-variant-numeric:tabular-nums; }
.dial{ display:flex; align-items:center; gap:16px; }
.dial button{
  width:30px; height:30px; border-radius:50%; cursor:pointer; flex:none;
  border:1px solid var(--hair-2); background:#fff; color:var(--ink-soft);
  font-size:17px; line-height:1; display:grid; place-items:center; transition:all .2s var(--ease);
}
.dial button:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }
.dial .val{ font-weight:300; font-size:52px; line-height:1; min-width:60px; text-align:center; color:var(--ink); }
.dial .val.pulse{ animation:pop .3s var(--ease-out); }
@keyframes pop{ 0%{ transform:scale(1);} 45%{ transform:scale(1.1);} 100%{ transform:scale(1);} }
.vrule{ width:1px; align-self:stretch; background:var(--hair); }

.insane-flag{ font-size:9.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--danger);
  font-weight:500; opacity:0; transition:opacity .35s; height:12px; }
.insane-flag.show{ opacity:1; }

/* ---------- tracks (pips) ---------- */
.track{ display:flex; flex-direction:column; gap:11px; }
.track__pips{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.pip{
  width:20px; height:20px; border-radius:5px; cursor:pointer; flex:none; position:relative;
  border:1.5px solid var(--hair-2); background:#fff; padding:0;
  transition:background .2s var(--ease), border-color .2s var(--ease), transform .15s var(--ease);
}
.pip:hover{ border-color:var(--ink); transform:translateY(-1px); }
.pip.on{ background:var(--ink); border-color:var(--ink); }
.pip.milestone{ border-radius:50%; }
.pip.retire{ border-color:rgba(178,59,50,.5); }
.pip.retire.on{ background:var(--danger); border-color:var(--danger); }
.pip__star{ position:absolute; inset:0; display:grid; place-items:center; font-size:9px;
  color:var(--muted); pointer-events:none; }
.pip.on .pip__star{ color:#fff; }
.track__legend{ display:flex; gap:18px; flex-wrap:wrap; font-size:11px; color:var(--muted); font-weight:300; }
.track__legend b{ color:var(--ink-soft); font-weight:500; letter-spacing:.06em; }

/* ---------- attributes ---------- */
.attr-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:0; border-top:1px solid var(--hair); }
@media(max-width:900px){ .attr-grid{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:520px){ .attr-grid{ grid-template-columns:repeat(2,1fr); } }
.attr{ padding:22px 14px; text-align:center; border-bottom:1px solid var(--hair);
  border-right:1px solid var(--hair); transition:background .25s var(--ease); }
.attr:hover{ background:var(--bg-soft); }
.attr__name{ font-weight:500; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); }
.attr__sub{ font-size:10.5px; color:var(--muted); margin-bottom:14px; font-weight:300; }
.attr__total{ font-weight:300; font-size:42px; line-height:1; color:var(--ink); transition:transform .2s; min-width:44px; }
.attr__total.pulse{ animation:pop .3s var(--ease-out); }
.attr__dial{ display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:8px; }
.attr__step{ width:26px; height:26px; flex:none; border:1px solid var(--hair-2); border-radius:7px; background:#fff;
  color:var(--ink-soft); font-family:inherit; font-size:17px; line-height:1; cursor:pointer; transition:all .18s var(--ease); }
.attr__step:hover{ border-color:var(--ink); color:var(--ink); background:var(--bg-soft); }
.attr__inj{ font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); font-weight:500; }
.attr__inj.on{ color:var(--danger); }
.attr__bg{ display:flex; gap:8px; justify-content:center; }
.minifield{ display:flex; flex-direction:column; gap:4px; flex:1; max-width:54px; }
.minifield label{ font-size:8px; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); font-weight:500; }
.minifield input{
  width:100%; text-align:center; background:#fff; border:1px solid var(--hair-2); border-radius:7px;
  color:var(--ink-soft); font-family:inherit; font-weight:400; font-size:15px; padding:6px 0; outline:none;
  transition:border-color .2s, color .2s;
}
.minifield input:focus{ border-color:var(--ink); color:var(--ink); }

/* ---------- hit locations ---------- */
.loc-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:12px; }
@media(max-width:1000px){ .loc-grid{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:560px){ .loc-grid{ grid-template-columns:repeat(2,1fr); } }
.loc{ border:1px solid var(--hair); border-radius:10px; padding:18px 14px; text-align:center;
  transition:border-color .25s var(--ease); }
.loc:hover{ border-color:var(--hair-2); }
.loc__name{ font-weight:500; font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink); margin-bottom:14px; }
.loc__armor{ display:flex; align-items:baseline; justify-content:center; gap:7px; margin-bottom:16px; }
.loc__armor input{ width:58px; text-align:center; background:#fff; border:1px solid var(--hair-2);
  border-radius:8px; color:var(--ink); font-family:inherit; font-weight:300; font-size:26px; padding:6px 0;
  outline:none; transition:border-color .2s; }
.loc__armor input:focus{ border-color:var(--ink); }
.loc__armor .ap{ font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:500; }
.loc__inj{ display:flex; gap:14px; justify-content:center; }
.injtog{ display:flex; align-items:center; gap:6px; cursor:pointer; user-select:none;
  font-size:11px; letter-spacing:.08em; color:var(--muted); font-weight:500; transition:color .2s; }
.injtog:hover{ color:var(--ink); }
.injtog .box{ width:15px; height:15px; border-radius:4px; border:1.5px solid var(--hair-2); transition:all .2s var(--ease); }
.injtog.on{ color:var(--danger); }
.injtog.on .box{ background:var(--danger); border-color:var(--danger); }

/* ---------- pills ---------- */
.pills{ display:flex; flex-wrap:wrap; gap:8px; }
.pill{
  font-family:inherit; font-size:12px; letter-spacing:.04em; cursor:pointer; user-select:none; font-weight:400;
  padding:8px 15px; border-radius:30px; border:1px solid var(--hair-2); color:var(--ink-soft); background:#fff;
  transition:all .22s var(--ease); display:inline-flex; align-items:center; gap:8px;
}
.pill:hover{ color:var(--ink); border-color:var(--ink); }
.pill.on{ color:#fff; background:var(--ink); border-color:var(--ink); }
.pill.danger.on{ background:var(--danger); border-color:var(--danger); }
.pill.sa-blocked{ text-decoration:line-through; border-color:var(--danger); color:var(--danger); }
.pill.sa-blocked.on{ background:#fff; color:var(--danger); }
.pill.sa-locked{ opacity:.38; border-style:dashed; cursor:default; }          /* no unlocking innovation */
.pill.sa-userblock{ text-decoration:line-through; color:var(--danger); border-color:var(--danger); } /* manually blocked */

/* ---------- text fields / lists ---------- */
.field{ margin-bottom:16px; }
.field:last-child{ margin-bottom:0; }
.field > label{ display:block; font-size:9px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); margin-bottom:7px; font-weight:500; }
.field input.line, .field textarea{
  width:100%; background:#fff; border:none; border-bottom:1px solid var(--hair); border-radius:0;
  color:var(--ink); font-family:inherit; font-size:15px; padding:8px 2px; outline:none;
  transition:border-color .25s; resize:vertical; font-weight:300;
}
.field textarea{ border:1px solid var(--hair); border-radius:10px; padding:12px 14px; min-height:96px; line-height:1.6; }
.field input.line:focus{ border-color:var(--ink); }
.field textarea:focus{ border-color:var(--hair-2); }
.field input.line.ro{ color:var(--ink-soft); background:transparent; cursor:default; border-bottom-style:dashed; }
.field__auto{ font-size:10px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-left:6px; }

.ability-row{ display:flex; gap:12px; align-items:flex-start; margin-bottom:12px; }
.ability-row:last-child{ margin-bottom:0; }
.ability-row .pill{ flex:none; margin-top:2px; padding:6px 11px !important; }
.ability-row .txt b{ color:var(--ink); font-weight:500; font-size:12px; letter-spacing:.04em;
  display:block; margin-bottom:2px; }
.ability-row .txt span{ font-size:13px; color:var(--muted); font-weight:300; line-height:1.45; }

/* ---------- severe injuries ---------- */
.sev-region{ border:1px solid var(--hair); border-radius:10px; padding:16px 18px; margin-bottom:14px; }
.sev-region:last-child{ margin-bottom:0; }
.sev-region__head{ margin-bottom:12px; padding-bottom:10px; border-bottom:1px solid var(--hair); }
.sev-region__head .nm{ font-weight:500; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft); }
.sev-injury{ display:flex; align-items:center; gap:12px; padding:7px 0; }
.sev-injury .label{ flex:1; font-size:14px; color:var(--ink); font-weight:300; }
.sev-injury .label .retire{ font-size:8px; letter-spacing:.12em; color:var(--danger);
  border:1px solid rgba(178,59,50,.35); border-radius:20px; padding:1px 7px; margin-left:9px;
  text-transform:uppercase; font-weight:500; }
.sev-injury.filled .label{ color:var(--danger); }

/* ---------- family ---------- */
.family{ display:flex; flex-direction:column; align-items:center; gap:14px; }
.family__row{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.fambox{ width:150px; }
.fambox input{ width:100%; text-align:center; background:#fff; border:1px solid var(--hair); border-radius:9px;
  color:var(--ink); font-family:inherit; font-size:14px; padding:10px; outline:none; font-weight:300;
  transition:border-color .2s; }
.fambox input:focus{ border-color:var(--ink); }
.fambox.center input{ border-color:var(--hair-2); font-weight:500; }
.fam-connect{ width:1px; height:18px; background:var(--hair-2); }
.fam-lbl{ font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); font-weight:500; }
.fam-lbl em{ font-style:normal; color:var(--faint); text-transform:none; letter-spacing:.02em; font-weight:300; }
.fam-self{ border:1px solid var(--hair-2); border-radius:9px; padding:13px 22px; font-weight:500;
  color:var(--ink); min-width:200px; text-align:center; background:#fff; }
.fam-select{
  appearance:none; -webkit-appearance:none; background:#fff; border:1px solid var(--hair); border-radius:9px;
  padding:11px 34px 11px 14px; font-family:inherit; font-size:14px; font-weight:300; color:var(--ink);
  cursor:pointer; min-width:170px; transition:border-color .2s;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239b9aa0' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
}
.fam-select:hover{ border-color:var(--hair-2); }
.fam-select:focus{ outline:none; border-color:var(--ink); }
.fam-children{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; width:100%; }
.fam-childchip{ font-family:inherit; font-size:14px; font-weight:300; color:var(--ink); cursor:pointer;
  background:#fff; border:1px solid var(--hair-2); border-radius:20px; padding:8px 16px; transition:all .2s var(--ease); }
.fam-childchip:hover{ border-color:var(--ink); }
.fam-empty{ font-size:13px; color:var(--muted); font-style:italic; }

/* ---------- three-line lists ---------- */
.lines3{ display:flex; flex-direction:column; gap:14px; }
/* abilities: name (underlined) + description (borderless muted sub-line) */
.abil-list{ display:flex; flex-direction:column; gap:18px; }
/* abilities as pills + one input */
.abil-box{ display:flex; flex-direction:column; gap:12px; }
.ab-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.ab-chip{ display:inline-flex; align-items:center; border:1px solid var(--hair-2); border-radius:20px; background:#fff; overflow:hidden; }
.ab-chip__name{ font:inherit; font-size:13.5px; color:var(--ink); background:none; border:none; padding:5px 4px 5px 12px; cursor:pointer; }
.ab-chip__name:hover{ text-decoration:underline; text-underline-offset:3px; }
.ab-chip__del{ font:inherit; font-size:10px; color:var(--muted); background:none; border:none; padding:5px 10px 5px 6px; cursor:pointer; }
.ab-chip__del:hover{ color:var(--danger); }
.abil-add{ width:100%; font:inherit; font-size:15px; font-weight:300; border:none; border-bottom:1px solid var(--hair); border-radius:0; outline:none; background:transparent; padding:6px 2px; color:var(--ink); }
.abil-add:focus{ border-color:var(--ink); }
.abil-add::placeholder{ color:var(--muted); }
.ab-box{ width:min(520px,100%); }
.ab-desc{ width:100%; font:inherit; font-size:14.5px; line-height:1.6; color:var(--ink); border:none; outline:none; resize:none; overflow:hidden; padding:0; background:transparent; }
.ab-desc::placeholder{ color:var(--faint); }
.ab-text{ font-size:14.5px; line-height:1.6; color:var(--ink); }
.ab-text b{ font-weight:600; }
.ab-foot{ display:flex; justify-content:flex-end; margin-top:14px; }
.abil-row{ display:flex; flex-direction:column; }
.abil-name{ width:100%; background:transparent; border:none; border-bottom:1px solid var(--hair); border-radius:0;
  color:var(--ink); font-family:inherit; font-size:15px; font-weight:300; padding:7px 2px; outline:none; transition:border-color .2s; }
.abil-name:focus{ border-color:var(--ink); }
.abil-name::placeholder{ color:var(--muted); }
.abil-desc{ width:100%; background:transparent; border:none; border-radius:0; resize:none; overflow:hidden; outline:none;
  font-family:inherit; font-size:12.5px; font-weight:300; line-height:1.5; color:var(--muted); padding:6px 2px 0; transition:color .2s; }
.abil-desc:focus{ color:var(--ink-soft); }
.abil-desc::placeholder{ color:var(--faint); }
.lines3 input.line{
  width:100%; background:#fff; border:none; border-bottom:1px solid var(--hair);
  color:var(--ink); font-family:inherit; font-size:15px; font-weight:300; padding:8px 2px; outline:none;
  transition:border-color .25s;
}
.lines3 input.line:focus{ border-color:var(--ink); }

/* ---------- chronicles timeline ---------- */
.timeline{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px; }
@media(max-width:560px){ .timeline{ grid-template-columns:1fr; gap:16px; } .tl-node--end{ align-items:flex-start !important; text-align:left !important; } }
.tl-node{ display:flex; flex-direction:column; gap:9px; }
.tl-node--end{ align-items:flex-end; text-align:right; }
.tl-cap{ font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:500; }
.tl-year{ width:96px; background:#fff; border:1px solid var(--hair-2); border-radius:9px; text-align:center;
  font-family:inherit; font-weight:300; font-size:25px; color:var(--ink); padding:7px 0; outline:none;
  transition:border-color .2s; }
.tl-year:focus{ border-color:var(--ink); }
.tl-mid{ display:flex; align-items:center; gap:9px; }
.tl-dot{ width:9px; height:9px; border-radius:50%; background:var(--ink); flex:none; }
.tl-dot--end{ background:#fff; border:1.5px solid var(--ink); }
.tl-rail{ width:30px; height:1px; background:var(--hair-2); }
.tl-span{ font-size:11px; letter-spacing:.05em; color:var(--ink-soft); white-space:nowrap; font-weight:400;
  padding:5px 12px; border:1px solid var(--hair); border-radius:20px; }

/* ---------- records / great deeds ---------- */
.notes{ display:flex; flex-direction:column; gap:8px; margin-bottom:14px; }
.note{ display:flex; align-items:center; gap:12px; padding-left:14px;
  border-left:2px solid transparent; transition:border-color .25s var(--ease); }
.note.deed{ border-left-color:var(--ink); }
.note__deed{ flex:none; width:30px; height:30px; border-radius:50%; cursor:pointer;
  border:1px solid var(--hair-2); background:#fff; color:var(--muted); font-size:15px; line-height:1;
  display:grid; place-items:center; transition:all .2s var(--ease); }
.note__deed:hover{ border-color:var(--ink); color:var(--ink); }
.note.deed .note__deed{ background:var(--ink); border-color:var(--ink); color:#fff; }
.note__text{ flex:1; background:#fff; border:none; border-bottom:1px solid var(--hair);
  font-family:inherit; font-size:15px; font-weight:300; color:var(--ink); padding:9px 2px; outline:none;
  transition:border-color .2s; }
.note__text:focus{ border-color:var(--ink); }
.note.deed .note__text{ font-weight:400; }
.note__del{ flex:none; width:26px; height:26px; border-radius:50%; cursor:pointer; border:none;
  background:transparent; color:var(--faint); font-size:19px; line-height:1; transition:all .2s; }
.note__del:hover{ color:var(--danger); background:#f7eceb; }
.note-add{ font-family:inherit; font-size:12px; letter-spacing:.08em; color:var(--ink-soft); cursor:pointer;
  background:#fff; border:1px dashed var(--hair-2); border-radius:9px; padding:12px; width:100%; font-weight:400;
  transition:all .2s var(--ease); }
.note-add:hover{ border-color:var(--ink); color:var(--ink); background:var(--bg-soft); }

/* ---------- toast ---------- */
.toast{ position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(16px);
  background:var(--ink); color:#fff; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; font-weight:500;
  padding:11px 22px; border-radius:30px; box-shadow:0 8px 30px -10px rgba(0,0,0,.4);
  opacity:0; pointer-events:none; transition:opacity .25s, transform .35s var(--ease-out); z-index:200; }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.toast--off{ background:var(--danger); }

#importFile{ display:none; }

/* ============================================================ SIDEBAR NAV */
.roster__camp{ padding:24px 18px 16px; border-bottom:1px solid var(--hair); }
.roster__lbl{ font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); font-weight:500;
  display:block; margin-bottom:8px; }
.roster__nav{ flex:1; display:flex; flex-direction:column; min-height:0; padding:12px 14px 4px; }
.nav-item{ font-family:inherit; font-size:14px; text-align:left; padding:12px; border-radius:8px; border:none;
  background:transparent; color:var(--ink-soft); cursor:pointer; transition:all .25s var(--ease); }
.nav-item:hover{ background:#efedea; color:var(--ink); }
.nav-item.active{ background:var(--ink); color:#fff; }
.roster__subhead{ font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); font-weight:500;
  margin:18px 4px 6px; display:flex; gap:6px; }
.roster__nav .roster__list{ padding:0; }
.roster__tools{ display:flex; gap:6px; margin:0 4px 8px; flex-wrap:wrap; }
.roster__filter{
  flex:1 1 100%; min-width:0; font-family:inherit; font-size:13px; font-weight:300; color:var(--ink);
  background:#fff; border:1px solid var(--hair); border-radius:8px; padding:8px 10px; outline:none;
  transition:border-color .2s;
}
.roster__filter::placeholder{ color:var(--muted); }
.roster__filter:hover{ border-color:var(--hair-2); }
.roster__filter:focus{ border-color:var(--ink); }
.roster__filter::-webkit-search-cancel-button{ -webkit-appearance:none; appearance:none; }
.roster__sort{
  appearance:none; -webkit-appearance:none; background:#fff; border:1px solid var(--hair); border-radius:8px;
  padding:8px 26px 8px 10px; font-family:inherit; font-size:13px; font-weight:300; color:var(--ink-soft);
  cursor:pointer; transition:border-color .2s; flex:1 1 0; min-width:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239b9aa0' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center;
}
.roster__sort:hover{ border-color:var(--hair-2); }
.roster__sort:focus{ outline:none; border-color:var(--ink); }
.roster__chips{ display:flex; align-items:center; gap:5px; margin:0 4px 10px; flex-wrap:wrap; }
.rfilter{
  font-family:inherit; font-size:12px; font-weight:400; color:var(--ink-soft); cursor:pointer;
  background:#fff; border:1px solid var(--hair); border-radius:7px; padding:5px 10px;
  transition:all .2s var(--ease); line-height:1;
}
.rfilter:hover{ border-color:var(--hair-2); color:var(--ink); }
.rfilter.on{ background:var(--ink); border-color:var(--ink); color:#fff; }
.rfilter--sex, .rfilter--icon{ font-size:14px; padding:5px 9px; }
.rfilter-sep{ width:1px; align-self:stretch; background:var(--hair); margin:2px 3px; }
.roster__empty{ font-size:13px; font-weight:300; color:var(--muted); padding:10px 12px; }
.survivor-chip .chip-stat{
  margin-left:auto; font-size:12px; font-weight:500; color:var(--ink); font-variant-numeric:tabular-nums;
  background:var(--hair); border-radius:6px; padding:1px 8px;
}
.survivor-chip.active .chip-stat{ background:rgba(255,255,255,.18); color:#fff; }
.survivor-chip__top{ display:flex; align-items:center; gap:8px; width:100%; }
.survivor-chip__top .name{ flex:1; }
.chip-sex{ flex:none; font-size:14px; line-height:1; color:var(--muted); width:13px; text-align:center; }
.chip-sex--f{ color:#9a6b86; }
.chip-sex--m{ color:#6b7a9a; }
.survivor-chip.active .chip-sex{ color:rgba(255,255,255,.7); }
.chip-weapon{ flex:none; display:inline-flex; align-items:center; color:var(--muted); }
/* mask-recolored PNG icon (silhouette → currentColor). Size is set by context. */
.mask-ic{ display:inline-block; background-color:currentColor;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain; mask-size:contain; }
/* icon-only nav tabs (settlement / chronicle / family tree) */
.roster__tabs{ display:flex; gap:8px; margin-bottom:6px; }
.tab-icon{ flex:1; display:flex; align-items:center; justify-content:center; padding:11px; cursor:pointer;
  border:1px solid var(--hair); border-radius:9px; background:#fff; color:var(--ink-soft); transition:all .2s var(--ease); }
.tab-icon:hover{ border-color:var(--hair-2); background:#efedea; color:var(--ink); }
.tab-icon.active{ background:var(--ink); border-color:var(--ink); color:#fff; }
.tab-ic{ width:26px; height:26px; }
/* inline mask icon inside a chip/pill/button (follows currentColor) */
.ic-chip{ width:19px; height:19px; vertical-align:-4px; }
.hero__injuries{ display:flex; flex-wrap:wrap; gap:12px; margin-top:14px; color:var(--danger); }
.hero__injuries .mask-ic{ width:24px; height:24px; }
.inj-ic{ position:relative; display:inline-flex; }
.inj-ic::after{ content:attr(data-tip); position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%);
  background:var(--ink); color:#fff; font-size:11px; font-weight:400; letter-spacing:.02em; padding:5px 9px; border-radius:6px;
  white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .15s var(--ease); z-index:60; }
.inj-ic:hover::after{ opacity:1; }
.inj-ic--dis{ color:var(--madness); }
.inj-ic--fa{ color:var(--art); }
.inj-ic--ab{ color:var(--ability); }
.inj-ic--abl{ color:var(--ability-2); }
.inj-ic--card{ cursor:pointer; }
/* centered large card viewer (click a disorder icon) — card art is stored squashed to 512², shown at card ratio */
.card-view{ position:fixed; inset:0; z-index:400; display:none; align-items:center; justify-content:center;
  background:rgba(20,20,24,.72); cursor:zoom-out; padding:16px; }
.card-view.open{ display:flex; animation:cardViewIn .18s var(--ease-out); }
.card-view__fig{ margin:0; display:flex; flex-direction:column; align-items:center; gap:12px; }
.card-view__fig img{ width:min(78vh * 200 / 311, 412px, 100vw - 32px); height:auto; aspect-ratio:200/311; object-fit:fill;
  border-radius:14px; box-shadow:0 24px 70px rgba(0,0,0,.5); }
.card-view__fig figcaption{ color:#fff; font-size:13px; letter-spacing:.06em; opacity:.85; }
@keyframes cardViewIn{ from{ opacity:0; transform:scale(.97); } to{ opacity:1; transform:none; } }
/* separator between impairments (left) and severe injuries (right) in the hero status row */
.inj-sep{ align-self:center; width:1px; height:20px; background:var(--hair-2); margin:0 2px; }
.chip-mark{ flex:none; display:inline-flex; align-items:center; color:var(--muted); }
.chip-mark .mask-ic{ width:18px; height:18px; }
.survivor-chip.active .chip-mark{ color:rgba(255,255,255,.72); }
.chip-weapon .wicon{ width:18px; height:18px; display:block; }
.hero__injuries .inj-ic--wp .wicon{ width:24px; height:24px; display:block; }
.bs-marks .hero__injuries .inj-ic--wp .wicon{ width:28px; height:28px; }
.wicon--img{
  background-color:currentColor;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain; mask-size:contain;
}
.survivor-chip.active .chip-weapon{ color:rgba(255,255,255,.72); }
/* weapon Mastery (proficiency track full) → gold glyph */
.inj-ic--wp{ color:var(--muted); }
/* Specialist (proficiency milestone) → our ink black; on the dark active chip it goes full white */
.chip-weapon--spec{ color:var(--ink); }
.survivor-chip.active .chip-weapon--spec{ color:#fff; }
.chip-weapon--master, .survivor-chip.active .chip-weapon--master{ color:#c9a23f; }
.roster__clearskip{
  align-self:flex-start; margin:2px 4px 10px; display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  font-family:inherit; font-size:11px; font-weight:500; letter-spacing:.04em; line-height:1;
  color:var(--ink-soft); background:#fff; border:1px solid var(--hair-2); border-radius:7px; padding:8px 12px;
  transition:all .2s var(--ease);
}
.roster__clearskip:hover{ color:#fff; background:var(--ink); border-color:var(--ink); }

/* ============================================================ SETTLEMENT */
.coll__head{ cursor:pointer; user-select:none; }
.coll__caret{ display:inline-block; margin-right:9px; font-size:.62em; color:var(--muted); transition:transform .2s var(--ease); }
.coll--closed > .coll__head .coll__caret{ transform:rotate(-90deg); }
.coll--closed > .coll__body{ display:none; }
.card.coll--closed{ padding-bottom:0; }
.card.coll--closed > .card__title{ margin-bottom:0; }
.snap-card{ display:flex; flex-direction:column; gap:12px; }
.snap-info{ font-size:14px; font-weight:300; color:var(--ink); }
.snap-info b{ font-weight:500; }
.snap-none{ color:var(--muted); }
.snap-date{ color:var(--ink-soft); font-variant-numeric:tabular-nums; }
.snap-hint{ font-size:12px; font-weight:300; line-height:1.5; color:var(--muted); margin:0; }
.snap-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.snap-rollback{ color:#a23b3b; border-color:#e0bcbc; }
.snap-rollback:hover{ color:#fff; background:#a23b3b; border-color:#a23b3b; }

/* Chronicle / Летопись */
.chron{ display:flex; flex-direction:column; gap:22px; }
.chron-year__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; padding-bottom:6px; border-bottom:1px solid var(--hair); }
.chron-year__title{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:500; }
.chron-entries{ display:flex; flex-direction:column; gap:1px; }
.chron-entry{ display:flex; align-items:flex-start; gap:9px; padding:6px 8px; border-radius:8px; transition:background .2s var(--ease); }
.chron-entry:hover{ background:var(--bg-soft); }
.chron-grip{ flex:none; cursor:grab; color:var(--faint); font-size:12px; line-height:1.55; opacity:0; user-select:none; }
.chron-entry:hover .chron-grip{ opacity:.5; }
.chron-grip:hover{ opacity:1; color:var(--muted); }
.chron-grip:active{ cursor:grabbing; }
.chron-entry.drag-over{ box-shadow:inset 0 2px 0 var(--ink); }
.chron-ic{ flex:none; width:28px; height:28px; padding:0; display:flex; align-items:center; justify-content:center;
  background:none; border:none; cursor:pointer; color:var(--muted); font-size:15px; border-radius:6px; transition:background .15s,color .15s; }
.chron-ic:hover{ background:#f1efec; color:var(--ink); }
.chron-ic-img{ width:23px; height:23px; }
.chron-body{ flex:1; min-width:0; font-size:14px; font-weight:300; line-height:1.55; color:var(--ink); word-break:break-word; }
.chron-edit{ flex:1; min-width:0; font-family:inherit; font-size:14px; font-weight:300; line-height:1.55; color:var(--ink);
  border:1px solid var(--hair); border-radius:8px; padding:6px 10px; resize:none; overflow:hidden; outline:none; }
.chron-edit:focus{ border-color:var(--ink); }
.chron-btn{ flex:none; background:none; border:none; cursor:pointer; color:var(--muted); font-size:13px; line-height:1.4;
  padding:2px 6px; border-radius:6px; opacity:.4; transition:opacity .15s,color .15s,background .15s; }
.chron-entry:hover .chron-btn, .chron-entry--edit .chron-btn{ opacity:1; }
.chron-btn:hover{ color:var(--ink); background:#f1efec; }
.chron-del:hover{ color:var(--danger); background:rgba(178,59,50,.09); }
.chron-legend.on{ color:#bd8b2b; opacity:1; }
.chron-legend:hover{ color:#bd8b2b; }
.chron-entry.legendary{ box-shadow:inset 3px 0 0 #d8b25a; background:rgba(216,178,90,.08); }
.chron-entry.legendary:hover{ background:rgba(216,178,90,.14); }
.chron-link{ color:var(--ink); font-weight:400; border-bottom:1px solid var(--hair-2); cursor:pointer; }
.chron-link:hover{ border-bottom-color:var(--ink); }
.chron-link--dead{ color:var(--muted); border-bottom:1px dashed var(--hair-2); cursor:default; }
.chron-dl{ width:auto; flex:none; padding:8px 14px; margin-bottom:6px; white-space:nowrap; }
.chron-empty{ font-size:13px; font-weight:300; color:var(--muted); padding:4px 8px; }
.campaign-tag{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
  border:1px solid var(--hair-2); border-radius:20px; padding:9px 16px; font-weight:500; }
.settle .val{ font-size:36px; font-weight:300; }
.settle .dial button{ width:28px; height:28px; font-size:15px; }
.statline--6, .statline--4{ display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; }
.statline--6 .bigstat, .statline--4 .bigstat{ flex:1; min-width:110px; }

.sub-lbl{ font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); font-weight:500; margin:0 0 10px; }

/* checkbox square used across settlement */
.ms-box{ width:18px; height:18px; border:1.5px solid var(--hair-2); border-radius:5px; cursor:pointer; flex:none;
  display:inline-block; transition:all .2s var(--ease); }
.ms-box:hover{ border-color:var(--ink); }
.ms-box.on{ background:var(--ink); border-color:var(--ink); }

/* timeline */
.card--timeline{ padding:24px 22px; }
.tl-head,.tl-row{ display:grid; grid-template-columns:24px 36px 1fr 1.5fr; gap:18px; align-items:center; }
.tl-head{ font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:500;
  padding:0 6px 12px; border-bottom:1px solid var(--hair); margin-bottom:6px; }
.tl-row{ padding:2px 6px; border-radius:9px; transition:background .18s var(--ease); }
.tl-row:hover{ background:var(--bg-soft); }
.tl-year-n{ font-weight:400; font-size:15px; color:var(--ink-soft); text-align:center; font-variant-numeric:tabular-nums; }
.tl-row.done .tl-year-n{ color:var(--faint); }
.tl-row.done .tl-input{ color:var(--muted); }
.tl-input{ width:100%; background:transparent; border:none; border-bottom:1px solid var(--hair);
  color:var(--ink); font-family:inherit; font-size:14px; font-weight:300; padding:9px 3px; outline:none;
  transition:border-color .2s; }
.tl-input::placeholder{ color:var(--faint); }
.tl-input:focus{ border-bottom-color:var(--ink); }

/* milestones */
.ms-row{ display:grid; grid-template-columns:20px 1fr auto; gap:12px; align-items:center; padding:9px 0; border-bottom:1px solid var(--hair); }
.ms-row:last-child{ border-bottom:none; }
.ms-cond{ font-size:13.5px; color:var(--ink); font-weight:300; }
.ms-reward{ font-size:11px; color:var(--muted); font-weight:500; letter-spacing:.04em; }

/* principles */
.pr-row{ display:grid; grid-template-columns:84px 1fr 1fr; gap:9px; align-items:center; padding:9px 0; border-bottom:1px solid var(--hair); }
.pr-row:last-child{ border-bottom:none; }
.pr-name{ font-size:10.5px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); }
.pr-opt{ font-size:13px; padding:9px 10px; border:1px solid var(--hair-2); border-radius:8px; cursor:pointer;
  text-align:center; transition:all .2s var(--ease); color:var(--ink-soft); }
.pr-opt:hover{ border-color:var(--ink); color:var(--ink); }
.pr-opt.on{ background:var(--ink); color:#fff; border-color:var(--ink); }

/* inline stat (innovate) */
.inline-stat{ display:flex; align-items:center; gap:14px; }
.inline-stat .cap{ font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); font-weight:500; }
.inline-stat .val{ font-size:26px; }
.inline-stat .dial button{ width:26px; height:26px; }
.inline-hint{ font-size:12px; color:var(--muted); font-style:italic; }

/* nemesis */
.nem-row{ display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center; padding:7px 0; border-bottom:1px solid var(--hair); }
.nem-row:last-child{ border-bottom:none; }
.nem-name{ font-size:14px; font-weight:300; }

/* checkbox grids (locations / masteries) */
.chk-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.chk-grid .pill{ justify-content:flex-start; }

/* generic list rows (innovations, resources) */
.li-row{ display:flex; align-items:center; gap:10px; padding:5px 0; }
.li-text{ flex:1; background:#fff; border:none; border-bottom:1px solid var(--hair); font-family:inherit;
  font-size:14px; font-weight:300; color:var(--ink); padding:8px 2px; outline:none; transition:border-color .2s; }
.li-text:focus{ border-color:var(--ink); }
.qty{ display:flex; align-items:center; gap:8px; flex:none; }
.qty button{ width:26px; height:26px; border-radius:50%; border:1px solid var(--hair-2); background:#fff;
  color:var(--ink-soft); cursor:pointer; font-size:15px; line-height:1; transition:all .2s var(--ease); }
.qty button:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }
.qty b{ min-width:22px; text-align:center; font-weight:500; font-size:15px; }

/* records */
.rec-head,.rec-row{ display:grid; grid-template-columns:1fr 22px 22px 22px 26px; gap:12px; align-items:center; }
.rec-head{ font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:500;
  padding-bottom:8px; border-bottom:1px solid var(--hair); margin-bottom:4px; }
.rec-row{ padding:5px 0; border-bottom:1px solid var(--hair); }
.rec-row:last-child{ border-bottom:none; }

/* resource storage (multi-type) */
.store-item{ padding:13px 0; border-bottom:1px solid var(--hair); }
.store-item:last-of-type{ border-bottom:none; }
.store-top{ display:flex; align-items:center; gap:12px; }
.store-top .li-text{ flex:1; }
.cat-group{ display:flex; gap:5px; flex:none; }
.cat-box{ width:23px; height:23px; border:1.5px solid var(--hair-2); border-radius:5px; display:grid; place-items:center;
  font-size:11px; font-weight:600; color:var(--muted); cursor:pointer; transition:all .2s var(--ease); }
.cat-box:hover{ border-color:var(--ink); color:var(--ink); }
.cat-box.on{ background:var(--ink); border-color:var(--ink); color:#fff; }
.kw-group{ display:flex; flex-wrap:wrap; gap:6px; margin-top:11px; }
.kw-chip{ font-size:11px; letter-spacing:.02em; padding:5px 11px; border:1px solid var(--hair-2); border-radius:20px;
  color:var(--ink-soft); cursor:pointer; transition:all .2s var(--ease); }
.kw-chip:hover{ border-color:var(--ink); color:var(--ink); }
.kw-chip.on{ background:var(--ink); border-color:var(--ink); color:#fff; }
/* storage filter bar */
.store-filter{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:2px 0 14px; }
.sf-chips{ display:flex; gap:6px; flex-wrap:wrap; }
.sf-search{ font-family:inherit; font-size:12px; letter-spacing:.02em; color:var(--ink); background:var(--bg-soft);
  border:1px solid var(--hair-2); border-radius:20px; padding:6px 12px; min-width:150px; flex:1 1 150px; max-width:260px;
  outline:none; transition:border-color .2s var(--ease); }
.sf-search:focus{ border-color:var(--ink); }
.sf-search::placeholder{ color:var(--faint); }
.store-item.filtered-out{ display:none; }

/* disorders (with autocomplete + art) */
.dis-list{ display:flex; flex-direction:column; gap:12px; }
.dis-row{ display:flex; align-items:center; gap:10px; }
.dis-row .li-text{ flex:1; }

/* stored gear */
.gear-row{ display:flex; align-items:center; gap:12px; padding:4px 0; }
.gear-input{ flex:1; }
.gear-thumb{ width:34px; height:34px; flex:none; border-radius:7px; object-fit:cover; border:1px solid var(--hair-2); background:#fff; cursor:zoom-in; }
.gear-thumb--empty{ border-style:dashed; border-color:var(--hair); cursor:default; }
.gear-ac{ position:fixed; z-index:360; display:none; background:#fff; border:1px solid var(--hair-2);
  border-radius:10px; box-shadow:0 14px 36px -10px rgba(0,0,0,.3); padding:5px; max-height:340px; overflow:auto; }
.gear-ac.open{ display:block; }
.gear-ac__item{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; background:none; border:none;
  cursor:pointer; padding:6px 8px; border-radius:7px; font-family:inherit; transition:background .15s; }
.gear-ac__item:hover{ background:var(--bg-soft); }
.gear-ac__item img{ width:30px; height:30px; flex:none; border-radius:5px; object-fit:cover; border:1px solid var(--hair); background:#fff; }
.gear-ac__item .gn{ font-size:14px; color:var(--ink); }
.gear-ac__item--text{ flex-direction:column; align-items:flex-start; gap:2px; }
.gear-ac__item .gd{ font-size:11.5px; line-height:1.4; color:var(--muted); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.gear-ac__item .gs{ font-size:11px; color:var(--muted); margin-left:auto; white-space:nowrap; padding-left:10px; }
.gear-pop{ position:fixed; z-index:370; display:none; background:#fff; border:1px solid var(--hair-2);
  border-radius:12px; box-shadow:0 18px 44px -12px rgba(0,0,0,.4); padding:10px; width:240px; pointer-events:none; }
.gear-pop.open{ display:block; }
.gear-pop img{ width:220px; height:220px; object-fit:contain; display:block; }
/* per-round survival-action tracker — lives in the battle modal's dark top bar */
.sh-round{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; justify-content:center; flex:1; }
.sh-round__label{ font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:#b8ac98; font-weight:500; margin-right:4px; }
.sh-round__chip{ font-family:inherit; font-size:12px; color:#ece3d2; cursor:pointer; user-select:none;
  background:transparent; border:1px solid rgba(236,227,210,.3); border-radius:6px; padding:4px 9px; transition:all .15s; }
.sh-round__chip:hover{ border-color:#ece3d2; }
.sh-round__chip.partial{ border-color:#ece3d2; }
.sh-round__chip.spent{ text-decoration:line-through; opacity:.4; }
.sh-round__chip.blocked{ text-decoration:line-through; opacity:.38; cursor:not-allowed; border-color:rgba(178,59,50,.55); color:#e6b3ad; }
.sh-round__chip.blocked:hover{ border-color:rgba(178,59,50,.55); }
.sh-round__frenzy{ font-family:inherit; font-size:12px; cursor:pointer; user-select:none; color:#e6b3ad;
  background:transparent; border:1px solid rgba(178,59,50,.55); border-radius:6px; padding:4px 11px; transition:all .15s; }
.sh-round__frenzy:hover{ border-color:var(--danger); color:#fff; }
.sh-round__frenzy.on{ background:var(--danger); border-color:var(--danger); color:#fff; }
.sh-round__frenzy-note{ font-size:10px; color:#e6b3ad; opacity:.85; letter-spacing:.04em; }
.sh-round__n{ margin-left:5px; font-size:10px; opacity:.7; font-variant-numeric:tabular-nums; }
.sh-round__sep{ width:1px; align-self:stretch; background:rgba(236,227,210,.25); margin:2px 4px; }

/* Weak Spot disorder — pick the recorded hit location */
.ws-pick{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin:2px 2px 8px; }
.ws-pick__lbl{ font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:500; margin-right:2px; }
.ws-loc{ cursor:pointer; font-size:12px; padding:4px 10px; }
.sh-round__reset{ font-family:inherit; font-size:13px; color:#ece3d2; cursor:pointer; line-height:1;
  background:transparent; border:1px solid rgba(236,227,210,.3); border-radius:6px; padding:4px 9px; transition:background .15s; }
.sh-round__reset:hover{ background:rgba(236,227,210,.15); }

/* fighting arts, disorders & resources shown at real card proportions:
   bridge size 57.15mm × 88.9mm (≈1:1.556). Square art is stretched to fill. */
.gear-pop--tall img{ width:200px; height:311px; margin:0 auto; object-fit:fill; }
.gear-pop span{ display:block; font-size:12px; color:var(--ink-soft); text-align:center; margin-top:6px; font-weight:500; }
/* text-only tooltip (ability descriptions on the battle sheet) */
.gear-pop--text{ width:264px; padding:12px 14px; }
.gear-pop--text img{ display:none; }
.gear-pop--text span{ text-align:left; margin-top:0; font-weight:400; font-size:12.5px; line-height:1.55; color:var(--ink-soft); white-space:pre-wrap; }

/* population */
.pop-row{ display:flex; align-items:center; gap:12px; padding:9px 0; border-bottom:1px solid var(--hair); }
.pop-row:last-child{ border-bottom:none; }
.pop-row.dead{ opacity:.5; }
.pop-open{ flex:1; text-align:left; background:none; border:none; cursor:pointer; font-family:inherit;
  font-size:15px; font-weight:300; color:var(--ink); transition:color .2s; }
.pop-open:hover{ text-decoration:underline; }
.pop-open i{ color:var(--muted); }
.seg--sm button{ padding:6px 11px; font-size:13px; }

/* ============================================================ FAMILY TREE MODAL */
#ftModal{ position:fixed; inset:0; z-index:300; background:#fcfbf9; display:none; flex-direction:column; }
#ftModal.open{ display:flex; animation:rise .25s var(--ease-out); }
.ft-bar{ display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:18px 28px; border-bottom:1px solid var(--hair); background:#fff; }
.ft-bar h2{ font-family:inherit; font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft);
  font-weight:500; margin:0; }
.ft-bar h2 span{ color:var(--muted); }
.ft-actions{ display:flex; align-items:center; gap:10px; }
.ft-hint{ font-size:12px; color:var(--muted); font-style:italic; margin-right:6px; }
.ft-zoom{ width:40px; padding:10px 0; font-size:16px; }
.ft-menu{ position:fixed; z-index:340; display:none; background:#fff; border:1px solid var(--hair-2);
  border-radius:10px; box-shadow:0 14px 36px -10px rgba(0,0,0,.35); padding:6px; min-width:188px; }
.ft-menu.open{ display:block; }
.ft-menu button{ display:block; width:100%; text-align:left; background:none; border:none; cursor:pointer;
  font-family:inherit; font-size:13.5px; color:var(--ink); padding:9px 12px; border-radius:7px; transition:background .15s; }
.ft-menu button:hover{ background:var(--bg-soft); }
.ft-canvas{ flex:1; overflow:hidden; padding:0; cursor:grab; touch-action:none; }
.ft-canvas.grabbing{ cursor:grabbing; }
#ftSvg{ display:block; width:100%; height:100%; }
#ftEdges{ transition:opacity .3s var(--ease); }
.ft-empty{ color:var(--muted); font-style:italic; text-align:center; margin-top:60px; }

.ft-line{ fill:none; stroke:var(--hair-2); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
  transition:stroke .2s var(--ease), stroke-width .2s var(--ease); }
.ft-box{ fill:#fff; stroke:var(--hair-2); stroke-width:1.6; transition:stroke .2s var(--ease), fill .2s var(--ease); }
.ft-name{ font-family:"Jost", sans-serif; font-size:15px; font-weight:400; fill:var(--ink); text-anchor:middle; }
.ft-meta{ font-family:"Jost", sans-serif; font-size:9.5px; font-weight:400; letter-spacing:.06em; text-transform:uppercase;
  fill:var(--muted); text-anchor:middle; }
.ft-node{ cursor:pointer; }
.ft-node:hover .ft-box{ stroke:var(--ink); fill:var(--bg-soft); }
.ft-cur .ft-box{ stroke:var(--ink); stroke-width:2.4; }
.ft-cur .ft-meta{ fill:var(--ink-soft); }
.ft-dead .ft-box{ fill:#f6f4f1; stroke-dasharray:5 4; }
.ft-dead .ft-name{ fill:var(--muted); }
.ft-dead .ft-meta{ fill:var(--faint); }
/* highlight a survivor's immediate kin on hover */
.ft-line.ft-hl{ stroke:var(--danger); stroke-width:2.6; }
.ft-node.ft-kin .ft-box{ stroke:var(--danger); stroke-width:2.4; fill:#fdf3f1; }
.ft-node.ft-kin .ft-name{ fill:var(--ink); }
.ft-node.ft-kin .ft-meta{ fill:var(--danger); }

/* ============================================================ PRINTABLE SHEET MODAL */
#shModal{ position:fixed; inset:0; z-index:320; background:#33312e; display:none; flex-direction:column; }
#shModal.open{ display:flex; animation:rise .25s var(--ease-out); }
.sh-bar{ display:flex; align-items:center; justify-content:space-between; gap:18px; padding:14px 24px;
  background:#1f1d1b; color:#ece3d2; }
.sh-bar h2{ font-family:inherit; font-size:12px; letter-spacing:.16em; text-transform:uppercase; margin:0; font-weight:500; }
.sh-bar h2 span{ color:#b8ac98; }
.sh-bar__left{ display:flex; align-items:center; gap:14px; min-width:0; }
.sh-he-btn{ padding:9px 14px; background:transparent; color:#ece3d2; border-color:rgba(236,227,210,.35); }
.sh-he-btn:hover{ background:#ece3d2; color:#1f1d1b; border-color:#ece3d2; }

/* hunt event window */
.he-box{ width:min(760px,100%); }
.he-input{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.he-input span{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.he-input input{ width:110px; font:inherit; font-size:30px; font-weight:300; text-align:center; padding:6px 8px;
  border:1px solid var(--hair-2); border-radius:10px; outline:none; color:var(--ink); }
.he-input input:focus{ border-color:var(--ink); }
.he-input input::-webkit-inner-spin-button, .he-input input::-webkit-outer-spin-button{ -webkit-appearance:none; margin:0; }
.he-input input{ -moz-appearance:textfield; appearance:textfield; }
.he-body{ overflow-y:auto; min-height:0; padding-right:4px; font-size:14.5px; line-height:1.6; color:var(--ink); }
.he-body p{ margin:0 0 11px; }
.he-title{ display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 12px; margin:0 0 12px; font-size:22px; font-weight:400; }
.he-title small{ flex-basis:100%; font-size:12px; letter-spacing:.08em; color:var(--muted); font-weight:400; }
.he-no{ font-size:13px; font-weight:600; color:#fff; background:var(--ink); border-radius:6px; padding:2px 8px; align-self:center; }
.he-empty{ color:var(--muted); }
.he-table{ overflow-x:auto; margin:4px 0 12px; }
.he-table table{ width:100%; border-collapse:collapse; font-size:13.5px; line-height:1.5; }
.he-table th{ text-align:left; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:500;
  border-bottom:1px solid var(--hair-2); padding:6px 10px; }
.he-table td{ border-bottom:1px solid var(--hair); padding:8px 10px; vertical-align:top; }
.he-table td.he-roll{ white-space:nowrap; font-weight:600; width:1%; }
.sh-stage{ flex:1; display:flex; align-items:center; justify-content:center; overflow:auto; padding:18px; }
#shSheet{ position:relative; width:1640px; flex:none; transform-origin:top left;
  background:#fff; box-shadow:0 16px 50px rgba(0,0,0,.5); color:var(--ink); }

/* ---- battle sheet (native HTML re-layout) ---- */
.bs{ padding:24px 28px 28px; font-family:inherit; }
.bs input, .bs textarea, .bs select{ font-family:inherit; color:var(--ink); }
.bs-head{ display:flex; justify-content:space-between; gap:28px; align-items:flex-start;
  border-bottom:1px solid var(--hair); padding-bottom:15px; margin-bottom:18px; }
.bs-name{ display:grid; grid-template-columns:auto 1fr; column-gap:11px; align-items:baseline; flex:1; min-width:320px; }
.bs-name__lbl{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.bs-name__in{ font-size:34px; font-weight:300; border:none; background:transparent; outline:none; padding:0; min-width:0; }
.bs-name__sub{ grid-column:2; font-size:12px; color:var(--muted); margin-top:3px; }
.bs-name__skip{ grid-column:2; margin-top:14px; }
.bs-head__right{ display:flex; flex-direction:column; gap:10px; align-items:flex-end; }
.bs-status{ display:flex; gap:8px; align-items:center; }
.bs-hunt{ display:flex; align-items:center; gap:12px; }
.bs-hunt__lbl{ font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); white-space:nowrap; }
.seg--sm button{ padding:5px 10px; font-size:12.5px; }
.pill.sm{ padding:5px 11px; font-size:11.5px; }

.bs-cols{ display:grid; grid-template-columns:2.4fr 1fr; gap:18px; align-items:stretch; }
.bs-col{ display:flex; flex-direction:column; gap:11px; }
.bs-col--side{ min-width:0; }
.bs-col--side > .bs-notes{ flex:1; }
.bs-row{ display:flex; gap:13px; }
.bs-row--2 > *, .bs-row--3 > *{ flex:1; min-width:0; }
.bs-card{ padding:12px 15px; }
.bs-card .card__title{ margin-bottom:10px; font-size:14px; }
.bs .track{ margin-bottom:9px !important; }
.bs .abil-list{ gap:11px; }
.bs .ab-chip__name{ font-size:13px; }
.bs .abil-add{ font-size:14px; }
.bs .abil-name{ font-size:16px; }
.bs .abil-desc{ font-size:13px; line-height:1.45; }
.bs .ability-row{ margin-bottom:5px; }
.bs .ability-row .txt b{ font-size:13.5px; }
.bs .ability-row .txt span{ font-size:12px; }
.bs .field label{ font-size:12px; }
.bs .fam-select{ font-size:14px; }
.bs .line{ font-size:15px; }
.bs .li-text{ font-size:16px; }

/* checkboxes */
.bs-cb{ width:16px; height:16px; border:1.6px solid var(--ink); border-radius:3px; display:inline-block; flex:none; position:relative; cursor:pointer; }
.bs-cb.sm{ width:14px; height:14px; }
.bs-cb--h{ border-width:2.6px; }
.bs-cb.on{ background:var(--ink); border-color:var(--ink); }
.bs-cb-row{ display:flex; align-items:center; gap:8px; font-size:14px; cursor:pointer; }
/* − / + steppers — round buttons that take some of the counter's width */
.bs-step{ display:flex; align-items:center; gap:6px; flex:1; min-width:0; }
.bs-step__b{ flex:none; width:32px; height:32px; border:1.5px solid var(--hair-2); border-radius:50%;
  background:transparent; cursor:pointer; font-size:21px; line-height:1; color:var(--muted); padding:0;
  display:flex; align-items:center; justify-content:center; transition:border-color .15s, color .15s; }
.bs-step__b:hover{ color:var(--ink); border-color:var(--ink); }
.bs-step > input{ flex:1; min-width:0; margin:0; }

/* survival */
.bs-survival{ border:1px solid var(--hair-2); border-radius:10px; padding:13px 14px; display:flex; flex-direction:column; gap:11px; width:270px; flex:none; }
.bs-survival__hd{ font-size:15.5px; font-weight:500; }
.bs-survival__body{ display:flex; gap:11px; }
.bs-survival__val{ flex:1; border:1px solid var(--hair-2); border-radius:8px; font-size:34px; text-align:center; font-weight:300; outline:none; background:transparent; min-width:0; padding:4px 0; }
.bs-survival__limit{ display:flex; flex-direction:column; align-items:center; justify-content:center; padding:0 6px; }
.bs-survival__limit b{ font-size:25px; font-weight:400; }
.bs-survival__limit span{ font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); }
.bs-sa{ display:flex; flex-direction:column; gap:6px; }
.bs-sa__row{ display:flex; align-items:center; gap:10px; font-size:15.5px; color:var(--muted); }
.bs-sa__row.on{ color:var(--ink); }

/* attributes */
.bs-attrs{ flex:1; display:flex; flex-direction:column; gap:9px; justify-content:center; }
/* status icons (fighting arts | disorders | impairments | injuries) above the attribute boxes */
.bs-marks{ min-height:34px; display:flex; align-items:center; }
.bs-marks .hero__injuries{ margin-top:0; gap:10px; }
.bs-marks .hero__injuries .mask-ic{ width:28px; height:28px; }
.bs-attrs__boxes, .bs-attrs__labels{ display:grid; grid-template-columns:repeat(6,1fr); gap:10px; }
.bs-attr__val{ width:100%; height:60px; border:1px solid var(--hair-2); border-radius:8px; text-align:center; font-size:31px; font-weight:300; outline:none; background:transparent; }
.bs-attr__lbl{ text-align:center; display:flex; flex-direction:column; }
.bs-attr__lbl b{ font-size:15.5px; font-weight:500; }
.bs-attr__lbl span{ font-size:12.5px; color:var(--muted); }

/* brain + armor */
.bs-row--armor{ align-items:flex-start; }
.bs-brain{ flex:none; }
.bs-vdiv{ align-self:stretch; width:1px; background:var(--hair); flex:none; margin:4px 6px; }
.bs-arm__val{ width:100%; height:52px; border:1px solid var(--hair-2); border-radius:8px; text-align:center; font-size:25px; font-weight:300; outline:none; background:transparent; }
/* Hit Location armor value sits inside a masked shield frame (Body Slots art) */
.bs-step--armor{ justify-content:center; gap:4px; }
.bs-shield{ position:relative; width:72px; height:78px; flex:none; }
.bs-shield::before{ content:""; position:absolute; inset:0; background-color:var(--ink);
  -webkit-mask:url("icons/slot_shield.png") no-repeat center / contain; mask:url("icons/slot_shield.png") no-repeat center / contain; }
.bs-shield .bs-arm__val{ position:absolute; inset:0; width:100%; height:100%; border:none; border-radius:0; padding:0 0 10px; font-size:30px; }
/* a disorder forbids armor at this location (Vestiphobia, Narcissistic…) -> purple shield frame */
.bs-arm--noarmor .bs-shield::before{ background-color:var(--madness); }
.bs-arm--noarmor .bs-arm__hd{ color:var(--madness); }
/* Insanity value sits inside a masked head silhouette (Body Slots art) */
.bs-shield--insanity{ width:74px; height:82px; }
.bs-shield--insanity::before{ -webkit-mask-image:url("icons/slot_insanity.png"); mask-image:url("icons/slot_insanity.png"); }
.bs-shield--insanity .bs-arm__val{ padding:0 0 2px; }
.bs-brain__note{ display:flex; flex-direction:column; }
.bs-brain__note b{ font-size:14px; font-weight:600; }
.bs-brain__note b.on{ color:var(--danger); }
.bs-brain__note span{ font-size:12.5px; color:var(--muted); }
.bs-armors{ flex:1; display:grid; grid-template-columns:repeat(5,1fr); gap:13px; align-content:center; }
.bs-arm{ display:flex; flex-direction:column; gap:7px; align-items:center; }
.bs-arm__hd{ font-size:15px; font-weight:500; }
.bs-arm__box{ width:100%; }
.bs-arm__lh{ display:flex; gap:13px; }
.bs-lh{ display:flex; align-items:center; gap:6px; font-size:13.5px; cursor:pointer; }
.bs-armors__note{ grid-column:1/-1; text-align:right; font-size:12.5px; color:var(--muted); }

/* impairments */
.bs-imp{ display:flex; flex-wrap:wrap; gap:11px 20px; }

/* severe injuries */
.bs-sevreg{ display:flex; gap:12px; padding:10px 0; border-top:1px solid var(--hair); align-items:center; }
.bs-sevreg:first-of-type{ border-top:none; padding-top:3px; }
.bs-sevreg__icon{ font-size:20px; width:26px; text-align:center; flex:none; color:var(--ink); }
.bs-sevreg__icon .mask-ic{ width:24px; height:24px; }
.bs-sevreg__body{ flex:1; display:flex; flex-direction:column; gap:6px; }
.bs-sevinj{ display:flex; align-items:center; justify-content:space-between; gap:9px; font-size:14.5px; }
.bs-sevinj.filled .nm{ font-weight:500; }
.bs-sevinj .pips{ display:flex; gap:5px; }
.bs-sev .pip{ width:19px; height:19px; }

/* notes */
.bs-notes{ display:flex; flex-direction:column; }
.bs-notes__area{ flex:1; min-height:190px; width:100%; border:none; outline:none; resize:none; background:transparent;
  font-size:15px; line-height:2.2; color:var(--ink);
  background-image:repeating-linear-gradient(transparent 0 calc(2.2em - 1px), var(--hair) calc(2.2em - 1px) 2.2em);
  background-position:0 0.4em; }

/* ============================================================ PRINT */
@page{ size:11in 8.5in; margin:0; }
@media print{
  .roster,.toast,#ftModal,#ftMenu{ display:none !important; }
  .app{ display:block; }
  .main{ max-width:none; }
  .scroll{ padding:12mm; }
  .card,.loc,.sev-region{ break-inside:avoid; page-break-inside:avoid; }
  .reveal{ opacity:1 !important; transform:none !important; animation:none !important; }

  /* Battle-sheet print: when the battle modal is open, print only the SVG sheet. */
  body:has(#shModal.open) .app,
  body:has(#shModal.open) #ftModal,
  body:has(#shModal.open) .toast{ display:none !important; }
  body:has(#shModal.open) #shModal{ position:static !important; display:block !important; background:#fff !important; }
  #shModal .sh-bar{ display:none !important; }
  body:has(#shModal.open) .sh-stage{ display:block !important; overflow:visible !important; padding:0 !important; align-items:flex-start !important; }
  body:has(#shModal.open) #shSheet{ transform:scale(0.63) !important; transform-origin:top left !important; margin:0 !important; box-shadow:none !important; }
  .bs .bs-cb.on, .bs .pip.on, .bs-marks .mask-ic{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}

/* ============================================================ BATTLE PARTY (Отряд) */
/* sidebar: «⚔ Собрать отряд» / «⚔ В бою · n / 4» + «Закончить охоту» */
.roster__party{ display:flex; gap:8px; margin:8px 0 0; }
.roster__party:empty{ display:none; }
.party-btn{ flex:1; min-width:0; font-family:inherit; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:500;
  color:#ece3d2; background:#1f1d1b; border:1px solid #1f1d1b; border-radius:9px; padding:11px 10px; cursor:pointer;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:background .2s var(--ease); }
.party-btn:hover{ background:#33312e; }
.party-end{ flex:1; min-width:0; font-family:inherit; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:500;
  color:var(--ink-soft); background:#fff; border:1px solid var(--hair-2); border-radius:9px; padding:11px 8px; cursor:pointer;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:all .2s var(--ease); }
.party-end:hover{ color:#fff; background:var(--ink); border-color:var(--ink); }

/* party picker */
.pt-box{ max-height:86vh; }
.pt-head-r{ display:flex; align-items:center; gap:10px; }
.pt-head-r b{ font-size:15px; font-weight:500; color:var(--ink); font-variant-numeric:tabular-nums; }
.pt-sync{ width:7px; height:7px; border-radius:50%; background:var(--art); display:inline-block; }
.pt-sync.off{ background:var(--muted); }
.pt-bar{ display:grid; grid-template-columns:repeat(4,1fr); gap:4px; margin:-8px 0 10px; }
.pt-bar span{ height:3px; border-radius:2px; background:var(--hair); transition:background .2s var(--ease); }
.pt-bar span.on{ background:var(--ink); }
.pt-hint{ margin:0 0 12px; font-size:12.5px; font-weight:300; line-height:1.4; color:var(--muted); }
.pt-hint.warn{ color:var(--danger); }
.pt-list{ overflow-y:auto; min-height:0; border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); padding:4px 0; }
.pt-row{ display:flex; align-items:center; gap:12px; width:100%; text-align:left; cursor:pointer; font-family:inherit;
  background:none; border:none; padding:10px 6px; border-radius:8px; transition:background .15s var(--ease); }
.pt-row:hover:not(:disabled){ background:var(--bg-soft); }
.pt-row.locked{ opacity:.38; cursor:default; }
.pt-row.waiting{ background:#f7eceb; opacity:1; }
.pt-num{ flex:none; width:22px; height:22px; border-radius:6px; border:1.5px solid var(--hair-2); display:grid; place-items:center;
  font-size:12px; font-weight:600; color:#fff; transition:all .2s var(--ease); }
.pt-row.on .pt-num{ background:var(--ink); border-color:var(--ink); }
.pt-name{ flex:1; min-width:0; font-size:15px; font-weight:300; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pt-row.on .pt-name{ font-weight:500; }
.pt-name.dead{ color:var(--muted); text-decoration:line-through; }
.pt-row .chip-weapon .wicon{ width:17px; height:17px; display:block; }
.pt-skip{ color:var(--danger); display:inline-flex; }
.pt-foot{ display:flex; gap:10px; margin-top:14px; }
.pt-foot .btn{ flex:1; }
.pt-foot .btn:disabled{ opacity:.4; cursor:default; }

/* battle: party position in the title + dots under the sheet */
.sh-name__n{ margin-left:10px; color:#b8ac98; opacity:.6; letter-spacing:.04em; }
.sh-dots{ display:flex; align-items:center; justify-content:center; gap:10px; min-height:44px; background:#1f1d1b; }
.sh-dots:empty{ display:none; }
.sh-dot{ width:8px; height:8px; padding:0; border:none; border-radius:4px; cursor:pointer; background:rgba(236,227,210,.3);
  transition:width .26s var(--ease-out), background .2s; }
.sh-dot.on{ width:22px; background:#ece3d2; }
.sh-dot.dead{ background:rgba(178,59,50,.55); }
.sh-dot.dead.on{ background:var(--danger); }
.sh-dots__arr{ font-family:inherit; font-size:22px; line-height:1; color:#ece3d2; background:none; border:none; cursor:pointer; padding:4px 12px; }
.sh-dots__arr:disabled{ opacity:.25; cursor:default; }
@keyframes bsInR{ from{ opacity:0; translate:26px 0; } to{ opacity:1; translate:0 0; } }
@keyframes bsInL{ from{ opacity:0; translate:-26px 0; } to{ opacity:1; translate:0 0; } }
#shSheet.bs-in-r{ animation:bsInR .28s var(--ease-out); }
#shSheet.bs-in-l{ animation:bsInL .28s var(--ease-out); }
@media print{ .sh-dots{ display:none !important; } }

/* survivor sheet: the settlement's Survival Limit under the Survival dial */
.surv-limit{ font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:500; margin-top:-4px; }
.surv-limit.over{ color:var(--danger); }

/* body doll — Permanent Severe Injuries card of the battle sheet (canvas, drawn by drawDoll) */
.bs-doll { display: block; height: 190px; width: auto; margin: 4px auto 14px; }

/* ---------------- medals: gold rhombus with a dark icon (firsts carry a pip on top) ---------------- */
.medal { --s: 30px; position: relative; display: inline-block; width: var(--s); height: var(--s); flex: none; vertical-align: middle; }
.medal__d { position: absolute; inset: 14.6%; transform: rotate(45deg); border-radius: 2px;
  background: linear-gradient(135deg, #f6e2a4 0%, #d9b45a 38%, #a97c28 70%, #e7c877 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.55), inset 0 0 0 calc(var(--s) * .06) rgba(120,84,20,.35), 0 2px 6px rgba(120,84,20,.25); overflow: hidden; }
.medal__d::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.6) 50%, transparent 65%);
  background-size: 250% 100%; background-position: 120% 0; opacity: 0; }
.medal:hover .medal__d::after, .medal--new .medal__d::after { opacity: 1; animation: medalShine 1.1s ease; }
.medal__i { position: absolute; inset: 27%; background: #3a2a0e; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.medal--first::before { content: ""; position: absolute; left: 50%; top: 0; width: 13%; height: 13%; margin-left: -6.5%; background: #c9a23f;
  transform: rotate(45deg); z-index: 2; box-shadow: 0 0 0 1.5px var(--paper, #fff); }
.medal--new { animation: medalAward .9s cubic-bezier(.2,1.5,.35,1); }
.medal--xs { --s: 17px; }
.medal--xs .medal__d { box-shadow: inset 0 0 0 1px rgba(255,255,255,.5); }
.medal--xs::before { display: none; }
@keyframes medalShine { from { background-position: 120% 0 } to { background-position: -60% 0 } }
@keyframes medalAward { 0% { transform: scale(.2) rotate(-90deg); opacity: 0 } 100% { transform: none; opacity: 1 } }
.medal-row { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 6px; min-height: 0; }
.medal-row:empty { display: none; }
.medal-row .medal { --s: 34px; }
.medal-row--bs { display: inline-flex; margin: 0 0 0 10px; vertical-align: middle; }
.medal-row--bs .medal { --s: 28px; }
.chip-medals { display: inline-flex; align-items: center; gap: 0; margin-left: 4px; flex: none; }
.chip-medals__more { font-size: 9.5px; color: var(--muted, #9b9aa0); margin-left: 2px; }

/* ---------------- life line: full-screen dark stage, a lantern walks the years ---------------- */
.ll { --ll-bg: #12100e; --ll-ink: #ece3d2; --ll-dim: #8f8575; --ll-faint: #4a443c;
  --ll-fa: #6fbf8a; --ll-dis: #b18ad8; --ll-ab: #7ea3e0; --ll-inj: #dc6f63; --ll-hunt: #e2b863; --ll-family: #efe4cf; --ll-origin: #e2b863;
  --ll-death: #c9453a; --ll-kill: #c9453a; --ll-event: #b8ac98; --ll-growth: #e2b863; --ll-medal: #e2b863;
  position: fixed; inset: 0; z-index: 400; background: var(--ll-bg); color: var(--ll-ink); font-family: Jost, system-ui, sans-serif;
  opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility 0s .45s; overflow: hidden; }
.ll.open { opacity: 1; visibility: visible; transition: opacity .45s ease; }
body.ll-open { overflow: hidden; }
.ll::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 5; background: radial-gradient(ellipse at 50% 55%, transparent 35%, rgba(0,0,0,.72) 100%); }
.ll::after { content: ""; position: absolute; inset: -50%; pointer-events: none; z-index: 6; opacity: .07; animation: llGrain 1.2s steps(6) infinite;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
@keyframes llGrain { 0% { transform: translate(0,0) } 20% { transform: translate(-3%,2%) } 40% { transform: translate(2%,-3%) } 60% { transform: translate(-2%,-1%) } 80% { transform: translate(3%,3%) } }
.ll__top { position: relative; z-index: 7; padding: 28px 40px 0; display: flex; align-items: flex-end; gap: 22px; flex-wrap: wrap; }
.ll__kicker { font-size: 11px; letter-spacing: .32em; text-transform: uppercase; color: var(--ll-dim); font-weight: 500; }
.ll__name { font-weight: 300; font-size: 48px; letter-spacing: .02em; line-height: 1.05; margin-top: 8px; opacity: 0; transform: translateY(8px); transition: opacity .9s ease, transform .9s ease; }
.ll__sub { font-size: 14px; color: var(--ll-dim); margin-top: 6px; letter-spacing: .04em; opacity: 0; transition: opacity .9s .25s ease; }
.ll__top.shown .ll__name { opacity: 1; transform: none; } .ll__top.shown .ll__sub { opacity: 1; }
.ll__medals { display: flex; gap: 2px; margin-bottom: 4px; } .ll__medals .medal { --s: 40px; } .ll__medals .medal--first::before { box-shadow: 0 0 0 1.5px var(--ll-bg); }
.ll__btn { background: transparent; border: 1px solid var(--ll-faint); color: var(--ll-dim); font: 500 11px Jost, sans-serif; letter-spacing: .14em; text-transform: uppercase;
  padding: 9px 13px; border-radius: 8px; cursor: pointer; transition: color .2s, border-color .2s; }
.ll__btn:hover { color: var(--ll-ink); border-color: var(--ll-dim); }
.ll__top .ll__btn { margin-left: auto; align-self: flex-start; }
.ll__stage { position: absolute; left: 0; right: 0; top: 150px; bottom: 60px; overflow-x: auto; overflow-y: hidden; z-index: 3; scrollbar-width: none; }
.ll__stage::-webkit-scrollbar { display: none; }
.ll__track { position: relative; height: 100%; }
.ll__line { position: absolute; left: 0; top: 0; overflow: visible; }
.ll__glow { position: absolute; width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,170,80,.20) 0%, rgba(255,140,50,.07) 32%, transparent 62%); transition: opacity 1.2s; }
.ll__lantern { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; z-index: 4; pointer-events: none; background: #fff3d6;
  box-shadow: 0 0 10px 3px #ffc46b, 0 0 34px 10px rgba(255,150,60,.55), 0 0 80px 30px rgba(255,120,40,.18); animation: llFlick 2.3s infinite; }
@keyframes llFlick { 0%,100% { transform: scale(1); opacity: 1 } 37% { transform: scale(.92); opacity: .9 } 52% { transform: scale(1.06) } 71% { transform: scale(.97); opacity: .95 } }
.ll__lantern.out { animation: none; transition: all 1.6s ease; transform: scale(.2); opacity: 0; }
.ll__lantern.rest { animation: llBreathe 2.6s ease-in-out infinite; }
@keyframes llBreathe { 0%,100% { transform: scale(1) } 50% { transform: scale(1.25) } }
.ll__year { position: absolute; transform: translateX(-50%); font-size: 11px; letter-spacing: .2em; color: var(--ll-faint); transition: color .6s, text-shadow .6s; white-space: nowrap; z-index: 2; }
.ll__year b { display: block; font-weight: 400; font-size: 20px; letter-spacing: 0; text-align: center; }
.ll__year.lit { color: var(--ll-dim); } .ll__year.lit b { color: var(--ll-ink); text-shadow: 0 0 16px rgba(255,180,90,.35); }
.ll__tick { position: absolute; width: 1px; height: 10px; margin-left: -.5px; background: var(--ll-faint); transition: background .6s, height .6s; z-index: 2; }
.ll__tick.lit { background: #e2b863; height: 14px; }
.ll__ev { position: absolute; width: 0; height: 0; z-index: 3; }
.ll__stem { position: absolute; left: -.5px; width: 1px; background: linear-gradient(var(--c), transparent); transform-origin: top; transform: scaleY(0); transition: transform .5s cubic-bezier(.2,.8,.2,1); opacity: .55; }
.ll__ev--up .ll__stem { background: linear-gradient(transparent, var(--c)); transform-origin: bottom; }
.ll__ev.on .ll__stem { transform: scaleY(1); }
.ll__gem { position: absolute; width: 46px; height: 46px; margin: -23px 0 0 -23px; cursor: pointer; opacity: 0; transform: scale(.3) rotate(-45deg);
  transition: opacity .35s ease, transform .7s cubic-bezier(.2,1.6,.35,1); }
.ll__ev.on .ll__gem { opacity: 1; transform: scale(1) rotate(0deg); }
.ll__dia { position: absolute; inset: 6px; transform: rotate(45deg); border: 1.5px solid var(--c); background: linear-gradient(145deg, #2a2521, #15120f); box-shadow: 0 0 0 3px rgba(0,0,0,.35), 0 0 18px -4px var(--c); }
.ll__ic { position: absolute; inset: 11px; background: var(--c); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.ll__gem--medal .ll__dia { border: 0; background: linear-gradient(135deg, #f6e2a4 0%, #d9b45a 38%, #a97c28 70%, #e7c877 100%); box-shadow: 0 0 0 3px rgba(0,0,0,.35), 0 0 22px -2px rgba(226,184,99,.8); }
.ll__gem--medal .ll__ic { background: #3a2a0e; }
.ll__gem::after { content: ""; position: absolute; inset: -14px; border-radius: 50%; border: 1.5px solid var(--c); opacity: 0; transform: scale(.4); }
.ll__ev.on .ll__gem::after { animation: llRing .9s ease-out .15s; }
@keyframes llRing { 0% { opacity: .8; transform: scale(.4) } 100% { opacity: 0; transform: scale(1.5) } }
.ll__gem:hover .ll__dia { box-shadow: 0 0 0 3px rgba(0,0,0,.35), 0 0 28px 0 var(--c); }
.ll__ev--big .ll__gem { width: 64px; height: 64px; margin: -32px 0 0 -32px; } .ll__ev--big .ll__ic { inset: 16px; }
.ll__cap { position: absolute; left: 32px; top: -9px; white-space: nowrap; font-size: 12.5px; color: var(--ll-ink); opacity: 0; transform: translateX(-6px); transition: all .6s .25s ease;
  pointer-events: none; overflow: hidden; text-overflow: ellipsis; }
.ll__cap i { display: block; font-style: normal; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--c); opacity: .85; margin-bottom: 1px; }
.ll__ev.on .ll__cap { opacity: .92; transform: none; }
.ll__ev--big .ll__cap { left: 44px; top: -12px; font-size: 15px; }
.ll__epitaph { position: absolute; z-index: 3; font-style: italic; font-weight: 300; font-size: 14px; line-height: 1.45; color: var(--ll-dim); width: 280px; opacity: 0; transition: opacity 1.4s .6s; }
.ll__epitaph.on { opacity: 1; }
.ll__tip { position: fixed; z-index: 9; max-width: 320px; background: rgba(24,21,18,.96); border: 1px solid #3a342d; border-radius: 12px; padding: 12px 14px; font-size: 13.5px; line-height: 1.45;
  box-shadow: 0 18px 40px rgba(0,0,0,.5); pointer-events: none; opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s; }
.ll__tip.show { opacity: 1; transform: none; }
.ll__tipy { font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--ll-dim); margin-bottom: 4px; }
.ll__ctl { position: absolute; left: 40px; bottom: 16px; z-index: 7; display: flex; gap: 8px; }
@media (max-width: 700px) { .ll__top { padding: 18px 16px 0; } .ll__name { font-size: 32px; } .ll__stage { top: 170px; } .ll__ctl { left: 16px; } .ll__medals .medal { --s: 32px; } }