:root {
  --bg: #14181a; --panel: #1d2326; --panel2: #232b2f; --line: #2f383c; --text: #ece5d3; --muted: #a8a191;
  --amber: #dba84a; --red: #e8776b; --redbar: #c9473c; --teal: #5fb3a4;
  --sans: 'Golos Text', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --serif: 'Alegreya', Georgia, 'Times New Roman', serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.5 var(--sans); }
a { color: var(--amber); text-decoration: none; }
h1, h2, h3 { font-family: var(--serif); margin: 0 0 .4em; }
h1 { font-size: 34px; } h2 { font-size: 24px; } h3 { font-size: 18px; }
.top { display: flex; justify-content: space-between; align-items: center; padding: 14px 32px; border-bottom: 1px solid var(--line); }
.brand { font: 700 24px var(--serif); color: var(--text); }
.top nav a { margin-left: 22px; }
#app { max-width: 1200px; margin: 0 auto; padding: 24px 32px 48px; }
.legal { max-width: 760px; } .legal h2 { margin-top: 22px; } .legal mark { background: #dba84a33; color: var(--amber); padding: 0 3px; border-radius: 3px; } .legal-t { border-collapse: collapse; width: 100%; font-size: 14px; } .legal-t td { border-top: 1px solid var(--line); padding: 7px 10px 7px 0; vertical-align: top; }
.foot { text-align: center; color: var(--muted); font-size: 12px; padding: 16px; border-top: 1px solid var(--line); }
.muted { color: var(--muted); } .small { font-size: 13px; } .red { color: var(--red); } .amber { color: var(--amber); }

.steps { display: flex; gap: 20px; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: 12px; margin-bottom: 22px; font-size: 14px; }
.steps button { background: none; border: 0; color: var(--muted); font: inherit; cursor: default; padding: 6px 0; }
.steps .done { color: var(--text); cursor: pointer; }
.steps .cur { color: var(--amber); font-weight: 600; border-bottom: 2px solid var(--amber); }
.layout { display: grid; grid-template-columns: 1fr 280px; gap: 32px; align-items: start; }
.panel { background: var(--panel); border-radius: 12px; padding: 16px; }
.preview { position: sticky; top: 16px; }
.preview .kv { display: flex; justify-content: space-between; padding: 3px 0; }
.preview .mods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; text-align: center; }
.preview .mods div { background: var(--panel2); border-radius: 8px; padding: 6px 0; }
.preview .mods b { display: block; font-size: 18px; } .preview .mods span { font-size: 11px; color: var(--muted); }

.btn { min-height: 44px; padding: 0 20px; border-radius: 8px; border: 1px solid #3a454a; background: var(--panel2); color: var(--text); font: 500 14px var(--sans); cursor: pointer; }
.btn:hover { border-color: var(--amber); }
.btn.amb { background: var(--amber); border-color: var(--amber); color: #14181a; }
.btn.danger { color: var(--red); }
.btn[disabled], .btn.off { opacity: .45; cursor: not-allowed; }
.nav { display: flex; justify-content: space-between; margin-top: 24px; align-items: center; gap: 16px; }
.warn { color: var(--red); font-size: 14px; }

.cols { display: grid; grid-template-columns: 260px 1fr; gap: 28px; }
.list { display: flex; flex-direction: column; gap: 4px; }
.item { display: flex; justify-content: space-between; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 8px; border: 1px solid transparent; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.item:hover { background: var(--panel); }
.item.on { background: var(--panel2); border-color: var(--amber); }
.item small { color: var(--muted); font-size: 12px; margin-left: 10px; }
.tiles { display: flex; gap: 12px; flex-wrap: wrap; margin: 16px 0; }
.tile { flex: 1; min-width: 150px; background: var(--panel); border-radius: 10px; padding: 10px 14px; }
.tile small { display: block; color: var(--muted); font-size: 12px; } .tile b { font-weight: 600; }
.label { font-weight: 600; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 18px 0 8px; }
table.lv { width: 100%; border-collapse: collapse; font-size: 14px; }
table.lv td { padding: 5px 8px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--muted); }
table.lv tr.on td { color: var(--text); }
table.lv td:first-child { width: 36px; font-weight: 600; }
.tag { display: inline-block; font-size: 11px; padding: 1px 8px; border-radius: 999px; background: var(--amber); color: #14181a; margin-left: 6px; }
.tag.alt { background: var(--panel2); color: var(--amber); border: 1px solid var(--amber); }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px; margin-bottom: 10px; }
.card.on { border-color: var(--amber); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid #3a454a; background: var(--panel2); color: var(--text); font: 14px var(--sans); cursor: pointer; }
.chip.on { background: var(--amber); border-color: var(--amber); color: #14181a; font-weight: 600; }
.chip[disabled] { opacity: .35; cursor: not-allowed; }
select, input[type=text], input[type=number] { min-height: 40px; background: var(--panel2); color: var(--text); border: 1px solid #3a454a; border-radius: 8px; padding: 0 10px; font: 14px var(--sans); }
input[type=text] { width: 100%; max-width: 380px; }
.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.abrow { display: grid; grid-template-columns: 150px 140px 90px 90px 1fr; gap: 12px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); }
.abrow.pri { background: rgba(219, 168, 74, .08); }
.lvrow { background: var(--panel); border-radius: 10px; padding: 10px 14px; margin-bottom: 8px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.lvrow > b { min-width: 80px; white-space: nowrap; }
@media (max-width: 640px) { .lvrow > b { flex-basis: 100%; } }

.sheet-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.abil { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 16px; }
.abil div { background: var(--panel); border-radius: 10px; text-align: center; padding: 10px 4px; }
.abil small { color: var(--muted); font-size: 12px; } .abil b { display: block; font-size: 26px; font-family: var(--serif); } .abil span { color: var(--muted); font-size: 13px; }
.stat { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid var(--line); }
.dot { color: var(--amber); width: 14px; display: inline-block; }
details { background: var(--panel2); border-radius: 8px; padding: 8px 12px; margin-bottom: 6px; }
details summary { cursor: pointer; font-weight: 500; }
details p { color: var(--muted); font-size: 14px; white-space: pre-wrap; margin: 8px 0 2px; }
.bar { height: 8px; background: var(--line); border-radius: 4px; }
.bar i { display: block; height: 8px; border-radius: 4px; background: var(--redbar); }
@media (max-width: 900px) {
  #app { padding: 16px; } .top { padding: 12px 16px; }
  .layout, .cols, .grid3 { grid-template-columns: 1fr; }
  .preview { position: static; } .abil { grid-template-columns: repeat(3, 1fr); }
  .abrow { grid-template-columns: 1fr 1fr; }
}

@media print {
  @page { size: A4; margin: 12mm; }
  body { background: #fff; color: #111; font-size: 11px; }
  .top, .foot, .no-print, #authbox { display: none !important; }
  #app { max-width: none; padding: 0; }
  .panel, .card, .tile, .abil div { background: #fff !important; border: 1px solid #bbb; color: #111; }
  h1, h2, h3, .abil b, .amber { color: #111 !important; }
  .muted, .small { color: #444 !important; }
  .stat { border-color: #ddd; }
  .panel, .card { break-inside: avoid; }
}

/* Поле боя: 18×20 см, карточки 5×7 см, интервал 1 см; враги сверху, игроки снизу */
.field-wrap { overflow: auto; margin: 12px 0; }
.field { width: 100%; min-width: 18cm; height: 20cm; box-sizing: border-box; padding: 0.45cm; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid var(--line); border-radius: 10px; background: var(--panel2); }
.field-top, .field-bottom { display: flex; flex-wrap: wrap; gap: 1cm; }
.field-top { align-content: flex-start; }
.field-bottom { align-content: flex-end; flex-wrap: wrap-reverse; flex-direction: row; }
.fcard { width: 5cm; height: 7cm; box-sizing: border-box; padding: 8px; overflow: hidden; display: flex; flex-direction: column; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); }
.fcard.foe { border-color: #a4543f; }
.fcard.pc { border-color: #4f8a6a; }
.fcard.cur { box-shadow: 0 0 0 2px var(--amber); }
@media print { .field-wrap { overflow: visible; } }

.fcard { cursor: pointer; }
.modal-back { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 40; display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal { width: min(720px, 100%); max-height: 90vh; overflow: auto; }

/* Карточка противника */
.fc-top { display: flex; justify-content: space-between; align-items: flex-start; }
.fc-icon { position: relative; width: 1.5cm; height: 1.5cm; display: inline-block; }
.fc-icon svg { width: 100%; height: 100%; display: block; }
.fc-icon svg path { fill: var(--panel2); stroke: #c9ccd1; stroke-width: 2; }
.fc-icon span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; padding-bottom: 2px; }
.fc-icon span.sm { font-size: 11px; }
.fcard.foe .fc-top > .fc-icon svg path { stroke: #8fb3d9; }
.fc-name { margin-top: 8px; text-align: left; }
.fcard.foe { position: relative; text-align: left; }
.fc-bottom { margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; }
.fc-speed { width: 1.1cm; height: 1.1cm; border: 2px solid #c9ccd1; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; }

/* Сердце хитов */
.fc-icon svg path.hshell { fill: #2a1c1f; stroke: none; }
.fc-icon svg .hfill { fill: #b23a3a; }
.fc-icon svg path.hline { fill: none; stroke: #d97878; stroke-width: 2; }
.fc-icon svg path.crack { fill: none; stroke: #f1e6d8; stroke-width: 1.8; stroke-linejoin: round; }
.fc-icon svg path.hshell { stroke: #d97878; stroke-width: 2; }

.fc-hp { font-weight: 700; font-size: 13px; margin-top: 2px; }

.fc-icon span.hn { text-shadow: 0 0 3px #000, 0 0 3px #000; padding-bottom: 3px; }

/* Отметки хода */
.eco-col { display: flex; flex-direction: column; gap: 4px; }
.eco { width: 0.55cm; height: 0.55cm; min-height: 0; padding: 0; border-radius: 50%; border: 2px solid; font: 700 11px var(--sans); color: #14181a; display: flex; align-items: center; justify-content: center; cursor: default; }
button.eco { cursor: pointer; }
.eco.g { background: #3fae5a; border-color: #3fae5a; }
.eco.o { background: #e08a2c; border-color: #e08a2c; }
.eco.b { background: #3b82d6; border-color: #3b82d6; }
.eco.off { background: transparent; }
.fc-bottom > div:nth-child(2) { flex: 1; text-align: center; }
#turnBanner { position: fixed; top: 16px; left: 0; right: 0; z-index: 60; display: flex; justify-content: center; pointer-events: none; padding: 0 12px; }
.turn-banner { pointer-events: auto; max-width: 460px; background: var(--panel); border: 2px solid var(--amber); border-radius: 12px; padding: 14px 16px; box-shadow: 0 8px 30px rgba(0,0,0,.5); display: flex; flex-direction: column; gap: 6px; }

/* Мини-карточка персонажа в стиле карточек с иллюстрацией */
.fcard.pcs { position: relative; padding: 0; border: 2px solid #1d2326; border-radius: 10px; background: radial-gradient(circle at 50% 40%, #2b3a3c, #12181a); background-size: 100% 100%; background-position: center; background-repeat: no-repeat; color: #f3ead2; }
.fcard.pcs.cur { box-shadow: 0 0 0 2px var(--amber), 0 0 14px rgba(224,160,48,.6); }
.sk-shield, .sk-heart { position: absolute; top: 0.25cm; }
.sk-shield { left: 0.2cm; width: 1.3cm; height: 1.5cm; }
.sk-heart { right: 0.2cm; width: 1.45cm; height: 1.45cm; }
.sk-shield svg, .sk-heart svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 2px 3px rgba(0,0,0,.7)); }
.sk-shield span, .sk-heart span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 800 18px var(--sans); color: #f6eed8; text-shadow: 0 1px 0 #000, 0 0 5px #000, 0 0 2px #000; padding-bottom: 2px; }
.sk-heart span.sm { font-size: 14px; }
.sk-heart em { position: absolute; left: 0; right: 0; bottom: -0.4cm; text-align: center; font: 700 11px var(--sans); font-style: normal; color: #cfe8ff; text-shadow: 0 1px 2px #000; }
.sk-title { position: absolute; top: 1.85cm; left: 0.25cm; right: 0.25cm; text-align: center; padding: 4px 6px; border-radius: 10px; background: rgba(6,12,14,.55); text-shadow: 0 1px 2px #000; display: flex; flex-direction: column; gap: 1px; }
.sk-title b { font: 800 16px/1.15 var(--sans); color: #f1e4be; }
.sk-title i { font: 600 11px/1.2 var(--sans); font-style: normal; color: #e6dcc0; }
.sk-title small { font: 500 9.5px/1.2 var(--sans); color: #c9c2ac; white-space: nowrap; }
.sk-conds { position: absolute; top: 3.5cm; left: 0.3cm; right: 0.3cm; display: flex; flex-wrap: wrap; gap: 3px; justify-content: center; }
.sk-speed { position: absolute; left: 0.25cm; bottom: 0.3cm; width: 1.2cm; height: 1.2cm; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 800 17px var(--sans); color: #f6eed8; text-shadow: 0 1px 0 #000, 0 0 4px #000; background: radial-gradient(circle at 35% 30%, #8a6a40, #4a3018 60%, #2b1a0c); border: 3px solid #25170b; box-shadow: 0 0 0 1.5px #a07f4e inset, 0 2px 5px rgba(0,0,0,.7); }
.sk-eco { position: absolute; right: 0.3cm; bottom: 1.45cm; }
.sk-eco .eco-col { align-items: center; }
.sk-atkwrap { position: absolute; right: 0.25cm; bottom: 0.3cm; }
.sk-atk { display: inline-flex; align-items: center; gap: 4px; height: 0.95cm; min-height: 0; padding: 0 12px; border-radius: 7px; border: 2px solid #5b4a30; background: linear-gradient(#e6dab7, #bba982); color: #2e2416; font: 800 14px var(--sans); box-shadow: inset 0 1px 0 #fff8, 0 2px 5px rgba(0,0,0,.7); cursor: pointer; }

/* ---------- Книга персонажа ---------- */
.book-back { align-items: flex-start; overflow: auto; background: rgba(0,0,0,.78); }
.book-wrap { width: min(96vw, 1180px); margin: 0 auto; position: relative; }
.book-close { position: absolute; right: 0; top: -2px; z-index: 3; }
.book-combat { margin-top: 10px; }
.book { position: relative; width: 100%; aspect-ratio: 1024 / 572; background-size: 100% 100%; background-repeat: no-repeat; container-type: inline-size; color: #3a2a14; font-family: Georgia, 'Times New Roman', serif; font-size: 1.18cqw; line-height: 1.25; border-radius: 6px; box-shadow: 0 10px 40px #000a; }
.book * { box-sizing: border-box; }
.bk-left, .bk-right { position: absolute; top: 9.5%; height: 79%; display: flex; }
.bk-left { left: 17%; width: 31.5%; flex-direction: column; gap: 2.2%; }
.bk-right { left: 52%; width: 33.5%; gap: 3%; }
.bk-top { display: flex; gap: 3%; height: 34%; }
.bk-avatar { width: 38%; height: 100%; background: linear-gradient(160deg, #3b5a3d88, #1b2a1fbb); border: .2cqw solid #3a2a14aa; border-radius: .6cqw; display: flex; align-items: center; justify-content: center; }
.bk-avatar span { font-size: 7cqw; color: #d9e7c0; text-shadow: 0 0 1.4cqw #7be08a; }
.bk-id { flex: 1; min-width: 0; text-align: center; display: flex; flex-direction: column; justify-content: center; gap: 1.5%; }
.bk-name { font-size: 2.3cqw; font-weight: 700; border-bottom: .15cqw solid #3a2a14; padding-bottom: .3cqw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-cls { font-size: 1.4cqw; border-bottom: .15cqw solid #3a2a14; padding-bottom: .3cqw; }
.bk-lvl { font-size: 1.5cqw; margin-top: 1cqw; }
.bk-xp { height: 1.3cqw; border: .15cqw solid #3a2a14; border-radius: .4cqw; background: #3a2a1422; overflow: hidden; }
.bk-xp i { display: block; height: 100%; background: linear-gradient(#6cbf63, #3b8a3f); }
.bk-xpn { font-size: 1.6cqw; font-style: italic; }
.bk-abil { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1%; }
.bk-tile { background: #3a2a1418; border: .15cqw solid #3a2a1488; border-radius: .5cqw; text-align: center; padding: .5cqw .1cqw; display: flex; flex-direction: column; align-items: center; }
.bk-tile span { font-size: .95cqw; }
.bk-tile b { font-size: 1.9cqw; }
.bk-tile em { font-size: 1.1cqw; }
.bk-low { display: grid; grid-template-columns: 1fr 1fr; gap: 3%; flex: 1; min-height: 0; }
.bk-box { background: #3a2a1410; border: .15cqw solid #3a2a1466; border-radius: .6cqw; padding: .8cqw; position: relative; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.bk-saves { display: grid; grid-template-columns: 1fr 1fr; gap: .5cqw 1cqw; align-content: start; }
.bk-save, .bk-skill { display: flex; align-items: center; gap: .4cqw; }
.bk-save span, .bk-skill span { flex: 1; }
.bk-save b, .bk-skill b { border: .15cqw solid #a12a2a; border-radius: 1cqw; padding: 0 .5cqw; min-width: 2.6cqw; text-align: center; font-size: 1.1cqw; }
.bk-save i, .bk-skill i { width: .9cqw; height: .9cqw; border-radius: 50%; border: .15cqw solid #3a2a14; flex: none; }
.bk-save i.on, .bk-skill i.on { background: #3a2a14; }
.bk-skill i.ex { background: #a12a2a; border-color: #a12a2a; }
.bk-skill small { opacity: .6; font-size: .9cqw; }
.bk-cap { margin-top: auto; text-align: center; font-weight: 700; font-size: 1.15cqw; padding-top: .4cqw; letter-spacing: .05cqw; }
.bk-cap.top { margin: 0 0 .4cqw; border-bottom: .12cqw solid #3a2a1466; padding: 0 0 .2cqw; }
.bk-mid { overflow: auto; }
.bk-prof { font-size: 1cqw; margin-bottom: .3cqw; }
.bk-muted { font-size: .95cqw; opacity: .65; margin: .2cqw 0; font-style: italic; }
.bk-feats { font-size: 1cqw; }
.bk-feat { cursor: pointer; margin-bottom: .2cqw; }
.bk-feat u { text-decoration: underline dotted; }
.bk-feat p { margin: .2cqw 0 .4cqw; font-size: .9cqw; opacity: .85; }
.bk-skills { flex: 1.1; display: flex; flex-direction: column; gap: .45cqw; background: #3a2a1410; border: .15cqw solid #3a2a1466; border-radius: .6cqw; padding: .8cqw; font-size: 1.05cqw; overflow: hidden; }
.bk-side { flex: 1; display: flex; flex-direction: column; gap: 2%; min-height: 0; min-width: 0; }
.bk-side .bk-box { flex: 1; overflow: auto; }
.bk-pips { letter-spacing: .1cqw; }
@media (max-width: 700px) { .book { font-size: 1.5cqw; } }
.bk-saves { font-size: .95cqw; gap: .5cqw .6cqw; }
.bk-saves .bk-save b { font-size: .95cqw; min-width: 2.1cqw; }
.bk-low { grid-template-columns: 0.9fr 1.1fr; }

/* ---------- Справочник «Правила простым языком» ---------- */
.lhero { display: block; background: linear-gradient(135deg, #2b2a1c, var(--panel)); border: 1px solid var(--amber); border-radius: 12px; padding: 18px 22px; margin: 6px 0 20px; color: var(--text); }
.lhero b { display: block; font: 700 24px var(--serif); color: var(--amber); margin-bottom: 4px; }
.lhero span { color: var(--muted); }
.lhero:hover { background: linear-gradient(135deg, #343320, var(--panel2)); }
.lgroup { margin-bottom: 10px; padding: 10px 14px; }
.lgroup > summary { font: 600 17px var(--serif); padding: 4px 0; }
.lgroup .chips { margin-top: 10px; }
.lchip { display: inline-flex; align-items: center; color: var(--text); }
.lchip:hover { border-color: var(--amber); }
.lres { display: flex; flex-direction: column; gap: 4px; margin-bottom: 18px; }
.lrow { display: grid; grid-template-columns: 110px 1fr; gap: 2px 12px; padding: 8px 12px; border-radius: 8px; background: var(--panel); color: var(--text); align-items: baseline; }
.lrow:hover { background: var(--panel2); }
.lrow .small { grid-column: 2; }
.ltype { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--amber); }
.lcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; margin: 20px 0; }
.lcard { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px 12px 58px; }
.lcard h3 { margin-bottom: 8px; }
.lnum { position: absolute; left: 14px; top: 14px; width: 32px; height: 32px; border-radius: 50%; background: var(--amber); color: #14181a; font: 700 17px var(--serif); display: grid; place-items: center; }
.lbody, .lcard { line-height: 1.55; }
.lbody p, .lcard p { margin: 0 0 10px; }
.lbody ul, .lcard ul { margin: 0 0 10px; padding-left: 20px; }
.lbody li, .lcard li { margin-bottom: 4px; }
.lbody { max-width: 820px; }
.tip { background: rgba(219, 168, 74, .1); border-left: 3px solid var(--amber); border-radius: 0 8px 8px 0; padding: 8px 12px; }
.params { color: var(--muted); font-size: 13px; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.lsrc { margin-top: 28px; font-size: 12px; color: var(--muted); max-width: 820px; }
@media (max-width: 640px) {
  .lcards { grid-template-columns: 1fr; }
  .lrow { grid-template-columns: 1fr; }
  .lrow .small { grid-column: 1; }
  .lcard { padding-left: 54px; }
}
/* Узкие экраны: шапка переносится, поля меньше */
@media (max-width: 640px) {
  .top { flex-wrap: wrap; gap: 6px 12px; padding: 10px 16px; }
  .top nav { display: flex; flex-wrap: wrap; gap: 2px 16px; width: 100%; order: 3; }
  .top nav a { margin-left: 0; }
  #app { padding: 16px 16px 40px; }
  h1 { font-size: 28px; }
}
/* ---------- Мастер создания: минималистичный режим ---------- */
body.wizmode .top, body.wizmode .foot { display: none; }
body.wizmode #app { max-width: none; padding: 0; }
body.wz-lock { overflow: hidden; }
.wz { min-height: 100vh; }
.wz-in { max-width: 760px; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.wz-top { position: sticky; top: 0; z-index: 30; background: var(--bg); border-bottom: 1px solid var(--line); }
.wz-top .wz-in { padding-top: 12px; padding-bottom: 12px; }
.wz-top h1 { font-size: 20px; margin: 0; }
.wz-top p { margin: 2px 0 0; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.wz-steps { display: flex; align-items: center; gap: 6px; font-size: 12px; flex-wrap: wrap; justify-content: center; }
.wz-steps button { background: none; border: 0; padding: 3px 0; color: var(--muted); font: inherit; cursor: default; }
.wz-steps .done { color: var(--text); cursor: pointer; }
.wz-steps .cur { color: var(--amber); font-weight: 600; border-bottom: 1px solid var(--amber); }
.wz-steps .sep { color: var(--line); }
.wz-links { display: flex; gap: 14px; font-size: 13px; white-space: nowrap; }
.wz-prog { height: 3px; background: var(--line); }
.wz-prog i { display: block; height: 3px; background: var(--amber); transition: width .25s; }
.wz-main { max-width: 760px; margin: 0 auto; padding: 24px 16px 150px; }
.wz-head h2 { font-size: 26px; margin-bottom: 6px; }
.wz-head p { margin: 0 0 16px; }
.wz-level { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.wz-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.wz-card { display: flex; flex-direction: column; text-align: left; min-height: 108px; padding: 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font: inherit; cursor: pointer; transition: border-color .15s, transform .15s; }
.wz-card:hover { border-color: #4a575c; }
.wz-card.on { border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber); }
.wz-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 14px; }
.wz-card-top b { font: 700 18px/1.15 var(--serif); }
.wz-title { display: flex; align-items: center; gap: 6px; min-width: 0; }
.wz-rec { color: var(--amber); font-size: 16px; line-height: 1; flex: none; }
.wz-badge { font: 600 12px ui-monospace, Consolas, monospace; color: var(--muted); background: var(--panel2); padding: 2px 7px; border-radius: 5px; white-space: nowrap; }
.wz-badge.big { font-size: 13px; color: var(--text); border: 1px solid var(--line); padding: 4px 9px; }
.wz-card-bot { margin-top: auto; border-top: 1px solid var(--line); padding-top: 9px; }
.wz-card-bot p { margin: 0 0 3px; }
.wz-star { font-size: 13px; font-weight: 500; }
.wz-dim { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.wz-dim span { color: var(--text); }

.wz-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--panel); border-top: 1px solid var(--line); box-shadow: 0 -6px 18px rgba(0,0,0,.35); }
.wz-bar .wz-in { padding-top: 12px; padding-bottom: 12px; }
.wz-sel { display: flex; flex-direction: column; min-width: 0; }
.wz-sel small { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.wz-sel b { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wz-sel .warn { font-size: 12px; min-height: 0; }
.wz-btns { display: flex; gap: 10px; flex-shrink: 0; }
.btn.wide { width: 100%; }

.wz-modal { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 16px; }
.wz-backdrop { position: absolute; inset: 0; background: rgba(5, 8, 9, .7); backdrop-filter: blur(3px); }
.wz-dialog { position: relative; z-index: 1; width: 100%; max-width: 540px; max-height: 90vh; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 24px 60px rgba(0,0,0,.6); overflow: hidden; }
.wz-x { position: absolute; top: 10px; right: 10px; z-index: 2; width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--panel2); color: var(--muted); cursor: pointer; font-size: 14px; }
.wz-x:hover { color: var(--text); }
.wz-dbody { padding: 22px 22px 8px; overflow-y: auto; }
.wz-dtitle { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-right: 36px; border-bottom: 1px solid var(--line); padding-bottom: 8px; margin-bottom: 12px; }
.wz-dtitle h2 { margin: 0; font-size: 26px; }
.wz-dfoot { padding: 14px 22px; border-top: 1px solid var(--line); background: var(--panel2); }
.wz-facts { background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; margin: 12px 0; font-size: 14px; }
.wz-facts p { margin: 0 0 5px; } .wz-facts p:last-child { margin: 0; }
.wz-sub-head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--line); margin: 18px 0 10px; padding-bottom: 6px; }
.wz-sub-head h3 { margin: 0; font: 700 13px var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.wz-tag { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--amber); background: rgba(219,168,74,.12); padding: 2px 8px; border-radius: 5px; font-style: normal; margin-left: 8px; }
.wz-sub-head .wz-tag { margin-left: 0; }
.wz-info { display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel2); padding: 10px 12px; margin-bottom: 8px; }
.wz-info span { font-size: 13px; color: var(--muted); }
.wz-det { margin-top: 8px; }
.wz-opt { display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: left; padding: 10px 12px; margin-bottom: 8px; border-radius: 8px; border: 1px solid var(--line); background: none; color: var(--text); font: inherit; cursor: pointer; }
.wz-opt i { flex: none; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; border: 1px solid #5a666b; }
.wz-opt.on { border-color: var(--amber); background: rgba(219,168,74,.08); }
.wz-opt.on i { border-color: var(--amber); background: radial-gradient(var(--amber) 45%, transparent 50%); }
.wz-opt span { display: flex; flex-direction: column; } .wz-opt small { color: var(--muted); font-size: 12px; }

.wz-note { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; margin-bottom: 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); font-size: 14px; }
.wz-note span { color: var(--muted); }
.wz-tabs { display: flex; gap: 4px; padding: 4px; margin-bottom: 10px; background: var(--panel); border-radius: 10px; max-width: 520px; }
.wz-tabs button { flex: 1; min-height: 38px; padding: 0 10px; border: 0; border-radius: 7px; background: none; color: var(--muted); font: 600 13px var(--sans); cursor: pointer; }
.wz-tabs button.on { background: var(--amber); color: #14181a; }
.wz-points { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px; margin-bottom: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.wz-points small { display: block; color: var(--muted); font-weight: 400; font-size: 12px; margin-top: 2px; }
.wz-pts { font: 800 30px var(--sans); white-space: nowrap; } .wz-pts small { display: inline; font-size: 14px; color: var(--muted); }
.wz-pts.ok { color: var(--teal); } .wz-pts.bad { color: var(--red); }
.wz-ablist { border-top: 1px solid var(--line); }
.wz-ab { padding: 12px 0; border-bottom: 1px solid var(--line); }
.wz-ab.pri { background: linear-gradient(90deg, rgba(219,168,74,.07), transparent 60%); }
.wz-ab-main { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.wz-ab-name { display: flex; align-items: center; gap: 8px; background: none; border: 0; padding: 0; color: var(--text); font: 700 16px var(--sans); cursor: pointer; }
.wz-ab-name i { width: 20px; height: 20px; border-radius: 50%; background: var(--panel2); color: var(--muted); font-style: normal; font-size: 11px; display: grid; place-items: center; }
.wz-ab-ctl { display: flex; align-items: center; gap: 10px; }
.wz-ab-ctl select { min-height: 36px; width: 74px; }
.wz-step { width: 32px; height: 32px; border-radius: 8px; border: 1px solid #3a454a; background: var(--panel2); color: var(--text); font: 700 18px var(--sans); cursor: pointer; }
.wz-step[disabled] { opacity: .3; cursor: not-allowed; }
.wz-base { min-width: 20px; text-align: center; font-weight: 700; color: var(--muted); }
.wz-val { min-width: 26px; text-align: center; font: 800 22px var(--sans); }
.wz-mod { min-width: 54px; height: 38px; display: grid; place-items: center; border-radius: 8px; border: 2px solid var(--line); font: 800 18px var(--sans); color: var(--muted); }
.wz-mod.pos { background: var(--amber); border-color: var(--amber); color: #14181a; }
.wz-mod.neg { background: rgba(232,119,107,.1); border-color: rgba(232,119,107,.5); color: var(--red); }
.wz-tip { max-height: 0; overflow: hidden; opacity: 0; font-size: 14px; color: var(--muted); line-height: 1.55; transition: max-height .25s ease-out, opacity .25s, padding .25s; }
.wz-tip.open { max-height: 220px; opacity: 1; padding-top: 10px; }

.wz-name { display: flex; flex-direction: column; gap: 6px; margin: 18px 0; font-weight: 600; }
.wz-name input { max-width: 420px; min-height: 46px; font-size: 16px; }
.wz-numbers { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.wz-numbers div, .wz-mods div { flex: 1; min-width: 90px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; text-align: center; }
.wz-numbers small, .wz-mods small { display: block; font-size: 11px; color: var(--muted); } .wz-numbers b { font-size: 20px; }
.wz-mods { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.wz-mods div { min-width: 0; padding: 8px 2px; } .wz-mods b { display: block; font: 700 20px var(--serif); } .wz-mods span { font-size: 12px; color: var(--muted); }

@media (max-width: 820px) { .wz-steps { display: none; } }
@media (max-width: 640px) {
  .wz-top h1 { font-size: 17px; }
  .wz-main { padding-top: 18px; }
  .wz-head h2 { font-size: 22px; }
  .wz-card-top b { font-size: 16px; }
  .wz-links a:first-child { display: none; }
  .wz-bar .wz-in { gap: 10px; }
  .wz-btns .btn { padding: 0 14px; }
  .wz-ab-ctl { gap: 6px; }
  .wz-mod { min-width: 48px; }
  .wz-dialog { max-height: 94vh; }
  .wz-dbody { padding: 18px 16px 6px; }
  .wz-mods { grid-template-columns: repeat(3, 1fr); }
}
.wz-top .wz-in { max-width: 1040px; }
.wz-top h1 { white-space: nowrap; }
.wz-steps { flex: 1; }
@media (max-width: 420px) {
  .wz-ab-name { font-size: 15px; gap: 6px; }
  .wz-ab-name .wz-tag { font-size: 9px; padding: 1px 5px; }
  .wz-ab-ctl select { width: 62px; }
  .wz-ab-ctl { gap: 5px; }
  .wz-mod { min-width: 44px; font-size: 17px; }
  .wz-val { font-size: 20px; min-width: 22px; }
}
/* ---------- Окно заклинания ---------- */
body.pop-lock { overflow: hidden; }
.sp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.sp-chip { font-size: 12px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel2); color: var(--muted); }
.sp-chip.amb { background: rgba(219,168,74,.14); border-color: var(--amber); color: var(--amber); font-weight: 600; }
.sp-chip.tl { background: rgba(95,179,164,.14); border-color: var(--teal); color: var(--teal); }
.sp-chip.dm { background: rgba(232,119,107,.12); border-color: rgba(232,119,107,.5); color: var(--red); font-weight: 600; }
#spellPop .wz-facts p { font-size: 13px; }
#spellPop .lbody { font-size: 14px; }
.spell-chip { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }

/* ---------- Виды заклинаний: цвета ---------- */
.k-damage { --k: #e8776b; } .k-heal { --k: #7bc47f; } .k-buff { --k: #e8b04a; } .k-control { --k: #b48be0; }
.k-scout { --k: #6fb1e8; } .k-summon { --k: #5fb3a4; } .k-utility { --k: #a8a191; }
.spell-chip[class*="k-"] { border-color: color-mix(in srgb, var(--k) 45%, transparent); border-left: 4px solid var(--k); background: color-mix(in srgb, var(--k) 9%, var(--panel2)); }
.spell-chip[class*="k-"]:hover { background: color-mix(in srgb, var(--k) 18%, var(--panel2)); }
.spell-chip[class*="k-"].on { background: color-mix(in srgb, var(--k) 34%, var(--panel2)); border-color: var(--k); color: var(--text); font-weight: 600; }
.k-pill { display: inline-block; font-size: 12px; padding: 3px 10px; border-radius: 999px; color: var(--k); background: color-mix(in srgb, var(--k) 13%, transparent); border: 1px solid color-mix(in srgb, var(--k) 50%, transparent); font-weight: 600; }
.k-legend { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.k-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--k); margin-right: 8px; vertical-align: 1px; }
/* Фильтры по видам и яркое выделение выбранных заклинаний */
button.k-pill { cursor: pointer; font-family: inherit; opacity: .75; }
button.k-pill:hover { opacity: 1; }
button.k-pill.on { opacity: 1; background: color-mix(in srgb, var(--k) 42%, transparent); color: var(--text); box-shadow: 0 0 0 1px var(--k); }
.k-pill.k-reset { --k: #a8a191; opacity: 1; }
.spell-chip[class*="k-"] { background: color-mix(in srgb, var(--k) 6%, var(--panel2)); }
.spell-chip[class*="k-"].on {
  background: color-mix(in srgb, var(--k) 58%, #1b2124); border-color: var(--k); color: #fff; font-weight: 700;
  box-shadow: 0 0 0 2px var(--k), 0 0 16px color-mix(in srgb, var(--k) 55%, transparent);
}
/* ---------- Снаряжение: корзина и магазин ---------- */
.gs { position: sticky; top: var(--wz-top, 70px); z-index: 20; display: flex; align-items: center; gap: 10px; margin: 14px -4px 12px; padding: 8px 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 6px 14px rgba(0,0,0,.3); }
.gs-btn { min-height: 38px; padding: 0 14px; white-space: nowrap; border-color: var(--amber); color: var(--amber); }
.gs-chips { display: flex; gap: 6px; flex: 1; overflow-x: auto; scrollbar-width: none; min-width: 0; align-items: center; }
.gs-chips::-webkit-scrollbar { display: none; }
.gs-chip { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; padding: 3px 4px 3px 10px; border-radius: 999px; background: rgba(219,168,74,.14); border: 1px solid rgba(219,168,74,.5); font-size: 13px; }
.gs-chip button { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 12px; padding: 2px 6px; }
.gs-chip button:hover { color: var(--red); }
.gs-left { white-space: nowrap; font-size: 13px; color: var(--muted); } .gs-left b { color: var(--text); } .gs-left.bad b { color: var(--red); }
.gear-q { margin-bottom: 10px; max-width: none; width: 100%; min-height: 44px; }
.wz-cats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.gr-badge { margin-left: 6px; font-style: normal; font-size: 11px; background: var(--amber); color: #14181a; border-radius: 999px; padding: 0 6px; font-weight: 700; }
.gr-sub { margin-top: 16px; }
.gr { display: flex; align-items: center; gap: 12px; padding: 9px 4px; border-bottom: 1px solid var(--line); }
.gr.in { background: linear-gradient(90deg, rgba(219,168,74,.09), transparent 70%); }
.gr-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.gr-main small { color: var(--muted); font-size: 12px; }
.gr-price { white-space: nowrap; color: var(--muted); font-size: 13px; min-width: 52px; text-align: right; }
.gr-ctl { display: flex; align-items: center; gap: 8px; min-width: 110px; justify-content: flex-end; }
.gr-buy { min-height: 34px; padding: 0 14px; }
.gr-step { width: 32px; height: 32px; border-radius: 8px; border: 1px solid #3a454a; background: var(--panel2); color: var(--text); font: 700 17px var(--sans); cursor: pointer; }
.gr-step[disabled], .gr-buy[disabled] { opacity: .35; cursor: not-allowed; }
.gr-qty { min-width: 18px; text-align: center; }
.cart-row { gap: 10px; flex-wrap: wrap; }
@media (max-width: 640px) {
  .gs { flex-wrap: wrap; margin-left: 0; margin-right: 0; }
  .gs-chips { order: 3; flex-basis: 100%; }
  .gs-left { margin-left: auto; }
  .gr { gap: 8px; }
  .gr-ctl { min-width: 96px; }
}
/* Ряд «рекомендованный набор + корзина» */
.gs { justify-content: flex-start; flex-wrap: wrap; }
.gs-rec { min-height: 38px; padding: 0 16px; white-space: nowrap; }
.gs-left { margin-left: auto; }
.wz-link { background: none; border: 0; padding: 0; color: var(--amber); font: inherit; cursor: pointer; }
.wz-link:hover { text-decoration: underline; }
.wz-steps button[title] { opacity: .55; }
.wz-steps button[data-act="goto"] { cursor: pointer; }
.wz-steps button[data-act="goto"]:hover { color: var(--amber); }
/* Кнопка внутри заголовка шага: отступ до следующего блока такой же, как у абзаца */
.wz-head .btn { margin: 0 0 18px; }
.wz-head > :last-child { margin-bottom: 18px; }
/* ---------- Лист героя (телефонный вид) ---------- */
body.hs-lock { overflow: hidden; }
.hs { --gr: #7bc47f; --bl: #6fb1e8; max-width: 560px; margin: 0 auto; padding: 4px 0 110px; }
.hs-i { width: 20px; height: 20px; flex: none; }
.hs-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.hs-head h1 { font-size: 24px; margin: 0; }
.hs-btn { background: var(--panel2); border: 1px solid #3a454a; border-radius: 8px; padding: 6px 12px; color: var(--text); font: 500 14px var(--sans); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.hs-btn:hover { border-color: var(--amber); }
.hs-btn.am { background: var(--amber); border-color: var(--amber); color: #14181a; }
.hs-btn.on { border-color: var(--amber); color: var(--amber); }
.hs-btn.sm { padding: 3px 10px; font-size: 12px; }
.hs-btn.wide { width: 100%; margin-top: 8px; }
.hs-btn.sq { padding: 5px 9px; }
.hs-btn.danger { color: var(--red); }
.hs-btn[disabled] { opacity: .45; cursor: not-allowed; }
.hs-xp { display: flex; align-items: center; gap: 10px; margin: 10px 0 14px; }
.hs-xpl { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-bottom: 3px; }
.hs-bar { display: flex; height: 10px; background: var(--line); border-radius: 5px; overflow: hidden; }
.hs-bar.big { height: 14px; margin: 12px 0; }
.hs-bar i { display: block; height: 100%; transition: width .2s; }
.hs-card { display: block; width: 100%; text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin-bottom: 12px; color: var(--text); font: inherit; }
.hs-card h3, .hs-sheet h2 { margin: 0; }
.hs-sheet h2 { font-size: 21px; margin-bottom: 6px; }
.hs-lab { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.hs-g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.hs-g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.hs-g4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.hs-tile { background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 4px; text-align: center; color: var(--text); cursor: pointer; font: inherit; }
.hs-tile:hover { border-color: var(--amber); }
.hs-tile b { display: block; font: 700 22px var(--serif); } .hs-tile small { font-size: 11px; color: var(--muted); }
.hs-stw { display: grid; grid-template-columns: 86px 1fr 1fr 1fr; gap: 8px; margin: 4px 0 12px; }
.hs-shd { position: relative; height: 96px; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; background: none; border: 0; color: var(--text); font: inherit; padding: 0; }
.hs-shd svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hs-shd:hover path { stroke: #f0c46a; }
.hs-shd b { position: relative; font: 700 32px/1 var(--serif); margin-top: -6px; } .hs-shd small { position: relative; font-size: 11px; letter-spacing: .1em; color: var(--muted); margin-top: 2px; }
.hs-st { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; cursor: pointer; padding: 6px 2px; color: var(--text); font: inherit; }
.hs-st:hover { border-color: var(--amber); } .hs-st .hs-i { color: var(--amber); } .hs-st b { font: 700 24px/1.1 var(--serif); } .hs-st small { font-size: 11px; color: var(--muted); }
.hs-hprow { display: flex; align-items: flex-start; gap: 12px; }
.hs-hpb { width: 48px; height: 48px; border-radius: 50%; border: 2px solid; display: flex; align-items: center; justify-content: center; background: var(--panel2); flex: none; }
.hs-hpb .hs-i { width: 24px; height: 24px; }
.hs-hpn { background: none; border: 0; padding: 0; display: flex; align-items: baseline; gap: 6px; cursor: pointer; color: var(--text); font: inherit; }
.hs-hpn b { font: 700 36px/1 var(--serif); } .hs-hpn span { color: var(--muted); font-size: 16px; }
.hs-hb { border-radius: 10px; padding: 9px 0; font: 600 15px var(--sans); border: 1px solid; cursor: pointer; }
.hs-hb.dn { border-color: color-mix(in srgb, var(--red) 55%, transparent); background: color-mix(in srgb, var(--red) 10%, var(--panel2)); color: var(--red); }
.hs-hb.up { border-color: color-mix(in srgb, var(--gr) 55%, transparent); background: color-mix(in srgb, var(--gr) 10%, var(--panel2)); color: var(--gr); }
.hs-hb:hover { filter: brightness(1.25); }
.hs-tadd { background: none; border: 1px dashed color-mix(in srgb, var(--bl) 60%, transparent); border-radius: 999px; padding: 2px 10px; font: 12px var(--sans); color: var(--bl); cursor: pointer; }
.hs-tmp { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; color: var(--bl); border: 1px solid color-mix(in srgb, var(--bl) 55%, transparent); background: color-mix(in srgb, var(--bl) 10%, var(--panel2)); border-radius: 999px; padding: 1px 4px 1px 10px; }
.hs-tmp > button:first-child { background: none; border: 0; color: var(--bl); font: inherit; cursor: pointer; padding: 0 4px 0 0; }
.hs-tb { background: none; border: 0; color: var(--bl); width: 22px; height: 22px; font-size: 15px; border-radius: 50%; padding: 0; cursor: pointer; }
.hs-tb:hover { background: color-mix(in srgb, var(--bl) 20%, transparent); }
.hs-abgrid { margin-bottom: 12px; }
.hs-ab { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 9px 6px 8px; text-align: center; cursor: pointer; }
.hs-ab:hover { border-color: var(--amber); }
.hs-ab.pri { background: color-mix(in srgb, var(--amber) 8%, var(--panel)); border-color: color-mix(in srgb, var(--amber) 55%, transparent); }
.hs-abn { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.hs-abm { margin: 7px auto 0; width: 78%; height: 54px; border: 1.5px solid var(--amber); border-radius: 12px; display: flex; align-items: center; justify-content: center; font: 700 30px var(--serif); background: var(--panel2); }
.hs-abs { position: relative; width: 32px; height: 32px; margin: -13px auto 0; border-radius: 50%; border: 1.5px solid var(--amber); background: var(--bg); display: flex; align-items: center; justify-content: center; font: 700 15px var(--serif); }
.hs-svt { margin-top: 7px; display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 12px; color: var(--muted); padding: 3px 4px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel2); }
.hs-svt:hover { border-color: var(--amber); } .hs-svt b { color: var(--text); font-weight: 600; }
.hs-dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; border: 1px solid var(--amber); margin-right: 5px; flex: none; }
.hs-dot.on { background: var(--amber); } .hs-dot.ex { box-shadow: 0 0 0 2px var(--panel), 0 0 0 3px var(--amber); }
.hs-svt .hs-dot { margin: 0; }
.hs-segh { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.hs-seg { margin-bottom: 12px; } .hs-seg:last-child { margin-bottom: 0; }
.hs-ac { display: flex; flex-direction: column; gap: 2px; width: 100%; margin-top: 6px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel2); cursor: pointer; text-align: left; color: var(--text); font: inherit; }
.hs-ac:hover { border-color: var(--amber); } .hs-ac b { font-size: 14px; } .hs-ac span { font-size: 12px; color: var(--muted); }
.hs-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 9px 0; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; color: var(--text); font: inherit; }
button.hs-row { cursor: pointer; } button.hs-row:hover b { color: var(--amber); }
.hs-row:last-child { border-bottom: 0; }
.hs-slot { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--amber); background: none; margin-left: 6px; cursor: pointer; padding: 0; }
.hs-slot.on { background: var(--amber); }
.hs-sp { border: 1px solid color-mix(in srgb, var(--k) 45%, transparent); border-left: 4px solid var(--k); background: color-mix(in srgb, var(--k) 9%, var(--panel2)); border-radius: 999px; padding: 5px 12px; font: 13px var(--sans); color: var(--text); cursor: pointer; margin: 0 6px 6px 0; }
.hs-sp:hover { background: color-mix(in srgb, var(--k) 18%, var(--panel2)); }
.hs-btns { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } .hs-btns.col { flex-direction: column; align-items: stretch; gap: 8px; margin-bottom: 8px; }
.hs-acc { display: flex; justify-content: space-between; align-items: center; cursor: pointer; } .hs-acc b { font: 700 26px var(--serif); } .hs-acc:hover { border-color: var(--amber); }
.hs-det { background: var(--panel2); border-radius: 8px; padding: 8px 12px; margin-bottom: 6px; } .hs-det summary { cursor: pointer; font-weight: 500; }
.hs-body { font-size: 14px; line-height: 1.55; color: var(--muted); } .hs-body p, .hs-body ul { margin: 6px 0; } .hs-body .tip { color: var(--text); }
.hs-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.hs-chip { font-size: 12px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel2); color: var(--muted); }
.hs-chip.tl { background: rgba(95,179,164,.14); border-color: var(--teal); color: var(--teal); } .hs-chip.dm { background: rgba(232,119,107,.12); border-color: rgba(232,119,107,.5); color: var(--red); font-weight: 600; }
.hs-back { position: fixed; inset: 0; background: rgba(5, 8, 9, .6); z-index: 60; } .hs-back.clear { background: transparent; z-index: 62; }
.hs-sheet { position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; width: min(560px, 100%); background: var(--panel); border-top: 2px solid var(--amber); border-radius: 18px 18px 0 0; padding: 16px 18px 18px; z-index: 61; max-height: 80vh; overflow-y: auto; box-shadow: 0 -10px 40px rgba(0,0,0,.5); }
.hs-fab { position: fixed; right: 16px; bottom: 16px; z-index: 64; width: 54px; height: 54px; border-radius: 16px; background: var(--amber); border: 0; color: #14181a; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,.45); }
.hs-fab .hs-i { width: 26px; height: 26px; } .hs-fab:hover { filter: brightness(1.08); }
.hs-menu { position: fixed; right: 16px; bottom: 82px; z-index: 63; width: 210px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 6px; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.hs-menu button { display: block; width: 100%; background: none; border: 0; border-radius: 10px; padding: 12px 14px; font: 16px var(--sans); text-align: left; color: var(--text); cursor: pointer; }
.hs-menu button:hover { background: var(--panel2); } .hs-menu button.on { background: color-mix(in srgb, var(--amber) 14%, transparent); color: var(--amber); }
.hs-lu { margin-bottom: 16px; }
.print-only { display: none; }
@media print { .print-only { display: block; } .hs, .hs-fab { display: none !important; } }
@media (max-width: 420px) { .hs-head h1 { font-size: 21px; } .hs-abm { font-size: 26px; } }
.hs-abn { letter-spacing: .06em; font-size: 10.5px; }

.gr-help{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border:1px solid var(--line,#444);border-radius:50%;font-size:11px;color:var(--mut,#999);text-decoration:none;vertical-align:middle}
.gr-help:hover{color:var(--amber,#e0a040);border-color:currentColor}

/* Название предмета: удержание открывает окно с описанием */
.item-name { cursor: help; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; text-decoration: underline dotted; text-underline-offset: 3px; text-decoration-color: var(--line, #666); }
#itemPop .wz-facts p { font-size: 13px; }
#itemPop .lbody { font-size: 14px; }


#itemPop .tbl-wrap { overflow-x: auto; margin: 8px 0; }
#itemPop .item-tbl { border-collapse: collapse; font-size: 13px; width: 100%; }
#itemPop .item-tbl th, #itemPop .item-tbl td { border: 1px solid var(--line, #444); padding: 4px 8px; text-align: left; vertical-align: top; }
#itemPop .item-tbl th { background: rgba(255,255,255,.05); }
#itemPop .lbody ul { margin: 6px 0 6px 18px; }

/* Ячейки заклинаний справа от названия уровня */
.hs-lvl { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.hs-dots { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.hs-dots small { margin-right: 4px; font-size: 11px; text-transform: none; letter-spacing: 0; }
.hs-dots + .hs-dots { margin-left: 12px; }

.wz-checks { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; }
.wz-chk { display: inline-flex; align-items: center; gap: 6px; color: var(--text); cursor: pointer; }

.hs-clsrow { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; }
.hs-cls { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 120px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel2); color: var(--text); cursor: pointer; text-align: left; }
.hs-cls small { color: var(--muted); }
.hs-cls.on { border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber) inset; }
.hs-cls.low { opacity: .65; }
.hs-cls.low small { color: var(--red); }

.dim { opacity: .55; }
.dim small, .dim em { color: var(--muted); font-style: normal; }

.wz-chk.dim { cursor: not-allowed; }
.wz-chk.on { color: var(--amber); font-weight: 600; }

/* Плитки характеристик в мастере в том же стиле, что и на листе героя */
.wz-abgrid { gap: 10px; align-items: start; }
.wz-abt { cursor: default; padding-bottom: 12px; }
.wz-abt:hover { border-color: var(--line); } .wz-abt.pri:hover { border-color: color-mix(in srgb, var(--amber) 55%, transparent); }
.wz-abt .wz-ab-name { display: inline-flex; justify-content: center; width: 100%; font: 600 11px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.wz-abt .wz-tag { display: block; margin-top: 2px; }
.wz-abt .wz-abctl { margin-top: 10px; display: flex; justify-content: center; align-items: center; gap: 8px; }
.wz-abt .wz-abctl select { width: 84px; }
.wz-abt .wz-tip { text-align: left; font-size: 13px; }
.hs-abm.neg { color: var(--red); border-color: color-mix(in srgb, var(--red) 55%, transparent); }
.wz-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 12px; }
.wz-stats .hs-st { padding: 10px 2px; cursor: default; } .wz-stats .hs-st:hover { border-color: var(--line); }
@media (max-width: 640px) { .wz-stats { grid-template-columns: repeat(3, 1fr); } .wz-abgrid { grid-template-columns: repeat(2, 1fr); } .hs-abgrid.hs-g3:not(.wz-abgrid) { grid-template-columns: repeat(3, 1fr); } }

/* Комната: шапка, «на чём остановились» и вкладки */
.rm-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.rm-title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .rm-title h1 { margin: 0; }
.rm-code { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 10px; border: 1px dashed var(--amber); color: var(--muted); font-size: 13px; }
.rm-code b { color: var(--amber); font: 700 18px var(--serif); letter-spacing: .12em; }
.rm-stage { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; margin-bottom: 14px; background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--amber); border-radius: 10px; }
.rm-stage-lab { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.rm-stage input { flex: 1; min-width: 220px; background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 6px 2px; color: var(--text); font: inherit; }
.rm-stage input:focus { outline: none; border-bottom-color: var(--amber); }
.rm-stage p { margin: 0; flex: 1; }
.rm-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 16px; padding: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; position: sticky; top: 0; z-index: 6; }
.rm-tab { position: relative; min-height: 40px; padding: 0 14px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font: 600 14px var(--sans); cursor: pointer; }
.rm-tab:hover { color: var(--text); background: var(--panel2); }
.rm-tab.on { background: var(--amber); color: #14181a; }
.rm-tab i { font-style: normal; margin-left: 6px; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--red); color: #fff; font-size: 11px; display: inline-block; line-height: 18px; text-align: center; }
.rm-tab.on i { background: #14181a; color: var(--amber); }
@media (max-width: 640px) { .rm-tabs { overflow-x: auto; flex-wrap: nowrap; } .rm-tab { white-space: nowrap; } }

.rm-abil { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-bottom: 8px; }
.rm-abil .hs-ab { cursor: default; padding: 8px 4px 6px; } .rm-abil .hs-ab:hover { border-color: var(--line); }
.rm-abil .hs-abm { height: 40px; font-size: 22px; width: 82%; margin-top: 5px; }
.rm-abil .hs-abs { width: 26px; height: 26px; margin-top: -10px; font-size: 12px; }
@media (max-width: 640px) { .rm-abil { grid-template-columns: repeat(3, 1fr); } }

.wz-chk.dim { opacity: .35; filter: grayscale(1); }
.wz-chk.dim small { opacity: 1; }

/* Шаги мастера на телефоне: горизонтальная полоса (на компьютере виден обычный список шагов в шапке) */
.wz-msteps { display: none; }
@media (max-width: 820px) {
  .wz-msteps { display: flex; gap: 6px; overflow-x: auto; padding: 8px 16px 10px; scrollbar-width: none; -webkit-overflow-scrolling: touch; border-top: 1px solid var(--line); }
  .wz-msteps::-webkit-scrollbar { display: none; }
  .wz-msteps button { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px 0 6px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel2); color: var(--muted); font: 600 13px var(--sans); white-space: nowrap; }
  .wz-msteps button b { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); font-size: 12px; }
  .wz-msteps .done { color: var(--text); cursor: pointer; } .wz-msteps .done b { background: var(--teal); color: #14181a; }
  .wz-msteps .cur { background: var(--amber); border-color: var(--amber); color: #14181a; } .wz-msteps .cur b { background: #14181a; color: var(--amber); }
  .wz-msteps button[disabled] { opacity: .45; cursor: not-allowed; }
}

.wz-intro { margin: 0 0 14px; font: 17px/1.55 var(--serif); color: var(--text); }
.wz-card { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }


/* Предыстория: яркая врезка «Просто о главном», таблица точных правил */
.bg-gist { margin: 0 0 14px; padding: 14px 16px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--amber) 55%, transparent); border-left: 4px solid var(--amber); background: color-mix(in srgb, var(--amber) 9%, var(--panel)); }
.bg-gist-h { margin: 0 0 10px; font: 700 12px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--amber); }
.bg-row { display: flex; flex-direction: column; gap: 6px; margin: 0 0 12px; } .bg-row:last-child { margin-bottom: 0; }
.bg-row p { margin: 0; color: var(--text); line-height: 1.6; }
.bg-row.img p { font: 17px/1.6 var(--serif); }
.bg-tag { align-self: flex-start; padding: 2px 10px; border-radius: 999px; font: 700 11px var(--sans); letter-spacing: .08em; text-transform: uppercase; background: var(--amber); color: #14181a; }
.bg-row.gives .bg-tag { background: var(--teal); }
.bg-row.hint .bg-tag { background: #6fb1e8; }
.bg-exact { font-size: 14px; } .bg-exact h4 { margin: 14px 0 6px; font: 700 15px var(--serif); } .bg-exact p { margin: 4px 0; }
.bg-tbl { width: 100%; border-collapse: collapse; margin: 6px 0 10px; font-size: 13px; }
.bg-tbl th, .bg-tbl td { text-align: left; vertical-align: top; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.bg-tbl th { font: 700 11px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.bg-tbl td:first-child { color: var(--muted); white-space: nowrap; }

.bg-tbl td { font-weight: 400; }
@media (max-width: 640px) {
  .bg-tbl.kv, .bg-tbl.kv tbody, .bg-tbl.kv tr, .bg-tbl.kv td { display: block; width: 100%; }
  .bg-tbl.kv thead { display: none; }
  .bg-tbl.kv tr { padding: 8px 0; border-bottom: 1px solid var(--line); }
  .bg-tbl.kv td { border: 0; padding: 1px 0; }
  .bg-tbl.kv td:first-child { font: 700 11px var(--sans); letter-spacing: .06em; text-transform: uppercase; }
}

/* Языки в виде кнопок: уже известные отмечены ✓ и выделены цветом, недоступные при полном выборе затемнены */
.chip.have[disabled] { opacity: 1; background: transparent; border-color: var(--teal); color: var(--teal); }

.wz-lock-note { margin: 4px 0 24px; padding: 10px 14px; border: 1px dashed var(--line); border-radius: 10px; color: var(--muted); font-size: 14px; }

.gr-det { margin-bottom: 8px; }
.gr-det > summary { display: flex; align-items: center; gap: 8px; }
.gr-det > summary .gr-badge { margin-left: auto; }

.wz-hs { padding: 0; max-width: 560px; margin: 8px 0 18px; }
.wz-hs .hs-st, .wz-hs .hs-shd, .wz-hs .hs-svt, .wz-hs .hs-ab, .wz-hs .hs-hpn { cursor: default; }
.wz-hs .hs-ab:hover, .wz-hs .hs-st:hover { border-color: var(--line); } .wz-hs .hs-ab.pri:hover { border-color: color-mix(in srgb, var(--amber) 55%, transparent); }

/* Мобильная вёрстка мастера: ничего не выходит за ширину экрана (проверено на 320–768 px) */
.wz-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wz-card { min-width: 0; overflow-wrap: anywhere; }
.lvrow > label, .lvrow select, .wz-note, .wz-det { max-width: 100%; min-width: 0; }
.lvrow select { text-overflow: ellipsis; }
@media (max-width: 380px) {
  .wz-top .wz-in { flex-wrap: wrap; row-gap: 4px; }
  .wz-links { margin-left: auto; gap: 10px; }
  .wz-card { padding: 12px; }
  .hs-stw { grid-template-columns: 72px repeat(3, minmax(0, 1fr)); gap: 6px; }
  .hs-st b { font-size: 20px; } .hs-st small { font-size: 10px; letter-spacing: 0; }
  .hs-shd { height: 84px; }
}
@media (max-width: 640px) {
  /* Удобные для пальца размеры: кнопки, переключатели, строки выбора не меньше 34–40 px */
  .wz-link, .wz-links a { min-height: 36px; display: inline-flex; align-items: center; }
  .wz-ab-name { min-height: 38px; }
  .wz input[type="checkbox"] { width: 20px; height: 20px; flex: none; }
  .wz label.small { display: flex; gap: 8px; align-items: flex-start; padding: 6px 0; }
  .k-pill { min-height: 34px; padding-left: 12px; padding-right: 12px; }
  .wz-det > summary { padding: 10px 4px; min-height: 40px; }
  .wz select, .wz input[type="text"], .wz input[type="number"] { min-height: 42px; font-size: 16px; }
}

/* Игроки у мастера: карточки-листы, листаются вбок */
.rm-carwrap { margin-bottom: 16px; }
.rm-car-nav { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
.rm-car { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 8px; overscroll-behavior-x: contain; }
.rm-pc { flex: 0 0 min(100%, 520px); min-width: 0; scroll-snap-align: start; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 12px; position: relative; }
.rm-pc-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
.rm-pc-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; position: relative; }
.rm-pc-top h3 { margin: 0; overflow-wrap: anywhere; }
.hs-fab.rm-pc-fab { position: static; flex: none; box-shadow: none; }
.rm-peek .hs-segh > button.hs-btn { display: none; }
.rm-pc-menu { position: absolute; right: 0; top: 62px; z-index: 5; width: 210px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 6px; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.rm-pc-menu button { display: block; width: 100%; min-height: 42px; background: none; border: 0; border-radius: 10px; padding: 0 14px; font: 16px var(--sans); text-align: left; color: var(--text); cursor: pointer; }
.rm-pc-menu button.on { background: color-mix(in srgb, var(--amber) 14%, transparent); color: var(--amber); }
.rm-pc-xp { margin: 10px 0 4px; }
.rm-peek.hs { max-width: none; padding: 0; }
/* Только просмотр: действия листа отключены */
.rm-peek [data-act] { pointer-events: none; }
.rm-peek [data-act="pc-hp"], .rm-peek [data-act="pc-temp"] { pointer-events: auto; }
.rm-peek .hs-g4:not(.hp-ctl), .rm-peek .hs-tadd:not([data-act="pc-temp"]), .rm-peek .hs-tmp .hs-tb:not([data-act="pc-temp"]), .rm-peek a[href^="#/shop"] { display: none; }
.rm-peek p.muted.small[style*="margin:10px 0 0"], .rm-peek p.muted.small[style*="margin:0 0 6px"] { display: none; }
.rm-peek [data-act="hs-extra"] { display: none; }

/* Монстры мастера и союзники игрока */
.rm-mons { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.rm-mon { min-width: 0; background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.rm-mon-body { max-height: 320px; overflow: auto; margin-top: 8px; font-size: 14px; }
.rm-pc.rm-ally { padding: 0; border: 0; background: none; }

.hs-lockbar { border: 1px solid var(--amber); background: rgba(219,168,74,.08); }
.hs-lockbar b { font-size: 15px; }

.rm-peek .hs-conc-actions { display: none; }
.hs-conc { border-color: var(--teal); }

.rm-pc-facts { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 8px 0; font-size: 13px; }
.rm-fact { display: inline-flex; align-items: baseline; gap: 5px; padding: 3px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel2); }
.rm-fact.bad { border-color: var(--red); color: var(--red); }
.rm-fact.warn { border-color: var(--amber); }
.rm-fact.conc { border-color: var(--teal); }
.rm-fact.wide { flex-basis: 100%; }
.rm-fact-slots small { color: var(--muted); margin-right: 3px; }

.hs-gold { font-size: 14px; color: var(--muted); } .hs-gold b { color: var(--text); }

.rm-endbar { display: flex; gap: 10px; flex-wrap: nowrap; }
.rm-endbar .btn { flex: 1 1 0; min-width: 0; padding-left: 10px; padding-right: 10px; }

/* Начальная страница */
.home { max-width: 980px; margin: 0 auto; padding: 8px 0 24px; }
.home h1 { margin: 6px 0 4px; }
.home-lead { font-size: 17px; max-width: 640px; }
.home-choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px; margin: 20px 0 14px; }
.home-card { display: flex; flex-direction: column; gap: 8px; padding: 22px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); color: var(--text); text-decoration: none; transition: border-color .15s, transform .15s; }
.home-card:hover { border-color: var(--amber); transform: translateY(-2px); }
.home-card.main { border-color: var(--amber); background: linear-gradient(180deg, rgba(219,168,74,.10), var(--panel)); }
.home-card b { font: 700 20px/1.2 var(--serif); }
.home-card span:last-child { color: var(--muted); }
.home-ico { font-size: 30px; line-height: 1; }
.home-more { color: var(--muted); font-size: 14px; }
.landing { display: grid; grid-template-columns: 1.2fr 1fr; gap: 28px; align-items: start; }
.home-points { padding-left: 18px; color: var(--muted); }
.home-points li { margin: 4px 0; }
.home-auth { margin: 0; }
.oauth-btns { display: flex; gap: 8px; margin-left: auto; }
.oauth-btn { width: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
@media (max-width: 760px) { .landing { grid-template-columns: 1fr; gap: 16px; } }

.rm-award { padding: 5px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.rm-award.note { border-left: 3px solid var(--amber); padding-left: 8px; background: rgba(219,168,74,.07); }
.rm-new { animation: rmNew 3s ease-out 1; }
@keyframes rmNew { from { background: rgba(95,179,164,.30); } to { background: transparent; } }

.rm-newbar { display: block; width: 100%; text-align: left; margin: 0 0 12px; padding: 10px 14px; border: 1px solid var(--teal); border-radius: 10px; background: rgba(95,179,164,.10); color: var(--text); font: inherit; cursor: pointer; }
.rm-newbar span { color: var(--teal); float: right; }

/* Карточка монстра (в стиле листа героя) */
.mc-dialog { max-width: 640px; }
.mc { font-size: 14px; line-height: 1.5; }
.mc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding-bottom: 10px; border-bottom: 2px solid var(--redbar); margin-bottom: 12px; }
.mc-head h2 { margin: 0; font-family: var(--serif); font-size: 26px; color: var(--amber); }
.mc-type { color: var(--muted); font-style: italic; font-size: 13px; margin-top: 2px; }
.mc-cr { text-align: center; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 6px 12px; min-width: 76px; }
.mc-cr small { display: block; color: var(--muted); font-size: 11px; } .mc-cr b { font-family: var(--serif); font-size: 24px; color: var(--amber); } .mc-cr span { display: block; color: var(--muted); font-size: 11px; }
.mc-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.mc-tile { background: var(--panel2); border-radius: 10px; padding: 8px 10px; text-align: center; }
.mc-tile small { display: block; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; } .mc-tile b { font-size: 15px; font-weight: 600; }
.mc-abil { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-bottom: 10px; }
.mc-abil div { background: var(--panel2); border-radius: 10px; text-align: center; padding: 6px 2px; }
.mc-abil small { color: var(--muted); font-size: 11px; } .mc-abil b { display: block; font-size: 20px; font-family: var(--serif); } .mc-abil span { color: var(--teal); font-size: 12px; }
.mc-props { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 6px 0; margin-bottom: 10px; }
.mc-prop { display: grid; grid-template-columns: 130px 1fr; gap: 8px; padding: 2px 0; }
.mc-prop > span { color: var(--amber); font-size: 12px; text-transform: uppercase; letter-spacing: .03em; padding-top: 2px; }
.mc-sec { margin-top: 12px; }
.mc-sec h3 { margin: 0 0 6px; font-family: var(--serif); font-size: 18px; color: var(--red); border-bottom: 1px solid rgba(232,119,107,.4); padding-bottom: 2px; }
.mc-sec p { margin: 0 0 8px; } .mc-sec p i:first-child { color: var(--amber); } .mc-sec p b:first-child { color: var(--amber); }
.mc-traits h3 { color: var(--teal); border-color: rgba(95,179,164,.4); }
.mc-leg h3, .mc-lair h3 { color: #b48be0; border-color: rgba(180,139,224,.4); }
@media (max-width: 520px) { .mc-abil { grid-template-columns: repeat(3, 1fr); } .mc-prop { grid-template-columns: 1fr; gap: 0; } .mc-tiles { grid-template-columns: 1fr 1fr; } }
.rm-mon-card { grid-column: 1 / -1; position: relative; padding-top: 48px; }
.rm-mon-x { position: absolute; top: 8px; right: 8px; }
.mc-sec ul { margin: 0 0 8px; padding-left: 20px; } .mc-sec li { margin-bottom: 4px; }
.mc-hs { max-width: none; padding: 0; margin-bottom: 10px; }
.mc-hs .hs-card { margin-bottom: 10px; } .mc-hs .hs-abgrid { margin-bottom: 4px; }
.mc-hs .hs-ab { cursor: default; } .mc-hs .hs-svt { cursor: default; }
.mc-hs .hs-shd, .mc-hs .hs-st { cursor: default; }
.mc-hs .hs-hpn b { font-size: 32px; } .mc-hs .hs-hpn span { font-size: 15px; }
.rm-mon-pc { flex-basis: min(100%, 560px); padding-top: 46px; }
.rm-mon-pc .mc-head { padding-right: 0; }
.mc-hpin { width: 96px; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; color: var(--text); font: 700 30px/1.1 var(--serif); padding: 2px 8px; text-align: center; }
.mc-hpin:focus { border-color: var(--amber); outline: none; }
.mc-hs .hs-hpn { align-items: center; }

/* Лавка: названия товаров жёлтые и подчёркнуты — нажмите на название, чтобы прочитать описание. */
.gr .item-name { color: var(--amber); font-weight: 600; cursor: pointer; text-decoration: underline; text-decoration-style: dotted; text-decoration-color: var(--amber); }
.gr .item-name:hover { color: var(--text); }

/* Правка хитов игроков мастером, последние изменения, кнопки на карточках монстров, правка характеристик. */
.hp-btns { display: inline-flex; gap: 4px; vertical-align: middle; }
.hp-btns .chip { min-height: 26px; padding: 0 8px; font-weight: 700; }
.sk-hpbtns { position: absolute; left: 0.2cm; bottom: 1.65cm; z-index: 2; }
.sk-hpbtns .hp-btns { gap: 2px; }
.sk-hpbtns .chip { min-height: 24px; min-width: 0; padding: 0 6px; font-size: 12px; }
.sk-recent { position: absolute; left: 0.25cm; right: 0.25cm; top: 4.15cm; text-align: center; font: 700 11px var(--sans); color: #ffd6a0; text-shadow: 0 1px 2px #000; }
.fc-actions { display: flex; gap: 4px; margin-top: 6px; }
.fc-actions .chip { min-height: 24px; padding: 0 7px; font-size: 11px; }
.ed-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.ed-cell { display: flex; flex-direction: column; gap: 4px; }
.stepper { display: inline-flex; align-items: center; gap: 4px; }
.stepper input { width: 64px; text-align: center; }
.stepper .chip { min-height: 32px; min-width: 32px; justify-content: center; }

/* Мини-карточка монстра у мастера: в стиле карточек игроков, золотой щит и зелёное сердце. */
.fcard.pcs.mons { border-color: #5c3a2e; }
.mon-actions { position: absolute; right: 0.25cm; bottom: 0.3cm; display: flex; flex-direction: column; gap: 4px; }
.mon-actions .chip { min-height: 24px; padding: 0 8px; font-size: 11px; }
.field.solo { height: auto; min-height: 9cm; justify-content: flex-start; }
.init-list { margin: 8px 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel2); }
.init-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 4px 0; border-bottom: 1px solid var(--line); }
.init-row:last-child { border-bottom: 0; }
.init-row.cur { color: var(--amber); }
.hs-recent { font-size: 12px; font-weight: 700; color: var(--amber); margin-top: 6px; }

.modal .row { flex-wrap: wrap; }
.modal .mc { max-width: 100%; }

.init-stats { display: flex; gap: 14px; flex: 1; justify-content: flex-start; margin-left: 16px; font-size: 13px; color: var(--muted); flex-wrap: wrap; }
.init-stats b { color: var(--text); }

.field.solo { min-width: 0; padding: 0.3cm; }
.field.solo .field-top { display: grid; grid-template-columns: repeat(auto-fill, minmax(5cm, 1fr)); gap: 0.45cm; width: 100%; }
.field.solo .fcard { width: auto; min-width: 5cm; }

.init-name { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; text-decoration-color: var(--muted); }
.init-name:hover { color: var(--amber); }

/* На телефоне поле с мини-карточками монстров не показываем: список инициативы и бестиарий остаются. */
@media (max-width: 640px) { .field-wrap { display: none; } }

.ist { display: inline-flex; align-items: center; gap: 5px; min-width: 70px; }
.ist b { font-size: 14px; }
.init-stats { gap: 18px; }

/* Список инициативы: строки выровнены по колонкам (имя, КД, хиты, скорость, инициатива). */
.init-row { display: grid; grid-template-columns: minmax(0, 1fr) 80px 130px 80px 110px; align-items: center; column-gap: 12px; }
.init-row > :first-child { min-width: 0; }
.init-stats { display: contents; }
.init-stats .ist { min-width: 0; }
.init-row > :last-child { justify-self: end; text-align: right; }
@media (max-width: 640px) { .init-row { grid-template-columns: minmax(0, 1fr) 56px 96px 56px 70px; column-gap: 6px; } }

/* Телефон: имя и инициатива на первой строке, КД, хиты и скорость на второй. */
@media (max-width: 640px) {
  .init-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name init" "stats stats"; row-gap: 4px; padding: 6px 0; }
  .init-row > :first-child { grid-area: name; }
  .init-row > :last-child { grid-area: init; }
  .init-stats { display: flex; grid-area: stats; margin-left: 0; gap: 18px; }
  .init-stats .ist { min-width: 0; }
}

/* «Побеждён»: кроваво-красная кнопка с трещинами. */
.chip.dead { position: relative; overflow: hidden; background: linear-gradient(#9b1a1a, #4a0808); border-color: #c23030; color: #ffe1dc; font-weight: 700; box-shadow: inset 0 0 10px rgba(0,0,0,.65), 0 0 0 1px #2a0505; text-shadow: 0 1px 2px #000; }
.chip.dead::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40' preserveAspectRatio='none'%3E%3Cg fill='none' stroke-linejoin='round'%3E%3Cpath d='M28 0 L34 10 L26 19 L37 29 L31 40 M34 10 L45 13 M37 29 L48 33' stroke='%23140000' stroke-width='1.6'/%3E%3Cpath d='M29.2 0 L35.2 10 L27.2 19 L38.2 29 L32.2 40' stroke='%23e07a70' stroke-width='.5' opacity='.6'/%3E%3Cpath d='M72 0 L66 11 L75 20 L68 31 L73 40 M66 11 L56 14' stroke='%23140000' stroke-width='1.6'/%3E%3Cpath d='M73.2 0 L67.2 11 L76.2 20 L69.2 31 L74.2 40' stroke='%23e07a70' stroke-width='.5' opacity='.6'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.chip.dead:hover { background: linear-gradient(#b02121, #5a0a0a); }

/* «В резерв»: засада в кустах — листва и два глаза, выглядывающие из зарослей. */
.chip.bush { position: relative; overflow: hidden; background: linear-gradient(#2f5a2c, #173a1a); border-color: #4f8a45; color: #e4f4d2; font-weight: 700; text-shadow: 0 1px 2px #000; box-shadow: inset 0 0 10px rgba(0,0,0,.55); }
.chip.bush::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40' preserveAspectRatio='none'%3E%3Cg%3E%3Cellipse cx='6' cy='34' rx='9' ry='6' fill='%231f4a1d'/%3E%3Cellipse cx='19' cy='38' rx='10' ry='5' fill='%23356b2d'/%3E%3Cellipse cx='36' cy='39' rx='9' ry='4' fill='%232a5a24'/%3E%3Cellipse cx='62' cy='39' rx='10' ry='4' fill='%23356b2d'/%3E%3Cellipse cx='80' cy='37' rx='11' ry='6' fill='%231f4a1d'/%3E%3Cellipse cx='95' cy='33' rx='9' ry='7' fill='%232f6228'/%3E%3Cellipse cx='4' cy='6' rx='8' ry='5' fill='%23275a22'/%3E%3Cellipse cx='16' cy='2' rx='9' ry='4' fill='%23356b2d'/%3E%3Cellipse cx='88' cy='3' rx='10' ry='4' fill='%23275a22'/%3E%3Cellipse cx='98' cy='10' rx='7' ry='6' fill='%23356b2d'/%3E%3Cpath d='M12 24 l6 -5 l2 7z M84 22 l7 -6 l1 8z M48 36 l5 -4 l2 6z' fill='%2362a64f' opacity='.7'/%3E%3C/g%3E%3Cg fill='%23ffd84a'%3E%3Cellipse cx='8' cy='19' rx='2.2' ry='1.6'/%3E%3Cellipse cx='15' cy='19' rx='2.2' ry='1.6'/%3E%3C/g%3E%3Cg fill='%23140000'%3E%3Ccircle cx='8.4' cy='19' r='.8'/%3E%3Ccircle cx='15.4' cy='19' r='.8'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.chip.bush:hover { background: linear-gradient(#3a6d35, #1d4a20); }

/* Начальная страница Ink & Bone (без входа) */
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand-mark { display: inline-flex; padding: 3px; border-radius: 9px; background: radial-gradient(ellipse at center, #f7f0de 0%, #eadcbc 100%); border: 1px solid #5b4a30; }
.brand-mark img { display: block; width: 30px; height: 30px; border-radius: 6px; mix-blend-mode: multiply; }
.lp { display: flex; flex-direction: column; gap: 28px; }
.lp-hero { display: grid; grid-template-columns: 1.25fr 1fr; gap: 32px; align-items: center; min-height: 340px; }
.lp-title { font-size: 46px; line-height: 1.05; margin: 0 0 8px; letter-spacing: .01em; }
.lp-tag { font-size: 18px; color: var(--muted); margin: 0 0 16px; max-width: 560px; }
.lp-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 0; }
.lp-cta .btn { display: inline-flex; align-items: center; }
.lp-features { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.lp-feat { padding: 22px 24px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(180deg, rgba(219,168,74,.08), var(--panel) 45%); }
.lp-feat-head { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.lp-feat-head h2 { margin: 0; font-size: 24px; line-height: 1.15; }
.lp-ico { flex: none; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 12px; background: var(--panel2); border: 1px solid #3a454a; font-size: 26px; }
.lp-kicker { display: block; font: 700 12px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--amber); }
.lp-lead { margin: 0 0 10px; }
.lp-points { margin: 0; padding-left: 20px; color: var(--muted); }
.lp-points li { margin: 6px 0; }
.lp-points li::marker { color: var(--amber); }
.lp-strip { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border: 1px dashed #3a454a; border-radius: 14px; }
.lp-strip > span { font-size: 28px; }
.lp-strip p { margin: 0; flex: 1; color: var(--muted); }
.lp-strip p b { color: var(--text); }
.lp-strip .btn { display: inline-flex; align-items: center; white-space: nowrap; }
@media (max-width: 860px) {
  .lp-hero, .lp-features { grid-template-columns: 1fr; gap: 18px; }
  .lp-title { font-size: 38px; }
  .lp-strip { flex-wrap: wrap; }
}