/* Стили игры, часть «hud-look»: оформление интерфейса игры в духе BG3, цель под мышью, вступление. Порядок подключения частей (index.html) важен: поздние правила перекрывают ранние. */
/* ───────────── Оформление интерфейса игры в духе BG3 (поверх разделов «Интерфейс экрана игры» и «Окна игры») ─────────────
   Почти чёрный тёплый камень с зерном, старое золото вместо жёлтого, металлическая кайма с самоцветами на скошенных углах,
   орнамент по центру верхней кромки, заглавные засечки с разрядкой. Орнаменты — свои SVG (переменные --bg3-*) */
:root {
  --bg3-ink: #0d0b09; --bg3-panel: #15120e; --bg3-panel2: #1e1913; --bg3-line: #4a3a24;
  --bg3-gold: #c8ab72; --bg3-gold-hi: #ecdcb0; --bg3-gold-lo: #6e5634; --bg3-text: #e4d9c0; --bg3-muted: #9a8e78;
  --bg3-serif: var(--font);
  --bg3-metal: linear-gradient(180deg, #f1e2b6 0%, #c8ab72 30%, #6e5634 52%, #b89a62 72%, #ecdcb0 100%);
  --bg3-ring: conic-gradient(from 200deg, #f1e2b6, #8a6a3c 18%, #ecdcb0 32%, #6e5634 50%, #c8ab72 66%, #5a4528 82%, #f1e2b6);
  --bg3-tl: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'30'%20height%3D'30'%20viewBox%3D'0%200%2030%2030'%3E%20%3Cg%20transform%3D'rotate(0%2015%2015)'%3E%20%3Cg%20fill%3D'none'%20stroke-linecap%3D'round'%3E%20%3Cpath%20d%3D'M1.5%2028V8L8%201.5H28'%20stroke%3D'%23c8ab72'%20stroke-width%3D'1.3'%2F%3E%20%3Cpath%20d%3D'M5.5%2024V10L10%205.5H24'%20stroke%3D'%23c8ab72'%20stroke-opacity%3D'.45'%20stroke-width%3D'1'%2F%3E%20%3Cpath%20d%3D'M1.5%2028h3M28%201.5v3'%20stroke%3D'%23ecdcb0'%20stroke-width%3D'1.3'%2F%3E%20%3C%2Fg%3E%20%3Cpath%20d%3D'M4.8%201.4L8.2%204.8L4.8%208.2L1.4%204.8Z'%20fill%3D'%230d0b09'%20stroke%3D'%23ecdcb0'%20stroke-width%3D'1'%2F%3E%20%3Cpath%20d%3D'M4.8%203.2L6.4%204.8L4.8%206.4L3.2%204.8Z'%20fill%3D'%23c8ab72'%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E"); --bg3-tr: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'30'%20height%3D'30'%20viewBox%3D'0%200%2030%2030'%3E%20%3Cg%20transform%3D'rotate(90%2015%2015)'%3E%20%3Cg%20fill%3D'none'%20stroke-linecap%3D'round'%3E%20%3Cpath%20d%3D'M1.5%2028V8L8%201.5H28'%20stroke%3D'%23c8ab72'%20stroke-width%3D'1.3'%2F%3E%20%3Cpath%20d%3D'M5.5%2024V10L10%205.5H24'%20stroke%3D'%23c8ab72'%20stroke-opacity%3D'.45'%20stroke-width%3D'1'%2F%3E%20%3Cpath%20d%3D'M1.5%2028h3M28%201.5v3'%20stroke%3D'%23ecdcb0'%20stroke-width%3D'1.3'%2F%3E%20%3C%2Fg%3E%20%3Cpath%20d%3D'M4.8%201.4L8.2%204.8L4.8%208.2L1.4%204.8Z'%20fill%3D'%230d0b09'%20stroke%3D'%23ecdcb0'%20stroke-width%3D'1'%2F%3E%20%3Cpath%20d%3D'M4.8%203.2L6.4%204.8L4.8%206.4L3.2%204.8Z'%20fill%3D'%23c8ab72'%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E"); --bg3-br: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'30'%20height%3D'30'%20viewBox%3D'0%200%2030%2030'%3E%20%3Cg%20transform%3D'rotate(180%2015%2015)'%3E%20%3Cg%20fill%3D'none'%20stroke-linecap%3D'round'%3E%20%3Cpath%20d%3D'M1.5%2028V8L8%201.5H28'%20stroke%3D'%23c8ab72'%20stroke-width%3D'1.3'%2F%3E%20%3Cpath%20d%3D'M5.5%2024V10L10%205.5H24'%20stroke%3D'%23c8ab72'%20stroke-opacity%3D'.45'%20stroke-width%3D'1'%2F%3E%20%3Cpath%20d%3D'M1.5%2028h3M28%201.5v3'%20stroke%3D'%23ecdcb0'%20stroke-width%3D'1.3'%2F%3E%20%3C%2Fg%3E%20%3Cpath%20d%3D'M4.8%201.4L8.2%204.8L4.8%208.2L1.4%204.8Z'%20fill%3D'%230d0b09'%20stroke%3D'%23ecdcb0'%20stroke-width%3D'1'%2F%3E%20%3Cpath%20d%3D'M4.8%203.2L6.4%204.8L4.8%206.4L3.2%204.8Z'%20fill%3D'%23c8ab72'%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E"); --bg3-bl: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'30'%20height%3D'30'%20viewBox%3D'0%200%2030%2030'%3E%20%3Cg%20transform%3D'rotate(270%2015%2015)'%3E%20%3Cg%20fill%3D'none'%20stroke-linecap%3D'round'%3E%20%3Cpath%20d%3D'M1.5%2028V8L8%201.5H28'%20stroke%3D'%23c8ab72'%20stroke-width%3D'1.3'%2F%3E%20%3Cpath%20d%3D'M5.5%2024V10L10%205.5H24'%20stroke%3D'%23c8ab72'%20stroke-opacity%3D'.45'%20stroke-width%3D'1'%2F%3E%20%3Cpath%20d%3D'M1.5%2028h3M28%201.5v3'%20stroke%3D'%23ecdcb0'%20stroke-width%3D'1.3'%2F%3E%20%3C%2Fg%3E%20%3Cpath%20d%3D'M4.8%201.4L8.2%204.8L4.8%208.2L1.4%204.8Z'%20fill%3D'%230d0b09'%20stroke%3D'%23ecdcb0'%20stroke-width%3D'1'%2F%3E%20%3Cpath%20d%3D'M4.8%203.2L6.4%204.8L4.8%206.4L3.2%204.8Z'%20fill%3D'%23c8ab72'%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E");
  --bg3-crest: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'160'%20height%3D'18'%20viewBox%3D'0%200%20160%2018'%3E%20%3Cg%20fill%3D'none'%20stroke%3D'%23c8ab72'%20stroke-width%3D'1.1'%20stroke-linecap%3D'round'%3E%20%3Cpath%20d%3D'M2%209H56M104%209H158'%2F%3E%20%3Cpath%20d%3D'M56%209c7%200%209-6%2015-6M104%209c-7%200-9-6-15-6M56%209c7%200%209%206%2015%206M104%209c-7%200-9%206-15%206'%2F%3E%20%3Cpath%20d%3D'M44%209c0-3%203-4%205-2M116%209c0-3-3-4-5-2'%20stroke-opacity%3D'.6'%2F%3E%20%3C%2Fg%3E%20%3Cpath%20d%3D'M80%201.5L87.5%209L80%2016.5L72.5%209Z'%20fill%3D'%230d0b09'%20stroke%3D'%23ecdcb0'%20stroke-width%3D'1.2'%2F%3E%20%3Cpath%20d%3D'M80%205L84%209L80%2013L76%209Z'%20fill%3D'%23c8ab72'%2F%3E%3C%2Fsvg%3E"); --bg3-gem: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'16'%20height%3D'16'%20viewBox%3D'0%200%2016%2016'%3E%20%3Cpath%20d%3D'M8%201.5L14.5%208L8%2014.5L1.5%208Z'%20fill%3D'%230d0b09'%20stroke%3D'%23c8ab72'%20stroke-width%3D'1.1'%2F%3E%3Cpath%20d%3D'M8%205L11%208L8%2011L5%208Z'%20fill%3D'%23c8ab72'%2F%3E%3C%2Fsvg%3E"); --bg3-noise: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'180'%20height%3D'180'%3E%3Cfilter%20id%3D'n'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'.85'%20numOctaves%3D'2'%20stitchTiles%3D'stitch'%2F%3E%20%3CfeColorMatrix%20values%3D'0%200%200%200%201%200%200%200%200%20.92%200%200%200%200%20.78%200%200%200%20.07%200'%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D'100%25'%20height%3D'100%25'%20filter%3D'url(%23n)'%2F%3E%3C%2Fsvg%3E");
  --bg3-stone: var(--bg3-noise), radial-gradient(ellipse at 50% -20%, rgba(120,92,52,.22), transparent 62%), linear-gradient(180deg, #1b1712, #110e0b 70%, #0d0b09);
  --bg3-corners: var(--bg3-tl) top left / 30px no-repeat, var(--bg3-tr) top right / 30px no-repeat, var(--bg3-br) bottom right / 30px no-repeat, var(--bg3-bl) bottom left / 30px no-repeat;
}
#screen-game { --hud-gold: var(--bg3-gold); --hud-gold2: var(--bg3-gold-hi); --hud-line: var(--bg3-line); }

/* ── панели HUD: камень, тонкая кайма старого золота ── */
.hb-panel, .hud-loc, .hud-tr .story-bar, .hm-row, .hud-chat, .hb-res, .hb-hint, .initiative, .ab-tip, #tooltip, .trd-bag, .trd-detail {
  background: var(--bg3-stone); border: 1px solid var(--bg3-line);
  box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgba(236,220,176,.05), inset 0 1px 0 rgba(236,220,176,.08), 0 8px 22px rgba(0,0,0,.6);
  color: var(--bg3-text);
}
.hud-loc b, .hud-tr .sb-ch, .hb-tab, .chat-tabs button, .trd-bh > b, .tw-head .sheet-name, .tw-head .trade-who b, .tw-box h4, .init-round, .init-banner,
.hb-msg, .hb-hint, .tt-title b, .jw-chapter, .trd-main > b, .chs-l .stats b, .cw-tal b, .abr-main b, .stat-sec h5 { font-family: var(--bg3-serif); }
/* золото заголовков — металлом по буквам */
.hud-loc b, .tw-head .sheet-name, .tw-head .trade-who b, .trd-bh > b {
  background: var(--bg3-metal); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none;
  filter: drop-shadow(0 1px 0 #000) drop-shadow(0 0 6px rgba(200,171,114,.18));
}

/* ── панель действий ── */
.hb-panel { padding-top: 14px; border-radius: 3px; border-color: #5a4528;
  background: var(--bg3-crest) center top -1px / 160px 18px no-repeat, var(--bg3-corners), var(--bg3-stone); }
.hb-panel::before { left: 6px; right: 6px; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(200,171,114,.55) 20%, transparent 42%, transparent 58%, rgba(200,171,114,.55) 80%, transparent); }
.hb-res { top: -15px; border-radius: 3px; padding: 3px 14px; border-color: #5a4528; }
.hb-sec + .hb-sec { border-left: 0; background: linear-gradient(180deg, transparent, rgba(200,171,114,.35), transparent) left center / 1px 80% no-repeat; }
.hb .slot { border: 1px solid #3c2f1d; border-radius: 2px; background: #070605;
  box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgba(236,220,176,.07), inset 0 0 10px rgba(0,0,0,.85); }
.hb .slot:hover:not(.off) { border-color: var(--bg3-gold); box-shadow: 0 0 0 1px #000, 0 0 10px rgba(236,220,176,.35), inset 0 0 0 1px rgba(236,220,176,.25); transform: none; }
.hb .slot.active { border-color: var(--bg3-gold-hi); box-shadow: 0 0 0 1px #000, 0 0 14px rgba(236,220,176,.7), inset 0 0 10px rgba(236,220,176,.35); }
.hb .slot.off { filter: grayscale(.85) brightness(.5); }
.hb .slot-key { font-family: var(--bg3-serif); color: var(--bg3-gold-hi); font-weight: 400; }
.hb-glyph { color: var(--bg3-gold); background: radial-gradient(circle at 50% 35%, #2a2219, #0b0907 78%); }
.hb-tabs { margin-top: 6px; gap: 0; }
.hb-tab { padding: 2px 14px 4px; font-size: 12.5px; letter-spacing: .6px; color: var(--bg3-muted); background: none; border: 0; border-radius: 0; }
.hb-tab:hover:not(:disabled) { color: var(--bg3-gold-hi); background: none; }
.hb-tab.on { color: var(--bg3-gold-hi); background: radial-gradient(ellipse at 50% 100%, rgba(200,171,114,.22), transparent 70%); border: 0;
  box-shadow: inset 0 -1px 0 var(--bg3-gold); }
.hb-msg { color: var(--bg3-text); }
/* круглый портрет: металлическое кольцо */
.hb-port { background: var(--bg3-ring); padding: 5px; box-shadow: 0 0 0 1px #000, 0 0 0 3px #120f0b, 0 0 0 4px #5a4528, 0 10px 22px rgba(0,0,0,.8); }
.hb-port.turn { box-shadow: 0 0 0 1px #000, 0 0 0 3px #120f0b, 0 0 0 4px var(--bg3-gold-hi), 0 0 24px rgba(236,220,176,.55); }
.hb-face { box-shadow: inset 0 0 0 2px #0a0806, inset 0 0 16px rgba(0,0,0,.6); }
.hb-hp { font-family: var(--bg3-serif); border-radius: 2px; background: #0d0b09; border-color: #6e5634; }
.hb-lvl { font-family: var(--bg3-serif); color: var(--bg3-gold-hi); border-color: #8a6a3c; background: radial-gradient(circle at 50% 35%, #2a2219, #0b0907); }
/* «Конец хода»: тёмная середина, металлический обод, песочные часы золотом; в свой ход — тёплое свечение */
.hb-end { background: radial-gradient(circle at 50% 38%, #2c241a, #0d0b09 72%); color: var(--bg3-gold-hi); border: 0;
  box-shadow: 0 0 0 4px #000, 0 0 0 5px #120f0b, 0 10px 22px rgba(0,0,0,.8); }
.hb-end::before { content: ''; position: absolute; inset: -5px; border-radius: 50%; padding: 5px; background: var(--bg3-ring);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.hb-end:not(.off) { box-shadow: 0 0 0 4px #000, 0 0 20px rgba(236,200,120,.45), inset 0 0 18px rgba(236,200,120,.25), 0 10px 22px rgba(0,0,0,.8); }
.hb-end:hover:not(.off) { background: radial-gradient(circle at 50% 38%, #3c3022, #120f0b 72%); filter: none; }
.hb-end.off { color: #5a4e3c; background: radial-gradient(circle at 50% 38%, #1d1813, #0b0907 72%); }
.hb-end.off::before { filter: saturate(.3) brightness(.6); }
.hb-end kbd { font-family: var(--bg3-serif); border-radius: 2px; background: #0d0b09; border-color: #6e5634; color: var(--bg3-gold-hi); }
@keyframes bg3Urge { 50% { box-shadow: 0 0 0 4px #000, 0 0 30px 6px rgba(236,200,120,.75), inset 0 0 22px rgba(236,200,120,.45); } }
.hb-end.urge { animation: bg3Urge 1.2s ease-in-out infinite; }
.hb-hint { border-radius: 2px; font-family: var(--bg3-serif); color: var(--bg3-gold-hi); }

/* ── портреты отряда: тонкая металлическая рамка, число здоровья — на тёмной плашке ── */
.pcard .pc-face { border: 0; border-radius: 2px; padding: 2px; background: var(--bg3-metal) border-box; box-shadow: 0 0 0 1px #000, 0 5px 14px rgba(0,0,0,.7); }
.pcard .pc-face > .face-img, .pcard .pc-face > .pc-ic { border-radius: 1px; 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%)); }
.pcard .pc-face > .face-img { width: 100%; height: 100%; box-shadow: inset 0 0 0 1px #000; }
.pcard.me .pc-face { background: linear-gradient(180deg, #fff3cf, #ecdcb0 30%, #a88850 60%, #ecdcb0); }
.pcard.cur .pc-face { box-shadow: 0 0 0 1px #000, 0 0 16px rgba(236,220,176,.75); }
.pcard:not(.me):not(.cur) .pc-face { filter: saturate(.85); }
.pcard.rel .pc-face, .pcard.team .pc-face { background: linear-gradient(180deg, var(--rel, var(--tc)), color-mix(in srgb, var(--rel, var(--tc)) 45%, #000)); }
.pc-dmg { left: 2px; right: 2px; bottom: 2px; background: linear-gradient(0deg, rgba(120,12,8,.82), rgba(170,28,20,.6)); }
.pc-hp { left: 2px; right: 2px; bottom: 2px; padding: 2px 0 1px; font-family: var(--bg3-serif); font-weight: 400; font-size: 11.5px; background: linear-gradient(0deg, rgba(0,0,0,.85), rgba(0,0,0,0)); }
.pc-mp { left: 2px; right: 2px; bottom: 2px; }
.pcard .pc-lvl { font-family: var(--bg3-serif); border-radius: 2px; color: var(--bg3-gold-hi); border-color: #6e5634; background: rgba(13,11,9,.9); }
.pc-sti { border-radius: 2px; background: var(--bg3-panel); box-shadow: 0 0 0 1px #000; }

/* ── справа вверху: мини-карта в металлическом кольце, плашка места, цель ── */
.hud-mini-wrap { position: relative; width: 200px; height: 200px; margin: 2px 0; }
.hud-mini-wrap .hud-mini { position: absolute; inset: 8px; width: 184px; height: 184px; margin: 0; box-shadow: inset 0 0 20px rgba(0,0,0,.8); }
.hud-ring { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; filter: drop-shadow(0 6px 14px rgba(0,0,0,.75)); }
.hud-loc { border-radius: 2px; padding: 4px 18px 5px; background: var(--bg3-gem) center bottom -8px / 16px no-repeat, var(--bg3-stone); }
.hud-loc b { font-size: 14px; letter-spacing: 2px; font-weight: 400; }
.hud-loc span { font-family: var(--bg3-serif); color: var(--bg3-muted); }
.hud-tr .story-bar { border-radius: 2px; padding: 9px 12px; background: var(--bg3-tl) top left / 22px no-repeat, var(--bg3-tr) top right / 22px no-repeat, var(--bg3-stone); }
.hud-tr .sb-ch { color: var(--bg3-gold-hi); font-weight: 400; letter-spacing: .5px; }
.hud-tr .sb-obj { font-family: var(--bg3-serif); color: var(--bg3-text); }
.hud-tr .map-ctl button { background: radial-gradient(circle at 50% 35%, #2a2219, #0b0907 78%); border-color: #5a4528; color: var(--bg3-gold); }

/* ── справа внизу: кнопки окон — металлические кольца ── */
.hm-row { border-radius: 3px; gap: 6px; padding: 7px; }
.hm-btn { border: 0; color: var(--bg3-gold); background: radial-gradient(circle at 50% 35%, #2a2219, #0b0907 78%);
  box-shadow: 0 0 0 1px #000, 0 0 0 2px #6e5634, 0 0 0 3px #000, inset 0 0 8px rgba(0,0,0,.7); }
.hm-btn:hover:not(:disabled) { color: var(--bg3-gold-hi); box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--bg3-gold-hi), 0 0 0 3px #000, 0 0 10px rgba(236,220,176,.35); background: radial-gradient(circle at 50% 35%, #3a2f22, #120f0b 78%); }
.hm-btn.active { color: var(--bg3-gold-hi); box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--bg3-gold), 0 0 0 3px #000, 0 0 10px rgba(236,220,176,.4); }

/* ── чат ── */
.hud-chat { border-radius: 3px; }
.hud-chat .chat-tabs { background: none; border-bottom: 0; box-shadow: inset 0 -1px 0 rgba(200,171,114,.25); }
.chat-tabs button { letter-spacing: .5px; color: var(--bg3-muted); }
.chat-tabs button.active { color: var(--bg3-gold-hi); border-bottom-color: var(--bg3-gold); background: radial-gradient(ellipse at 50% 100%, rgba(200,171,114,.18), transparent 70%); }
.hud-chat .chat-log { font-family: var(--bg3-serif); font-size: 13px; color: var(--bg3-text); }
.hud-chat input { background: #0b0907; border-color: #3c2f1d; }

/* ── очередь ходов ── */
.initiative { border-radius: 3px; border-color: #5a4528; background: var(--bg3-crest) center top -1px / 160px 18px no-repeat, var(--bg3-stone); padding-top: 16px; }
.init-face { border-radius: 2px; border-width: 1px; box-shadow: 0 0 0 1px #000, inset 0 0 8px rgba(0,0,0,.6); }
.init-p.cur .init-face { border-color: var(--bg3-gold-hi); box-shadow: 0 0 0 1px #000, 0 0 14px rgba(236,220,176,.7); }
.init-round b { color: var(--bg3-gold-hi); font-family: var(--bg3-serif); }

/* ── подсказки: камень, кайма, заголовок засечками, разделитель с самоцветом ── */
.ab-tip { border-radius: 2px; border-color: #5a4528; padding: 11px 13px 12px; font-family: var(--bg3-serif); font-size: 13px;
  background: var(--bg3-tl) top left / 22px no-repeat, var(--bg3-tr) top right / 22px no-repeat, var(--bg3-br) bottom right / 22px no-repeat, var(--bg3-bl) bottom left / 22px no-repeat, var(--bg3-stone); }
.ab-tip .tt-title { padding-bottom: 7px; margin-bottom: 7px; background: var(--bg3-gem) center bottom -8px / 16px no-repeat,
  linear-gradient(90deg, transparent, rgba(200,171,114,.6), transparent) center bottom / 100% 1px no-repeat; }
.ab-tip .tt-title b { font-size: 16px; font-weight: 400; color: var(--bg3-gold-hi); letter-spacing: .4px; }
.ab-tip .tt-ic { border-radius: 2px; border-color: #000; box-shadow: 0 0 0 1px #6e5634; }
.ab-tip .tt-row, .ab-tip .tt-desc { color: var(--bg3-text); }
.ab-tip .tt-meta span { border-radius: 2px; background: rgba(200,171,114,.08); border-color: rgba(200,171,114,.25); color: #d8cba8; }
.ab-tip .tt-est { color: #f0c870; }
.ab-tip .tt-key, .ab-tip .tt-src { color: var(--bg3-muted); }
.ab-tip .tt-more { border-top-color: rgba(200,171,114,.25); }
#tooltip { border-radius: 2px; border-color: #5a4528; font-family: var(--bg3-serif); font-size: 13px; padding: 7px 11px; }
#tooltip::first-line { color: var(--bg3-gold-hi); font-size: 14px; }

/* ── окна ── */
.talent-win { background: radial-gradient(ellipse at center, rgba(10,8,6,.55), rgba(5,4,3,.88)); }
.tw-box { border-radius: 2px; border-color: #5a4528; color: var(--bg3-text);
  background: var(--bg3-crest) center top 2px / 200px 22px no-repeat, var(--bg3-tl) top 3px left 3px / 34px no-repeat, var(--bg3-tr) top 3px right 3px / 34px no-repeat,
    var(--bg3-br) bottom 3px right 3px / 34px no-repeat, var(--bg3-bl) bottom 3px left 3px / 34px no-repeat, var(--bg3-stone);
  box-shadow: 0 0 0 1px #000, 0 0 0 4px #14110d, 0 0 0 5px #6e5634, 0 0 0 6px #000, 0 24px 70px rgba(0,0,0,.85), inset 0 0 0 1px rgba(236,220,176,.05); padding-top: 22px; }
.tw-head { border-image: none; border-bottom: 0; padding-bottom: 14px;
  background: var(--bg3-gem) center bottom -8px / 16px no-repeat, linear-gradient(90deg, transparent, #6e5634 15%, #c8ab72 50%, #6e5634 85%, transparent) center bottom / 100% 1px no-repeat; }
.tw-head .sheet-name, .tw-head .trade-who b { font-size: 22px; letter-spacing: 2.4px; }
.tw-head .muted, .tw-head small { font-family: var(--bg3-serif); color: var(--bg3-muted); }
.tw-head > button.ghost:last-child { border: 0; color: var(--bg3-gold); background: radial-gradient(circle at 50% 35%, #2a2219, #0b0907 78%);
  box-shadow: 0 0 0 1px #000, 0 0 0 2px #6e5634, 0 0 0 3px #000; }
.tw-head > button.ghost:last-child:hover { color: var(--bg3-gold-hi); box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--bg3-gold-hi), 0 0 0 3px #000, 0 0 10px rgba(236,220,176,.35); }
.tw-box h4 { color: var(--bg3-gold); font-size: 14.5px; letter-spacing: 2px; border-bottom: 0; padding-bottom: 9px;
  background: linear-gradient(90deg, transparent, rgba(200,171,114,.45), transparent) center bottom 4px / 100% 1px no-repeat; }
.tw-box .muted, .tw-box .hint { color: var(--bg3-muted); }
/* кнопки в окнах: тёмные с золотой каймой; главная — бронза */
.talent-win .primary, .trd-act .primary { font-family: var(--bg3-serif); letter-spacing: .8px; color: #f6ead0; border-radius: 2px; border: 1px solid #b89a62;
  background: linear-gradient(180deg, #6a4d26, #3e2c14 55%, #2a1d0d); box-shadow: 0 0 0 1px #000, inset 0 1px 0 rgba(255,230,170,.3), 0 4px 10px rgba(0,0,0,.5); text-shadow: 0 1px 1px #000; }
.talent-win .primary:hover:not(:disabled), .trd-act .primary:hover:not(:disabled) { border-color: var(--bg3-gold-hi); background: linear-gradient(180deg, #7e5c2e, #4c3618 55%, #33240f); }
.trd-tabs button, .talent-win .am-cats button { font-family: var(--bg3-serif); border-radius: 2px; background: #0d0b09; border-color: #3c2f1d; color: var(--bg3-muted); }
.trd-tabs button.on, .talent-win .am-cats button.active { color: var(--bg3-gold-hi); border-color: var(--bg3-gold); background: radial-gradient(ellipse at 50% 100%, rgba(200,171,114,.2), #0d0b09 75%); }
/* панели внутри окон */
.jw-sec, .tw-tree, .tw-stats, .stat-sec, .cw-box .abr, .cw-box .cw-tal > div, .trd-bag { border-radius: 2px; border-color: #3a2e1e;
  background: var(--bg3-noise), linear-gradient(180deg, rgba(30,25,19,.75), rgba(12,10,8,.8)); }
.jw-goal { border-color: #6e5634; }
.stat-sec h5, .jw-col h4 { color: var(--bg3-gold); font-weight: 400; letter-spacing: .6px; }
.stat-row { border-bottom-color: rgba(200,171,114,.1); }

/* ── лист героя ── */
.chs-l .stats div { border-radius: 2px; padding: 7px 2px 6px;
  background: linear-gradient(180deg, #1d1813, #0d0b09) padding-box, var(--bg3-metal) border-box; border: 1px solid transparent; }
.chs-l .stats div.main { background: linear-gradient(180deg, #2a2116, #100d0a) padding-box, linear-gradient(180deg, #fff3cf, #ecdcb0 30%, #a88850 60%, #ecdcb0) border-box; box-shadow: 0 0 12px rgba(236,220,176,.25); }
.chs-l .stats div b { color: var(--bg3-text); }
.chs-l .stats div.main b { color: var(--bg3-gold-hi); }
.chs-slot, .chs-cell, .trd-cell { border-radius: 2px; background: #070605; box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgba(236,220,176,.06), inset 0 0 10px rgba(0,0,0,.85); }
.chs-slot { border-color: #5a4528; }
.chs-slot.empty, .chs-cell.empty, .trd-cell.empty { border-color: #241d14; background: #080706; }
.chs-3d { border-radius: 2px; border-color: #3a2e1e; background: radial-gradient(ellipse at 50% 80%, color-mix(in srgb, var(--c) 22%, #2a2219) 0%, #0b0907 72%); }
.chs-pt { border-radius: 2px; border-color: #3c2f1d; }

/* ── лавка ── */
.trd-bag { padding: 12px 14px 14px; }
.trd-detail { border-radius: 2px; border-color: #5a4528; background: var(--bg3-tl) top left / 22px no-repeat, var(--bg3-br) bottom right / 22px no-repeat, var(--bg3-stone); }
.trd-cell { border: 1px solid color-mix(in srgb, var(--tc, #4a3c28) 45%, #241d14); }
.trd-cell:hover:not(.empty) { border-color: var(--bg3-gold-hi); box-shadow: 0 0 0 1px #000, 0 0 10px rgba(236,220,176,.35); }
.trd-cell.on { border-color: var(--bg3-gold-hi); box-shadow: 0 0 0 1px #000, 0 0 14px rgba(236,220,176,.6), inset 0 0 10px rgba(236,220,176,.2); }
.trd-p { font-family: var(--bg3-serif); font-weight: 400; color: var(--bg3-gold-hi); }
.trd-ic { border-radius: 2px; }
.trd-gold b { font-family: var(--bg3-serif); color: var(--bg3-gold-hi); }
.trd-cap, .trade-greet { font-family: var(--bg3-serif); }
/* свой герой — всегда золото (поверх цвета стороны на арене); союзники и враги — цвет стороны, приглушённый под металл */
.pcard.me .pc-face, .pcard.me.rel .pc-face, .pcard.me.team .pc-face { background: linear-gradient(180deg, #fff3cf, #ecdcb0 30%, #a88850 60%, #ecdcb0); }
.pcard.rel:not(.me) .pc-face, .pcard.team:not(.me) .pc-face { background: linear-gradient(180deg, color-mix(in srgb, var(--rel, var(--tc)) 75%, #ecdcb0), color-mix(in srgb, var(--rel, var(--tc)) 55%, #000)); }
/* колонка портретов прокручивается колесом, без полос прокрутки */
.party-cards { scrollbar-width: none; }
.party-cards::-webkit-scrollbar { display: none; }
/* золото букв светлее металла рамок: на тёмном камне мелкие заголовки не тускнеют */
.hud-loc b, .tw-head .sheet-name, .tw-head .trade-who b, .trd-bh > b { background-image: linear-gradient(180deg, #fff7df 0%, #f0e2b8 45%, #c9ad74 100%); }
/* портрет-картина героя кампании (hero_<класс>.jpg, heroFace): лицо — в верхней трети кадра */
.face-img.portrait { object-fit: cover; object-position: 50% 22%; }

/* разговор в темноте (cine.js talk-dark: герой без сознания) — чёрный экран вместо игры, без лица собеседника */
body.talk-dark .talk-veil { background: #000; animation: talk-fade 1.2s ease-out both; }
body.talk-dark .dialog .dlg-face { display: none; }

/* ───────────── Цель под мышью в бою, как в BG3 (target-hud.js) ─────────────
   Без рамки окна: имя и уровень, полоска здоровья в кованой оправе с наконечниками, состояния — круглыми значками с названиями,
   что меняет бросок — зелёными и красными табличками, ниже мелко — КД, скорость, умения. Тень текста вместо подложки */
.tg-hud { position: absolute; top: 96px; left: var(--cards-w, 214px); right: 8px; margin: 0 auto; width: fit-content; max-width: min(780px, calc(100% - var(--cards-w, 214px) - 16px));
  z-index: 4; pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 2px 40px 12px;
  font-family: var(--bg3-serif); color: #efe6d4; text-shadow: 0 1px 2px #000, 0 0 8px rgba(0,0,0,.9);
  background: radial-gradient(ellipse 58% 62% at 50% 42%, rgba(6,5,4,.5), transparent 78%); }
.tg-name { display: flex; align-items: baseline; gap: 12px; white-space: nowrap; }
.tg-name b { font-weight: 400; font-size: 28px; letter-spacing: .3px; color: #f6eedd; }
.tg-name span { font-size: 17px; color: #b9ae99; }
.tg-bar { --tg-cap: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='34' viewBox='0 0 26 34'%3E%3Cpath d='M26 8.5H14.5L4 17l10.5 8.5H26' fill='%230d0b09' stroke='%23c8ab72' stroke-width='1.3'/%3E%3Cpath d='M26 11.5h-10L9.5 17l6.5 5.5h10' fill='none' stroke='%236e5634' stroke-width='1'/%3E%3Cpath d='M14.5 8.5l2.6-5.6M14.5 25.5l2.6 5.6' stroke='%23c8ab72' stroke-width='1.1' stroke-linecap='round'/%3E%3Cpath d='M1 17l4.2-4.2L9.4 17l-4.2 4.2z' fill='%23ecdcb0' stroke='%230d0b09' stroke-width='.8'/%3E%3Cpath d='M3.4 17l1.8-1.8L7 17l-1.8 1.8z' fill='%238a6a3c'/%3E%3C/svg%3E");
  position: relative; width: min(440px, 56vw); height: 18px; margin: 2px 24px 0; border: 1px solid #000;
  background: linear-gradient(180deg, #1a0d0b, #2a1512 55%, #140908);
  box-shadow: 0 0 0 1px #6e5634, 0 0 0 2px #000, 0 3px 10px rgba(0,0,0,.85), inset 0 2px 4px rgba(0,0,0,.9); }
.tg-bar::before, .tg-bar::after { content: ''; position: absolute; top: -9px; width: 26px; height: 34px; background: var(--tg-cap) center / contain no-repeat; }
.tg-bar::before { left: -25px; }
.tg-bar::after { right: -25px; transform: scaleX(-1); }
.tg-bar > i { position: absolute; left: 0; top: 0; bottom: 0; transition: width .3s ease-out; }
.tg-hp { background: linear-gradient(180deg, #d24c3a 0%, #9c2419 42%, #63100b 100%); box-shadow: inset 0 1px 0 rgba(255,190,170,.35), 1px 0 0 rgba(0,0,0,.7); }
.tg-bar:is(.me, .ally) .tg-hp { background: linear-gradient(180deg, #82cf62 0%, #418e30 42%, #22561a 100%); box-shadow: inset 0 1px 0 rgba(220,255,200,.35), 1px 0 0 rgba(0,0,0,.7); }
.tg-bar > .tg-tmp { bottom: auto; height: 5px; background: linear-gradient(180deg, #e2f6ff, #6cc2f0); box-shadow: 0 0 6px rgba(140,210,255,.8); }
.tg-bar > span { position: relative; display: block; text-align: center; font-size: 14px; line-height: 18px; color: #fff; text-shadow: 0 0 3px #000, 0 1px 2px #000, 0 0 6px #000; }
.tg-bar em { margin-left: 5px; font-style: normal; color: #a8e0ff; }
.tg-bar.down > span { color: #c9bfae; }
.tg-sts { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin-top: 5px; }
.tg-st { display: inline-flex; align-items: center; gap: 8px; font-size: 15.5px; white-space: nowrap; }
.tg-st.fake { opacity: .55; }
.tg-sti { position: relative; flex: none; width: 30px; height: 30px; padding: 2px; border-radius: 50%; background: var(--bg3-ring); box-shadow: 0 0 0 1px #000, 0 2px 6px rgba(0,0,0,.75); }
.tg-sti .tg-ic { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.tg-sti .ab-ic-txt { display: grid; place-items: center; font-size: 15px; background: #120e0b; }
.tg-st.cc .tg-sti { background: conic-gradient(from 200deg, #ffb0a0, #8a1e14 25%, #e0604a 50%, #5a120c 75%, #ffb0a0); box-shadow: 0 0 0 1px #000, 0 0 10px rgba(255,80,50,.7); }
.tg-st.bad .tg-sti { background: conic-gradient(from 200deg, #f0c088, #7a3e14 25%, #d8904a 50%, #5a2c0c 75%, #f0c088); }
.tg-st.fake .tg-sti { background: none; border: 1px dashed #ffa8e8; padding: 1px; }
.tg-sti b { position: absolute; left: -6px; bottom: -6px; font-size: 13px; font-weight: 700; line-height: 1; color: #fff; text-shadow: 0 0 3px #000, 0 0 3px #000, 0 1px 1px #000; }
.tg-mods { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 3px; }
.tg-mod { display: inline-flex; align-items: center; gap: 7px; padding: 3px 12px 4px 8px; font-size: 14.5px; white-space: nowrap; border-radius: 2px;
  color: #e6f4e0; background: linear-gradient(180deg, rgba(50,108,70,.96), rgba(28,70,42,.96)); border: 1px solid #5f9e6e;
  box-shadow: 0 0 0 1px #000, 0 2px 6px rgba(0,0,0,.6), inset 0 1px 0 rgba(200,255,210,.15); text-shadow: 0 1px 1px #000; }
.tg-mod::before { content: ''; flex: none; width: 8px; height: 8px; transform: rotate(45deg); background: #a6f2ac; box-shadow: 0 0 5px #6fe07a; }
.tg-mod.bad { color: #fde4dc; background: linear-gradient(180deg, rgba(126,40,32,.96), rgba(82,22,18,.96)); border-color: #c0584a; box-shadow: 0 0 0 1px #000, 0 2px 6px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,200,190,.12); }
.tg-mod.bad::before { background: #ffa290; box-shadow: 0 0 5px #ff6a50; }
.tg-mod.info { color: var(--bg3-text); background: linear-gradient(180deg, rgba(40,32,22,.96), rgba(18,14,10,.96)); border-color: #5a4528; box-shadow: 0 0 0 1px #000, 0 2px 6px rgba(0,0,0,.6); }
.tg-mod.info::before { background: var(--bg3-gold); box-shadow: none; }
.tg-info { max-width: 640px; text-align: center; font-size: 13.5px; line-height: 1.35; color: #c4b8a2; }
.tg-info + .tg-info { margin-top: -4px; }
.tg-info.gm { color: #d8b8ff; }

/* ── Вступление «На повозках» (кат-сцена road, app-story.js roadSkipBtn): «Пропустить вступление» — справа на верхней
   полосе кадра, тихая, как кнопки окна разговора; ярче при наведении ── */
.road-skip { position: fixed; top: calc(4.5vh - 15px); right: 22px; z-index: 47; padding: 5px 14px; font: 13px var(--bg3-serif, Georgia, serif); color: var(--bg3-muted, #a8977b);
  background: rgba(0,0,0,.45); border: 1px solid rgba(200,171,114,.35); border-radius: 4px; cursor: pointer; letter-spacing: .02em; transition: color .2s, border-color .2s, background .2s; }
.road-skip:hover { color: var(--bg3-gold-hi, #f0c060); border-color: var(--bg3-gold, #c8ab72); background: rgba(0,0,0,.65); }