/* Лист рисуется в пунктах PDF: 1px = 1pt, а под ширину окна его подгоняет
   transform: scale() у .paper (sheet.js). Так позиции и размеры совпадают с
   шаблоном, а PDF берёт слова ровно с тех мест, где их показал браузер. */
@font-face {
  font-family: "Nodesto Cyrillic";
  src: url("fonts/nodesto-cyrillic.ttf") format("truetype");
  font-display: block;
}
:root {
  --ink: #531619;
  --ui-bg: #f4ede1;
  --ui-fg: #2b2220;
  --ui-muted: #6d5f57;
  --ui-line: #d8c9b4;
  --ui-btn: #fffaf2;
  --ui-accent: #8b2a2e;
  --warn: #c0392b;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ui-bg: #1d1918; --ui-fg: #eee4d8; --ui-muted: #b5a698; --ui-line: #3d3431; --ui-btn: #2a2422; --ui-accent: #d0656a;
  }
}
:root[data-theme="dark"] {
  --ui-bg: #1d1918; --ui-fg: #eee4d8; --ui-muted: #b5a698; --ui-line: #3d3431; --ui-btn: #2a2422; --ui-accent: #d0656a;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--ui-bg); color: var(--ui-fg); font: 15px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color: var(--ui-accent); }

.bar { position: sticky; top: 0; z-index: 10; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  padding: 10px 16px; background: var(--ui-bg); border-bottom: 1px solid var(--ui-line); }
.bar h1 { margin: 0; font: 22px/1 "Nodesto Cyrillic", serif; color: var(--ui-accent); }
.bar .home { font-size: 13px; color: var(--ui-muted); text-decoration: none; }
.actions { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.btn { display: inline-flex; align-items: center; padding: 6px 12px; border: 1px solid var(--ui-line); border-radius: 6px;
  background: var(--ui-btn); color: var(--ui-fg); font: inherit; font-size: 14px; cursor: pointer; }
.btn:hover { border-color: var(--ui-accent); }
.btn.primary { background: var(--ui-accent); border-color: var(--ui-accent); color: #fff; }
.btn.ghost { background: transparent; }
.btn[disabled] { opacity: .6; cursor: progress; }
.hint, .foot { max-width: 1100px; margin: 10px auto; padding: 0 16px; color: var(--ui-muted); font-size: 13px; }

#sheet { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 0 16px 24px; }
.page { position: relative; width: 100%; max-width: 1280px; overflow: hidden; box-shadow: 0 2px 14px rgba(0,0,0,.25); }
.paper { --k: 1; --ka: 1; --ki: 1; position: absolute; left: 0; top: 0; width: calc(var(--w) * 1px); height: calc(var(--h) * 1px);
  transform-origin: 0 0; overflow: hidden; background: #fbf6ee; }
.paper .bg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; user-select: none; }

/* поля */
.f { position: absolute; font-family: "Nodesto Cyrillic", serif; color: var(--ink); white-space: pre-wrap;
  overflow-wrap: break-word; outline: none; line-height: 1.17; cursor: text; min-width: 6px; }
.f:hover { background: rgba(83, 22, 25, .06); }
.f:focus { background: rgba(83, 22, 25, .09); }
.f:empty::before { content: attr(data-ph); color: rgba(83, 22, 25, .38); pointer-events: none; }
.list .f { position: static; }
.shadow { color: #fff; text-shadow: 1px 2px 0 #221f1f; }
.shadow:empty::before { color: rgba(255,255,255,.55); }

.story { left: 442px; top: 19px; width: 386px; height: 560px; font-size: 23px; line-height: 27.6px; color: #531619; }
.title { left: 126px; top: 6px; width: 600px; font-size: 29.4px; text-align: center; color: #531719; white-space: nowrap; }
.stat { top: 56px; width: 76px; margin-left: -38px; left: calc(var(--cx) * 1px); font-size: 36.6px; text-align: center; white-space: nowrap; }
.big { top: 59px; width: 76px; margin-left: -38px; left: calc(var(--cx) * 1px); font-size: 43.8px; text-align: center; white-space: nowrap; }
/* место внутри щита и сердца: шире — кегль меньше (sheet.js fitNumbers), «19/22» не вылезает за щит */
.big[data-key="ac"] { width: 60px; margin-left: -30px; }
.big[data-key="hp"] { width: 72px; margin-left: -36px; }
.weapons { left: 668px; top: 128px; width: 178px; height: 46px; font-size: 16px; line-height: 19px; color: #531719; }
.skills { left: 668px; top: 179px; width: 178px; height: 46px; font-size: 16px; line-height: 19px; color: #531719; }

.list { position: absolute; }
/* способности: рядом с плашкой вещей — колонка 436, ниже неё — до правого края плашки
   (как в листах шоу); какие записи узкие, решает sheet.js (layout) */
.abilities { left: 64px; top: 223px; width: 748px; }
.abilities > .entry.narrow { width: 436px; }
.pool .poolbar.narrow { width: 444px; }
.pool .poolrule.narrow { width: 436px; }
/* серая плашка вещей (в шаблоне её нет): высота — по списку, не ниже исходной */
.itembox { position: absolute; left: 531.88px; top: 231.31px; width: 280.41px; height: 355.1px;
  border-radius: 9.37px; background: rgba(0, 0, 0, 0.16); pointer-events: none; }
.items { left: 545px; top: 254px; width: 270px; }
.entry { position: relative; }
.ability { padding-bottom: 3.2px; }
.ability .bullet { position: absolute; left: -21px; top: 2px; width: 15px; height: 15px; pointer-events: none; }
.ability .name { font-size: calc(13px * var(--ka)); line-height: calc(15px * var(--ka)); }
.ability .desc { font-size: calc(10px * var(--ka)); line-height: calc(12px * var(--ka)); }
/* блок заклинателя: плашка запаса, правило, заклинания в две колонки (как в листах шоу) */
.pool { padding: 2px 0 4px; }
.pool .poolbar { background: rgba(120, 110, 105, 0.22); border-radius: 6px; padding: 2px 8px; margin-left: -8px; }
.pool .pooltext { font-size: calc(11px * var(--ka)); line-height: calc(13px * var(--ka)); }
.pool .poolrule { font-size: calc(10px * var(--ka)); line-height: calc(12px * var(--ka)); margin-top: 2px; }
.pool .poolrule:empty:not(:focus) { display: block; height: 0; overflow: hidden; }
.pool:hover .poolrule:empty, .pool:focus-within .poolrule:empty { height: auto; }
.spells { display: flex; flex-wrap: wrap; align-items: flex-start; margin-top: 4px; }
/* ширину заклинаний по рядам ставит sheet.js: ряд рядом с плашкой вещей — узкий, ниже — широкий */
.spells > .entry { width: 203px; margin-right: 30px; }
.spells > .add { flex-basis: 100%; max-width: max-content; }
.pool > .tools { top: 2px; right: -2px; }
/* кнопки «+ способность», «+ запас магии», «+ вещь» — у заголовков, всегда на листе */
.adders { position: absolute; display: flex; gap: 6px; }
.adders .add { margin-top: 0; }
.ab-adders { left: 190px; top: 196px; }
.it-adders { left: 592px; top: 234px; }
.item { padding-bottom: calc(1.5px * var(--ki)); }
.item .line { font-size: calc(13px * var(--ki)); line-height: calc(15.5px * var(--ki)); }
.item .dot { font-family: "Nodesto Cyrillic", serif; color: var(--ink); }
.item .name { font-size: calc(13px * var(--ki)); }
.item .note { font-size: calc(10px * var(--ki)); margin-left: 3px; }
.item .desc { font-size: calc(10px * var(--ki)); line-height: calc(11.5px * var(--ki)); padding-left: 3px; }
.item .desc:empty:not(:focus) { display: block; height: 0; overflow: hidden; }
.entry:hover .desc:empty, .entry:focus-within .desc:empty { height: auto; }

/* служебное — на экране, не в PDF */
.tools { position: absolute; right: -2px; top: 0; display: none; gap: 2px; }
.entry:hover .tools, .entry:focus-within .tools { display: flex; }
.tools button, .add { font: 11px/1 system-ui, sans-serif; border: 1px solid #b89c8a; background: #fffaf2; color: #531619;
  border-radius: 4px; padding: 2px 5px; cursor: pointer; }
.add { margin-top: 4px; opacity: .55; }
.add:hover { opacity: 1; }
.list.over { outline: 2px dashed var(--warn); outline-offset: 2px; }
.story.over { outline: 2px dashed var(--warn); outline-offset: 2px; }
.story.over::after { content: "не помещается даже кеглем 18 — сократите историю"; position: absolute; left: 0; bottom: -16px; font: 11px system-ui, sans-serif; color: var(--warn); }
.list.over::after { content: "не помещается на лист"; position: absolute; right: 0; bottom: -16px; font: 11px system-ui, sans-serif; color: var(--warn); }

.portrait { position: absolute; left: 0; top: 0; width: 423px; height: 100%; overflow: hidden; cursor: grab; touch-action: none; }
.portrait img { position: absolute; left: 0; top: 0; transform-origin: 0 0; user-select: none; -webkit-user-drag: none; }
.portrait img:not([src]) { display: none; }
.portrait .ph { position: absolute; inset: 40% 40px auto; text-align: center; font: 16px/1.3 system-ui, sans-serif; color: #8a7a6c; }
.portrait.has .ph { display: none; }
.exporting .tools, .exporting .add, .exporting .f:empty::before { display: none !important; content: none !important; }
.exporting .f { background: none !important; }

/* карточка спутника (sputnik.html): одна страница, вторая колонка справа, плашки-пояснения */
.plaque { position: absolute; pointer-events: none; }
.plaque.empty { opacity: .3; }
.sputnik .abilities.half { width: 360px; }
.sputnik .side { left: 452px; width: 360px; }
.side-adders { left: 452px; top: 196px; }
.note { padding: 2px 0 6px; }
.note .poolbar { background: rgba(120, 110, 105, 0.22); border-radius: 6px; padding: 3px 10px; margin-left: -8px; }
.note .pooltext { font-size: 11px; line-height: 13px; }
.note > .tools { top: 2px; right: -2px; }

/* карточка добровольца (dobrovolec.html): А5 стоя; история, инвентарь и способности — одним
   столбцом по центру сверху вниз, как в карточках шоу */
.dobrovolec .title { left: 10px; top: 14px; width: 400px; font-size: 30px; }
.dobrovolec .sub { left: 110px; top: 49px; width: 200px; font-size: 9px; text-align: center; color: #531719; white-space: nowrap; }
.dobrovolec .big { top: 72px; width: 38px; margin-left: -19px; font-size: 30px; }
.dobrovolec .stat { top: 129px; width: 44px; margin-left: -22px; font-size: 27px; }
.flow { --k: 1; position: absolute; left: 14px; top: 218px; width: 392px; display: flex; flex-direction: column; align-items: center; }
.flow.over { outline: 2px dashed var(--warn); outline-offset: 2px; }
.flow.over::after { content: "не помещается на карточку"; position: absolute; right: 0; bottom: -16px; font: 11px system-ui, sans-serif; color: var(--warn); }
.dobrovolec .flow .f { position: static; }
.tale { width: 380px; font-size: calc(18.5px * var(--k)); line-height: calc(21px * var(--k)); text-align: center; color: #531619; }
.banner { position: relative; width: 98px; height: 30px; margin: 8px 0 5px; }
.banner .plaque { position: absolute; inset: 0; width: 100%; height: 100%; }
.banner .banner-t { position: absolute !important; left: 0; right: 0; top: 6px; font-size: calc(16px * var(--k)); line-height: calc(18px * var(--k)); text-align: center; color: #531619; cursor: default; }
.banner .banner-t:hover { background: none; }
.dobrovolec .items { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 22px; width: 392px; left: auto; top: auto; }
.dobrovolec .item { display: grid; grid-template-columns: 14px auto; column-gap: 4px; align-items: start; max-width: 190px; }
.dobrovolec .item .bullet { width: 11px; height: 11px; margin-top: 2px; grid-row: span 2; }
.dobrovolec .item .name { font-size: calc(14px * var(--k)); line-height: calc(15px * var(--k)); }
.dobrovolec .item .note { font-size: calc(12px * var(--k)); line-height: calc(13px * var(--k)); margin: 0; }
.dobrovolec .item .note:empty:not(:focus) { display: block; height: 0; overflow: hidden; }
.dobrovolec .item:hover .note:empty, .dobrovolec .item:focus-within .note:empty { height: auto; }
.box { width: 362px; padding: 7px 10px; border-radius: 8px; background: rgba(120, 110, 105, 0.22); }
.dobrovolec .abilities { position: relative; left: auto; top: auto; width: auto; }
.dobrovolec .ability { text-align: center; padding-bottom: 2px; }
.dobrovolec .ability .name { font-size: calc(14px * var(--k)); line-height: calc(16px * var(--k)); }
.dobrovolec .ability .desc { font-size: calc(10.5px * var(--k)); line-height: calc(13px * var(--k)); }
.dobrovolec .adders { left: 8px; top: 4px; }
.dobrovolec .it-adders { left: auto; right: 8px; }

/* разумный артефакт (artefakt.html): название и что даёт — слева сверху, три характеристики справа,
   свойства и магия — в два столбца, внизу — необязательная строка под чертой */
.artefakt .title { left: 40px; top: 32px; width: 490px; font-size: 40px; }
.artefakt .sub { position: absolute; left: 60px; top: 82px; width: 450px; font-size: 17.8px; line-height: 21px; text-align: center; color: #531619; }
.artefakt .stat { top: 45px; }
.artefakt .abilities, .artefakt .abilities.half { left: 77px; top: 176px; width: 365px; }
.artefakt .side { left: 476px; width: 330px; }
.artefakt .side-adders { left: 476px; top: 150px; }
.artefakt .ab-adders { left: 77px; top: 150px; }
.artefakt .note .poolbar { margin: 0 0 0 -24px; padding: 6px 12px; }
.artefakt .side .note .poolbar { margin-left: -24px; }
.artefakt .note .pooltext { font-size: 10px; line-height: 12px; text-align: center; }
.head { padding: 2px 0 8px; margin-left: -6px; }
.head .banner { width: 184px; height: 40px; margin: 0; }
.head .banner-t { top: 9px; font-size: 20px; line-height: 22px; }
.head .banner-t:hover { background: rgba(83, 22, 25, .06); }
.head .banner-t { cursor: text; }
.rule { position: absolute; left: 14px; top: 512px; width: 825px; height: 1.2px; background: rgba(83, 22, 25, 1); border-radius: 0; }
.rule.empty { opacity: .2; }
.artefakt .footline { left: 40px; top: 528px; width: 380px; font-size: 33px; text-align: center; white-space: nowrap; color: #531619; }
.artefakt .footdesc { left: 437px; top: 524px; width: 380px; font-size: 17.8px; line-height: 21px; color: #531619; }
/* карточка добровольца: вещи узкие — кнопки ↑ ↓ × над вещью, а не поверх её названия */
.dobrovolec .item > .tools { top: -17px; right: auto; left: 14px; }
.dobrovolec .ability > .tools { top: -17px; right: 0; }
/* способности и вещи не влезли — их кегль меньше (sheet.js shrink): множители --ka и --ki до 0,8 */
.ability .bullet { width: calc(15px * var(--ka)); height: calc(15px * var(--ka)); }
.nofit { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 50; background: var(--warn); color: #fff; padding: 8px 14px; border-radius: 8px; font: 14px system-ui, sans-serif; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
@media print { .nofit { display: none; } }