:root {
  --cmd-h: 96px; /* высота нижней панели: от неё отсчитываются остальные */
  --bg: #16151f;
  --panel: rgba(22, 21, 32, 0.88);
  --line: rgba(220, 215, 240, 0.12);
  --text: #e6e3ee;
  --muted: #9a96ab;
  --accent: #f0b25c;
  --danger: #e06a5a;
  --cold: #9fb4e8;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--text); font: 14px/1.45 'PT Sans', system-ui, sans-serif; }
#view { position: fixed; inset: 0; }
#view canvas { display: block; filter: saturate(0.82) contrast(1.06); }
#vignette { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 55%, rgba(10, 8, 20, 0.55) 100%); transition: background 0.8s; }
/* герой внутри: улица уходит в темноту, видна только комната */
body.inside #vignette { background: radial-gradient(ellipse at center, transparent 45%, rgba(8, 6, 14, 0.7) 100%); }
#grain { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0.07; mix-blend-mode: overlay; }

.panel { position: fixed; background: var(--panel); /* без backdrop-filter: размытие пересчитывалось каждый кадр под всеми панелями */ border: 1px solid var(--line); border-radius: 10px; }
.muted { color: var(--muted); }
.section-title { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 12px 0 6px; }

#top { position: fixed; top: 8px; left: 12px; z-index: 15; display: flex; gap: 14px; align-items: baseline; text-shadow: 0 1px 6px rgba(0,0,0,.6);
  /* своя тёмная плашка: на светлом снегу шапка не сливается с картой (v1.2.1) */
  background: rgba(14, 12, 22, 0.8); border: 1px solid var(--line); border-radius: 10px; padding: 3px 12px 4px; }
#top button.ghost { background: rgba(255, 255, 255, 0.07); color: var(--text); border-color: rgba(255, 255, 255, 0.24); text-shadow: none; }
#top button.ghost:hover { background: rgba(255, 255, 255, 0.15); }
#top #narr, #top #net { color: #c9c3d8; }
.brand { font: 700 22px 'PT Serif', serif; letter-spacing: 0.3em; }
.brand #ver { font: 400 11px 'PT Sans', sans-serif; letter-spacing: 0.04em; color: var(--muted); vertical-align: 3px; }
#clock { font-size: 15px; }
/* сезон в шапке (v1.7.0): кнопка «Сезон N · до весны X дн.» и окошко под ней */
.season-wrap { position: relative; }
#season-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 12; width: 320px; background: #1d1b29; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 1.4; text-shadow: none; }
#narr { font-size: 12px; max-width: 360px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

#left { top: 52px; left: 16px; width: 300px; bottom: calc(var(--cmd-h) + 28px); overflow: auto; padding: 12px 14px; }
#right { top: 16px; right: 16px; width: 380px; bottom: calc(var(--cmd-h) + 28px); display: flex; flex-direction: column; padding: 0 14px 10px; }
#chron { flex: 1; overflow: auto; padding-right: 4px; font-family: 'PT Serif', serif; font-size: 14px; }
#chron .e { padding: 5px 0; border-bottom: 1px solid var(--line); }
#chron .t { color: var(--muted); font: 11px 'PT Sans', sans-serif; margin-right: 6px; }
#chron .narration { font-style: italic; color: #f1e6cf; }
#chron .thought { color: #cfd7ff; }
#chron .dialogue { color: #e9e6f2; }
#chron .danger, #chron .death { color: var(--danger); }
#chron .combat { color: #f0a58a; }
#chron .event, #chron .meet { color: var(--accent); }
#chron .weather { color: var(--cold); }
#chron .system, #chron .action { color: #bdb9cb; }
#chron .player, #chron .whisper { color: #b9e3c6; }
#chron .diary { color: #efe2c8; background: rgba(240, 178, 92, 0.06); padding: 8px; border-radius: 6px; margin: 4px 0; }
#chron .day { text-align: center; color: var(--muted); letter-spacing: 0.2em; border: 0; padding: 10px 0; }
#chron b { font-family: 'PT Sans', sans-serif; }

#hero .name { font: 700 18px 'PT Serif', serif; }
#hero .sub { color: var(--muted); font-size: 12px; margin-bottom: 8px; }
#hero .act { color: var(--accent); margin: 6px 0; }
#hero .thought { font: italic 13px 'PT Serif', serif; color: #cfd7ff; margin: 8px 0; }
.bar { display: grid; grid-template-columns: 70px 1fr 28px; gap: 6px; align-items: center; font-size: 12px; margin: 3px 0; }
.bar .track { height: 6px; background: rgba(255,255,255,0.08); border-radius: 3px; overflow: hidden; }
.bar .fill { height: 100%; border-radius: 3px; transition: width .6s; }
.inv { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; color: #cfcbe0; margin-top: 8px; }
.tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
.tag { font-size: 11px; padding: 1px 7px; border-radius: 9px; background: rgba(255,255,255,0.08); }

#roster .r { display: flex; gap: 8px; align-items: center; padding: 5px 6px; border-radius: 6px; cursor: pointer; }
#roster .r:hover, #roster .r.sel { background: rgba(255,255,255,0.07); }
#roster .dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
#roster .dead { opacity: 0.45; text-decoration: line-through; }
#roster .ra { color: var(--muted); font-size: 12px; margin-left: auto; text-align: right; }

/* нижняя панель во всю ширину: слева запасы, в центре поле, справа состояние героя */
#cmd { left: 16px; right: 16px; bottom: 14px; min-height: var(--cmd-h); padding: 10px 12px; display: grid; grid-template-columns: minmax(170px, 250px) minmax(0, 1fr) minmax(200px, 270px); gap: 14px; align-items: center; }
.cmd-main { min-width: 0; }
#res-bar { display: grid; grid-template-columns: repeat(3, auto); gap: 4px 12px; align-content: center; justify-content: start; font-size: 13px; }
#res-bar .rs { display: inline-flex; align-items: center; gap: 5px; color: #d9d5e6; cursor: default; white-space: nowrap; }
#res-bar .rs.zero { color: var(--muted); opacity: .55; }
#res-bar .inv-open { grid-column: 1 / -1; justify-self: start; margin-top: 2px; }
#needs-bar { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
#needs-bar .nd { display: grid; grid-template-columns: 16px 1fr 26px; gap: 6px; align-items: center; }
#needs-bar .nd .track { height: 6px; background: rgba(255,255,255,0.08); border-radius: 3px; overflow: hidden; }
#needs-bar .nd .fill { height: 100%; border-radius: 3px; transition: width .6s; }
#needs-bar .nd .v { text-align: right; color: #cfcbe0; font-variant-numeric: tabular-nums; }
#needs-bar .nd.low .v { color: var(--danger); }
.ico { width: 15px; height: 15px; flex: none; display: inline-block; vertical-align: -2px; }
.ico svg { width: 100%; height: 100%; display: block; }
.tabs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.tabs button { background: transparent; color: var(--muted); border: 1px solid var(--line); }
.tabs button.active { color: var(--text); border-color: var(--accent); }
#cmd-target { margin-left: auto; font-size: 12px; }
#cmd-form { display: flex; gap: 8px; }
#cmd-text { flex: 1; min-width: 0; }
#plan-when { display: inline-flex; gap: 6px; flex: none; }
#plan-when.hidden { display: none; }
#plan-day { width: auto; padding: 8px 6px; }
#plan-time { width: 96px; padding: 8px 6px; color-scheme: dark; }
#plan-list { list-style: none; margin: 0 0 8px; padding: 0; max-height: 110px; overflow: auto; font-size: 13px; }
#plan-list li { display: flex; gap: 8px; align-items: baseline; padding: 3px 0; border-bottom: 1px dashed var(--line); }
#plan-list .when { color: var(--accent); white-space: nowrap; font-variant-numeric: tabular-nums; }
#plan-list .txt { flex: 1; min-width: 0; }
#plan-list .left { color: var(--muted); font-size: 12px; white-space: nowrap; }
#plan-list button { background: transparent; border: none; color: var(--muted); padding: 0 4px; cursor: pointer; }
#plan-list button:hover { color: #e06a5a; }

input, select, textarea { width: 100%; background: rgba(0,0,0,0.3); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; font: inherit; }
textarea { resize: vertical; }
button { background: var(--accent); color: #1b1610; border: 0; border-radius: 6px; padding: 7px 14px; font: 700 13px 'PT Sans', sans-serif; cursor: pointer; }
button.ghost { background: transparent; color: var(--muted); border: 1px solid var(--line); }
button:disabled { opacity: .5; cursor: default; }

#toast { position: fixed; left: 50%; bottom: calc(var(--cmd-h) + 34px); transform: translateX(-50%); background: rgba(0,0,0,.75); padding: 8px 14px; border-radius: 6px; opacity: 0; transition: opacity .3s; pointer-events: none; }
#toast.show { opacity: 1; }

.modal { position: fixed; inset: 0; background: rgba(8, 7, 14, 0.6); display: grid; place-items: center; z-index: 10; }
.hidden { display: none !important; }
#gate { z-index: 30; background: rgba(8, 7, 14, 0.92); }
#gate .card { width: min(380px, calc(100% - 32px)); }
#gate .warn { color: #e06a5a; margin-top: 4px; }
#gate button { margin-top: 12px; width: 100%; }
.card { width: min(560px, calc(100% - 32px)); max-height: calc(100% - 32px); overflow: auto; background: #1d1b29; border: 1px solid var(--line); border-radius: 12px; padding: 20px 22px; }
.card h2 { font: 700 22px 'PT Serif', serif; margin: 0 0 12px; }
.card label { display: block; margin: 8px 0; font-size: 12px; color: var(--muted); }
.card label input, .card label select, .card label textarea { margin-top: 4px; color: var(--text); font-size: 14px; }
.card .label { font-size: 12px; color: var(--muted); margin: 12px 0 6px; }
.row { display: flex; gap: 10px; }
.row label { flex: 1; }
.row label.narrow { flex: 0 0 90px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { padding: 4px 10px; border-radius: 14px; border: 1px solid var(--line); cursor: pointer; font-size: 13px; user-select: none; }
.chip.on { border-color: var(--accent); background: rgba(240, 178, 92, 0.15); }
.swatch { width: 26px; height: 26px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; }
.swatch.on { border-color: #fff; }
.skill { display: grid; grid-template-columns: 110px 28px 30px 28px 1fr; align-items: center; gap: 6px; margin: 4px 0; font-size: 13px; }
.skill button { padding: 2px 0; background: rgba(255,255,255,0.1); color: var(--text); }
.skill .v { text-align: center; font-weight: 700; }
.skill .pips { color: var(--accent); letter-spacing: 2px; }
.actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

button.small { padding: 3px 10px; font-size: 12px; font-weight: 400; }
body.clean #left, body.clean #right { display: none; }

#minimap-wrap { display: none; }
#minimap { width: 100%; height: 100%; display: block; }
#tip { position: fixed; z-index: 5; pointer-events: none; display: flex; flex-direction: column; gap: 2px; max-width: 250px; padding: 7px 10px; font-size: 12px; background: rgba(15,13,25,.85); border: 1px solid var(--line); border-radius: 7px; }
/* постройки базы */
.structs { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; }
.structs .st { font-size: 11px; padding: 2px 7px; border-radius: 9px; background: rgba(255,255,255,0.04); color: var(--muted); border: 1px solid transparent; }
.structs .st.on { color: var(--text); background: rgba(240,178,92,0.14); }
.structs .st.plan { border-color: rgba(240,178,92,0.6); }
.structs .pips { color: var(--accent); margin-left: 4px; letter-spacing: 1px; }
#tip b { font: 700 13px 'PT Serif', serif; }

@media (max-width: 1100px) {
  :root { --cmd-h: 150px; }
  #cmd { grid-template-columns: 1fr 1fr; }
  #cmd .cmd-main { grid-column: 1 / -1; grid-row: 1; }
  #right { top: auto; height: 24%; left: auto; right: 16px; width: min(420px, calc(100% - 32px)); }
  #left { width: 250px; }
}

/* редактор героя */
#creator .card { width: min(760px, calc(100% - 32px)); }
.look { display: flex; gap: 16px; align-items: flex-start; }
#preview { flex: none; border-radius: 10px; background: radial-gradient(ellipse at 50% 40%, #3a3750, #1a1826); }
.look-opts { flex: 1; min-width: 0; }
.traits-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.traits-cols .chip { font-size: 12px; }
.chip.pos.on { border-color: #7fc08a; background: rgba(127, 192, 138, 0.16); }
.chip.neg.on { border-color: #e06a5a; background: rgba(224, 106, 90, 0.16); }
.chip .cost { color: var(--muted); margin-left: 4px; font-size: 11px; }
.small { font-size: 11px; margin-bottom: 4px; }
@media (max-width: 640px) { .look { flex-direction: column; } .traits-cols { grid-template-columns: 1fr; } }
.tag.pos { background: rgba(127, 192, 138, 0.16); }
.tag.neg { background: rgba(224, 106, 90, 0.16); }
.structs .st.off { opacity: 0.5; text-decoration: line-through; }

/* живой разговор с жителем */
#talk { left: 50%; transform: translateX(-50%); bottom: calc(var(--cmd-h) + 30px); width: min(600px, calc(100% - 32px)); max-height: 52%; display: flex; flex-direction: column; padding: 10px 12px; z-index: 6; }
.talk-head { display: flex; align-items: center; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.talk-who { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.talk-who b { font: 700 16px 'PT Serif', serif; }
.talk-who span { font-size: 12px; }
.talk-trust { width: 90px; height: 6px; border-radius: 3px; background: rgba(255,255,255,0.08); overflow: hidden; }
#talk-bond { font-size: 12px; color: var(--muted); white-space: nowrap; }
#talk-bond.love { color: #e9a3b5; }
#talk-trust-fill { height: 100%; width: 50%; background: #9ad0a0; transition: width .5s, background .5s; }
#talk-log { flex: 1; overflow: auto; padding: 8px 2px; display: flex; flex-direction: column; gap: 6px; min-height: 120px; }
#talk-log .ln { max-width: 85%; padding: 6px 10px; border-radius: 10px; font-size: 14px; line-height: 1.4; }
#talk-log .npc { align-self: flex-start; background: rgba(255,255,255,0.06); font-family: 'PT Serif', serif; }
#talk-log .hero { align-self: flex-end; background: rgba(240,178,92,0.16); }
#talk-log .note { align-self: center; color: var(--muted); font-size: 12px; font-style: italic; }
#talk-log .typing { align-self: flex-start; color: var(--muted); font-style: italic; }
#talk-form { display: flex; gap: 8px; padding-top: 8px; }
#talk-form input { flex: 1; }
.talk-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.talk-btns button { font-size: 12px; padding: 4px 10px; }

/* портреты из атласа набора персонажей: ячейка целиком, без искажения пропорций */
.portrait { display: inline-block; flex: none; border-radius: 8px; background-color: #1a1826; background-repeat: no-repeat; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08); }
.card-head { display: flex; gap: 10px; align-items: flex-start; }
.card-head > div { min-width: 0; }
/* выбор образа героя */
.hero-looks { display: flex; gap: 10px; margin-bottom: 4px; }
.look-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 8px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,0.03); color: var(--text); font-weight: 400; cursor: pointer; }
.look-card.on { border-color: var(--accent); background: rgba(240, 178, 92, 0.15); }
/* как отвечать в разговоре: дословно или подсказкой герою */
.talk-modes { display: flex; gap: 6px; padding-top: 8px; }
.talk-modes button { font-size: 12px; font-weight: 400; padding: 4px 10px; background: rgba(255,255,255,0.05); color: var(--muted); border: 1px solid var(--line); }
.talk-modes button.on { color: var(--text); border-color: var(--accent); background: rgba(240, 178, 92, 0.15); }
#talk-log .typing.mine { align-self: flex-end; }
#talk-portrait { width: 56px; height: 56px; }

/* облачка над людьми: мысли (курсив, облачко) и реплики (белый пузырь с хвостиком) */
.panel { z-index: 2; }
#bubbles { position: fixed; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.bubble { position: absolute; left: 0; top: 0; max-width: 270px; padding: 7px 11px; border-radius: 14px; font: 14px/1.35 'PT Serif', serif; color: #1c1a22; background: rgba(250, 248, 242, 0.96); box-shadow: 0 3px 12px rgba(0, 0, 0, 0.4); margin-top: -10px; }
.bubble.say::after { content: ''; position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%); border: 7px solid transparent; border-bottom: 0; border-top-color: rgba(250, 248, 242, 0.96); }
/* полоска прогресса над героем (v1.3.2) */
.pbar { position: absolute; left: 0; top: 0; width: 40px; height: 4px; border-radius: 3px; background: rgba(12, 13, 20, 0.7); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22), 0 1px 4px rgba(0, 0, 0, 0.5); overflow: hidden; }
.pbar i { display: block; height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, #d9a441, #f3d79a); }
.bubble.thought { font-style: italic; background: rgba(226, 232, 255, 0.96); border-radius: 18px; }
.bubble.thought::before, .bubble.thought::after { content: ''; position: absolute; border-radius: 50%; background: rgba(226, 232, 255, 0.96); }
.bubble.thought::before { width: 10px; height: 10px; left: calc(50% - 8px); bottom: -12px; }
.bubble.thought::after { width: 6px; height: 6px; left: calc(50% - 2px); bottom: -20px; }

/* текстовый инвентарь в карточке героя */
.inv-full { margin: 8px 0; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,0.03); font-size: 12px; }
.inv-full summary { cursor: pointer; font-weight: 700; color: var(--accent); }
.inv-sec { margin-top: 6px; }
.inv-list { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; margin-top: 2px; }
.small-line { font-size: 11px; line-height: 1.35; }
/* окно разговора мигает рамкой, когда открывается */
#talk.flash { animation: talkflash 1.6s ease-out 2; }
@keyframes talkflash { 0% { box-shadow: 0 0 0 0 rgba(240,178,92,0.9); } 100% { box-shadow: 0 0 0 18px rgba(240,178,92,0); } }

/* стук в дверь: житель у порога, игрок решает — впустить или нет */
#door { left: 50%; transform: translateX(-50%); bottom: calc(var(--cmd-h) + 40px); width: min(420px, calc(100% - 32px)); padding: 12px 14px; z-index: 8; border-color: var(--accent); }
#door.flash { animation: talkflash 1.6s ease-out 2; }
#door .door-head { display: flex; gap: 10px; align-items: center; }
#door .portrait { flex: none; border-radius: 8px; }
#door-title { font: 700 16px 'PT Serif', serif; }
#door .door-btns { display: flex; gap: 8px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
#door .door-always { display: inline-flex; gap: 6px; align-items: center; margin-left: auto; font-size: 12px; color: var(--muted); cursor: pointer; }
#door .door-always input { width: auto; margin: 0; }
#door-left { margin-top: 6px; font-size: 12px; }

/* внутри дома: где именно герой — подъезд или квартира, какой этаж */
#where-in { position: fixed; top: 44px; left: 50%; transform: translateX(-50%); padding: 4px 12px; border-radius: 6px; background: rgba(12, 11, 20, 0.78); border: 1px solid var(--line); font-size: 13px; color: var(--text); z-index: 3; pointer-events: none; white-space: nowrap; }
#where-in.hidden { display: none; }

/* подсказки на наведение: свои, а не title — карточка обновляется, и системная подсказка не успевает появиться */
[data-tip] { position: relative; }
[data-tip]:hover::after { content: attr(data-tip); position: absolute; left: 0; top: calc(100% + 6px); z-index: 20; width: max-content; max-width: 240px; padding: 6px 9px; border-radius: 7px; background: rgba(12, 11, 20, 0.97); border: 1px solid var(--line); color: var(--text); font: 12px/1.4 'PT Sans', sans-serif; white-space: normal; text-transform: none; letter-spacing: 0; pointer-events: none; box-shadow: 0 4px 14px rgba(0,0,0,.5); }
#res-bar [data-tip]:hover::after, #needs-bar [data-tip]:hover::after { top: auto; bottom: calc(100% + 6px); }
#needs-bar [data-tip]:hover::after { left: auto; right: 0; }

/* карточка героя: навыки с опытом, кто рядом */
.skills { display: grid; grid-template-columns: 1fr; gap: 3px; margin: 6px 0; font-size: 12px; }
.sk { display: grid; grid-template-columns: 92px 1fr 18px; gap: 6px; align-items: center; cursor: default; }
.sk .pips { color: var(--accent); letter-spacing: 1px; font-size: 11px; white-space: nowrap; overflow: hidden; }
.sk .xp { height: 3px; background: rgba(255,255,255,0.08); border-radius: 2px; overflow: hidden; margin-top: 2px; }
.sk .xp i { display: block; height: 100%; background: rgba(240,178,92,0.7); }
.sk .lv { text-align: right; font-weight: 700; }
.here { margin: 8px 0; }
.here .who { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 6px; background: rgba(255,255,255,0.03); margin: 3px 0; }
.here .who .nm { flex: 1; min-width: 0; font-size: 13px; }
.here .who .nm small { display: block; color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.here .who button { padding: 3px 9px; font-size: 12px; }
#roster details { margin: 6px 0; }
#roster summary { cursor: pointer; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); padding: 4px 0; }

/* инвентарь героя и базы */
.inv-card { width: min(880px, calc(100% - 32px)); }
.inv-head { display: flex; align-items: center; justify-content: space-between; }
.inv-head h2 { margin: 0; }
.inv-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 10px; }
.inv-col h3 { font: 700 15px 'PT Serif', serif; margin: 0 0 6px; }
.inv-cat { margin: 8px 0; }
.inv-cat .ct { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.inv-row { display: flex; align-items: center; gap: 8px; padding: 3px 6px; border-radius: 6px; font-size: 13px; }
.inv-row:hover { background: rgba(255,255,255,0.04); }
.inv-row .q { margin-left: auto; color: #cfcbe0; font-variant-numeric: tabular-nums; }
.inv-row button { padding: 2px 8px; font-size: 11px; font-weight: 400; }
.thing { padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; margin: 5px 0; font-size: 13px; }
.thing .d { color: var(--muted); font-size: 12px; margin-top: 2px; }
.thing .acts { display: flex; gap: 6px; margin-top: 5px; }
.thing .acts button { padding: 2px 9px; font-size: 11px; font-weight: 400; }
@media (max-width: 720px) { .inv-cols { grid-template-columns: 1fr; } }

/* обмен в разговоре: что есть у героя и у собеседника */
/* при обмене окно разговора шире и выше: товары — главное, переписка ужимается */
#talk.trading { width: min(940px, calc(100% - 32px)); max-height: min(86vh, calc(100% - var(--cmd-h) - 60px)); background: var(--bg); z-index: 9; box-shadow: 0 10px 40px rgba(0,0,0,.6); }
#talk.trading #talk-log { flex: 0 1 140px; min-height: 80px; }
#talk-goods { display: flex; flex-direction: column; gap: 8px; padding: 8px 0 4px; border-top: 1px solid var(--line); min-height: 0; flex: 1 1 auto; }
.trade-top { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.trade-top input { width: 200px; padding: 5px 9px; font-size: 13px; }
.trade-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; min-height: 0; }
.goods-col { display: flex; flex-direction: column; min-height: 0; }
.goods-list { overflow: auto; max-height: 34vh; padding-right: 4px; }
.goods-title { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 4px; }
.goods-list .gc { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin: 6px 0 2px; }
.goods-list .g { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 6px; font-size: 13px; cursor: pointer; border: 1px solid transparent; }
.goods-list .g:hover { background: rgba(240,178,92,0.12); }
.goods-list .g.in { border-color: rgba(240,178,92,0.5); background: rgba(240,178,92,0.08); }
.goods-list .g .n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.goods-list .g .q { color: var(--muted); font-variant-numeric: tabular-nums; }
.goods-list .g .in-q { color: var(--accent); font-size: 12px; font-variant-numeric: tabular-nums; }
.goods-list .im { width: 26px; height: 26px; }
#trade-offer { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end; padding-top: 8px; border-top: 1px dashed var(--line); }
#trade-offer .chips { display: flex; flex-wrap: wrap; gap: 5px; min-height: 28px; }
#trade-offer .chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 8px; border-radius: 14px; background: rgba(240,178,92,0.14); border: 1px solid rgba(240,178,92,0.4); font-size: 12px; }
#trade-offer .chip b { font-weight: 700; font-variant-numeric: tabular-nums; }
#trade-offer .chip button { padding: 0 6px; min-width: 22px; font-size: 13px; line-height: 18px; background: transparent; border: 1px solid var(--line); border-radius: 9px; color: var(--text); }
#trade-offer .chips .muted { font-size: 12px; align-self: center; }
.offer-btns { display: flex; gap: 6px; }
@media (max-width: 720px) { .trade-cols, #trade-offer { grid-template-columns: 1fr; } .goods-list { max-height: 24vh; } }

/* действие героя в разговоре — свершившийся факт */
#talk-log .act { align-self: flex-end; max-width: 85%; padding: 5px 10px; border-radius: 10px; font: italic 13px 'PT Serif', serif; color: #f0d9b0; border: 1px dashed rgba(240,178,92,0.45); }

/* голоса: кнопка в шапке и меню */
.voice-wrap { position: relative; }
/* вход своим героем с другого устройства (v1.6.2) */
#link-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 12; width: 260px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; text-shadow: none; }
#link-menu input { width: 100%; font-size: 11px; }
#link-qr { align-self: center; background: #fff; padding: 8px; border-radius: 6px; line-height: 0; }
#link-qr:empty { display: none; }
/* вход через Telegram крупно — в начале формы нового выжившего (v1.6.3) */
#creator-tg { display: flex; flex-direction: column; gap: 6px; margin: 2px 0 14px; padding: 10px 12px; border-radius: 10px; background: rgba(42,171,238,.08); border: 1px solid rgba(42,171,238,.35); }
#creator-tg.hidden { display: none; }
.tg-big { width: 100%; min-height: 44px; font-size: 15px; font-weight: 700; background: #2aabee; color: #fff; border: 0; border-radius: 8px; cursor: pointer; }
.tg-big:hover { background: #229ed9; }
#voice-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 12; width: 230px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; text-shadow: none; }
#voice-menu label { display: flex; gap: 8px; align-items: center; cursor: pointer; }
#voice-menu input[type=checkbox] { width: auto; margin: 0; }
#voice-menu .vol { flex-direction: column; align-items: stretch; gap: 2px; color: var(--muted); font-size: 12px; }
#voice-menu input[type=range] { padding: 0; }
#vo-status { font-size: 11px; color: var(--muted); line-height: 1.35; }

/* 🎤 у реплики собеседника: послушать его голос */
#talk-log .say-btn { margin-left: 8px; padding: 0 6px; font-size: 13px; line-height: 1.4; background: transparent; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; vertical-align: 1px; opacity: .75; }
#talk-log .say-btn:hover { opacity: 1; border-color: var(--accent); }
/* портреты в разговоре (v1.3.0): собеседник слева, ваш герой справа; у реплики — портрет говорящего */
#talk-hero { width: 56px; height: 56px; margin-left: auto; border-radius: 8px; box-shadow: 0 0 0 1px rgba(240,178,92,.35); }
#talk-portrait { border-radius: 8px; }
#talk-log .lrow { display: flex; gap: 7px; align-items: flex-end; max-width: 92%; }
#talk-log .lrow.l { align-self: flex-start; }
#talk-log .lrow.r { align-self: flex-end; flex-direction: row-reverse; }
#talk-log .lrow .ln { max-width: none; }
#talk-log .lrow .ava { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(255,255,255,.15); }
/* групповой разговор (v1.0.3): имя говорящего и реплики остальных участников */
#talk-log .ln .who { font-family: system-ui, sans-serif; font-size: 12px; font-weight: 600; color: var(--accent); }
#talk-log .npc.other { background: rgba(140,180,220,0.08); border-left: 2px solid rgba(140,180,220,0.35); }

/* ===================== v1.1.0: живой мир ===================== */
/* графитовые полупрозрачные панели, светлый текст, приглушённый янтарь — выбранное действие, красный — срочная опасность */
:root { --panel: rgba(27, 28, 32, 0.86); --line: rgba(220, 222, 230, 0.12); --amber: #c9a35f; --paper: #e9dfc8; --ink: #2b2620; --good: #8fc79a; --warn: #d9b25c; }
.tabs button.active, .talk-modes .on, .world-tabs .on { border-color: var(--amber) !important; color: #f3e6c8 !important; background: rgba(201, 163, 95, 0.12); }
/* что герой задумал */
#hero .why { font-size: 12px; margin: -2px 0 6px 10px; padding-left: 8px; border-left: 2px solid rgba(201,163,95,.45); color: #d6d2c6; }
#hero .why .fear { color: #e3a493; }
#hero .sky { color: #b9c7e6; }
/* признаки состояния */
#needs-bar .signs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
#needs-bar .sign { font-size: 11px; padding: 1px 7px; border-radius: 9px; background: rgba(255,255,255,0.05); border: 1px solid var(--line); color: #d9d6cc; cursor: pointer; }
#needs-bar .sign.warn { border-color: rgba(217,178,92,.5); }
#needs-bar .sign.danger { border-color: var(--danger); color: #f2b3a8; }
#needs-bar .sign.good { border-color: rgba(143,199,154,.5); color: #cfe8d3; }
#needs-bar .sign.on { background: rgba(201,163,95,.18); }
#needs-bar .sign-detail { font-size: 11px; color: #cfcbe0; background: rgba(0,0,0,.25); border-radius: 6px; padding: 5px 7px; margin-top: 4px; }
/* тело (v1.3.0): одежда, мокрая, температура, болезнь */
#needs-bar .body-row { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
#needs-bar .bd { font-size: 11px; padding: 0 6px; border-radius: 8px; background: rgba(255,255,255,0.04); border: 1px solid var(--line); color: #cfd6e2; font-variant-numeric: tabular-nums; }
#needs-bar .bd.warn { border-color: rgba(217,178,92,.5); color: #ecd9ae; }
#needs-bar .bd.bad { border-color: var(--danger); color: #f2b3a8; }
#needs-bar #sum-open { margin-top: 6px; }
/* итоги жизни (v1.3.0): карточка для снимка — тёмная бумага, крупные цифры */
#summary { z-index: 30; }
.sum-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; max-height: 96vh; overflow: auto; padding: 8px; }
.sum-card { width: min(560px, 94vw); background: radial-gradient(120% 90% at 20% 0%, #2c3140 0%, #1a1c24 55%, #121318 100%); color: #e8edf3; border: 1px solid rgba(200,215,240,.18); border-radius: 14px; padding: 18px 20px 14px; box-shadow: 0 20px 60px rgba(0,0,0,.55); font-family: 'PT Sans', system-ui, sans-serif; }
.sum-top { display: flex; justify-content: space-between; align-items: baseline; letter-spacing: .35em; font-size: 12px; color: #9fb4e8; margin-bottom: 12px; }
.sum-brand { font-weight: 700; }
.sum-ver { letter-spacing: .05em; color: #7c88a6; }
.sum-head { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; }
.sum-head .portrait { border-radius: 10px; border: 1px solid rgba(255,255,255,.18); box-shadow: 0 6px 18px rgba(0,0,0,.4); filter: grayscale(.35); }
.sum-name { font-size: 26px; font-weight: 700; line-height: 1.1; }
.sum-sub { color: #b8c0d0; font-size: 14px; }
.sum-dates { color: #8f99ae; font-size: 12px; margin-top: 3px; }
.sum-days { text-align: center; display: flex; flex-direction: column; line-height: 1; }
.sum-days b { font-size: 46px; color: #f0d29a; font-weight: 700; }
.sum-days span { font-size: 13px; color: #d9c49a; margin-top: 2px; }
.sum-days i { font-style: normal; font-size: 11px; color: #8f99ae; margin-top: 3px; }
.sum-cause { margin: 12px 0 6px; font-size: 13px; color: #e3a493; }
.sum-epitaph { font-size: 17px; font-style: italic; color: #f1ead8; padding: 8px 12px; border-left: 3px solid #c9a35f; background: rgba(201,163,95,.08); border-radius: 0 8px 8px 0; margin-bottom: 12px; }
.sum-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; margin-bottom: 10px; }
.sum-grid .st { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); border-radius: 9px; padding: 7px 8px; display: grid; grid-template-columns: auto 1fr; column-gap: 6px; align-items: baseline; }
.sum-grid .st em { font-style: normal; grid-row: span 2; font-size: 18px; }
.sum-grid .st b { font-size: 16px; color: #fff; font-variant-numeric: tabular-nums; line-height: 1.15; }
.sum-grid .st span { font-size: 11px; color: #9aa4b8; line-height: 1.2; }
.sum-sec { font-size: 13px; color: #d6dbe6; margin: 5px 0; }
.sum-sec span { display: block; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #8190ad; }
.sum-place { margin: 8px 0; font-size: 13px; color: #c9e0ff; }
.sum-thought { margin: 8px 0 4px; font-size: 13px; color: #cfcbe0; font-style: italic; }
.sum-mem { margin: 4px 0 8px 16px; padding: 0; font-size: 12px; color: #9aa4b8; }
.sum-foot { margin-top: 10px; font-size: 10px; color: #6f7a92; letter-spacing: .08em; text-align: right; }
.sum-dev { margin-top: 4px; font-size: 10px; color: #8a93ab; letter-spacing: .06em; text-align: center; opacity: .85; }
.sum-acts { display: flex; gap: 8px; }
@media (max-width: 520px) { .sum-head { grid-template-columns: auto 1fr; } .sum-days { grid-column: span 2; flex-direction: row; gap: 6px; align-items: baseline; justify-content: center; } .sum-days b { font-size: 32px; } }
/* итог мысли */
#influence { font-size: 12px; margin-top: 6px; padding: 4px 8px; border-radius: 6px; background: rgba(255,255,255,0.04); border-left: 3px solid var(--good); }
#influence.warn { border-left-color: var(--warn); } #influence.danger { border-left-color: var(--danger); }
/* запасы в днях */
.supply { margin-top: 6px; font-size: 12px; }
.supply .sp { padding: 1px 0 1px 8px; border-left: 2px solid rgba(143,199,154,.6); margin: 2px 0; cursor: help; }
.supply .sp.warn { border-left-color: var(--warn); } .supply .sp.danger { border-left-color: var(--danger); color: #f2b3a8; }
/* отношение в карточке знакомого */
#hero .rel { font-size: 12px; } #hero .rel div { padding: 2px 0; } .rel .good, .d-sec .good { color: #bfe3c6; } .rel .bad, .d-sec .bad { color: #f2b3a8; } .rel .warn, .d-sec .warn { color: #ecd29a; } .rel .info { color: var(--muted); }
/* окна «Мир» и «Пока вас не было» */
.sheet { background: rgba(24, 25, 29, 0.97); top: 64px; left: 50%; transform: translateX(-50%); width: min(720px, calc(100% - 32px)); max-height: calc(100% - var(--cmd-h) - 100px); display: flex; flex-direction: column; padding: 12px 14px; z-index: 8; box-shadow: 0 10px 40px rgba(0,0,0,.45); }
.sheet-head { display: flex; align-items: baseline; gap: 10px; } .sheet-head h2 { font: 700 18px 'PT Serif', serif; margin: 0 0 8px; } .sheet-head button { margin-left: auto; }
.world-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.world-tabs button { font-size: 12px; padding: 3px 8px; background: transparent; color: var(--muted); border: 1px solid var(--line); border-radius: 7px; }
#world-body, #absence-body { overflow: auto; flex: 1; }
.w-row { display: grid; grid-template-columns: 22px 1fr; gap: 6px; padding: 6px 2px; border-bottom: 1px solid var(--line); font-size: 13px; }
.w-row .ic { text-align: center; } .w-row .sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
.w-row.bad, .w-row.threat, .w-row.danger, .w-row.st-broken { color: #f2b3a8; } .w-row.threat .ic { color: var(--danger); }
.w-row.warn, .w-row.st-late { color: #ecd29a; } .w-row.good, .w-row.st-kept { color: #cfe8d3; }
.w-card { padding: 8px 4px; border-bottom: 1px solid var(--line); font-size: 13px; } .w-card ul { margin: 4px 0 2px 18px; padding: 0; } .w-card .acts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.w-card .warn, .sub.warn { color: #ecd29a; }
.w-src { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; } .w-src .chip, #trade-needs .chip { font-size: 11px; padding: 1px 7px; border-radius: 9px; border: 1px solid var(--line); }
.empty { padding: 14px 4px; font-size: 13px; }
#world-body a, #absence-body a, #dossier a { color: var(--amber); }
button.link { background: none; border: none; padding: 0; color: var(--amber); font-size: 11px; cursor: pointer; text-decoration: underline; }
#absence .more { font: italic 13px 'PT Serif', serif; color: #e8dfca; margin-top: 4px; }
#chron .e.hl { background: rgba(201,163,95,.2); transition: background .4s; }
/* нужды собеседника в окне обмена */
#trade-needs { font-size: 12px; margin-bottom: 6px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
#talk-log .thought { align-self: flex-end; color: #cfd7ff; font-style: italic; font-size: 13px; background: rgba(159,180,232,0.08); border: 1px dashed rgba(159,180,232,0.3); }
/* бумага: досье, дневник, карта */
/* цвет — только последним слоем фона, иначе браузер выбрасывает всё правило и досье становится прозрачным */
.paper { background: repeating-linear-gradient(0deg, rgba(120,100,70,.05) 0 1px, transparent 1px 26px), radial-gradient(ellipse at 30% 20%, #f2ead8, #ddd0b3), var(--paper) !important; color: var(--ink); border-color: #b7a782 !important; }
.paper h2, .paper .d-name { color: #3a2f22; } .paper .sub, .paper .muted { color: #6d6150 !important; } .paper button.ghost { color: #3a2f22; border-color: #a8977a; }
#dossier .card { width: min(640px, calc(100% - 32px)); font-family: 'PT Serif', serif; }
.d-head { display: flex; gap: 14px; align-items: center; margin-bottom: 8px; } .d-name { font: 700 22px 'PT Serif', serif; }
.d-sec { margin: 10px 0; } .d-t { font: 700 11px 'PT Sans', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #7a6a52; margin-bottom: 3px; }
.d-sec p { margin: 2px 0; } .d-sec ul { margin: 2px 0 2px 18px; padding: 0; }
.paper .good { color: #2f6a3a; } .paper .bad { color: #9a3326; } .paper .warn { color: #8a6418; } .paper .info { color: #6d6150; }
#chron .diary { background: linear-gradient(#efe4cc, #e3d6b8); color: #2f2820; border-left: 3px solid #b39b6a; }
#chron .diary .t { color: #6d6150; }
#minimap-wrap { background: #e2d6bb; border-radius: 6px; }
/* телефон: основные разделы — нижними выдвижными панелями */
@media (max-width: 720px) {
  .sheet { top: auto; bottom: 0; left: 0; right: 0; transform: none; width: 100%; max-height: 72%; border-radius: 14px 14px 0 0; }
  .sheet::before { content: ''; display: block; width: 44px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.25); margin: -4px auto 8px; }
  #dossier.modal { place-items: end center; } #dossier .card { width: 100%; max-height: 80%; border-radius: 14px 14px 0 0; }
  #world-btn { font-size: 12px; }
}
/* нижняя панель растёт (признаки состояния, итог мысли, пояснение вкладки) — боковые панели, разговор и подсказки
   поднимаются над её настоящей высотой (--cmd-real ставит main.js), а не над задуманной (--cmd-h) */
#left, #right { bottom: calc(var(--cmd-real, var(--cmd-h)) + 28px); }
#toast { bottom: calc(var(--cmd-real, var(--cmd-h)) + 34px); }
#talk { bottom: calc(var(--cmd-real, var(--cmd-h)) + 30px); }
#door { bottom: calc(var(--cmd-real, var(--cmd-h)) + 40px); }
#talk.trading { max-height: min(86vh, calc(100% - var(--cmd-real, var(--cmd-h)) - 60px)); }
.sheet { max-height: calc(100% - var(--cmd-real, var(--cmd-h)) - 100px); }
@media (max-width: 1100px) { #right { bottom: calc(var(--cmd-real, var(--cmd-h)) + 28px); } }

/* выбор дома в окне создания (v1.2.0) */
.homepick { display: grid; gap: 8px; margin-bottom: 10px; }
.homepick .home-body { display: grid; grid-template-columns: 220px 1fr; gap: 10px; align-items: start; }
#home-map { width: 220px; height: 220px; border-radius: 8px; background: #15131e; cursor: crosshair; image-rendering: pixelated; }
.home-list { max-height: 220px; overflow-y: auto; display: grid; gap: 4px; align-content: start; }
.home-list button { text-align: left; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); color: inherit; border-radius: 6px; padding: 5px 8px; font: inherit; font-size: 13px; cursor: pointer; }
.home-list button.on { border-color: #f0b25c; background: rgba(240,178,92,0.12); }
.home-list button small { display: block; opacity: 0.65; font-size: 11px; }
@media (max-width: 640px) { .homepick .home-body { grid-template-columns: 1fr; } #home-map { width: 100%; height: auto; aspect-ratio: 1; } }

/* приезжие (v1.2.0) */
.enc-card { width: min(620px, calc(100% - 32px)); max-height: 86vh; overflow-y: auto; }
.enc-sub { color: var(--muted); font-size: 13px; margin: -4px 0 10px; }
.enc-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.enc-table th { text-align: left; color: var(--muted); font-weight: 400; padding: 4px 6px; }
.enc-table td { padding: 4px 6px; border-top: 1px solid var(--line); }
.enc-step { display: inline-flex; align-items: center; gap: 4px; }
.enc-step button { width: 24px; height: 24px; padding: 0; border-radius: 6px; }
.enc-step b { min-width: 18px; text-align: center; display: inline-block; }
.enc-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.enc-msg { margin-top: 10px; font-size: 13px; min-height: 18px; }
.enc-msg.bad { color: #e88a7a; } .enc-msg.ok { color: #9ad0a0; }
.enc-near { margin: 8px 0; padding: 8px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; }
.enc-near button { margin-top: 6px; }
@media (max-width: 640px) { #enc.modal { place-items: end center; } .enc-card { width: 100%; border-radius: 14px 14px 0 0; } }

/* пауза и новая партия (v1.2.0) */
.ctl-wrap { position: relative; }
#ctl-menu { position: absolute; top: 100%; right: 0; margin-top: 6px; background: var(--panel, #17151f); border: 1px solid var(--line); border-radius: 10px; padding: 8px; display: grid; gap: 6px; width: 270px; z-index: 30; }
#ctl-menu button { text-align: left; }
#paused { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); background: rgba(15, 13, 25, 0.88); border: 1px solid var(--accent); color: var(--accent); padding: 8px 16px; border-radius: 10px; z-index: 25; pointer-events: none; font-weight: 600; }

/* собрание района (v1.3.4) */
#meet { z-index: 25; }
.meet-card { width: min(640px, calc(100% - 32px)); display: flex; flex-direction: column; gap: 10px; }
.meet-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.meet-people { display: flex; flex-wrap: wrap; gap: 8px; }
.meet-people .mp { display: flex; flex-direction: column; align-items: center; width: 64px; font-size: 11px; color: var(--muted, #a9a3bd); text-align: center; line-height: 1.15; }
.mpic { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: #2a2738; display: grid; place-items: center; font-weight: 600; color: #d8d2ea; flex: none; }
.mpic.hero { box-shadow: 0 0 0 2px #b9a27a; }
.meet-agenda { font-size: 13px; color: #cfc8e2; border-left: 2px solid #5a5370; padding-left: 10px; }
.meet-log { max-height: 46vh; overflow: auto; display: flex; flex-direction: column; gap: 8px; padding-right: 4px; }
.meet-log .ml { display: flex; gap: 8px; align-items: flex-start; animation: mlIn .35s ease-out; }
.meet-log .ml .mpic { width: 30px; height: 30px; font-size: 12px; }
.meet-log .ml.hero .txt { background: #2f2a1f; }
.meet-log .ml .txt { background: #26233a; border-radius: 10px; padding: 6px 10px; font-size: 14px; line-height: 1.35; }
.meet-log .ml .txt b { display: block; font-size: 12px; color: #b9a27a; font-weight: 600; }
.meet-log .typing { color: #8f88a8; font-style: italic; font-size: 13px; }
.meet-dec { display: flex; flex-wrap: wrap; gap: 6px; }
.meet-dec .chip, .w-card .chip.dec { background: #2b3a2c; color: #cfe8c9; border-radius: 999px; padding: 3px 10px; font-size: 12px; }
.meet-form { display: flex; gap: 8px; }
.meet-form input { flex: 1; min-width: 0; }
.w-card .meet-say { display: flex; gap: 6px; margin-top: 6px; }
.w-card .meet-say input { flex: 1; min-width: 0; }
.w-card details summary { cursor: pointer; color: #cfc8e2; margin-top: 6px; }
.w-card .mline { font-size: 13px; margin: 3px 0; }
@keyframes mlIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .meet-log .ml { animation: none; } }
@media (max-width: 640px) { #meet.modal { place-items: end center; } .meet-card { width: 100%; max-height: 88%; border-radius: 14px 14px 0 0; } }

/* снаряжение — инвентарь-сетка (v1.4.0) */
#gear { z-index: 22; }
.gear-card { width: min(1180px, calc(100% - 24px)); max-height: calc(100% - 24px); display: flex; flex-direction: column; gap: 8px; }
.gear-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.gear-head h2 { margin: 0; }
.gear-head #gear-load { flex: 1; }
.gear-cols { display: grid; grid-template-columns: 230px 1fr 250px; gap: 14px; align-items: start; overflow: auto; }
.gear-slots { display: flex; flex-direction: column; gap: 4px; }
.gslot { display: flex; flex-direction: column; border: 1px dashed var(--line); border-radius: 8px; padding: 4px 8px; font-size: 12px; min-height: 34px; background: rgba(255,255,255,0.02); }
.gslot.full { border-style: solid; background: rgba(185,162,122,0.08); cursor: grab; touch-action: none; }
.gslot.locked { box-shadow: inset 2px 0 0 #b9a27a; }
.gslot .sn { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.gslot .sv { font-size: 13px; cursor: pointer; }
.gslot .sv.empty { color: var(--muted); cursor: default; }
.gslot .sv.sel { color: var(--accent); }
.gear-grids { display: flex; flex-direction: column; gap: 10px; }
.ggroup h3, .gbox h3 { font: 700 13px 'PT Serif', serif; margin: 0 0 4px; }
.gconts { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
.gcont-wrap .gct { font-size: 11px; color: var(--muted); margin-bottom: 2px; }
.gcont { position: relative; border: 1px solid #4a4560; border-radius: 4px; background-color: rgba(0,0,0,0.25);
  background-image: linear-gradient(to right, rgba(255,255,255,0.07) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.07) 1px, transparent 1px); }
.gtile { position: absolute; margin: 1px; border-radius: 3px; background: #3a3550; border: 1px solid #5d5680; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; cursor: grab; font-size: 10px; line-height: 1.1; text-align: center; user-select: none; touch-action: none; }
.gtile.k-gun { background: #3d3a2c; border-color: #7d6f46; } .gtile.k-mag { background: #34392c; border-color: #6a7a4c; } .gtile.k-exp { background: #452b2b; border-color: #8a4a4a; }
.gtile.k-gear { background: #2c3a3d; border-color: #4f7380; } .gtile.k-res { background: #33303f; } .gtile.k-melee { background: #3b3333; border-color: #7a5d5d; }
.gtile.sel { outline: 2px solid var(--accent); } .gtile.dragging { opacity: 0.35; }
.gtile .gi { font-size: 14px; } .gtile .gi img, .gtile .gi canvas { width: 22px; height: 22px; object-fit: contain; }
.gtile .gn { max-width: 100%; padding: 0 2px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.gtile .gq, .gslot .gq, .gloose .gq { font-size: 10px; color: #e3d2a6; }
.gghost { position: fixed; z-index: 60; pointer-events: none; border-radius: 3px; background: rgba(185,162,122,0.35); border: 1px solid #e3d2a6; color: #fff; font-size: 10px; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; }
.gear-side { display: flex; flex-direction: column; gap: 10px; }
.gbox { border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; background: rgba(255,255,255,0.02); }
.gbox.over { border-color: #8a4a4a; }
.gloose { display: flex; align-items: center; gap: 6px; font-size: 12px; padding: 2px 0; cursor: grab; }
.gloose .gn { flex: 1; }
.gear-info { min-height: 26px; font-size: 13px; border-top: 1px solid var(--line); padding-top: 6px; }
.gear-info .acts, .gear-info .gmods { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.gear-hint { font-size: 11px; }
button.tiny { font-size: 10px; padding: 0 4px; }
@media (max-width: 900px) { .gear-cols { grid-template-columns: 1fr; } }
.gear-cols { flex: 1 1 auto; min-height: 0; }
.gear-info, .gear-hint { flex: none; }
.gslot { flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; min-height: 28px; padding: 3px 8px; }
.gslot .sn { flex: none; width: 88px; }
.gslot .sv { flex: 1; text-align: right; }

/* навыки до 15 и черты 1 к 1 (v1.5.0) */
.sbar { display: inline-block; width: 70px; height: 6px; border-radius: 3px; background: rgba(255,255,255,0.08); overflow: hidden; vertical-align: middle; }
.sbar i { display: block; height: 100%; background: #b9a27a; }
.skill button:disabled { opacity: 0.35; cursor: default; }
.traits-cols .chip.off { opacity: 0.35; text-decoration: line-through; }
#trait-state.warn { color: #e0a060; }

/* узкое окно (v1.5.1): шапка переносится строками, а не уходит за край; левая панель, плашка места и окна встают под неё
   (её настоящий низ --top-real и высоту хроники --right-top ставит main.js); на широком экране всё стоит, как стояло */
#top { max-width: calc(100% - 24px); flex-wrap: wrap; row-gap: 4px; }
#top > button, #top > span > button, #clock { white-space: nowrap; }
#top #narr { max-width: min(360px, 100%); }
#left { top: calc(var(--top-real, 51px) + 1px); }
#where-in { top: calc(var(--top-real, 51px) - 7px); }
#paused { top: max(64px, calc(var(--top-real, 51px) + 13px)); }
@media (min-width: 1101px) { #right { top: var(--right-top, 16px); } }
@media (min-width: 721px) { .sheet { top: max(64px, calc(var(--top-real, 51px) + 13px)); } }
@media (max-width: 1100px) {
  #top { align-items: center; column-gap: 10px; }
  #top #where-in { position: static; transform: none; order: 99; flex-basis: 100%; white-space: normal; padding: 2px 8px; }
}
@media (max-width: 720px) {
  /* телефон: шапка — одной строкой с прокруткой вбок (иначе она съедает пол-экрана), плашка места — под ней во всю ширину */
  #top { right: 12px; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  #top > * { flex: none; }
  #top #where-in { position: fixed; top: calc(var(--top-real, 51px) + 4px); left: 16px; right: 16px; transform: none; order: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* карточка — между шапкой и хроникой, а не под хроникой: хроника внизу занимает 24% высоты */
  #left { width: auto; right: 16px; bottom: calc(var(--cmd-real, var(--cmd-h)) + 36px + 24%); }
  body.inside #left { top: calc(var(--top-real, 51px) + 36px); }
  /* меню голосов и паузы — от края до края экрана (fixed: шапка с прокруткой их не обрезает) */
  #voice-menu, #ctl-menu { position: fixed; top: calc(var(--top-real, 51px) + 6px); left: 12px; right: 12px; width: auto; margin: 0; }
}
/* «Мир» поверх сводки «Пока вас не было»: оба окна стоят на одном месте, и открытый «Мир» не должен прятаться под ней */
#world { z-index: 9; }

/* без живого героя мир — загадка (v1.6.2): класс nohero на <html> (с самого начала; снимает main.js, когда герой есть).
   Вместо города — заставка #veil (veil.js: «ЗИМА», снег, дома), поверх — форма «Новый выживший», закрыть её нельзя.
   В шапке — только «📱 Вход», звук и строка о связи; итоги жизни погибшего героя и пароль мира — поверх всего */
#veil { display: none; }
html.nohero #veil { display: grid; place-items: center; position: fixed; inset: 0; z-index: 9; overflow: hidden; color: #e6e3ee; font-family: 'PT Sans', system-ui, sans-serif;
  background: radial-gradient(120% 85% at 50% 115%, #2b3452 0%, #161b2d 46%, #0a0b12 100%); }
#veil .boot-word span { opacity: 1; animation: boot-shine 4.4s ease-in-out calc(1.5s + var(--i) * .12s) infinite; }
html.nohero #view, html.nohero #vignette, html.nohero #grain, html.nohero #left, html.nohero #right, html.nohero #cmd, html.nohero #bubbles, html.nohero #tip,
html.nohero #minimap-wrap, html.nohero #talk, html.nohero #door, html.nohero #world, html.nohero #absence, html.nohero #paused, html.nohero #rel-cards, html.nohero #cont-badge,
html.nohero #inv, html.nohero #gear, html.nohero #enc, html.nohero #meet, html.nohero #dossier { display: none !important; }
html.nohero #top > :not(.voice-wrap):not(#net):not(button:not([id])), html.nohero #top #voice-btn, html.nohero #top #voice-menu { display: none !important; }
html.nohero #top { text-shadow: none; }
html.nohero #toast { z-index: 40; }
html.nohero #creator.modal { background: rgba(8, 7, 14, 0.35); }
html.nohero #creator-cancel { display: none; }
html.nohero #creator .actions button[type=submit] { min-width: 200px; }
@media (min-width: 1280px) {
  /* широкий экран: «ЗИМА» слева, форма справа */
  html.nohero:not(.m) #veil .boot-center { justify-self: start; margin-left: max(4vw, calc(50vw - 780px)); }
  html.nohero:not(.m) #veil .boot-word { font-size: clamp(56px, 7.5vw, 120px); }
  html.nohero:not(.m) #creator.modal { justify-items: end; padding-right: max(3vw, calc(50vw - 800px)); }
}
html.nohero #summary { background: rgba(8, 7, 14, 0.88); }
@media (prefers-reduced-motion: reduce) { #veil * { animation: none !important; } }