/* Стили игры, часть «game-panels»: панель способностей, подсказки, лист героя, лобби, чат, журнал, бросок, патч-ноты, мануал. Порядок подключения частей (index.html) важен: поздние правила перекрывают ранние. */
/* ───────────── Панель способностей в духе WoW ───────────── */
#actionbar.wow {
  min-height: 88px; padding: 7px 10px 4px; gap: 6px 10px; flex-wrap: wrap; align-items: center;
  background: linear-gradient(180deg, #2b2016 0%, #17110b 55%, #0f0b07 100%);
  border-top: 2px solid #8a6a32; box-shadow: inset 0 1px 0 rgba(255,220,150,.18), 0 -6px 18px rgba(0,0,0,.5);
}
.wb-unit {
  flex: 0 1 220px; min-width: 175px; display: flex; align-items: center; gap: 8px; padding: 4px 8px 4px 4px; border-radius: 40px 10px 10px 40px;
  background: linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.25)); border: 1px solid #5a4630;
}
.wb-unit.turn { border-color: var(--gold2); box-shadow: 0 0 12px rgba(240,192,96,.35); }
.wb-face {
  position: relative; flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-size: 28px; overflow: visible;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 70%, #fff 30%), var(--c) 55%, color-mix(in srgb, var(--c) 50%, #000 50%));
  border: 3px solid #c8a050; box-shadow: 0 0 0 2px #2a1d10, inset 0 0 10px rgba(0,0,0,.6);
}
.wb-lvl { position: absolute; bottom: -5px; left: -5px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800; color: #ffe6a0; background: #2a1d10; border: 2px solid #c8a050; }
.wb-info { flex: 1; min-width: 0; }
.wb-name { font-weight: 700; font-size: 13px; color: #ffe6a8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wb-name .turn-timer { font-weight: 400; font-size: 11px; color: #ffb0a0; margin-left: 4px; }
.wb-bar { position: relative; height: 14px; margin-top: 3px; background: #0c0805; border: 1px solid #3a2c1e; border-radius: 3px; overflow: hidden; }
.wb-bar i { position: absolute; inset: 0 auto 0 0; transition: width .4s; }
.wb-bar.hp i { background: linear-gradient(180deg, #4ad04a, #1f8a24); }
.wb-bar.mp i { background: linear-gradient(180deg, #4a8aff, #1e4ab8); }
.wb-bar span { position: relative; display: block; text-align: center; font-size: 10.5px; line-height: 13px; font-weight: 600; text-shadow: 0 1px 2px #000, 0 0 3px #000; }
.wb-bar span em, .pc-bar span em, .bar span em { font-style: normal; color: #bfe8ff; font-weight: 700; }
.barr { position: absolute; top: 0; left: 0; height: 40%; background: linear-gradient(90deg, rgba(170,225,255,.95), rgba(120,200,255,.75)); box-shadow: 0 0 6px rgba(160,220,255,.8); z-index: 1; }
.bar .barr { height: 35%; }
.wb-pips { display: flex; gap: 4px; margin-top: 4px; flex-wrap: wrap; }
.wb-pip { font-size: 10.5px; padding: 0 6px; border-radius: var(--radius); border: 1px solid #3a2c1e; color: #6a5a48; background: rgba(0,0,0,.35); white-space: nowrap; }
.wb-pip.on { color: #ffe6a8; border-color: #8a6a32; background: rgba(120,80,20,.35); }
.wb-wait { font-size: 11px; color: var(--muted); }

.wb-main { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.wb-slots { display: flex; gap: 5px; padding: 4px 6px; border-radius: var(--radius); background: linear-gradient(180deg, #1a130c, #0b0805); border: 1px solid #4a3a26; box-shadow: inset 0 2px 6px rgba(0,0,0,.8); }
.wb-pots, .wb-extra { flex: none; }
.wb-hint { font-size: 11px; color: var(--gold2); }
.slot {
  position: relative; flex: none; width: 50px; height: 50px; padding: 0; border-radius: var(--radius); overflow: visible; margin-bottom: 14px;
  background: #000; border: 2px solid #6a5232; box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgba(255,230,170,.15);
  transition: transform .08s, border-color .12s, box-shadow .12s, filter .12s;
}
.slot:hover:not(.off) { border-color: #f0d080; box-shadow: 0 0 0 1px #000, 0 0 10px rgba(255,220,120,.6); transform: translateY(-1px); background: #000; }
.slot:active:not(.off) { transform: translateY(1px) scale(.97); }
.slot .slot-ic { display: block; width: 100%; height: 100%; border-radius: 4px; object-fit: cover; pointer-events: none; }
.slot .ab-ic-txt { display: grid; place-items: center; font-size: 28px; }
.slot-key { position: absolute; top: 1px; right: 4px; font-size: 11px; font-weight: 700; color: #fff; text-shadow: 0 0 3px #000, 0 1px 2px #000; pointer-events: none; }
.slot-mp { position: absolute; bottom: 1px; right: 3px; font-size: 10.5px; font-weight: 700; color: #8fc0ff; text-shadow: 0 0 3px #000, 0 1px 2px #000; pointer-events: none; }
.slot-mp.free { color: #ffe27a; }
.slot-n { position: absolute; bottom: 1px; right: 3px; font-size: 12px; font-weight: 800; color: #fff; text-shadow: 0 0 3px #000, 0 1px 2px #000; }
.slot-val { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: 2px; white-space: nowrap; font-size: 10.5px; font-weight: 700; text-shadow: 0 1px 2px #000; pointer-events: none; }
.slot-val.dmg { color: #ffb08a; }
.slot-val.drain { color: #ff8ab0; }
.slot-val.heal { color: #8af08a; }
.slot-val.barrier { color: #9ad8ff; }
.slot-val.move { color: #e8d9a0; }
.slot-val.potion { color: var(--muted); font-weight: 400; font-size: 10px; }
.slot-cd {
  position: absolute; inset: 0; border-radius: 4px; display: grid; place-items: center; pointer-events: none;
  background: conic-gradient(rgba(0,0,0,.72) calc(var(--p) * 360deg), rgba(0,0,0,.25) 0);
}
.slot-cd b { font-size: 22px; font-weight: 800; color: #ffe27a; text-shadow: 0 0 4px #000, 0 2px 3px #000; }
.slot.off { filter: grayscale(.75) brightness(.6); cursor: var(--cur); }
.slot.nomana .slot-ic { filter: sepia(1) hue-rotate(180deg) saturate(3) brightness(.55); }
.slot.nomana { filter: none; }
.slot.active { border-color: #ffe27a; box-shadow: 0 0 0 1px #000, 0 0 14px rgba(255,220,90,.95), inset 0 0 12px rgba(255,220,90,.6); }
.slot.free:not(.off) { border-color: #9a8a4a; }
.slot.on { border-color: #7ad0ff; animation: slotOn 1.4s ease-in-out infinite; }
@keyframes slotOn { 50% { box-shadow: 0 0 0 1px #000, 0 0 16px rgba(120,200,255,.95); } }
.slot.potion { border-color: #5a4a3a; }
/* перетаскивание способности на другое место панели (barDrag в app-game.js) */
.slot.dragging { opacity: .35; }
.slot.drop-l { box-shadow: -5px 0 0 -1px #ffe27a, 0 0 0 1px #000; }
.slot.drop-r { box-shadow: 5px 0 0 -1px #ffe27a, 0 0 0 1px #000; }
.wb-end {
  flex: none; display: flex; flex-direction: column; align-items: center; padding: 7px 14px; font-family: var(--font-display); font-size: 14px; font-weight: 700; color: #2a1806;
  background: linear-gradient(180deg, #ffe08a, #d8a038 60%, #a8741e); border: 2px solid #5a3a10; border-radius: var(--radius);
  box-shadow: 0 0 0 1px #000, inset 0 1px 0 rgba(255,255,255,.5), 0 4px 10px rgba(0,0,0,.5);
}
.wb-end small { font-family: "Segoe UI", sans-serif; font-size: 10px; font-weight: 600; opacity: .7; }
.wb-end:hover:not(:disabled) { background: linear-gradient(180deg, #fff0b0, #e8b048 60%, #b8842e); border-color: #5a3a10; }

/* Подсказка способности — как тултип WoW */
.ab-tip {
  position: fixed; z-index: 60; width: 300px; pointer-events: none; line-height: 1.35;
  border: 1px solid #6a7a9a; 
  box-shadow: 0 0 0 1px #000, 0 8px 24px rgba(0,0,0,.7);
}
.tt-title { display: flex; align-items: center; gap: 8px; font-size: 15px; color: #fff; margin-bottom: 4px; }
.tt-ic { width: 30px; height: 30px; border-radius: 4px; border: 1px solid #000; }
.tt-row { display: flex; justify-content: space-between; gap: 10px; color: #fff; }
.tt-est { margin-top: 6px; color: #ffd100; }
.tt-est b { font-size: 14px; }
.tt-est.heal { color: #5aff6a; }
.tt-est.barrier { color: #8ad8ff; }
.tt-src { color: #8a94aa; font-size: 11.5px; }
.tt-desc { margin-top: 6px; color: #fff; }
.tt-warn { margin-top: 6px; color: #ff6a5a; }
.tt-meta { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 4px; }
.tt-meta span { padding: 1px 7px; border-radius: 99px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); color: #dfe6f5; font-size: 11.5px; white-space: nowrap; }
.tt-crit { color: #b9c2d6; font-size: 11.5px; }
.tt-more { margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,.12); }
.tt-key { margin-top: 6px; color: #7f8aa3; font-size: 11px; }

/* Описания способностей и предметов (fmtDesc в app-sheet.js): текст белый, выделены числа, эффекты и условия */
.d-num { color: #ffd34d; font-weight: 700; white-space: nowrap; }
.d-eff { color: #c9a6ff; font-weight: 600; }
.d-cond { color: #7fe39a; font-weight: 600; }

/* ───────────── Лист героя и окно характеристик ───────────── */
.sheet-head { display: flex; align-items: center; gap: 10px; }
.st-list { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; }
.st-chip { font-size: 11.5px; padding: 2px 8px; border-radius: var(--radius); border: 1px solid; }
.st-chip.cc { color: #ffd2c8; border-color: #ff6a4a; background: rgba(120,14,14,.45); }
.st-chip.bad { color: #ffe2b8; border-color: #e09040; background: rgba(70,36,10,.45); }
.st-chip.good { color: #d8f2ff; border-color: #5ab8e8; background: rgba(12,42,62,.45); }
.st-chip.fake { color: #f4d8ee; border: 1px dashed #ffa8e8; background: rgba(40,14,40,.35); opacity: .7; cursor: help; }
.stat-secs { display: grid; gap: 8px; margin: 10px 0; }
.stat-secs:not(.compact) { grid-template-columns: 1fr 1fr; }
.stat-sec { border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 8px; background: rgba(0,0,0,.18); }
.stat-sec h5 { margin: 0 0 4px; font-family: var(--font-display); font-size: 13px; color: var(--gold2); }
.stat-row { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; padding: 1.5px 0; border-bottom: 1px dashed rgba(74,60,44,.6); cursor: help; }
.stat-row:last-child { border-bottom: 0; }
.stat-row span { color: var(--muted); }
.stat-row b { color: var(--text); white-space: nowrap; }
.stat-row.zero b { color: #6a5a48; font-weight: 400; }
.stats div.main { border-color: var(--gold); box-shadow: inset 0 0 0 1px rgba(217,164,65,.4); }
.ab-rows { display: flex; flex-direction: column; gap: 6px; }
.abr { display: flex; gap: 8px; align-items: flex-start; padding: 5px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(0,0,0,.15); }
.abr-ic { flex: none; width: 40px; height: 40px; border-radius: var(--radius); border: 1px solid #000; box-shadow: 0 0 0 1px #6a5232; }
.abr-main { min-width: 0; font-size: 12.5px; }
.abr-val { font-size: 12px; margin-left: 4px; }
.abr-val.dmg { color: #ffb08a; }
.abr-val.drain { color: #ff8ab0; }
.abr-val.heal { color: #8af08a; }
.abr-val.barrier { color: #9ad8ff; }
.abr-desc { color: var(--text); font-size: 12px; margin-top: 2px; }

/* Вкладка «Герой» (renderHero): главное строкой, способности строками, второстепенное — по раскрытию */
.hero-keys { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin: 8px 0 4px; }
.hero-keys span { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 4px 2px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(0,0,0,.2); font-size: 12px; cursor: help; }
.hero-keys b { font-size: 14px; color: var(--text); }
.hero-h { margin: 12px 0 6px; font-size: 14px; }
.hero-h small { font-family: inherit; font-size: 11px; font-weight: 400; letter-spacing: 0; }
.abm-list { display: flex; flex-direction: column; gap: 3px; }
.abm { border: 1px solid var(--line); border-radius: var(--radius); background: rgba(0,0,0,.18); }
.abm.open { border-color: #7a6440; background: rgba(0,0,0,.3); }
.abm-row { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 8px; width: 100%; padding: 3px 6px 3px 3px; cursor: var(--cur-hand); font-size: 13px; }
.abm-row:hover { background: rgba(255,255,255,.04); }
.abm-ic { flex: none; width: 28px; height: 28px; border-radius: 4px; border: 1px solid #000; }
.abm-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.abm-name i { font-style: normal; color: var(--muted); font-size: 11px; margin-right: 5px; }
.abm-val { font-weight: 700; font-size: 12.5px; color: #ffb08a; }
.abm-val.heal { color: #8af08a; } .abm-val.barrier { color: #9ad8ff; } .abm-val.drain { color: #ff8ab0; }
.abm-meta { color: var(--muted); font-size: 11px; white-space: nowrap; min-width: 38px; text-align: right; }
.abm-cd { color: #ff9a7a; font-weight: 600; }
.abm-body { padding: 2px 8px 7px 39px; font-size: 12.5px; }
.abm-desc { margin-top: 3px; color: var(--text); line-height: 1.4; }
.inv-mini .inv-item { padding: 3px 0; }
.inv-mini .inv-item .ii { font-size: 17px; }
.inv-mini .inv-item .ii .item-ic { width: 28px; height: 28px; }
.inv-mini .inv-item .in { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
button.fold { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 6px; width: 100%; margin-top: 12px; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(0,0,0,.2); color: var(--gold2); font-size: 13px; cursor: var(--cur-hand); }
button.fold::after { content: '▸'; margin-left: auto; color: var(--muted); transition: transform .15s; }
button.fold.open::after { transform: rotate(90deg); }
button.fold:hover { border-color: #7a6440; }
.fold-n { background: var(--green); color: #fff; border-radius: 99px; padding: 0 6px; font-size: 11px; }
.fold-body { padding: 8px 2px 0; }
.cw-body { margin-top: 10px; }
.cw-col h4 { margin: 12px 0 6px; }
.cw-others { display: flex; gap: 4px; }
.cw-others button { padding: 3px 7px; font-size: 16px; }
.cw-tal { display: flex; flex-direction: column; gap: 4px; }
.cw-tal > div { font-size: 12.5px; padding: 4px 6px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(0,0,0,.15); }
.cw-tal > div > span:first-child { margin-right: 4px; }
.cw-tal small { display: block; color: var(--muted); }
.pc-bar .barr { height: 35%; }

@media (max-width: 900px) {
  .side-resizer, .chat-resizer { display: none; }
  .cw-body, .stat-secs:not(.compact) { grid-template-columns: 1fr; }
  #actionbar.wow { flex-wrap: wrap; }
  .wb-unit { width: 100%; }
  .map-hint { display: none !important; }
}

.ic-inline { width: 1.15em; height: 1.15em; object-fit: contain; vertical-align: -0.2em; border-radius: 3px; }

.event-card .ev-img { width: 100%; max-height: 240px; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--line); margin-bottom: 6px; }
.dlg-face .face-img { border-radius: 50%; }

/* ── Вкладка страницы меню в #mp-pane (друзья профиля) ── */
.mp-pane { flex: 1; overflow: auto; padding: 12px 16px 24px; max-width: 1100px; width: 100%; margin: 0 auto; }

.cat-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; flex: 1; }

.stars { color: var(--gold2); letter-spacing: 1px; }
.stars.small { font-size: 11px; }

.cp-head { display: grid; grid-template-columns: 300px 1fr; gap: 16px; }

.rate-stars { display: inline-flex; gap: 2px; }
.rate-stars .star { background: none; border: none; font-size: 26px; padding: 0 2px; color: #5a4a36; cursor: var(--cur-hand); line-height: 1; }
.rate-stars .star.on { color: var(--gold2); }
.rate-stars:hover .star { color: var(--gold2); }
.rate-stars .star:hover ~ .star { color: #5a4a36; }

.cp-c { border-top: 1px solid var(--line); padding: 8px 0; }
.cp-c-h { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cp-c-t { white-space: pre-wrap; margin-top: 3px; overflow-wrap: anywhere; }
button.tiny { padding: 0 6px; font-size: 12px; margin-left: auto; }

.danger-t { color: #ff9a8a; }

@media (max-width: 760px) {
  .cp-head, .cat-page.in-modal .cp-head { grid-template-columns: 1fr; }

}

/* ───────── Чат: вкладки «Общение» и «События» ───────── */
.chat-tabs { display: flex; align-items: center; gap: 2px; padding: 3px 6px 0; border-bottom: 1px solid var(--line); background: rgba(0,0,0,.18); }
.chat-tabs button { border: 0; border-radius: var(--radius) 6px 0 0; background: transparent; padding: 5px 10px; font-size: 12.5px; border-bottom: 2px solid transparent; box-shadow: none; }
.chat-tabs .chat-x { padding: 1px 7px; font-size: 12px; border-radius: var(--radius); }
#room-chat-slot .chat-x { display: none; }
.pts-badge.dim { background: #6a5a44; color: #f0e4cc; }

/* ───────── Карточки героев: следование и призванные существа ───────── */
.pc-follow { position: absolute; right: 4px; top: 4px; padding: 0 5px; font-size: 12px; line-height: 18px; border-radius: var(--radius); background: rgba(20,15,10,.85); opacity: .75; }
.pc-follow:hover { opacity: 1; border-color: var(--gold2); }
.pc-follow.on { opacity: 1; border-color: var(--gold2); }
.pc-lead { margin-top: 3px; font-size: 10.5px; color: var(--gold2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard.pet { padding: 3px 6px 3px 4px; gap: 6px; border-color: rgba(122,208,106,.45); background: linear-gradient(90deg, rgba(18,30,15,.92), rgba(18,30,15,.72)); }
.pcard.pet::before { content: ''; position: absolute; left: -14px; top: -8px; width: 12px; height: 22px; border-left: 2px solid rgba(122,208,106,.5); border-bottom: 2px solid rgba(122,208,106,.5); border-bottom-left-radius: 6px; }
.pcard.pet .pc-face { border-width: 1.5px; border-color: #7ad06a; }
.pcard.pet .pc-name { font-size: 11.5px; color: #b8e8a8; }
.pcard.pet .pc-bar { height: 10px; }
.pcard.pet .pc-bar span { font-size: 8.5px; line-height: 9px; }

/* ───────── Голосование в разговоре ───────── */
.votes { display: inline-flex; gap: 2px; vertical-align: middle; margin-left: 6px; }
.votes:empty { display: none; }
.vote-face { width: 22px; height: 22px; border-radius: 50%; overflow: hidden; display: inline-grid; place-items: center; font-size: 12px; background: var(--c); border: 1.5px solid #e8d6a8; box-shadow: 0 1px 4px rgba(0,0,0,.6); animation: pop .2s ease-out; }
.vote-face.mine { border-color: var(--gold2); box-shadow: 0 0 6px rgba(240,192,96,.8); }
.vote-face .face-img { width: 100%; height: 100%; }
.dlg-opts button.voted { border-color: var(--gold2); background: rgba(217,164,65,.14); }
.dlg-opts button .votes { float: right; margin-top: -1px; }
.dlg-hint .turn-timer { color: var(--gold2); font-weight: 600; }

/* ───────── «Ваш ход» на карте мира ───────── */
.turn-pop {
  position: absolute; left: 50%; top: 34%; transform: translateX(-50%); z-index: 7; width: max-content;
  display: flex; align-items: center; gap: 14px; max-width: min(520px, 92%); padding: 12px 16px; border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(48,34,16,.97), rgba(24,17,10,.95)); border: 2px solid var(--gold2);
  box-shadow: 0 10px 34px rgba(0,0,0,.65), 0 0 26px rgba(240,192,96,.35); animation: pop .22s ease-out;
}
.tp-face { flex: none; width: 54px; height: 54px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; font-size: 28px; background: var(--c); border: 2px solid var(--gold2); }
.tp-face .face-img { width: 100%; height: 100%; }
.tp-main { display: flex; flex-direction: column; gap: 3px; }
.tp-main b { font-family: var(--font-display); font-size: 20px; color: var(--gold2); }
.tp-main span { font-size: 13px; color: var(--text); }

/* ───────── Журнал (окно, клавиша J) ───────── */
.jw-icon { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-size: 26px; background: radial-gradient(circle at 35% 30%, #7a5a30, #3a2814); border: 2px solid var(--gold); }
.jw-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 18px; margin-top: 12px; font-size: 14.5px; line-height: 1.5; }
.jw-col { min-width: 0; }
.jw-col h4 { margin: 0 0 8px; font-family: var(--font-display); font-size: 16px; }
.jw-sec { padding: 12px 14px; margin-bottom: 12px; border: 1px solid var(--line); }
.jw-chapter { font-family: var(--font-display); font-size: 18px; }
.jw-obj { margin: 6px 0; font-size: 15.5px; }
.jw-sec .quests { font-size: 14px; }
.jw-sec .quests li small, .jw-sec .kn-row small { font-size: 12.5px; }
.jw-sec .kn-row { font-size: 14px; }
.jw-sec .wv { margin-bottom: 8px; }
.jw-log { max-height: calc(100vh - 150px); overflow-y: auto; padding-right: 6px; }
.jw-ch { margin-bottom: 14px; padding: 10px 14px; border-left: 3px solid var(--line); }
.jw-ch h5 { margin: 0 0 6px; font-family: var(--font-display); font-size: 15.5px; color: #f3e1b8; }
.jw-ch ul { list-style: none; margin: 0; padding: 0; }
.jw-ch li { padding: 5px 0; border-bottom: 1px dashed rgba(255,255,255,.07); }
.jw-ch li:last-child { border-bottom: 0; }
@media (max-width: 900px) {
  .jw-body { grid-template-columns: 1fr; }
  .jw-log { max-height: none; }
  .turn-pop { top: 30%; }
}

/* ───────── Выбранный ответ в разговоре ───────── */
.dlg-opts.picking { pointer-events: none; }
.dialog.pickwait .dlg-line, .dialog.pickwait #dlg-narr { visibility: hidden; }
.dlg-opts.picking button:not(.picked) { opacity: .25; transform: scale(.97); filter: grayscale(.6); transition: opacity .35s, transform .35s, filter .35s; }
.dlg-opts button.picked {
  border-color: var(--gold2); color: #fff3c8; background: linear-gradient(90deg, rgba(217,164,65,.38), rgba(217,164,65,.1));
  animation: dlgPick .85s ease-out both;
}
.dlg-opts button.picked .key { color: transparent; }
.dlg-opts button.picked .key::before { content: '✔'; position: absolute; inset: 0; display: grid; place-items: center; color: var(--gold2); font-size: 11px; }
@keyframes dlgPick {
  0% { transform: scale(1); box-shadow: 0 0 0 rgba(240,192,96,0); }
  25% { transform: scale(1.03); box-shadow: 0 0 22px rgba(240,192,96,.75); }
  60% { transform: scale(1.01); box-shadow: 0 0 14px rgba(240,192,96,.5); }
  100% { transform: translateX(6px) scale(1); box-shadow: 0 0 6px rgba(240,192,96,.3); opacity: .9; }
}

/* ───────── Бросок проверки (d20 как в Baldur's Gate 3) ───────── */
.dice-roll { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 16px; cursor: var(--cur-hand);
  background: radial-gradient(circle at 50% 45%, rgba(40,20,60,.55), rgba(0,0,0,.78)); animation: pop .2s ease-out; }
.dice-roll.closing { opacity: 0; transition: opacity .25s; }
.dr-box { width: min(440px, 100%); display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 22px 14px;
  background: linear-gradient(180deg, rgba(44,30,58,.97), rgba(20,14,26,.97)); border: 2px solid #e8c070; border-radius: 16px;
  box-shadow: 0 18px 60px rgba(0,0,0,.75), 0 0 40px rgba(160,100,255,.25); text-align: center; }
.dr-head { display: flex; align-items: center; gap: 10px; align-self: stretch; text-align: left; }
.dr-head b { display: block; font-family: var(--font-display); font-size: 18px; color: #fff0c8; }
.dr-head small { color: var(--muted); font-size: 13px; }
.dr-face { flex: none; width: 42px; height: 42px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; font-size: 22px; background: var(--c); border: 2px solid #e8c070; }
.dr-face .face-img { width: 100%; height: 100%; }
.dr-reason { font-style: italic; color: #d8c8f0; font-size: 14px; }
.dr-stage { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 4px 0; }
.dr-dc { width: 74px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.dr-dc small { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.dr-dc b { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; font-family: var(--font-display); font-size: 26px; color: #fff0c8;
  border: 2px solid #8a6a40; background: radial-gradient(circle at 40% 35%, #3a2a1a, #120c08); transition: border-color .3s, box-shadow .3s, color .3s; }
.dr-sum b { opacity: .45; }
.dice-roll.math .dr-sum b { opacity: 1; border-color: #e8c070; }
.dice-roll.is-ok .dr-sum b { border-color: #6ad06a; color: #c8ffc0; box-shadow: 0 0 18px rgba(106,208,106,.6); }
.dice-roll.is-fail .dr-sum b { border-color: #e05a4a; color: #ffc8c0; box-shadow: 0 0 18px rgba(224,90,74,.6); }
.dr-die { width: 150px; height: 150px; filter: drop-shadow(0 8px 14px rgba(0,0,0,.6)); }
.dr-svg { width: 100%; height: 100%; overflow: visible; }
.dr-num { font-family: var(--font-display); font-weight: 700; font-size: 46px; fill: #fff6dc; paint-order: stroke; stroke: #1a0e24; stroke-width: 4px; }
.dice-roll.rolling .dr-die { animation: drSpin 1.3s cubic-bezier(.2,.7,.3,1) both; }
.dice-roll.landed .dr-die { animation: drLand .45s ease-out both; }
.dice-roll.landed .dr-die { filter: drop-shadow(0 0 14px rgba(232,192,112,.7)); }
.dice-roll.landed .dr-die.crit { filter: drop-shadow(0 0 26px rgba(255,215,90,1)); }
.dice-roll.landed .dr-die.crit .dr-num { fill: #ffe27a; }
.dice-roll.landed .dr-die.fumble { filter: drop-shadow(0 0 22px rgba(224,60,40,.9)); }
.dice-roll.landed .dr-die.fumble .dr-num { fill: #ff8a7a; }
@keyframes drSpin {
  0% { transform: translateY(-60px) rotate(-260deg) scale(.35); opacity: 0; }
  12% { opacity: 1; }
  55% { transform: translateY(8px) rotate(620deg) scale(1.08); }
  75% { transform: translateY(-14px) rotate(900deg) scale(.96); }
  90% { transform: translateY(3px) rotate(1060deg) scale(1.02); }
  100% { transform: translateY(0) rotate(1080deg) scale(1); }
}
@keyframes drLand { 0% { transform: scale(1); } 35% { transform: scale(1.2); } 100% { transform: scale(1); } }
/* бонусы броска (dice.js): по одному под кубиком, влетают в него — число на кубике растёт */
.dr-mods { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; min-height: 30px; margin-top: -4px; }
.dr-bonus { padding: 3px 11px; border-radius: var(--radius); font-size: 14px; color: #e8dcff; background: rgba(122,74,176,.28); border: 1px solid rgba(200,176,255,.55);
  opacity: 0; transform: translateY(10px) scale(.8); transition: opacity .2s, transform .25s cubic-bezier(.2,.9,.3,1.4), filter .3s; }
.dr-bonus b { font-family: var(--font-display); font-size: 16px; color: #fff0c8; margin-right: 2px; }
.dr-bonus.neg { background: rgba(176,60,60,.25); border-color: rgba(255,150,140,.55); }
.dr-bonus.in { opacity: 1; transform: none; box-shadow: 0 0 14px rgba(200,176,255,.45); }
.dr-bonus.spent { opacity: .55; box-shadow: none; filter: saturate(.6); }
.dr-ghost { position: fixed; z-index: 71; margin: 0; pointer-events: none; opacity: 1 !important; transform: none; box-sizing: border-box; text-align: center; }
.dice-roll.landed .dr-die.bump { animation: drBump .3s ease-out both; }
@keyframes drBump { 0% { transform: scale(1); } 40% { transform: scale(1.14); filter: drop-shadow(0 0 22px rgba(200,176,255,.95)); } 100% { transform: scale(1); } }
.dr-math { display: flex; align-items: baseline; gap: 10px; font-family: var(--font-display); font-size: 22px; color: #f3e1b8; opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .3s; }
.dice-roll.math .dr-math { opacity: 1; transform: none; }
.dr-mod { color: #c8b0ff; }
.dr-mod small { font-family: "Segoe UI", sans-serif; font-size: 12px; color: var(--muted); }
.dr-total { font-size: 28px; color: #fff6dc; }
.dr-result { min-height: 40px; font-family: var(--font-display); font-size: 30px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  opacity: 0; transform: scale(.6); transition: opacity .25s, transform .35s cubic-bezier(.2,1.6,.4,1); }
.dr-result small { display: block; font-size: 14px; letter-spacing: 0; text-transform: none; color: #ffb3a8; }
.dice-roll.result .dr-result { opacity: 1; transform: none; }
.dr-result.ok { color: #8ef08a; text-shadow: 0 0 18px rgba(106,208,106,.7); }
.dr-result.fail { color: #ff7a6a; text-shadow: 0 0 18px rgba(224,90,74,.7); }
.dr-result.crit { color: #ffe27a; text-shadow: 0 0 24px rgba(255,215,90,.9); }
/* вдохновение (dice.js): после провала — переброс или принять; у остальных — кого ждём */
.dr-insp { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; opacity: 0; transform: translateY(6px); transition: opacity .3s .15s, transform .3s .15s; pointer-events: none; }
.dice-roll.result .dr-insp { opacity: 1; transform: none; pointer-events: auto; }
.dr-insp button.primary { background: linear-gradient(180deg, #8a5ad0, #5a3290); border-color: #c8a8ff; color: #fff6dc; box-shadow: 0 0 16px rgba(170,120,255,.55); }
.dr-insp button.primary:hover { box-shadow: 0 0 24px rgba(190,150,255,.85); }
.dr-insp.wait { font-size: 13px; color: #d8c8f0; font-style: italic; }
.dice-roll.again .dr-box { border-color: #c8a8ff; box-shadow: 0 16px 60px rgba(0,0,0,.7), 0 0 32px rgba(170,120,255,.4); }
.dr-skip { font-size: 11px; color: var(--muted); opacity: .7; }

/* ───────── «Что нового» (патч-ноуты) ───────── */
.patch-btn { position: relative; }
.patch-btn.fresh { border-color: var(--gold2); color: var(--gold2); }
.patch-btn.fresh::after { content: ''; position: absolute; top: -3px; right: -3px; width: 10px; height: 10px; border-radius: 50%; background: #e0483a; box-shadow: 0 0 8px rgba(224,72,58,.9); animation: pnPulse 1.6s ease-in-out infinite; }
@keyframes pnPulse { 50% { transform: scale(1.35); opacity: .7; } }
.pn-box { width: min(820px, 100%); }
.pn-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.pn-rel { border: 1px solid var(--line); border-radius: var(--radius); background: rgba(0,0,0,.18); padding: 0 14px; }
.pn-rel[open] { border-color: rgba(240,192,96,.55); padding-bottom: 8px; }
.pn-rel summary { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 11px 0; cursor: var(--cur-hand); font-size: 15px; color: var(--text); margin: 0; }
.pn-rel summary b { font-family: var(--font-display); font-size: 17px; color: #fff0c8; }
.pn-ver { font-size: 12px; padding: 1px 8px; border-radius: 99px; background: #3a2c1c; border: 1px solid var(--gold); color: var(--gold2); }
.pn-new { font-size: 11px; padding: 1px 7px; border-radius: 99px; background: var(--gold); color: #2a1a08; font-weight: 700; text-transform: uppercase; }
.pn-sec h4 { margin: 10px 0 6px; font-family: var(--font-display); font-size: 15.5px; color: var(--gold2); }
.pn-sec ul { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.55; }
.pn-sec li { margin: 4px 0; }

/* ───────── «Мануал» (справочник игрока, manual.js) ───────── */
#manual-win { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.man-box { width: min(1240px, 100%); height: calc(100vh - 32px); display: flex; flex-direction: column; overflow: hidden; }
.man-box .tw-head { flex-wrap: wrap; }
.man-q { width: min(300px, 100%); }
.man-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 14px; }
.man-nav { display: flex; flex-direction: column; gap: 4px; overflow-y: auto; }
.man-nav-b { text-align: left; background: rgba(0,0,0,.2); border: 1px solid var(--line); color: var(--text); padding: 8px 10px; border-radius: var(--radius); font-size: 14px; }
.man-nav-b.on { border-color: var(--gold); color: var(--gold2); background: rgba(240,192,96,.1); }
.man-content { overflow-y: auto; padding-right: 6px; font-size: 14px; line-height: 1.55; }
.man-content h2 { font-family: var(--font-display); color: var(--gold2); font-size: 24px; margin: 0 0 12px; }
.man-sec + .man-sec { margin-top: 26px; border-top: 1px solid var(--line); padding-top: 16px; }
.man-content .mb { margin: 0 0 12px; }
.man-content > .man-sec > .mb:not(.man-ab):not(.man-tal):not(.man-item):not(.man-card) { background: rgba(0,0,0,.16); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; }
.man-content ul { margin: 4px 0; padding-left: 20px; }
.man-content li { margin: 3px 0; }
.man-h { margin: 20px 0 8px; font-size: 19px; }
.man-sub { margin: 14px 0 6px; }
.man-hide { display: none !important; }
.man-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 10px; margin-bottom: 10px; }
.man-grid > .mb { margin: 0; }
.man-ab, .man-tal, .man-item, .man-card { background: rgba(0,0,0,.22); border: 1px solid var(--line); border-left: 3px solid var(--tc, var(--gold)); border-radius: var(--radius); padding: 9px 11px; }
.man-ab p, .man-tal p, .man-item p { margin: 6px 0 0; }
.man-tal .man-ab { margin: 8px 0 0; background: rgba(240,192,96,.06); }
.man-ab-h { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.man-ab-h b { color: #fff0c8; }
.man-ic { font-size: 20px; line-height: 1; }
.man-ic .item-ic, .man-img { width: 34px; height: 34px; }
.man-img { display: block; border-radius: var(--radius); }
.man-img.big { width: 44px; height: 44px; }
.man-ic.big { font-size: 38px; }
.man-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.man-tag { font-size: 11.5px; padding: 1px 7px; border-radius: 99px; border: 1px solid var(--line); color: var(--muted); background: rgba(0,0,0,.2); }
.man-tag.gold { color: var(--gold2); border-color: var(--gold); }
.man-tag.blue { color: #8ab8ff; border-color: #3a5a90; }
.man-tag.red { color: #ff9a8a; border-color: #8a3a30; }
.man-tag.green { color: #8ef08a; border-color: #3a7a3a; }
.man-rk { color: var(--muted); font-size: 12px; }
.man-ref { display: inline; padding: 1px 6px; border-radius: var(--radius); background: rgba(240,192,96,.1); border: 1px solid rgba(240,192,96,.3); color: #ffe2a0; -webkit-box-decoration-break: clone; box-decoration-break: clone; cursor: help; }
.man-ref i { font-style: normal; display: inline-block; width: 1.25em; height: 1em; line-height: 1; text-align: center; vertical-align: -0.12em; margin-right: .2em; }
.man-content li, .man-content p { line-height: 1.75; }
.man-ref.st { background: rgba(140,180,255,.08); border-color: rgba(140,180,255,.3); color: #cfe0ff; }
.man-ref.it { background: rgba(176,112,255,.08); border-color: rgba(176,112,255,.3); color: #e6d4ff; }
.man-pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 14px; position: sticky; top: 0; z-index: 2; background: #221b14; padding: 6px 0; }
.man-pill { border: 1px solid var(--line); background: rgba(0,0,0,.25); color: var(--text); border-radius: 99px; padding: 5px 12px; }
.man-pill.on { border-color: var(--tc, var(--gold)); color: #fff; box-shadow: inset 0 0 0 1px var(--tc, var(--gold)); background: rgba(240,192,96,.12); }
.man-cls-head { cursor: var(--cur-hand); display: flex; gap: 14px; align-items: center; border-left: 4px solid var(--tc); padding-left: 12px !important; }
.man-cls-head h3 { font-size: 22px; margin: 0; }
.man-cls-icon { font-size: 52px; }
.man-stats { display: flex; flex-wrap: wrap; gap: 8px; }
.man-stat { min-width: 110px; flex: 1; text-align: center; border: 1px solid var(--line); border-radius: var(--radius); padding: 6px; background: rgba(0,0,0,.2); }
.man-stat span { display: block; font-size: 12px; color: var(--muted); }
.man-stat b { font-size: 20px; margin-right: 4px; }
.man-stat i { color: var(--muted); font-style: normal; }
.man-stat.main { border-color: var(--gold); }
.man-tree { border: 1px solid var(--line); border-top: 3px solid var(--tc); border-radius: var(--radius); padding: 10px 12px; margin: 0 0 16px; background: rgba(0,0,0,.12); }
.man-tree-h { display: flex; gap: 10px; align-items: flex-start; }
.man-tree-h b { font-family: var(--font-display); font-size: 18px; color: #fff0c8; }
.man-row-h { font-size: 12.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--gold2); margin: 10px 0 6px; }
.man-tw { overflow-x: auto; }
.man-t { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.man-t th, .man-t td { border-bottom: 1px solid var(--line); padding: 5px 8px; text-align: left; vertical-align: top; }
.man-t th { color: var(--gold2); font-weight: 600; }
.man-none { text-align: center; padding: 30px; }
.man-small { font-size: 12px; }
@media (max-width: 760px) {
  .man-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .man-grid { grid-template-columns: minmax(0, 1fr); }
  .man-nav { flex-direction: row; overflow-x: auto; }
  .man-nav-b { white-space: nowrap; }
}