/* Кузня Миров — тёмная «книга при свечах» */
:root {
  --bg: #13110e;
  --bg2: #191612;
  --panel: #1f1b16;
  --panel2: #27221b;
  --line: #3a3127;
  --line2: #4e4235;
  --text: #ece2cf;
  --muted: #a79a84;
  --faint: #998c75;   /* было #776b59 — 3,3:1, ниже нормы WCAG AA; сейчас ≥ 4,5:1 на всех фонах */
  --gold: #d4a24c;
  --gold2: #f0c674;
  --red: #c8553d;
  --green: #79a35f;
  --blue: #6b9bc3;
  --violet: #a07cc5;
  --radius: 10px;
  --serif: 'Cormorant Garamond', 'Georgia', serif;
  --sans: 'PT Sans', 'Segoe UI', system-ui, sans-serif;
  --shadow: 0 10px 30px rgba(0,0,0,.45);
  /* слои интерфейса: всё, что перекрывает страницу, — по одной шкале */
  --z-popover: 20; --z-scrim: 55; --z-bottomnav: 58; --z-drawer: 60; --z-modal: 100; --z-toast: 200;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  background-image: radial-gradient(ellipse at 20% -10%, rgba(212,162,76,.08), transparent 55%), radial-gradient(ellipse at 110% 110%, rgba(200,85,61,.06), transparent 50%);
  color: var(--text); font: 15px/1.5 var(--sans);
}
a { color: var(--gold2); text-decoration: none; }
a:hover { text-decoration: underline; }
a.btn:hover, .bottomnav a:hover, a.obstep:hover, a.alert:hover { text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 700; margin: 0 0 .4em; line-height: 1.15; letter-spacing: .01em; }
h1 { font-size: 34px; } h2 { font-size: 26px; } h3 { font-size: 21px; } h4 { font-size: 17px; }
p { margin: 0 0 .7em; }
small, .muted { color: var(--muted); }
.faint { color: var(--faint); }
hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }
code { background: var(--panel2); padding: 1px 5px; border-radius: 4px; }
[hidden] { display: none !important; }

/* ── элементы форм */
input, select, textarea, button { font: inherit; color: inherit; }
input[type=text], input[type=password], input[type=number], input[type=search], select, textarea {
  background: var(--bg2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; width: 100%; outline: none;
  transition: border-color .15s;
}
input:focus, select:focus, textarea:focus { border-color: var(--gold); }
textarea { min-height: 90px; resize: vertical; line-height: 1.45; }
label { display: block; font-size: 13px; color: var(--muted); margin: 10px 0 4px; }
label.check { display: flex; gap: 8px; align-items: center; color: var(--text); font-size: 14px; margin: 6px 0; cursor: pointer; }
input[type=checkbox] { accent-color: var(--gold); width: 16px; height: 16px; }
input[type=range] { accent-color: var(--gold); width: 100%; }

.btn {
  display: inline-flex; align-items: center; gap: 6px; justify-content: center;
  background: var(--panel2); border: 1px solid var(--line2); border-radius: 8px; padding: 7px 14px; cursor: pointer;
  white-space: nowrap; transition: background .15s, border-color .15s, transform .05s; text-decoration: none;
}
.btn:hover { background: #312a21; border-color: var(--gold); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: linear-gradient(#d9aa55, #b8862f); color: #1c140a; border-color: #e6bd6c; font-weight: 700; }
.btn.primary:hover { background: linear-gradient(#e6b862, #c4913a); }
.btn.danger { border-color: #7a3527; color: #f0a593; }
.btn.danger:hover { background: #3a1d17; border-color: var(--red); }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.ghost:hover { background: var(--panel2); border-color: var(--line); }
.btn.sm { padding: 4px 9px; font-size: 13px; }
.btn.icon { padding: 6px 9px; }
.btn[disabled] { opacity: .5; pointer-events: none; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row.end { justify-content: flex-end; }
.row.between { justify-content: space-between; }
.grow { flex: 1; min-width: 0; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 12px; }
.stack > * + * { margin-top: 12px; }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.card.tight { padding: 12px; }
.badge { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 1px 8px; border-radius: 99px; border: 1px solid var(--line2); color: var(--muted); white-space: nowrap; }
.badge.gold { color: var(--gold2); border-color: #7a5e2c; }
.badge.red { color: #f0a593; border-color: #7a3527; }
.badge.green { color: #b7d79f; border-color: #48623a; }
.badge.blue { color: #a9cbe6; border-color: #3c5c78; }
.badge.violet { color: #d3bdea; border-color: #5b4775; }
.tag { font-size: 12px; background: var(--panel2); border-radius: 6px; padding: 1px 7px; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { cursor: pointer; padding: 4px 11px; border-radius: 99px; border: 1px solid var(--line); background: var(--bg2); font-size: 13px; color: var(--muted); }
.chip.on { border-color: var(--gold); color: var(--gold2); background: #2a2216; }
button.chip { font: inherit; font-size: 13px; }
button.chip:hover { border-color: var(--gold); color: var(--gold2); }
.empty { text-align: center; color: var(--muted); padding: 40px 16px; border: 1px dashed var(--line); border-radius: var(--radius); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); display: inline-block; }
.dot.on { background: var(--green); box-shadow: 0 0 6px var(--green); }

/* ── каркас */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.login { width: min(400px, 100%); }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--serif); font-weight: 700; font-size: 22px; color: var(--gold2); }
.brand svg { width: 28px; height: 28px; }

.topbar { height: 54px; display: flex; align-items: center; gap: 12px; padding: 0 16px; border-bottom: 1px solid var(--line); background: rgba(19,17,14,.92); position: sticky; top: 0; z-index: 50; backdrop-filter: blur(6px); }
.topbar .world-name { font-family: var(--serif); font-size: 20px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar .sep { color: var(--faint); }
.menu-toggle { display: none; }

.shell { display: grid; grid-template-columns: 220px 1fr; min-height: calc(100vh - 54px); }
.sidebar { border-right: 1px solid var(--line); padding: 14px 10px; position: sticky; top: 54px; height: calc(100vh - 54px); overflow-y: auto; background: var(--bg); }
.nav a { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; color: var(--text); margin-bottom: 2px; }
.nav a:hover { background: var(--panel); text-decoration: none; }
.nav a.on { background: var(--panel2); color: var(--gold2); box-shadow: inset 2px 0 0 var(--gold); }
.nav .ico { width: 20px; text-align: center; opacity: .85; }
.nav .group { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--faint); margin: 14px 10px 6px; }
.main { padding: 22px 26px 60px; min-width: 0; }
.main.full { padding: 0; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.page-head h1 { margin: 0; }
.page-head .sub { color: var(--muted); margin-top: 2px; }

/* ── списки сущностей */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.ecard { display: flex; gap: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; cursor: pointer; color: var(--text); transition: border-color .15s, transform .1s; position: relative; }
.ecard:hover { border-color: var(--line2); text-decoration: none; transform: translateY(-1px); }
.ecard.hid { opacity: .72; border-style: dashed; }
.ecard .thumb { width: 52px; height: 52px; border-radius: 8px; flex: none; background: var(--panel2) center/cover; display: grid; place-items: center; font-size: 24px; border: 1px solid var(--line); }
.ecard .t { font-weight: 700; font-family: var(--serif); font-size: 18px; line-height: 1.15; }
.ecard .s { color: var(--muted); font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ecard .b { margin-top: 6px; display: flex; gap: 4px; flex-wrap: wrap; }
.group-title { margin: 22px 0 10px; display: flex; align-items: center; gap: 10px; color: var(--gold2); }
.group-title::after { content: ''; flex: 1; border-top: 1px solid var(--line); }

/* ── страница сущности */
.ehead { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 14px; }
.ehead .portrait { width: 120px; height: 120px; border-radius: 12px; background: var(--panel2) center/cover; border: 1px solid var(--line2); flex: none; display: grid; place-items: center; font-size: 46px; cursor: zoom-in; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 10px 0 16px; overflow-x: auto; }
.tabs button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 14px; cursor: pointer; color: var(--muted); }
.tabs button.on { color: var(--gold2); border-color: var(--gold); }
.prose { max-width: 820px; }
.prose h2, .prose h3, .prose h4 { margin-top: .9em; }
.prose ul { padding-left: 20px; margin: 0 0 .7em; }
.prose blockquote { border-left: 3px solid var(--gold); margin: 0 0 .7em; padding: 4px 12px; color: var(--muted); background: var(--bg2); }
.wlink { color: var(--gold2); border-bottom: 1px dotted var(--gold); cursor: pointer; }
.wlink.missing { color: var(--muted); border-color: var(--faint); cursor: default; }

/* ── лист персонажа */
.sheet { display: grid; grid-template-columns: 250px 1fr; gap: 16px; }
.sheet .col { display: flex; flex-direction: column; gap: 12px; }
.sheet .box { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; }
.sheet .box h4 { font-size: 15px; text-transform: uppercase; letter-spacing: .08em; color: var(--gold2); font-family: var(--sans); margin-bottom: 8px; }
.sheet input, .sheet select, .sheet textarea { padding: 4px 7px; border-radius: 6px; }
.sheet textarea { min-height: 70px; }
.sheet .hdr { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 6px 12px; }
.sheet .hdr label { margin: 0 0 2px; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.abil { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.abil .a { background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; text-align: center; padding: 6px 4px 8px; }
.abil .a .n { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.abil .a .m { font-size: 24px; font-family: var(--serif); font-weight: 700; color: var(--gold2); cursor: pointer; line-height: 1.1; }
.abil .a .m:hover { color: #fff; }
.abil .a input { width: 54px; text-align: center; margin: 2px auto 0; display: block; }
.statrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 8px; }
.stat { background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 6px 8px; text-align: center; }
.stat .n { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.stat .v { font-family: var(--serif); font-size: 24px; font-weight: 700; }
.stat input { text-align: center; font-size: 18px; font-weight: 700; }
.roll { cursor: pointer; }
.roll:hover { color: var(--gold2); }
.skills .sk { display: grid; grid-template-columns: 22px 1fr 40px; align-items: center; gap: 6px; padding: 3px 4px; border-radius: 6px; font-size: 14px; }
.skills .sk:hover { background: var(--bg2); }
.skills .sk .bonus { text-align: right; font-weight: 700; }
.prof { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--line2); background: none; padding: 0; cursor: pointer; }
.prof.p1 { background: var(--gold); border-color: var(--gold); }
.prof.p2 { background: var(--gold2); border-color: #fff; box-shadow: 0 0 0 2px var(--gold) inset; }
.prof:disabled { cursor: default; }
.hp { display: flex; align-items: center; gap: 6px; }
.hp input { width: 64px; text-align: center; }
.hpbar { height: 6px; background: var(--bg2); border-radius: 99px; overflow: hidden; margin-top: 6px; }
.hpbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--red), var(--green)); }
table.attacks { width: 100%; border-collapse: collapse; font-size: 14px; }
table.attacks th { text-align: left; font-size: 11px; color: var(--muted); text-transform: uppercase; font-weight: 400; padding: 2px 4px; }
table.attacks td { padding: 3px 3px; vertical-align: middle; }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 6px; }
.slots .sl { background: var(--bg2); border: 1px solid var(--line); border-radius: 8px; padding: 4px; text-align: center; font-size: 12px; }
.slots .sl input { width: 32px; padding: 2px; text-align: center; display: inline-block; }
.money { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.money input { text-align: center; }

/* ── журнал */
.jentry { display: flex; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.jentry:last-child { border-bottom: 0; }
.jentry .ic { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--panel2); flex: none; font-size: 16px; }
.jentry.roll .ic { background: #2c2416; color: var(--gold2); }
.jentry.reveal .ic, .jentry.quest .ic { background: #1e2a1a; color: #b7d79f; }
.jentry.session .ic { background: #251c2e; color: #d3bdea; }
.jentry.secret { background: repeating-linear-gradient(135deg, transparent 0 10px, rgba(160,124,197,.05) 10px 20px); }
.jentry .meta { font-size: 12px; color: var(--muted); }
.dice-total { font-family: var(--serif); font-weight: 700; font-size: 26px; color: var(--gold2); line-height: 1; }
.dice-total.crit { color: #9be27a; text-shadow: 0 0 10px rgba(121,163,95,.6); }
.dice-total.fail { color: #ff8a70; }
.dice-parts { font-size: 13px; color: var(--muted); }
.dice-parts .d { display: inline-block; min-width: 22px; text-align: center; padding: 0 4px; margin: 1px; border-radius: 5px; background: var(--bg2); border: 1px solid var(--line); color: var(--text); }
.dice-parts .d.drop { opacity: .4; text-decoration: line-through; }
.dice-parts .d.max { border-color: var(--green); color: #b7d79f; }
.dice-parts .d.min { border-color: var(--red); color: #f0a593; }

/* ── кубы */
.dicepad { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; }
.die { aspect-ratio: 1; background: var(--panel); border: 1px solid var(--line2); border-radius: 14px; display: grid; place-items: center; cursor: pointer; font-family: var(--serif); font-weight: 700; font-size: 22px; color: var(--gold2); transition: transform .1s, border-color .15s; position: relative; }
.die svg { position: absolute; inset: 14%; width: 72%; height: 72%; opacity: .14; }
.die:hover { border-color: var(--gold); transform: translateY(-2px); }
.die span { position: relative; }
.bigresult { text-align: center; padding: 18px; }
.bigresult .dice-total { font-size: 64px; }
@keyframes pop { 0% { transform: scale(.6) rotate(-8deg); opacity: 0 } 70% { transform: scale(1.08) } 100% { transform: scale(1); opacity: 1 } }
.pop { animation: pop .35s ease-out; }

/* ── карта */
.mapwrap { display: grid; grid-template-columns: 240px 1fr; height: calc(100vh - 54px); }
.maplist { border-right: 1px solid var(--line); overflow-y: auto; padding: 12px; background: var(--bg); }
.maplist .mi { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 8px; cursor: pointer; font-size: 14px; }
.maplist .mi:hover { background: var(--panel); }
.maplist .mi.on { background: var(--panel2); color: var(--gold2); }
.maplist .mi.hid { opacity: .6; font-style: italic; }
.mapmain { position: relative; display: flex; flex-direction: column; min-width: 0; }
.maptools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--bg2); }
.crumbs { display: flex; align-items: center; gap: 6px; font-family: var(--serif); font-size: 18px; font-weight: 600; flex-wrap: wrap; }
.crumbs a { color: var(--muted); }
.viewport { position: relative; flex: 1; overflow: hidden; background: #0d0b09; cursor: grab; touch-action: none; user-select: none; }
.viewport.panning { cursor: grabbing; }
.viewport.mode-marker { cursor: crosshair; }
.viewport.mode-fog { cursor: cell; }
.stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.stage img.mapimg { display: block; pointer-events: none; -webkit-user-drag: none; box-shadow: 0 0 60px rgba(0,0,0,.8); }
.marker { position: absolute; transform: translate(-50%, -100%) scale(var(--inv, 1)); transform-origin: 50% 100%; cursor: pointer; z-index: 3; }
.marker .pin { width: 30px; height: 38px; display: grid; place-items: start center; filter: drop-shadow(0 3px 4px rgba(0,0,0,.6)); }
.marker .pin svg { width: 30px; height: 38px; }
.marker .glyph { position: absolute; top: 5px; left: 0; width: 30px; text-align: center; font-size: 14px; color: #1a140c; font-weight: 700; pointer-events: none; }
.marker .lbl { position: absolute; top: 38px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 12px; font-weight: 700; padding: 1px 6px; border-radius: 5px; background: rgba(19,17,14,.85); border: 1px solid var(--line); pointer-events: none; }
.marker.hid { opacity: .5; }
.marker.hid .lbl::before { content: '🔒 '; }
.marker.dragging { z-index: 10; cursor: grabbing; }
.marker.focus .pin { animation: pulse 1s ease-in-out 3; }
@keyframes pulse { 50% { transform: scale(1.35); } }
.area { position: absolute; z-index: 2; }
.area.fog { background: #0b0a08; background-image: radial-gradient(circle at 30% 30%, rgba(60,50,40,.35), transparent 60%), repeating-linear-gradient(45deg, rgba(255,255,255,.015) 0 6px, transparent 6px 12px); box-shadow: 0 0 calc(30px * var(--inv,1)) 10px #0b0a08; }
.area.gm { border: 2px dashed rgba(160,124,197,.9); background: rgba(40,20,60,.35); cursor: pointer; }
.area.gm.revealed { border-color: rgba(121,163,95,.8); background: rgba(30,60,20,.12); }
.area .alabel { position: absolute; left: 4px; top: 2px; font-size: calc(12px * var(--inv,1)); color: #d3bdea; font-weight: 700; text-shadow: 0 1px 2px #000; }
.drawrect { position: absolute; border: 2px dashed var(--violet); background: rgba(160,124,197,.15); z-index: 5; pointer-events: none; }
.zoomctl { position: absolute; left: 12px; bottom: 12px; display: flex; flex-direction: column; gap: 6px; z-index: 6; }
.popover { position: absolute; z-index: var(--z-popover); background: var(--panel); border: 1px solid var(--line2); border-radius: 10px; box-shadow: var(--shadow); padding: 12px; width: 270px; }
.popover h4 { margin-bottom: 4px; }

/* ── модальные окна и уведомления */
.modal-back { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: grid; place-items: center; z-index: var(--z-modal); padding: 16px; animation: fade .15s; }
@keyframes fade { from { opacity: 0 } }
.modal { background: var(--panel); border: 1px solid var(--line2); border-radius: 14px; box-shadow: var(--shadow); width: min(560px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; }
.modal.wide { width: min(860px, 100%); }
.modal .mh { padding: 14px 18px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.modal .mh h3 { margin: 0; }
.modal .mb { padding: 4px 18px 16px; overflow-y: auto; }
.modal .mf { padding: 12px 18px; border-top: 1px solid var(--line); display: flex; gap: 8px; justify-content: flex-end; }
#toasts { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: var(--z-toast); max-width: min(380px, calc(100vw - 32px)); }
.toast { background: var(--panel2); border: 1px solid var(--line2); border-left: 3px solid var(--gold); border-radius: 10px; padding: 10px 14px; box-shadow: var(--shadow); animation: pop .25s; }
.toast.err { border-left-color: var(--red); }
.toast.ok { border-left-color: var(--green); }
.lightbox img { max-width: 100%; max-height: calc(100vh - 140px); display: block; margin: 0 auto; border-radius: 8px; }

/* ── ИИ-чат */
.chat { display: flex; flex-direction: column; height: calc(100vh - 54px - 190px); min-height: 380px; }
.chat .msgs { flex: 1; overflow-y: auto; padding: 4px 4px 12px; display: flex; flex-direction: column; gap: 12px; }
.msg { max-width: 80%; padding: 10px 14px; border-radius: 12px; }
.msg.user { align-self: flex-end; background: #2c2416; border: 1px solid #5c4724; }
.msg.assistant { align-self: flex-start; background: var(--panel); border: 1px solid var(--line); }
.msg .acts { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.chat form { display: flex; gap: 8px; align-items: flex-end; }
.chat textarea { min-height: 46px; max-height: 160px; }
.typing span { display: inline-block; width: 6px; height: 6px; margin: 0 2px; border-radius: 50%; background: var(--muted); animation: blink 1s infinite; }
.typing span:nth-child(2) { animation-delay: .2s } .typing span:nth-child(3) { animation-delay: .4s }
@keyframes blink { 50% { opacity: .2 } }

/* ── права */
table.perms { border-collapse: collapse; width: 100%; font-size: 14px; }
table.perms th, table.perms td { padding: 7px 8px; border-bottom: 1px solid var(--line); text-align: left; }
table.perms th { color: var(--muted); font-weight: 400; font-size: 12px; }
table.perms td.c { text-align: center; }
.perm-scroll { overflow-x: auto; }

.overview { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; }
.statgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.statgrid a { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; color: var(--text); }
.statgrid a:hover { border-color: var(--gold); text-decoration: none; }
.statgrid b { display: block; font-family: var(--serif); font-size: 28px; color: var(--gold2); line-height: 1; }
.result { border-left: 3px solid var(--gold); }


/* ═════════ Дополнения v2 ═════════ */
.red-t { color: #f0a593; } .crit-t { color: #9be27a; } .fail-t { color: #ff8a70; }
.btn.on { border-color: var(--gold); color: var(--gold2); }
select.sm { padding: 4px 8px; font-size: 13px; }
.show-sm { display: none !important; }

/* ── карта: панели инструментов */
.maptools.sub { background: var(--panel); padding: 6px 12px; }
.chips.tools .chip { user-select: none; }
.palette { display: flex; gap: 6px; flex-wrap: nowrap; overflow-x: auto; max-width: 100%; padding-bottom: 2px; flex: 1; min-width: 0; }
.palette .chip { white-space: nowrap; }
.mapsvg { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.mapsvg .pfog { fill: #0b0a08; stroke: #0b0a08; }
.mapsvg .pfog.stroke { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.mapsvg .gmfog { fill: rgba(40,20,60,.35); stroke: rgba(160,124,197,.9); stroke-width: calc(2px * var(--inv, 1)); stroke-dasharray: calc(8px * var(--inv,1)) calc(5px * var(--inv,1)); pointer-events: visiblePainted; cursor: pointer; }
.mapsvg .gmfog.revealed { fill: rgba(30,60,20,.12); stroke: rgba(121,163,95,.8); }
.mapsvg .gmfog.stroke { fill: none; stroke: rgba(40,20,60,.45); stroke-dasharray: none; stroke-linecap: round; stroke-linejoin: round; }
.mapsvg .gmfog.stroke.revealed { stroke: rgba(30,60,20,.25); }
.mode-fog .mapsvg .gmfog { pointer-events: none; }
.mapsvg .alabel { fill: #d3bdea; font-weight: 700; paint-order: stroke; stroke: #000; stroke-width: 3px; pointer-events: none; }
.mapsvg .fogdraw { fill: rgba(160,124,197,.25); stroke: var(--violet); stroke-width: calc(2px * var(--inv,1)); stroke-dasharray: calc(6px * var(--inv,1)); }
.mapsvg .fogdraw.stroke { fill: none; stroke: rgba(160,124,197,.5); stroke-dasharray: none; stroke-linecap: round; stroke-linejoin: round; }
.mapsvg .mline { stroke: var(--gold2); stroke-width: calc(3px * var(--inv,1)); stroke-dasharray: calc(10px * var(--inv,1)) calc(6px * var(--inv,1)); }
.mapsvg .mdot { fill: var(--gold2); }
.mapsvg .trail { stroke: var(--gold2); stroke-width: calc(3px * var(--inv,1)); stroke-dasharray: calc(4px * var(--inv,1)) calc(6px * var(--inv,1)); animation: fadeout 4s forwards; }
@keyframes fadeout { 0% { opacity: 1 } 70% { opacity: .8 } 100% { opacity: 0 } }
.viewport.mode-measure, .viewport.mode-ping, .viewport.mode-token { cursor: crosshair; }
.measure { position: absolute; z-index: 15; pointer-events: none; background: rgba(19,17,14,.92); border: 1px solid var(--gold); color: var(--gold2); font-weight: 700; font-size: 13px; padding: 3px 9px; border-radius: 6px; white-space: nowrap; }
.marker .mcount { position: absolute; top: -6px; right: -8px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--green); color: #111; font-size: 11px; font-weight: 700; display: grid; place-items: center; border: 2px solid #14110d; padding: 0 3px; }
.marker.droptarget .pin { transform: scale(1.35); filter: drop-shadow(0 0 8px var(--green)); transition: transform .1s; }

/* ── жетоны */
#layer { position: absolute; left: 0; top: 0; }
.token { position: absolute; width: var(--tk); height: var(--tk); transform: translate(-50%, -50%); z-index: 4; cursor: pointer; touch-action: none; }
.token.fixed { transform: translate(-50%, -50%) scale(var(--inv, 1)); }
.token .face { width: 100%; height: 100%; border-radius: 50%; background: #2a241c center/cover; border: calc(var(--tk) * .07 + 1px) solid var(--tc); box-shadow: 0 2px 8px rgba(0,0,0,.6); display: grid; place-items: center; font-weight: 700; font-size: calc(var(--tk) * .36); color: var(--text); font-family: var(--serif); overflow: hidden; }
.token .tlbl { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 2px; white-space: nowrap; font-size: max(10px, calc(var(--tk) * .22)); font-weight: 700; padding: 0 5px; border-radius: 4px; background: rgba(19,17,14,.82); pointer-events: none; }
.token.fixed .tlbl { font-size: 11px; }
.token .thp { position: absolute; left: 8%; right: 8%; bottom: -3px; height: max(3px, calc(var(--tk) * .08)); background: #300; border-radius: 3px; overflow: hidden; }
.token .thp i { display: block; height: 100%; background: linear-gradient(90deg, var(--red), var(--green)); }
.token .tcond { position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; border-radius: 8px; background: var(--violet); color: #111; font-size: 10px; font-weight: 700; display: grid; place-items: center; }
.token.hid { opacity: .5; }
.token.hid .tlbl::before { content: '🔒 '; }
.token.movable { cursor: grab; }
.token.dragging { z-index: 12; cursor: grabbing; opacity: .85; pointer-events: none; }
.token.dead .face { filter: grayscale(1) brightness(.6); }
.token.dead::after { content: '✕'; position: absolute; inset: 0; display: grid; place-items: center; color: var(--red); font-size: calc(var(--tk) * .8); font-weight: 700; pointer-events: none; }
.token.turn .face { box-shadow: 0 0 0 3px var(--gold2), 0 0 18px 6px rgba(240,198,116,.7); animation: turnpulse 1.6s ease-in-out infinite; }
@keyframes turnpulse { 50% { box-shadow: 0 0 0 3px var(--gold2), 0 0 26px 10px rgba(240,198,116,.4); } }
.token.focus .face { animation: pulse 1s ease-in-out 3; }

/* ── эффекты действий на карте */
#fxl { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 8; }
.fx { position: absolute; transform: translate(-50%, -50%) scale(var(--inv, 1)); pointer-events: none; }
.fx span { display: block; white-space: nowrap; font-weight: 700; font-size: 15px; padding: 2px 8px; border-radius: 6px; background: rgba(19,17,14,.88); border: 1px solid var(--line2); }
.fx-roll span, .fx-damage span, .fx-heal span, .fx-move span { animation: floatup 2.6s ease-out forwards; }
.fx-roll span { color: var(--gold2); border-color: #7a5e2c; }
.fx-roll.crit span { color: #9be27a; border-color: var(--green); }
.fx-roll.fail span { color: #ff8a70; border-color: var(--red); }
.fx-damage span { color: #ff8a70; font-size: 20px; border-color: var(--red); }
.fx-heal span { color: #9be27a; font-size: 20px; border-color: var(--green); }
.fx-move span { font-size: 12px; color: var(--muted); }
@keyframes floatup { 0% { transform: translateY(0); opacity: 0 } 10% { opacity: 1 } 80% { opacity: 1 } 100% { transform: translateY(-46px); opacity: 0 } }
.fx-ping i, .fx-reveal i, .fx-turn i { display: block; width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--gold2); animation: ping 1s ease-out 3; }
.fx-reveal i { border-color: var(--green); } .fx-turn i { border-color: var(--gold); width: 40px; height: 40px; }
.fx-ping span, .fx-reveal span, .fx-turn span { position: absolute; top: 30px; left: 50%; transform: translateX(-50%); font-size: 12px; }
@keyframes ping { from { transform: scale(.4); opacity: 1 } to { transform: scale(3); opacity: 0 } }

/* ── легенда и панель боя на карте */
.legendpanel { position: absolute; right: 12px; bottom: 12px; z-index: 7; width: 230px; max-height: 50%; overflow-y: auto; background: rgba(31,27,22,.95); border: 1px solid var(--line2); border-radius: 10px; padding: 10px; box-shadow: var(--shadow); font-size: 14px; }
.lrow { display: flex; align-items: center; gap: 8px; padding: 3px 4px; border-radius: 6px; cursor: pointer; }
.lrow:hover { background: var(--panel2); }
.lrow.off { opacity: .4; text-decoration: line-through; }
.lic { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; color: #1a140c; font-weight: 700; flex: none; border: 1px solid #14110d; }
.combatpanel { position: absolute; right: 12px; top: 12px; z-index: 7; width: 250px; max-height: 60%; overflow-y: auto; background: rgba(31,27,22,.96); border: 1px solid #7a3527; border-radius: 10px; padding: 8px 10px; box-shadow: var(--shadow); font-size: 14px; }
.combatpanel .cph { cursor: pointer; }
.cprow { display: flex; align-items: center; gap: 8px; padding: 3px 6px; border-radius: 6px; cursor: pointer; border-left: 3px solid transparent; }
.cprow:hover { background: var(--panel2); }
.cprow.cur { background: #2c2416; border-left-color: var(--gold2); }
.cprow.dead { opacity: .45; text-decoration: line-through; }
.cprow .ci { width: 24px; text-align: center; font-weight: 700; color: var(--gold2); }
.cprow.side-enemy .grow { color: #f0a593; } .cprow.side-party .grow { color: #b7d79f; }

/* ── нужды */
.needs .nstats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 8px; }
.nstat { background: var(--bg2); border: 1px solid var(--line); border-left: 3px solid var(--green); border-radius: 8px; padding: 6px 10px; }
.nstat.gold { border-left-color: var(--gold); } .nstat.red { border-left-color: var(--red); }
.nstat small { display: block; color: var(--muted); font-size: 12px; }
.nstat b { font-family: var(--serif); font-size: 20px; }
.nstat input { width: 70px; padding: 2px 6px; }
.nstat .row { gap: 6px; margin-top: 4px; flex-wrap: nowrap; }

/* ── бой */
table.ctable { width: 100%; border-collapse: collapse; font-size: 14px; }
table.ctable th { text-align: left; font-size: 11px; color: var(--muted); text-transform: uppercase; font-weight: 400; padding: 8px; border-bottom: 1px solid var(--line); }
table.ctable td { padding: 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.ctable tr.cur td { background: #2c2416; }
table.ctable tr.cur td:first-child { box-shadow: inset 3px 0 0 var(--gold2); }
table.ctable tr.dead td { opacity: .5; }
table.ctable .ci { font-family: var(--serif); font-size: 22px; font-weight: 700; color: var(--gold2); width: 70px; }
.cav { width: 38px; height: 38px; border-radius: 50%; background: var(--panel2) center/cover; border: 1px solid var(--line2); display: grid; place-items: center; flex: none; font-size: 18px; }
.clog { max-height: 60vh; overflow-y: auto; font-size: 14px; display: flex; flex-direction: column; gap: 4px; }
.combatbanner { border-color: #7a3527; background: linear-gradient(90deg, #2a1712, var(--panel)); color: var(--text); }
.combatbanner:hover { text-decoration: none; border-color: var(--red); }
.pickl { max-height: 320px; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; padding: 4px 10px; margin: 8px 0; background: var(--bg2); }

/* ── группы */
.gmember { display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-top: 1px solid var(--line); }
.grolls { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.gr { background: var(--bg2); border: 1px solid var(--line); border-radius: 6px; padding: 1px 8px; font-size: 14px; }
.gr.ok { border-color: var(--green); } .gr.no { border-color: var(--red); }

/* ── справочник */
.cres .citem { padding: 8px 4px; border-bottom: 1px solid var(--line); }
.cres .citem:last-child { border-bottom: 0; }
.modal .cres { max-height: 55vh; overflow-y: auto; }
table.inv td small { display: block; }

/* ── шапка: время, сессия, куб */
.clockchip { gap: 6px; font-size: 13px; }
.sess { animation: blink 2s infinite; }
.clockbig { display: flex; gap: 18px; align-items: center; background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px; margin: 8px 0 12px; }
.clockbig .t { font-family: var(--serif); font-size: 38px; font-weight: 700; color: var(--gold2); }
.sessbar { border-color: #7a3527; background: #241512; }
.quickdie { display: inline-flex; }
.quickdie .btn:first-child { border-radius: 8px 0 0 8px; }
.quickdie .btn:last-child { border-radius: 0 8px 8px 0; border-left: 0; padding: 4px 7px; }
.dgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.diemenu { padding: 10px; }

/* ── журнал, история, источники, изображения */
.jentry.canon .ic { box-shadow: 0 0 0 1px var(--gold) inset; }
.jact { display: flex; flex-direction: column; gap: 2px; }
.jentry.combat .ic { background: #2a1712; color: #f0a593; }
.jentry.travel .ic, .jentry.time .ic, .jentry.needs .ic { background: #1d2330; color: #a9cbe6; }
.hday { padding: 8px 14px 4px; font-size: 12px; color: var(--faint); text-transform: uppercase; letter-spacing: .08em; border-top: 1px solid var(--line); }
.hrow { display: flex; gap: 10px; align-items: baseline; padding: 6px 14px; font-size: 14px; flex-wrap: wrap; }
.hrow:hover { background: var(--bg2); }
.hrow .ic { width: 20px; text-align: center; }
.hrow .time { color: var(--muted); font-size: 12px; width: 40px; }
.hit { padding: 6px 0; border-bottom: 1px solid var(--line); }
.srctext { max-height: 65vh; overflow-y: auto; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.gimg { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.gimg img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; cursor: zoom-in; background: var(--bg2); }
.gcap { padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.result.ai { border-left-color: var(--violet); }
table.perms tr.pcat td { background: var(--bg2); color: var(--gold2); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; padding-top: 10px; }

/* ── нижняя панель (телефон) */
.bottomnav { display: none; }
.scrim { display: none; }

/* ═════════ Дополнения v3 ═════════ */
.gold-t { color: var(--gold2); }
.fxbox { margin-top: 8px; padding: 8px 10px; border: 1px solid #7a5e2c; border-radius: 8px; background: #221c12; font-size: 13px; }
table.inv tr.magic td:first-child input { border-color: #7a5e2c; }
.bstep { border-top: 1px solid var(--line); padding: 10px 0 4px; }
.bstep:first-child { border-top: 0; }
.bstep h4 { color: var(--gold2); margin-bottom: 6px; }
.chip.fixed { opacity: .7; cursor: default; }
.abtable td, .abtable th { text-align: center; padding: 4px; }
.abtable select, .abtable input { width: 64px; padding: 3px 4px; }
/* риск */
.risk { border-radius: 8px; padding: 6px 10px; margin: 6px 0; font-size: 13px; border: 1px solid var(--line); border-left-width: 4px; }
.risk ul { margin: 4px 0 0; padding-left: 18px; color: var(--muted); }
.risk.lvl1 { border-left-color: var(--green); } .risk.lvl2 { border-left-color: #a6c35f; } .risk.lvl3 { border-left-color: var(--gold); }
.risk.lvl4 { border-left-color: #e07b3d; background: #2a1a10; } .risk.lvl5 { border-left-color: var(--red); background: #2c1410; }
/* ходы и приказы */
.turnbar { background: #1d2330; border-bottom-color: #3c5c78; }
.ordlist { display: grid; grid-template-columns: 1fr; gap: 2px; margin: 6px 0; }
.ordlist .btn { justify-content: flex-start; }
.token .tord, .token .tplan { position: absolute; top: -6px; left: -6px; min-width: 18px; height: 18px; border-radius: 9px; background: #1d2330; border: 1px solid var(--blue); font-size: 11px; display: grid; place-items: center; color: #a9cbe6; }
.token .tplan { left: auto; right: -6px; top: auto; bottom: 4px; border-color: var(--gold); color: var(--gold2); }
.mapsvg .planline { stroke: var(--gold2); stroke-width: calc(2.5px * var(--inv,1)); stroke-dasharray: calc(8px * var(--inv,1)) calc(5px * var(--inv,1)); }
.mapsvg .planend { fill: rgba(240,198,116,.18); stroke: var(--gold2); stroke-width: calc(2px * var(--inv,1)); stroke-dasharray: calc(4px * var(--inv,1)); }
.mapsvg .patrolline { fill: none; stroke: #6b9bc3; stroke-width: calc(2px * var(--inv,1)); stroke-dasharray: calc(3px * var(--inv,1)) calc(6px * var(--inv,1)); }
.marker.droptarget2 .pin { transform: scale(1.2); filter: drop-shadow(0 0 6px var(--gold2)); }
.pickbanner { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); z-index: 9; background: rgba(29,35,48,.97); border: 1px solid var(--blue); border-radius: 10px; padding: 6px 12px; display: flex; gap: 8px; align-items: center; box-shadow: var(--shadow); }
.scalebar { position: absolute; left: 64px; bottom: 14px; z-index: 6; font-size: 12px; color: var(--text); background: rgba(19,17,14,.8); padding: 3px 8px; border-radius: 6px; display: flex; align-items: center; gap: 8px; pointer-events: none; }
.scalebar i { display: block; height: 6px; border: 2px solid var(--text); border-top: 0; }
/* загадки */
.puzzleq { font-size: 17px; border-left: 3px solid var(--violet); }
.phint { border-top: 1px solid var(--line); padding: 6px 0; display: flex; flex-direction: column; gap: 4px; }
.phint.on { color: var(--gold2); }
.pdraft { border-color: var(--violet); }
/* чат */
.chatwrap { display: grid; grid-template-columns: 220px 1fr; gap: 12px; height: calc(100vh - 54px - 70px); min-height: 420px; }
.chans { overflow-y: auto; }
.chan { padding: 7px 10px; border-radius: 8px; cursor: pointer; display: flex; gap: 6px; align-items: center; }
.chan:hover { background: var(--panel); } .chan.on { background: var(--panel2); color: var(--gold2); }
.chatmain { display: flex; flex-direction: column; min-height: 0; padding: 12px; }
.chatmain.drop { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold) inset; }
.cmsgs { flex: 1; overflow-y: auto; padding: 8px 2px; display: flex; flex-direction: column; gap: 2px; }
.cmsg { position: relative; padding: 4px 34px 4px 8px; border-radius: 8px; }
.cmsg:not(.cont) { margin-top: 8px; }
.cmsg:hover { background: var(--bg2); }
.cmsg.mine .cmeta b { color: var(--gold2); }
.cmsg .cdel { position: absolute; right: 2px; top: 2px; opacity: 0; }
.cmsg:hover .cdel { opacity: 1; }
.ctext p { margin: 0; }
.cfiles { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.cimg { max-width: 260px; max-height: 220px; border-radius: 8px; cursor: zoom-in; border: 1px solid var(--line); }
.cvid { max-width: 360px; max-height: 260px; border-radius: 8px; background: #000; }
.cfile { display: inline-flex; gap: 6px; align-items: center; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg2); }
.cform { display: flex; gap: 8px; align-items: flex-end; margin-top: 8px; }
.cform textarea { min-height: 40px; max-height: 160px; resize: none; }
.cpend { display: flex; flex-wrap: wrap; gap: 6px; }
.cp { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; padding: 3px 8px; background: var(--bg2); border: 1px solid var(--line); border-radius: 8px; }
.cp img { width: 28px; height: 28px; object-fit: cover; border-radius: 4px; }
.bn-badge { position: absolute; margin: -6px 0 0 -2px; background: var(--red); color: #fff; font-size: 10px; border-radius: 8px; padding: 0 5px; font-style: normal; }
/* диагностика */
.errrow { border-top: 1px solid var(--line); padding: 6px 0; font-size: 14px; }
.errrow summary { cursor: pointer; }
pre.stack { white-space: pre-wrap; font-size: 12px; background: var(--bg2); padding: 8px; border-radius: 6px; max-height: 260px; overflow: auto; color: var(--muted); }
.aisel { width: auto; max-width: 260px; padding: 4px 8px; font-size: 13px; }

@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; left: 0; top: 54px; bottom: 0; width: 260px; z-index: var(--z-drawer); transform: translateX(-100%); transition: transform .2s; height: auto; background: var(--bg); box-shadow: var(--shadow); }
  .sidebar.open { transform: none; }
  .scrim.on { display: block; position: fixed; inset: 54px 0 0 0; background: rgba(0,0,0,.5); z-index: var(--z-scrim); }
  .menu-toggle { display: inline-flex; }
  .main { padding: 16px 14px 70px; }
  .sheet, .overview { grid-template-columns: 1fr; }
  .mapwrap { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .maplist { max-height: 110px; border-right: 0; border-bottom: 1px solid var(--line); }
  .dicepad { grid-template-columns: repeat(4, 1fr); }
  .grid2, .grid3 { grid-template-columns: 1fr; }
  .ehead { flex-direction: column; }
  .msg { max-width: 92%; }
  .hide-sm { display: none !important; }
  .show-sm { display: flex !important; }
}
@media (max-width: 700px) {
  body.in-world .topbar { padding: 0 8px; gap: 6px; }
  .hide-xs, body.in-world .topbar .world-name, body.in-world .topbar .sep { display: none !important; }
  .topbar .world-name { font-size: 16px; max-width: 34vw; }
  .bottomnav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-bottomnav); height: 58px; background: rgba(19,17,14,.97); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
  .bottomnav a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--muted); font-size: 18px; text-decoration: none; gap: 1px; }
  .bottomnav a small { font-size: 10px; }
  .bottomnav a.on { color: var(--gold2); }
  .bottomnav a.live span { color: var(--red); animation: blink 1.5s infinite; }
  .main { padding-bottom: 80px; }
  .main.full { padding-bottom: 58px; }
  .mapwrap { height: calc(100vh - 54px - 58px); height: calc(100dvh - 54px - 58px); }
  .maplist { max-height: 64px; padding: 6px 10px; display: flex; gap: 6px; overflow-x: auto; }
  .maplist > .row:first-child { margin: 0 !important; flex: none; }
  .maplist .mi { white-space: nowrap; padding: 4px 8px !important; }
  .maptools { padding: 6px 8px; gap: 6px; flex-wrap: nowrap; overflow-x: auto; }
  .maptools .crumbs { font-size: 15px; flex-wrap: nowrap; white-space: nowrap; }
  .maptools .grow { display: none; }
  .chips.tools { flex-wrap: nowrap; }
  .chips.tools .chip { padding: 6px 11px; font-size: 15px; }
  .legendpanel { width: auto; left: 8px; right: 8px; bottom: 8px; max-height: 40%; }
  .combatpanel { width: auto; left: 8px; right: 8px; top: 8px; max-height: 38%; }
  .zoomctl { bottom: auto; top: 50%; transform: translateY(-50%); left: 8px; }
  .popover { width: calc(100% - 16px) !important; left: 8px !important; }
  .modal-back { padding: 0; place-items: end stretch; }
  .modal, .modal.wide { width: 100%; max-height: 92vh; border-radius: 14px 14px 0 0; }
  .page-head h1 { font-size: 27px; }
  .cards { grid-template-columns: 1fr; }
  .dicepad { gap: 6px; }
  #toasts { left: 12px; right: 12px; bottom: 70px; max-width: none; }
  .btn { min-height: 34px; }
  .btn.sm { min-height: 30px; }
  table.ctable { font-size: 13px; }
  table.ctable th:nth-child(3), table.ctable td:nth-child(3) { display: none; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .chatwrap { grid-template-columns: 1fr; height: calc(100dvh - 54px - 58px - 30px); }
  .chans { display: flex; gap: 4px; overflow-x: auto; max-height: 48px; }
  .chans .group { display: none; }
  .chan { white-space: nowrap; }
  .cimg, .cvid { max-width: 100%; }
  .scalebar { left: auto; right: 8px; bottom: 8px; }
  .quickdie .btn:first-child { padding: 4px 8px; }
}

/* ───────── v4: уровни, особенности, заклинания, бой, торговля, репутация, клавиши */
.green-t { color: #9be27a; }
.lvlbar { margin-top: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg2); }
.xpbar { height: 6px; border-radius: 4px; background: #2b251d; margin-top: 6px; overflow: hidden; }
.xpbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold2)); }
.tgroup { margin: 6px 0 4px; }
.tgroup > .badge { margin-bottom: 4px; }
.trait { border-bottom: 1px dashed var(--line); padding: 3px 0; }
.trait summary { cursor: pointer; list-style: none; }
.trait summary::-webkit-details-marker { display: none; }
.trait.off { opacity: .45; }
.res { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin: 2px 0 6px 10px; }
.pip { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--gold); margin: 0 1px; vertical-align: middle; }
.pip.on { background: var(--gold); }
[data-slot] { cursor: pointer; }
.slots2 { display: flex; flex-wrap: wrap; gap: 6px; }
.slots2 .sl { background: var(--bg2); border: 1px solid var(--line); border-radius: 8px; padding: 3px 8px; font-size: 13px; }
.slots2 .sl.pact { border-color: var(--violet); }
table.spells td { vertical-align: top; padding: 4px 6px; }
.sprow { display: flex; gap: 8px; align-items: flex-start; padding: 6px 4px; border-bottom: 1px solid var(--line); }
.sprow.have { opacity: .6; } .sprow.high { opacity: .55; }
.sprow2 { align-items: flex-start !important; }
.abgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 6px 0 10px; }
.abup { display: flex; flex-direction: column; gap: 2px; margin: 0; font-size: 13px; }
ul.tight { margin: 4px 0; padding-left: 18px; }
.econ .chip { cursor: pointer; font-size: 12px; padding: 2px 8px; }
.econ .chip.used { opacity: .5; text-decoration: line-through; }
.actbar { border-color: var(--gold); background: #231d13; }
.death { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.ds { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--muted); margin-right: 2px; }
.ds.ok { background: var(--green); border-color: var(--green); } .ds.bad { background: var(--red); border-color: var(--red); }
.tag.gold { border-color: #7a5e2c; color: var(--gold2); }
.moverange { fill: rgba(121,163,95,.08); stroke: #79a35f; stroke-width: calc(2px * var(--inv, 1)); stroke-dasharray: 8 6; pointer-events: none; }
.movetxt { fill: #c5e3b1; text-anchor: middle; paint-order: stroke; stroke: #13110e; stroke-width: 3px; font-weight: 700; pointer-events: none; }
.dvring { fill: none; stroke: rgba(160,124,197,.65); stroke-width: 2px; stroke-dasharray: 3 7; pointer-events: none; }
.areaprev { fill: rgba(200,85,61,.18); stroke: #ff8a70; stroke-width: 2px; pointer-events: none; }
.areafx { fill: rgba(240,198,116,.25); stroke: var(--gold2); stroke-width: 3px; pointer-events: none; animation: fadeout 2.5s ease-out forwards; }
.atkline { stroke: #a79a84; stroke-width: 3px; stroke-dasharray: 10 6; pointer-events: none; animation: fadeout 2.2s ease-out forwards; }
.atkline.hit { stroke: #ff8a70; stroke-width: 4px; }
.spellline { stroke: var(--violet); stroke-width: 4px; pointer-events: none; animation: fadeout 2.2s ease-out forwards; }
@keyframes fadeout { 0% { opacity: 1; } 70% { opacity: .9; } 100% { opacity: 0; } }
.cact .btn { flex: 1 1 auto; }
.lvltable td { vertical-align: top; }
.ft { display: inline-block; padding: 1px 6px; margin: 1px 2px; border-radius: 6px; background: var(--panel2); border: 1px solid var(--line); font-size: 13px; cursor: help; }
.ft.sub { border-color: var(--violet); color: #cdb4ea; }
.fdesc { padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
table.shop td { vertical-align: middle; }
.trade.done { opacity: .75; } .trade.declined, .trade.cancelled { opacity: .5; }
.reprow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--line); }
.repbar { position: relative; width: 120px; height: 8px; border-radius: 4px; background: #2b251d; flex: none; }
.repbar::after { content: ''; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--line2); }
.repbar i { position: absolute; top: 0; bottom: 0; border-radius: 4px; }
.repbar i.pos { background: var(--green); } .repbar i.neg { background: var(--red); }
.logrow, .audrow { padding: 4px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
kbd { display: inline-block; min-width: 26px; padding: 1px 7px; border: 1px solid var(--line2); border-bottom-width: 3px; border-radius: 6px; background: var(--panel2); font: 600 13px/1.5 var(--sans); text-align: center; }
kbd.conflict { border-color: var(--red); color: #ff8a70; }
.hkrow { padding: 4px 0; border-bottom: 1px solid var(--line); }
@media (max-width: 760px) {
  .abgrid { grid-template-columns: repeat(2, 1fr); }
  .repbar { width: 70px; }
  .actbar .row .btn { flex: 1 1 40%; }
}

/* ───────── v5: светлая тема */
:root[data-theme=light] {
  --bg: #f4ecdc; --bg2: #fbf6ec; --panel: #fffaf1; --panel2: #f1e7d3; --line: #dccdb0; --line2: #c7b28c;
  --text: #2a2117; --muted: #66563f; --faint: #716349; --gold: #a8741c; --gold2: #8a5a0d; --red: #b4442c; --green: #4f7a35; --blue: #3d6f99; --violet: #7650a0;
  --shadow: 0 8px 24px rgba(80,60,30,.18);
  color-scheme: light;
}
[data-theme=light] body { background-image: radial-gradient(ellipse at 20% -10%, rgba(212,162,76,.18), transparent 55%); }
[data-theme=light] .btn:hover { background: #ead9b8; }
[data-theme=light] .btn.danger { color: #a33a22; border-color: #d39a8a; } [data-theme=light] .btn.danger:hover { background: #f6dcd3; }
[data-theme=light] .chip.on, [data-theme=light] .cprow.cur, [data-theme=light] table.ctable tr.cur td, [data-theme=light] .msg.user, [data-theme=light] .jentry.roll .ic { background: #f3e2bf; }
[data-theme=light] .jentry.reveal .ic, [data-theme=light] .jentry.quest .ic { background: #e2efd8; color: #3b6625; }
[data-theme=light] .jentry.session .ic { background: #ece2f6; color: #5d3d86; }
[data-theme=light] .jentry.combat .ic, [data-theme=light] .sessbar { background: #f7dcd3; color: #8c3320; }
[data-theme=light] .jentry.travel .ic, [data-theme=light] .jentry.time .ic, [data-theme=light] .jentry.needs .ic, [data-theme=light] .turnbar { background: #dde8f3; color: #2f5a80; }
[data-theme=light] .combatbanner { background: linear-gradient(90deg, #f7dcd3, var(--panel)); }
[data-theme=light] .xpbar, [data-theme=light] .repbar, [data-theme=light] .hpbar { background: #e3d6bb; }
[data-theme=light] .fxbox, [data-theme=light] .actbar { background: #fbefd6; }
[data-theme=light] .red-t { color: #a33a22; } [data-theme=light] .green-t { color: #3f6b28; } [data-theme=light] .gold-t { color: #8a5a0d; }
[data-theme=light] .risk.lvl4 { background: #f8e3cf; }
[data-theme=light] .badge.red { color: #8c3320; } [data-theme=light] .badge.green { color: #3b6625; } [data-theme=light] .badge.gold { color: #7d5209; } [data-theme=light] .badge.blue { color: #2f5a80; } [data-theme=light] .badge.violet { color: #5d3d86; }
[data-theme=light] .viewport { background: #d9ccb0; }

/* ───────── размер текста (кроме самой карты) */
.sidebar, main:not(.full), .modal, #toasts, .bottomnav { zoom: var(--fs, 1); }

/* ───────── общий поиск */
.gsearch { position: relative; width: min(320px, 30vw); }
.gsearch input { padding: 5px 10px; font-size: 14px; }
.gsres { position: absolute; top: calc(100% + 6px); left: 0; width: min(460px, 90vw); max-height: 70vh; overflow: auto; background: var(--panel); border: 1px solid var(--line2); border-radius: 10px; box-shadow: var(--shadow); z-index: 150; }
.gsr { display: flex; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--line); cursor: pointer; font-size: 14px; }
.gsr.on, .gsr:hover { background: var(--panel2); }
.gsr .gi { width: 22px; text-align: center; font-size: 17px; }

/* ───────── меню */
.nav .gtoggle { cursor: pointer; user-select: none; display: flex; justify-content: space-between; }
.nav .gtoggle:hover { color: var(--gold2); }
.nav a[data-hiddensec] { opacity: .5; }
.menucfg .mc { padding: 6px 0; border-bottom: 1px solid var(--line); }

/* ───────── обзор: первые шаги и «мой персонаж» */
.onboard { border-color: var(--gold); }
.obsteps { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.obstep { display: flex; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; color: inherit; text-decoration: none; }
a.obstep:hover { border-color: var(--gold); }
.obstep.ok { opacity: .55; }
.obmark { font-size: 18px; color: var(--gold2); }
.alert { display: block; padding: 10px 14px; border: 1px solid var(--line2); border-radius: 10px; background: var(--panel); color: inherit; text-decoration: none; }
.alert.red { border-color: var(--red); background: rgba(200,85,61,.15); animation: turnpulse 1.6s ease-in-out infinite; }
.mychar { border-color: var(--line2); }
.statgrid.compact a { padding: 8px 10px; } .statgrid.compact b { font-size: 20px; }

/* ───────── приглашения, QR */
.invrow { padding: 6px 0; border-bottom: 1px solid var(--line); gap: 8px; }
.invlink { font-size: 12px; word-break: break-all; }
.qrbox { display: inline-block; padding: 8px; background: #fff; border-radius: 10px; }
.qrbox svg { display: block; max-width: 70vw; height: auto; }
.permcards { display: none; }
.pcard summary { cursor: pointer; padding: 4px 0; }
.pcat2 { margin-top: 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.pcheck { padding: 6px 0; }

/* ───────── бой: досягаемость, таймер */
.token.inreach .face { box-shadow: 0 0 0 3px #ff6a4d, 0 0 14px 4px rgba(255,106,77,.6); }
.token.inrange .face { outline: 2px dashed #e0a43d; outline-offset: 3px; }
.token:not(.fixed) { width: max(var(--tk), calc(26px * var(--inv, 1))); height: max(var(--tk), calc(26px * var(--inv, 1))); }
@media (pointer: coarse) { .token:not(.fixed) { width: max(var(--tk), calc(34px * var(--inv, 1))); height: max(var(--tk), calc(34px * var(--inv, 1))); } }
.ctimer { display: inline-block; padding: 1px 8px; border-radius: 10px; background: var(--panel2); border: 1px solid var(--line2); font-weight: 700; font-variant-numeric: tabular-nums; }
.ctimer.low { border-color: var(--red); color: #ff8a70; animation: turnpulse 1s ease-in-out infinite; }
.mcrow { margin-bottom: 8px; gap: 8px; }

/* ───────── печать листа */
.printpage { max-width: 1000px; margin: 0 auto; padding: 20px; }
.printpage .ph { display: flex; justify-content: space-between; border-bottom: 2px solid var(--gold); padding-bottom: 8px; margin-bottom: 12px; }
.printpage h1 { margin: 0; } .printpage h3 { font-size: 15px; margin: 4px 0 6px; text-transform: uppercase; letter-spacing: .06em; }
.pmeta { text-align: right; font-size: 13px; color: var(--muted); }
.pbox { border: 1px solid var(--line2); border-radius: 8px; padding: 8px 12px; margin-bottom: 10px; break-inside: avoid; }
.pgrid3 { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 10px; } .pgrid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pabil { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 8px; }
.pabil div { border: 1px solid var(--line2); border-radius: 8px; text-align: center; padding: 4px; } .pabil b { display: block; font-size: 20px; } .pabil small { font-size: 10px; text-transform: uppercase; }
.pstats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 8px; } .pstats div { border: 1px solid var(--line2); border-radius: 8px; text-align: center; padding: 4px; } .pstats b { display: block; font-size: 18px; } .pstats small { font-size: 10px; }
.pl { font-size: 13px; line-height: 1.5; } .pl b { float: right; } .pt { font-size: 13px; margin-bottom: 4px; }
.ptable { width: 100%; border-collapse: collapse; font-size: 13px; } .ptable td, .ptable th { border-bottom: 1px solid var(--line); padding: 3px 6px; text-align: left; vertical-align: top; }
.pfoot { text-align: center; font-size: 11px; color: var(--faint); margin-top: 10px; }
@media print {
  :root { --bg: #fff; --bg2: #fff; --panel: #fff; --panel2: #fff; --line: #bbb; --line2: #888; --text: #000; --muted: #444; --faint: #666; --gold: #000; --gold2: #000; }
  body { background: #fff !important; color: #000; } .noprint, #toasts { display: none !important; }
  .printpage { padding: 0; max-width: none; } .pbox { border-color: #888; }
}
@media (max-width: 760px) { .pgrid3, .pgrid2 { grid-template-columns: 1fr; } }

/* ───────── телефон: крупнее кнопки и галочки, права — карточками */
@media (max-width: 760px) {
  .btn.sm { min-height: 36px; padding: 6px 12px; }
  .btn.icon, .btn.sm.ghost { min-width: 36px; min-height: 36px; }
  input[type=checkbox], input[type=radio] { width: 22px; height: 22px; }
  .check { min-height: 32px; }
  .perm-scroll.ptbl { display: none; }
  .permcards { display: block; }
  .gsearch { width: auto; flex: 1; }
}
.show-xs { display: none !important; }
@media (max-width: 700px) { .show-xs { display: inline-flex !important; } }
.gsres.static { position: static; width: 100%; box-shadow: none; margin-top: 8px; max-height: 60vh; }
/* светлая тема: на карте оставляем тёмные подписи и панели (поверх любой картинки так читается лучше) */
[data-theme=light] .viewport { --bg: #13110e; --bg2: #191612; --panel: #1f1b16; --panel2: #27221b; --line: #3a3127; --line2: #4e4235; --text: #ece2cf; --muted: #a79a84; --faint: #998c75; --gold: #d4a24c; --gold2: #f0c674; color: var(--text); }
[data-theme=light] .topbar { background: rgba(251,246,236,.94); }
[data-theme=light] .bottomnav { background: rgba(251,246,236,.97); }
[data-theme=light] .maptools .chip, [data-theme=light] .zoomctl .btn { color: var(--text); }
.printpage { --bg: #fff; --bg2: #fff; --panel: #fff; --panel2: #f3efe6; --line: #cfc6b4; --line2: #9c8f76; --text: #1d1812; --muted: #5a4f3f; --faint: #6f6352; --gold: #a8741c; --gold2: #8a5a0d;
  background: #fff; color: var(--text); border-radius: 12px; margin: 16px auto; box-shadow: 0 8px 30px rgba(0,0,0,.4); }
.printpage .btn { color: var(--text); }
[data-theme=light] .viewport .cprow.cur, [data-theme=light] .viewport .chip.on { background: #2c2416; }
select { max-width: 100%; }

/* ── доступность (v5.2) */
/* видимый фокус при работе с клавиатуры (мышью — без рамки) */
:focus-visible { outline: 2px solid var(--gold2); outline-offset: 2px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--gold2); outline-offset: 0; border-color: var(--gold); }
.btn:focus-visible, .chip:focus-visible, .nav a:focus-visible { outline: 2px solid var(--gold2); outline-offset: 2px; }
/* галочки и переключатели — не меньше 18 px, с запасом области нажатия */
input[type=checkbox], input[type=radio] { width: 18px; height: 18px; min-width: 18px; accent-color: var(--gold); cursor: pointer; }
td.c input[type=checkbox] { margin: 3px; }
.btn.sm { min-height: 28px; }
.btn.icon { min-width: 32px; min-height: 32px; }
@media (pointer: coarse) {
  .btn.sm { min-height: 36px; } .btn.icon { min-width: 40px; min-height: 40px; }
  input[type=checkbox], input[type=radio] { width: 22px; height: 22px; min-width: 22px; }
}
/* пользователям, которые отключили анимацию в системе, — без движения */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
/* длинные названия и подписи не раздвигают страницу на телефоне */
.badge { max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.grow, .ecard > * { min-width: 0; }
h1, h2, h3, .ecard .t { overflow-wrap: anywhere; }
.btn.sm { min-width: 28px; }
.ehead > .grow { flex: 1 1 auto; max-width: 100%; }
@media (max-width: 760px) { .ehead > .grow { align-self: stretch; } }
.ecard { min-width: 0; max-width: 100%; overflow: hidden; }