/* Стили игры, часть «campaign»: кампания: разговоры, кат-сцены, предыстория, награды. Порядок подключения частей (index.html) важен: поздние правила перекрывают ранние. */
/* холст героя в 3D (r3d-preview.js HERO3D): лист героя и выбор класса в комнате лобби */
.hero-3d-cv { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; }

/* ── Кампания: разговоры и бой у каждого свои (как в BG3) ── */
/* 👂 / ⚔️ у портрета союзника слева вверху: подслушать разговор, вступить в бой */
.pc-busy { position: absolute; left: 1px; top: 1px; z-index: 2; width: 22px; height: 22px; padding: 0; display: grid; place-items: center;
  font-size: 14px; line-height: 1; border-radius: 50%; background: rgba(20,15,10,.95); border: 1.5px solid var(--gold2); box-shadow: 0 0 10px rgba(240,192,96,.6); }
.pc-busy.ear { animation: ear-pulse 1.6s ease-in-out infinite; }
.pc-busy.fight { border-color: #e05a4a; box-shadow: 0 0 10px rgba(224,90,74,.7); }
.pc-busy.fight.off { opacity: .6; box-shadow: none; }
.pc-busy:hover { transform: scale(1.15); }
@keyframes ear-pulse { 50% { box-shadow: 0 0 16px rgba(240,192,96,.95); transform: scale(1.08); } }
/* меню союзника: клик по портрету или по герою на карте локации */
.ally-menu { position: fixed; z-index: 60; min-width: 230px; max-width: 300px; padding: 6px; display: flex; flex-direction: column; gap: 4px;
  background: linear-gradient(180deg, rgba(36,26,17,.98), rgba(26,19,12,.98)); border: 1px solid var(--gold); border-radius: var(--radius); box-shadow: 0 8px 26px rgba(0,0,0,.6); }
.ally-menu .am-head { display: flex; align-items: center; gap: 8px; padding: 2px 4px 6px; border-bottom: 1px solid rgba(217,164,65,.3); }
.ally-menu .am-head .pc-face { width: 26px; height: 26px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--c); border: 1.5px solid var(--gold); }
.ally-menu button { text-align: left; display: flex; flex-direction: column; gap: 1px; padding: 6px 8px; }
.ally-menu button small { font-size: 11px; color: var(--muted, #b9a888); font-weight: normal; }
.ally-menu button.off { opacity: .65; }
/* полоса сюжета: кто-то из отряда сражается */
.sb-fight { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin-bottom: 6px; padding: 4px 8px; border-radius: var(--radius);
  background: rgba(120,30,20,.35); border: 1px solid rgba(224,90,74,.6); font-size: 13px; }
.sb-fight small { flex-basis: 100%; text-align: center; color: #e8b8a8; }
/* окно разговора: кто в нём */
.dlg-who { display: inline-flex; align-items: center; gap: 3px; margin-right: 6px; }
.dlg-party { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 3px 0 2px; font-size: 12px; }
.dlg-pc { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px 1px 1px; border-radius: var(--radius); background: rgba(255,255,255,.06); border: 1px solid rgba(232,214,168,.18); }
.dlg-pc.mine { border-color: rgba(240,192,96,.55); }
.dlg-pc i { font-style: normal; font-size: 11px; }
.dlg-pc b { color: #8fe08f; }
.dlg-pc .vote-face { width: 20px; height: 20px; }
/* журнал: от кого запись, тайное, счёт записей героев */
.j-from { color: #9ec4e8; font-size: 11px; }
.journal li.sec, .jw-ch li.sec { color: #c8b0e8; }
.jw-count { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: 14px; font-size: 13px; }
.jw-count small { flex-basis: 100%; }
.jw-hero { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 2px; border-radius: var(--radius); background: rgba(0,0,0,.3); border: 1px solid rgba(217,164,65,.3); }
.jw-hero.mine { border-color: var(--gold2); }
.jw-hero b { color: var(--gold2); }

/* кат-сцена в открытом мире (r3d-open.js owCut): белая вспышка, полосы кадра; интерфейс игры прячется */
.cut-veil { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.cut-veil .cut-white { position: absolute; inset: 0; background: #f2f7ff; opacity: 0; }
.cut-veil .cut-bar { position: absolute; left: 0; right: 0; height: 0; background: #000; transition: height .6s ease; }
.cut-veil .cut-bar.top { top: 0; } .cut-veil .cut-bar.bot { bottom: 0; }
.cut-veil.on .cut-bar { height: 9vh; }
/* весь интерфейс игры, как в разговоре (talk-mode): панель действий, чат, мини-карта, кнопки окон, награды — кадр чистый */
body.cut-on :is(#party-cards, #hud-tr, #story-bar, #map-ctl, #actionbar, #hud-chat, #hud-menu, #boss-bar, #initiative, #turn-pop, #dmg-meter, #target-hud, #prep-banner, #tooltip, .reward-panel) { opacity: 0; pointer-events: none; transition: opacity .4s ease; }

/* ───── Разговор, как в BG3 (cine.js): камера у героя и собеседника, реплика и ответы прямо поверх игры ───── */
/* интерфейс игры гаснет на время разговора (visibility — чтобы не ловил клики) и проявляется после него (talk-back) */
body.talk-mode :is(#party-cards, #hud-tr, #actionbar, #hud-chat, #hud-menu, #boss-bar, #initiative, #turn-pop, #dmg-meter, #tutor, #tooltip, #prep-banner, #target-hud) {
  opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s; }
body.talk-back :is(#party-cards, #hud-tr, #actionbar, #hud-chat, #hud-menu, #boss-bar, #dmg-meter) { animation: talk-fade .6s ease-out both; }
body.talk-mode #side { display: none; }
@keyframes talk-fade { from { opacity: 0; } }
/* низ экрана темнеет под текстом; заслонка закрывает карту от кликов, колеса и перетаскивания */
.talk-veil { display: none; }
body.talk-mode .talk-veil { display: block; position: fixed; inset: 0; z-index: 18;
  background: linear-gradient(to top, rgba(0,0,0,.84) 0%, rgba(0,0,0,.62) 15%, rgba(0,0,0,.24) 33%, transparent 50%); animation: talk-fade .9s ease-out both; }
body.talk-mode #dialog, body.talk-mode #whisper {
  position: fixed; left: 0; right: 0; top: auto; bottom: 3.5vh; margin: 0 auto; width: min(960px, calc(100vw - 32px)); max-width: none; z-index: 19;
  align-items: flex-start; gap: 16px; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; animation: talk-text .5s ease-out .3s both; }
@keyframes talk-text { from { opacity: 0; transform: translateY(12px); } }
body.talk-mode #whisper.stacked { top: 7vh; bottom: auto; }
/* лицо — только когда собеседника не видно в кадре (голос, объект сюжета, карта мира) */
body.talk-mode .dialog .dlg-face { width: 78px; height: 78px; font-size: 42px; margin-bottom: 6px; box-shadow: 0 0 0 1px #000, 0 6px 18px rgba(0,0,0,.7); }
body.talk-mode .dialog.framed .dlg-face { display: none; }
/* имя и звание — в строке реплики; над текстом справа — только голоса за уход, «тайно» и ✕ */
body.talk-mode .dialog .dlg-head { position: absolute; right: 0; bottom: 100%; margin-bottom: 10px; gap: 6px; }
body.talk-mode .dialog .dlg-head > b, body.talk-mode .dialog .dlg-head > .muted, body.talk-mode .dialog .dlg-head > .spacer { display: none; }
body.talk-mode .dialog .dlg-head button.ghost { padding: 2px 9px; color: var(--bg3-muted); background: rgba(0,0,0,.4); border: 1px solid rgba(200,171,114,.35); border-radius: 4px; }
body.talk-mode .dialog .dlg-head button.ghost:hover:not(:disabled) { color: var(--bg3-gold-hi); border-color: var(--bg3-gold); background: rgba(0,0,0,.6); }
body.talk-mode .dialog :is(.dlg-party, .dlg-hint, .dlg-narr, .dlg-line, .dlg-opts button) { text-shadow: 0 1px 2px #000, 0 0 10px rgba(0,0,0,.9); }
body.talk-mode .dialog .dlg-party { margin: 0 0 8px; font-size: 12.5px; }
body.talk-mode .dialog .dlg-narr { font-family: var(--bg3-serif); font-size: 16.5px; line-height: 1.4; color: #cbbd9c; margin: 0 0 6px; }
body.talk-mode .dialog .dlg-line { font-family: var(--bg3-serif); font-size: 20px; line-height: 1.45; color: #f1e9d8; max-height: 30vh; margin: 0 0 12px; }
body.talk-mode .dialog .dlg-spk { color: #e2c48a; font-weight: normal; }
body.talk-mode #whisper .dlg-spk { color: #d6b8ff; }
/* ответы — нумерованным списком, как в BG3: без рамок, наведение — светлее и с золотой дымкой слева */
body.talk-mode .dialog .dlg-opts { gap: 1px; transition: opacity .3s; }
body.talk-mode .dialog .dlg-opts button {
  display: block; width: 100%; padding: 3px 12px 3px calc(1.7em + 4px); font-family: var(--bg3-serif); font-size: 18.5px; line-height: 1.4; color: #d9c9a6;
  background: none; border: 0; border-radius: 0; box-shadow: none; transition: color .12s, background .12s; }
body.talk-mode .dialog .dlg-opts button:hover:not(:disabled), body.talk-mode .dialog .dlg-opts button:focus-visible {
  color: #fff3d0; background: linear-gradient(90deg, rgba(200,171,114,.18), rgba(200,171,114,.05) 55%, transparent); outline: none; }
body.talk-mode .dialog .dlg-opts button:active:not(:disabled) { transform: none; }
body.talk-mode .dialog .dlg-opts .key { all: unset; display: inline-block; width: 1.7em; margin-left: -1.7em; color: #b9a47c; }
body.talk-mode .dialog .dlg-opts .key::after { content: '.'; }
body.talk-mode .dialog .dlg-opts button.old { color: #8c8170; }
body.talk-mode .dialog .dlg-opts button.locked { opacity: .5; }
body.talk-mode .dialog .dlg-opts button.voted { color: var(--bg3-gold-hi); background: linear-gradient(90deg, rgba(200,171,114,.24), transparent 70%); }
body.talk-mode .dialog .dlg-opts :is(.chk, .kn, .tag) { font-size: 14px; }
/* выбранный ответ загорается, остальные гаснут */
body.talk-mode .dialog .dlg-opts button.picked { color: #fff3c8; background: linear-gradient(90deg, rgba(200,171,114,.3), transparent 75%); animation: none;
  text-shadow: 0 0 12px rgba(240,192,96,.7), 0 1px 2px #000; }
body.talk-mode .dialog .dlg-opts button.picked .key { color: inherit; }
body.talk-mode .dialog .dlg-opts button.picked .key::before { content: none; }
body.talk-mode .dialog.typing .dlg-opts, body.talk-mode .dialog.typing #dlg-say { opacity: 0; pointer-events: none; }
body.talk-mode #dlg-say input { background: rgba(0,0,0,.45); border-color: rgba(200,171,114,.4); }
body.talk-mode .dialog .dlg-hint { font-size: 12px; color: var(--bg3-muted); margin-top: 8px; }
body.talk-mode .dialog .dlg-hint.plain { display: none; }
.cine-rest { opacity: 0; }
@media (max-width: 700px) {
  body.talk-mode .dialog .dlg-line { font-size: 17px; } body.talk-mode .dialog .dlg-opts button { font-size: 16px; }
  body.talk-mode .dialog .dlg-face { width: 52px; height: 52px; font-size: 28px; }
}
/* узкий экран: карта — 60vh, ниже панели; в разговоре карта — на весь экран, реплика поверх неё */
@media (max-width: 900px) { body.talk-mode #map-wrap { height: 100vh; } }

/* ───── Предыстория во весь экран в начале кампании (renderIntro, app-story.js) ───── */
.intro { position: fixed; inset: 0; z-index: 45; background: #050302; overflow: hidden auto; display: grid; place-items: center; }
.intro-shade { animation: intro-in 1.6s ease-out both; }
@keyframes intro-in { from { opacity: 0; } to { opacity: 1; } }
.intro.leaving { opacity: 0; transition: opacity .9s ease; pointer-events: none; }
/* фон вступления — картина кампании видна целиком (story.intro.img); текст читается за счёт тени в середине (.intro-shade) */
.intro-bg { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .8; filter: saturate(.95); animation: intro-zoom 40s ease-out forwards; }
@keyframes intro-zoom { from { opacity: 0; transform: scale(1.04); } 5% { opacity: .8; } to { opacity: .8; transform: scale(1.16); } }
.intro-shade { position: fixed; inset: 0; background: radial-gradient(ellipse 46% 62% at 50% 50%, rgba(8,5,3,.78), rgba(8,5,3,.5) 65%, rgba(5,3,2,.28) 100%); }
.intro-body { position: relative; width: min(720px, calc(100vw - 32px)); padding: 7vh 0; text-align: center; }
.intro-icon { font-size: 44px; opacity: 0; animation: intro-up 1.2s ease-out forwards; }
.intro-title { font-family: var(--font-display); font-weight: normal; font-size: clamp(30px, 5vw, 48px); letter-spacing: 6px; text-transform: uppercase;
  color: var(--gold2); text-shadow: 0 0 24px rgba(240,170,80,.35), 0 2px 10px #000; margin: 6px 0 0; opacity: 0; animation: intro-up 1.2s ease-out .15s forwards; }
.intro-rule { width: 140px; height: 1px; margin: 18px auto 26px; background: linear-gradient(90deg, transparent, var(--gold2), transparent); opacity: 0; animation: intro-up 1s ease-out .4s forwards; }
.intro-body p { font-family: var(--font-display); font-size: clamp(16px, 2.1vw, 19px); line-height: 1.75; color: #eadcc0; text-shadow: 0 2px 8px #000;
  margin: 0 0 18px; opacity: 0; animation: intro-up 1.4s ease-out forwards; }
.intro-body p:last-of-type { font-style: italic; color: #f3d9a8; }
.intro-lines { list-style: none; padding: 0; margin: 26px auto 0; max-width: 520px; color: #b9a98c; font-size: 13.5px; line-height: 1.7; opacity: 0; animation: intro-up 1.2s ease-out forwards; }
.intro-lines li::before { content: '✦ '; color: var(--gold2); opacity: .7; }
.intro-go { margin-top: 30px; opacity: 0; animation: intro-up 1s ease-out forwards; }
.intro-go button { font-size: 16px; padding: 10px 34px; letter-spacing: 1px; }
.intro-wait { margin-top: 10px; min-height: 18px; font-size: 13px; }
@keyframes intro-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Карточка предмета: всплывающая у курсора (item-card.js ITIP) и в окне подтверждения */
.item-tip { position: fixed; z-index: 70; width: 260px; pointer-events: none; }
.item-tip .shop-card, .ui-dlg-extra .shop-card { background: linear-gradient(180deg, rgba(22,17,12,.98), rgba(10,8,6,.98)); box-shadow: 0 0 0 1px #000, 0 8px 24px rgba(0,0,0,.7); }
.item-card-foot { justify-content: flex-start; font-size: 11.5px; }
.ui-dlg-extra { margin: 8px auto 0; max-width: 300px; text-align: left; }
.inv-mini .inv-item .in .sc-help { white-space: normal; font-size: 11.5px; line-height: 1.35; }

/* окно «Сохранить игру»: запись поверх старого сохранения (app.js savegame) */
.ui-dlg-extra .save-over { display: flex; flex-direction: column; gap: 5px; max-height: 240px; overflow-y: auto; padding-right: 2px; margin-top: 6px; }
.save-over button { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left; padding: 6px 9px; }
.save-over button b { font-weight: 600; color: var(--text); }
.save-over button .muted { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
/* панель наград кампании (app-game.js rewardPanel) */
.reward-panel { position: fixed; top: 64px; left: 50%; z-index: 95; min-width: 280px; max-width: min(460px, calc(100vw - 32px)); padding: 12px 22px 14px; text-align: center; cursor: pointer;
  transform: translateX(-50%); border-radius: var(--radius); border: 1px solid rgba(232,192,96,.55);
  background: linear-gradient(180deg, rgba(34,26,16,.96), rgba(16,12,8,.96)); box-shadow: 0 10px 40px rgba(0,0,0,.65), 0 0 28px rgba(232,192,96,.18);
  animation: rw-in .45s cubic-bezier(.2,.9,.3,1.2) both; }
.reward-panel.out { animation: rw-out .45s ease-in both; }
.reward-panel::before, .reward-panel::after { content: ''; position: absolute; left: 18px; right: 18px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold2), transparent); }
.reward-panel::before { top: 5px; } .reward-panel::after { bottom: 5px; }
.rw-head { font-family: var(--font-display); font-size: 22px; color: var(--gold2); letter-spacing: .5px; text-shadow: 0 0 12px rgba(232,192,96,.45); }
.rw-icon { margin-right: 8px; }
.rw-quest { margin-top: 2px; color: var(--text); font-size: 14px; }
.rw-label { margin-top: 8px; font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--muted, #a89a80); }
.rw-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 10px; margin-top: 4px; }
.rw-list span { padding: 3px 10px; border-radius: var(--radius); background: rgba(232,192,96,.1); border: 1px solid rgba(232,192,96,.3); color: #f3e6c4; font-size: 14px; animation: rw-item .4s ease-out both; }
@keyframes rw-in { from { opacity: 0; transform: translate(-50%, -18px) scale(.94); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
@keyframes rw-out { to { opacity: 0; transform: translate(-50%, -12px); } }
@keyframes rw-item { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* запас вдохновения во вкладке «Сюжет» (app-story.js inspHtml) */
.insp-row { margin-top: 6px; display: flex; align-items: center; gap: 8px; font-size: 13px; color: #d8c8f0; cursor: help; }
.insp-pips { display: inline-flex; gap: 4px; }
.insp-pips i { width: 11px; height: 11px; transform: rotate(45deg); border: 1px solid rgba(200,168,255,.6); background: rgba(40,24,60,.8); }
.insp-pips i.on { background: radial-gradient(circle, #f4e8ff, #a070e0); box-shadow: 0 0 8px rgba(190,150,255,.9); }
#dlg-opts.insp-wait button { opacity: .5; pointer-events: none; }
.dice-roll.result .dr-insp:not(.wait) ~ .dr-skip { visibility: hidden; }