/* ============================================================ «Дело закрыто?» — поверх дизайн-системы «Хроноагентов»
   Газовый свет и латунь вместо бирюзы хронолаборатории: тёмное стекло с тёплым отливом, бумага карточек,
   сургуч для лжи, зелень сукна для установленного. */
:root {
  --ink: #070504;
  --grain: repeating-linear-gradient(0deg, rgba(255, 220, 170, 0.014) 0 1px, transparent 1px 3px);
  --glass: var(--grain), linear-gradient(180deg, rgba(26, 20, 15, 0.76), rgba(10, 8, 6, 0.88));
  --glass-solid: var(--grain), linear-gradient(180deg, rgba(28, 22, 16, 0.98), rgba(12, 9, 7, 0.99));
  --stroke: rgba(230, 190, 120, 0.12);
  --stroke-2: rgba(230, 190, 120, 0.24);
  --brass: #d9b26c;
  --brass-2: #f3dcaa;
  --brass-3: #8a6a32;
  --teal: #7fd8c8;
  --text: #efe6d6;
  --text-2: #cfc2ab;
  --muted: #9a8c76;
  --ok: #8fd6a0;
  --danger: #e8604c;
  --wax: #b8322a;
  --shadow: 0 1.4rem 4rem rgba(0, 0, 0, 0.62), inset 0 1px 0 rgba(255, 225, 170, 0.07);
}
::selection { background: rgba(217, 178, 108, 0.35); }
body.busy .hud button, body.busy .talk-pane button, body.busy .popover .btn { cursor: progress; }
.input.sm { padding: 0.55rem 0.8rem; font-size: 0.9rem; border-radius: 0.7rem; }
.x-close { position: absolute; right: 1rem; top: 1rem; z-index: 3; width: 2.3rem; height: 2.3rem; padding: 0.55rem; border-radius: 50%; border: 1px solid var(--stroke-2); background: rgba(0, 0, 0, 0.35); color: var(--text-2); transition: background .2s, color .2s, transform .2s var(--ease); }
.x-close:hover { background: rgba(255, 255, 255, 0.08); color: var(--brass-2); transform: rotate(90deg); }
.x-close .ic { width: 100%; height: 100%; }
.small { font-size: 0.8rem; }

/* ------------------------------------------------------------ метки сцены: люди и перемены */
.spot-label { border-color: rgba(255, 207, 106, 0.5); background: rgba(16, 11, 7, 0.86); }
.spot-label.is-changed { border-color: rgba(255, 160, 64, 0.8); box-shadow: 0 0 1.2rem rgba(255, 160, 64, 0.25), 0 0.5rem 1.4rem rgba(0, 0, 0, 0.45); }
.spot-label.is-changed .sl-ic { background: rgba(255, 160, 64, 0.22); color: #ffb066; }
.spot-label.is-person { border-color: rgba(95, 216, 196, 0.55); font-size: 0.95rem; padding: 0.32rem 0.7rem 0.32rem 0.4rem; }
.spot-label.is-person .sl-ic { background: rgba(95, 216, 196, 0.16); color: #8ff0de; width: 1.3rem; height: 1.3rem; }
.spot-label.is-person.is-talked { border-color: rgba(125, 154, 150, 0.4); color: #d6e0dc; }
.spot-label.is-person.is-talked .sl-ic { background: rgba(125, 154, 150, 0.14); color: #a8c0bb; }
.spot-label.hover { background: rgba(44, 32, 20, 0.96); }
.scene-loading span { font-family: var(--serif); font-size: 1.1rem; }
.agent-tag { font-size: 0.7rem; }

/* ------------------------------------------------------------ главная */
.home { background: linear-gradient(90deg, rgba(10, 7, 5, 0.95) 0%, rgba(10, 7, 5, 0.78) 34%, rgba(10, 7, 5, 0) 60%); }
.hero { width: min(35rem, 44vw); max-height: 100vh; overflow-y: auto; padding: 2.4rem 0.4rem 2rem 0; scrollbar-width: none; }
.hero .emblem { background: radial-gradient(circle at 35% 30%, #4a3a26, #140f0a); animation: sway 6s ease-in-out infinite; }
@keyframes sway { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg) scale(1.04); } }
.hero h1 { background: linear-gradient(180deg, #fff6e0 10%, #e8c27a 60%, #9a6e30); -webkit-background-clip: text; background-clip: text; }
.mission-card { align-items: flex-start; padding: 1.1rem 1.2rem 1.15rem; border-color: rgba(217, 178, 108, 0.35); }
.mission-card .mc-main { min-width: 0; }
.mission-card .mc-kick { display: block; font: 600 0.68rem var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass); margin-bottom: 0.2rem; }
.mission-card b { font-size: 1.75rem; }
.mission-card .mc-sub { display: block; color: var(--text-2); font-size: 0.9rem; margin-top: 0.15rem; }
.mission-card p { margin: 0.6rem 0 0.7rem; color: var(--text-2); font: 500 1.06rem/1.45 var(--serif); }
.mc-facts { display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; color: var(--muted); font-size: 0.8rem; }
.mc-facts span { display: inline-flex; align-items: center; gap: 0.3rem; }
.home-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-bottom: 0.7rem; }
.home-actions .btn:only-child { grid-column: 1 / -1; }
.home-code { display: grid; grid-template-columns: 8rem auto; gap: 0.6rem; justify-content: start; }
.home-code .code { text-transform: uppercase; letter-spacing: 0.3em; text-align: center; font-weight: 700; padding: 0.7rem; }

/* ------------------------------------------------------------ лобби */
.lobby { background: linear-gradient(90deg, rgba(10, 7, 5, 0.86), rgba(10, 7, 5, 0.5) 40%, rgba(10, 7, 5, 0.7)); }
.rec-grid { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.rec:disabled { cursor: not-allowed; opacity: 0.8; }
.rec-portrait { background: radial-gradient(circle at 50% 95%, color-mix(in srgb, var(--c) 50%, transparent), transparent 62%), linear-gradient(180deg, #2a2016, #100c08); height: 17rem; }
.rec-wait { width: 2rem; height: 2rem; margin-bottom: 6rem; border-radius: 50%; border: 2px solid rgba(217, 178, 108, 0.2); border-top-color: var(--brass); animation: spin 1s linear infinite; }
.rec-role { margin-bottom: 0.2rem; }

/* ------------------------------------------------------------ HUD: время */
.time-dial { padding-right: 1.4rem; }
.dial .arc { filter: drop-shadow(0 0 4px rgba(240, 190, 110, 0.55)); }
.dial .ticks line { stroke: rgba(255, 230, 190, 0.28); stroke-width: 1.4; }
.dial .num b { font-size: 1.12rem; letter-spacing: -0.02em; }
.dial .num small { font-size: 0.52rem; text-transform: uppercase; }
.dial.tick { animation: dialTick .5s var(--ease); }
@keyframes dialTick { 30% { transform: scale(1.08) rotate(-4deg); } }
.td-info .clock { font-size: 2.2rem; letter-spacing: 0.01em; }
.td-chips span { display: flex; align-items: center; gap: 0.35rem; }
.td-chips .icon { color: var(--muted); width: 0.95rem; height: 0.95rem; }
.tu-delta { left: auto; right: -0.6rem; top: -0.7rem; background: linear-gradient(180deg, #e6b964, #b0782e); color: #1c1307; box-shadow: 0 0 1rem rgba(230, 185, 100, 0.6); white-space: nowrap; }

/* ------------------------------------------------------------ HUD: левая колонка */
.side-col { position: absolute; left: var(--gap); top: calc(var(--gap) + 8.6rem); bottom: calc(var(--dock-h) + var(--gap) * 2); width: 19rem; display: flex; flex-direction: column; gap: 0.7rem; pointer-events: none; min-height: 0; }
.side-block { padding: 0.8rem 0.7rem 0.7rem; display: flex; flex-direction: column; gap: 0.35rem; min-height: 0; overflow-y: auto; scrollbar-width: none; animation: rise .6s var(--ease) both; }
.side-block::-webkit-scrollbar { display: none; }
#peopleBlock { flex: 0 1 auto; max-height: 55%; }
#spotsBlock { flex: 1 1 auto; animation-delay: .08s; }
.sb-head { display: flex; align-items: center; gap: 0.45rem; padding: 0 0.3rem 0.35rem; font: 600 0.7rem var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass); }
.sb-head em { margin-left: auto; font-style: normal; color: var(--muted); letter-spacing: 0; font-size: 0.78rem; }
.sb-empty { color: var(--muted); font-size: 0.84rem; padding: 0.3rem 0.4rem 0.2rem; }
.person-card { display: flex; align-items: center; gap: 0.7rem; width: 100%; padding: 0.5rem 0.6rem 0.5rem 0.5rem; border-radius: 1rem; border: 1px solid var(--stroke); background: rgba(255, 255, 255, 0.03); text-align: left; transition: background .2s, border-color .2s, transform .2s var(--ease); animation: rise .45s var(--ease) both; animation-delay: calc(var(--i) * 60ms); }
.person-card:hover { background: rgba(255, 255, 255, 0.07); border-color: color-mix(in srgb, var(--c) 55%, transparent); transform: translateX(0.25rem); }
.person-card.fresh { border-color: rgba(95, 216, 196, 0.35); }
.person-card .pc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.person-card b { font: 600 1.12rem/1.1 var(--serif); }
.person-card small { color: var(--muted); font-size: 0.74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.person-card em { font-style: normal; font-size: 0.72rem; color: var(--brass-2); margin-top: 0.1rem; }
.person-card em.new { color: #8ff0de; }
.person-card em.done { color: var(--muted); }
.person-card .pc-go { width: 1.9rem; height: 1.9rem; padding: 0.45rem; border-radius: 50%; color: var(--muted); flex: none; transition: color .2s, background .2s; }
.person-card:hover .pc-go { color: #8ff0de; background: rgba(95, 216, 196, 0.12); }
.spot-row { display: flex; align-items: center; gap: 0.6rem; width: 100%; padding: 0.5rem 0.6rem; border-radius: 0.75rem; border: 1px solid transparent; background: transparent; text-align: left; font-size: 0.9rem; color: var(--text); transition: background .2s, border-color .2s; }
.spot-row:hover { background: rgba(255, 255, 255, 0.06); border-color: var(--stroke); }
.spot-row .dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; flex: none; background: #ffcf6a; box-shadow: 0 0 0.5rem rgba(255, 207, 106, 0.7); }
.spot-row.changed .dot { background: #ffa040; box-shadow: 0 0 0.6rem rgba(255, 160, 64, 0.8); animation: pulse 1.4s infinite; }
.spot-row.seen { color: var(--muted); }
.spot-row.seen .dot { background: rgba(159, 176, 200, 0.45); box-shadow: none; }
.spot-row.here { background: rgba(217, 178, 108, 0.1); border-color: rgba(217, 178, 108, 0.3); }
.spot-row .sr-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spot-row .sr-cost { flex: none; font-size: 0.75rem; color: var(--brass-2); font-variant-numeric: tabular-nums; }
.spot-row.seen .sr-cost { color: var(--ok); width: 1rem; }

.progress-dots i.half { background: #ffa040; box-shadow: 0 0 0.4rem #ffa040; }
.loc-plate { width: 19rem; }
.loc-plate h2 { font-size: 1.75rem; }

/* ------------------------------------------------------------ HUD: док */
.dock { gap: 1.1rem; }
.team { display: flex; gap: 0.5rem; min-width: 0; }
.crew { display: flex; align-items: center; gap: 0.6rem; padding: 0.35rem 0.9rem 0.35rem 0.35rem; border-radius: 1.4rem; border: 1px solid var(--stroke); background: rgba(255, 255, 255, 0.035); }
.crew b { display: block; font: 600 1.05rem/1.1 var(--serif); }
.crew small { color: var(--muted); font-size: 0.74rem; }
.dock-where { display: flex; align-items: center; gap: 0.45rem; color: var(--text-2); font-size: 0.9rem; min-width: 0; white-space: nowrap; overflow: hidden; }
.dock-where span:last-child { overflow: hidden; text-overflow: ellipsis; }
.dock-where .icon { color: var(--brass); }
.dock-actions { margin-left: auto; display: flex; gap: 0.5rem; align-items: center; height: 100%; }
.dock-actions .btn { height: 100%; flex-direction: column; gap: 0.25rem; min-width: 6.4rem; padding: 0.5rem 0.9rem; border-radius: 1rem; }
.dock-actions .btn .icon { width: 1.5rem; height: 1.5rem; }
.dock-actions .btn span { font-size: 0.86rem; }
.dock-actions .badge { top: 0.4rem; right: 0.6rem; background: var(--brass); color: #1c1307; }
.report-btn:not(.primary) { border-color: rgba(217, 178, 108, 0.45); }
.report-btn.primary { animation: breatheGold 2.4s infinite; }
@keyframes breatheGold { 50% { box-shadow: 0 0 2.2rem rgba(217, 178, 108, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.55); } }

/* ------------------------------------------------------------ блокнот */
.drawer { width: 24rem; }
.drawer .tabs button { padding: 0.6rem 0.35rem; font-size: 0.82rem; gap: 0.35rem; }
.drawer .tabs button.bump { animation: bump .5s var(--spring); }
@keyframes bump { 40% { transform: scale(1.25); color: var(--brass-2); } }
.drawer .badge { background: var(--brass); color: #1c1307; }
.leads { display: flex; flex-direction: column; gap: 0.5rem; }
.lead-item { display: grid; grid-template-columns: 1.3rem 1fr; gap: 0.3rem 0.6rem; padding: 0.7rem 0.75rem; border-radius: 0.9rem; border: 1px solid var(--stroke); background: rgba(255, 255, 255, 0.03); animation: rise .4s var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms); }
.lead-item .ld-ic { width: 1.1rem; height: 1.1rem; color: var(--brass); margin-top: 0.15rem; }
.lead-item .ld-text { font: 500 1.05rem/1.35 var(--serif); color: var(--text); }
.lead-item .btn, .lead-item .here { grid-column: 2; justify-self: start; }
.lead-item .here { font-size: 0.75rem; color: var(--teal); font-style: normal; }
.lead-item.done { opacity: 0.6; background: transparent; }
.lead-item.done .ld-ic { color: var(--ok); }
.closed-leads { margin-top: 0.8rem; color: var(--muted); }
.closed-leads summary { cursor: pointer; font-size: 0.82rem; margin-bottom: 0.5rem; }
.filters { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.7rem; }
.filters button { padding: 0.25rem 0.65rem; border-radius: 999px; border: 1px solid var(--stroke-2); background: transparent; font-size: 0.76rem; color: var(--text-2); }
.filters button.on { background: rgba(217, 178, 108, 0.18); border-color: var(--brass); color: var(--brass-2); }
.clue { display: flex; flex-direction: column; gap: 0.15rem; width: 100%; text-align: left; padding: 0.65rem 0.75rem; margin-bottom: 0.45rem; border-radius: 0.9rem; border: 1px solid var(--stroke); border-left: 3px solid var(--kc, var(--brass)); background: rgba(255, 255, 255, 0.03); transition: background .2s; }
.clue:hover { background: rgba(255, 255, 255, 0.06); }
.clue b { font: 600 1.06rem/1.2 var(--serif); color: var(--text); }
.clue .cl-head { display: flex; justify-content: space-between; font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--kc, var(--brass)); }
.clue .cl-t { color: var(--muted); letter-spacing: 0; }
.clue .cl-text { font-size: 0.82rem; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clue.open .cl-text { -webkit-line-clamp: unset; display: block; }
.clue.k-установлено { --kc: var(--ok); background: rgba(143, 214, 160, 0.06); }
.clue.k-вещдок { --kc: #e0b468; }
.clue.k-документ { --kc: #b8a4e0; }
.clue.k-наблюдение { --kc: #8cc4e0; }
.clue.k-показание { --kc: #e09a8a; }
.stmt-group { margin-bottom: 0.9rem; }
.sg-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem; }
.sg-head b { font: 600 1.08rem var(--serif); }
.stmt { position: relative; padding: 0.5rem 0.7rem; margin: 0 0 0.35rem 0.6rem; border-left: 2px solid var(--stroke-2); font: italic 500 1.02rem/1.35 var(--serif); color: var(--text-2); }
.stmt.broken span { text-decoration: line-through; text-decoration-color: rgba(232, 96, 76, 0.7); color: var(--muted); }
.broken-mark { display: inline-block; margin-left: 0.5rem; padding: 0.05rem 0.45rem; border: 1.5px solid var(--wax); border-radius: 0.3rem; color: #ff8a78; font: 700 0.62rem var(--sans); letter-spacing: 0.14em; text-transform: uppercase; font-style: normal; transform: rotate(-4deg); }
.nb-hint { display: flex; gap: 0.5rem; align-items: flex-start; margin-top: 0.6rem; padding: 0.7rem; border-radius: 0.8rem; background: rgba(0, 0, 0, 0.25); color: var(--muted); font-size: 0.8rem; }
.dossier { display: flex; gap: 0.75rem; padding: 0.65rem 0.4rem; border-bottom: 1px solid var(--stroke); }
.dossier b { font: 600 1.1rem var(--serif); display: block; }
.dossier small { color: var(--brass); font-size: 0.74rem; }
.dossier p { margin: 0.25rem 0 0; font-size: 0.84rem; color: var(--text-2); line-height: 1.4; }
.dossier.unmet { opacity: 0.72; }
.dossier.unmet .portrait { filter: grayscale(1) brightness(0.6); }
.log i { color: var(--muted); font-style: normal; }
.log.event { color: #ffc08a; }

/* ------------------------------------------------------------ hover card, поповеры */
.hc-status.changed { background: rgba(255, 160, 64, 0.18); color: #ffb066; }
.hc-status.person { background: rgba(95, 216, 196, 0.16); color: #8ff0de; }
.hc-text { font: 500 1.02rem/1.4 var(--serif); color: var(--text-2); margin-bottom: 0.3rem; }
.hc-person { display: flex; align-items: center; gap: 0.7rem; margin: 0.5rem 0 0.2rem; }
.hc-person h4 { margin: 0; }
.hc-row .icon { color: var(--brass); }
.drag-ic { display: inline-flex; width: 1.05rem; height: 1.2rem; color: var(--brass); flex: none; }
.drag-ic .ic { width: 100%; height: 100%; }
.spot-pop { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.4rem 0.5rem 0.3rem; min-width: 15rem; }
.spot-pop .btn { margin-top: 0.5rem; width: 100%; }
.pop-kick { font: 600 0.66rem var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass); padding: 0 0.2rem; }
.spot-pop .pop-title, .spot-pop .pop-text { padding-left: 0.2rem; padding-right: 0.2rem; }
.pop-foot { font-size: 0.72rem; color: var(--muted); text-align: center; }
.popover .btn { display: inline-flex; justify-content: center; }
.wait-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.3rem; padding: 0 0.3rem 0.3rem; }
.wait-grid button { display: flex; flex-direction: column; align-items: center; padding: 0.45rem 0.2rem !important; border-radius: 0.6rem !important; border: 1px solid var(--stroke) !important; font: 600 0.92rem var(--sans) !important; font-variant-numeric: tabular-nums; }
.wait-grid button small { font-size: 0.64rem; color: var(--muted); font-weight: 500; }
.wait-grid button:hover { border-color: var(--brass) !important; }
.opt-list { display: flex; flex-direction: column; gap: 0.15rem; max-height: 60vh; overflow-y: auto; }
.opt-list button { font: 500 1.02rem/1.25 var(--serif) !important; }
.opt-list button.on { background: rgba(217, 178, 108, 0.16) !important; color: var(--brass-2); }

/* ------------------------------------------------------------ находки */
.found { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 1rem 0 0.2rem; }
.fchip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.32rem 0.75rem 0.32rem 0.45rem; border-radius: 999px; font: 500 0.84rem/1.2 var(--sans); background: rgba(120, 80, 30, 0.12); border: 1px solid rgba(120, 80, 30, 0.35); color: #3a2a14; }
.fchip b { font-weight: 700; font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.75; }
.fchip .icon { width: 1rem; height: 1rem; }
.fchip.f-clue { background: rgba(190, 130, 40, 0.16); border-color: rgba(170, 110, 30, 0.5); }
.fchip.f-stmt { background: rgba(60, 100, 150, 0.12); border-color: rgba(60, 100, 150, 0.4); }
.fchip.f-lead, .fchip.f-place { background: rgba(50, 120, 90, 0.12); border-color: rgba(50, 120, 90, 0.4); }
.fchip.anim { animation: chipIn .55s var(--spring) both; animation-delay: calc(0.5s + var(--i) * 0.12s); }
@keyframes chipIn { from { opacity: 0; transform: translateY(0.6rem) scale(0.8); } }
.fchip.fly { position: fixed; z-index: 95; pointer-events: none; margin: 0; background: #f3e4c4; box-shadow: 0 0.6rem 1.6rem rgba(0, 0, 0, 0.5); }
.loc-card .fchip, .talk-modal .fchip, .tr-card .fchip { color: var(--text); background: rgba(217, 178, 108, 0.1); border-color: rgba(217, 178, 108, 0.35); }

/* ------------------------------------------------------------ карточки */
.card-back { background: repeating-linear-gradient(45deg, #2a1e14 0 14px, #241a11 14px 28px); }
.card-art.flat { height: 4.4rem; background: linear-gradient(180deg, #3a2a1a, #f6ead0); }
.card-art.flat::after { display: none; }
.card-body { padding-top: 0.6rem; }
.card-front.kind-talk .card-art, .card-front.kind-confront .card-art { height: 11rem; }
.card-foot .more { color: #8a6a3a; font-size: 0.8rem; }
.card-front .card-foot .counter { color: #7a6444; }
.est-stamp { position: absolute; right: 1.6rem; top: -0.6rem; z-index: 2; padding: 0.35rem 0.9rem; border: 3px double #2f7a4a; border-radius: 0.5rem; color: #2f7a4a; font: 700 1rem var(--sans); letter-spacing: 0.22em; text-transform: uppercase; transform: rotate(-8deg); background: rgba(246, 234, 208, 0.7); animation: stampIn .5s .45s cubic-bezier(.2, 1.6, .4, 1) both; }
.est-stamp.bad { border-color: #8a6a3a; color: #8a6a3a; }
.est-stamp.lie { border-color: var(--wax); color: var(--wax); }
@keyframes stampIn { from { opacity: 0; transform: rotate(-8deg) scale(2.4); } }
.loc-card .lc-body .card-text { max-height: 46vh; overflow-y: auto; scrollbar-width: thin; }
.loc-card.brief .lc-art { height: 15rem; }
.loc-card.brief .card-text { font-size: 1.28rem; }
.event-card.away .lc-art { height: 9rem; background: radial-gradient(ellipse at 50% 130%, rgba(160, 60, 30, 0.45), transparent 60%), repeating-linear-gradient(135deg, #1e1610 0 18px, #1a130d 18px 36px); }
.ev-seal { position: absolute; right: 2rem; top: 1.4rem; z-index: 2; width: 3.2rem; height: 3.2rem; padding: 0.75rem; border-radius: 50%; color: #ffd9b8; background: radial-gradient(circle at 35% 30%, #c4483a, #6a1a14); box-shadow: 0 0.4rem 1.4rem rgba(0, 0, 0, 0.5), inset 0 0 0 2px rgba(255, 200, 170, 0.25); animation: stampIn .5s .3s cubic-bezier(.2, 1.6, .4, 1) both; }
.ev-seal .ic { width: 100%; height: 100%; }

/* ------------------------------------------------------------ разговор */
.talk-modal { position: relative; width: min(64rem, calc(100vw - 3rem)); height: min(44rem, calc(100vh - 4rem)); display: grid; grid-template-columns: 19rem 1fr; border-radius: 1.6rem; overflow: hidden; background: var(--glass-solid); border: 1px solid var(--stroke-2); box-shadow: 0 3rem 7rem rgba(0, 0, 0, 0.65); animation: rise .45s var(--ease); }
.talk-side { position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.2rem 1.3rem 1.3rem; overflow: hidden; background: radial-gradient(circle at 50% 70%, color-mix(in srgb, var(--c) 30%, transparent), transparent 70%), linear-gradient(180deg, #24190f, #0e0a07); border-right: 1px solid var(--stroke); }
.ts-art { position: absolute; inset: 0; }
.ts-art .art-img { position: absolute; inset: 0; background: center / cover no-repeat; opacity: 0; transition: opacity .8s; filter: saturate(0.85); }
.ts-art .art-img.on { opacity: 0.55; }
.ts-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 10, 7, 0.1), rgba(14, 10, 7, 0.55) 45%, rgba(14, 10, 7, 0.97) 78%); }
.ts-figure { position: relative; z-index: 1; flex: none; height: 16rem; display: flex; align-items: flex-end; justify-content: center; margin-bottom: 0.6rem; overflow: hidden; }
.ts-figure img { height: 16rem; width: 16rem; object-fit: contain; filter: drop-shadow(0 1rem 1.4rem rgba(0, 0, 0, 0.6)); animation: rise .6s var(--ease) both; }
.ts-id { position: relative; z-index: 1; }
.ts-id h2 { font: 600 2.1rem/1 var(--serif); margin: 0.25rem 0 0.4rem; color: #fff4dc; }
.ts-new { display: inline-block; padding: 0.12rem 0.55rem; border-radius: 999px; background: rgba(95, 216, 196, 0.16); color: #8ff0de; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; }
.ts-greet { position: relative; z-index: 1; max-height: 12rem; overflow-y: auto; scrollbar-width: none; }
.ts-greet .quote { margin-top: 0.7rem; padding-left: 0.8rem; border-left: 2px solid color-mix(in srgb, var(--c) 70%, transparent); font: italic 500 1.02rem/1.45 var(--serif); color: var(--text-2); }
.ts-greet .quote p { margin: 0 0 0.5rem; }
.talk-main { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 1.3rem 1.4rem 1.2rem; gap: 0.9rem; }
.talk-reply { flex: 0 1 auto; max-height: 48%; overflow-y: auto; scrollbar-width: thin; padding-right: 2.6rem; }
.tr-card { position: relative; padding: 1.1rem 1.3rem 0.9rem; border-radius: 1.1rem; color: #2a2116; background: radial-gradient(120% 90% at 20% 0%, #fbf4e0, #eddcb8 65%, #dcc69a); border: 1px solid #b8945a; box-shadow: 0 1rem 2.6rem rgba(0, 0, 0, 0.45); animation: replyIn .45s var(--ease) both; }
@keyframes replyIn { from { opacity: 0; transform: translateY(0.8rem) rotate(-0.6deg); } }
.tr-card h4 { margin: 0 0 0.5rem; font: 700 1.35rem/1.15 var(--serif); color: #241a0e; padding-right: 5rem; }
.tr-card .typed { font: 500 1.14rem/1.5 var(--serif); }
.tr-card .typed p { margin: 0 0 0.6rem; animation: lineIn .5s both; }
.tr-card .typed p:nth-child(2) { animation-delay: .15s; } .tr-card .typed p:nth-child(3) { animation-delay: .3s; } .tr-card .typed p:nth-child(n+4) { animation-delay: .45s; }
@keyframes lineIn { from { opacity: 0; transform: translateY(0.3rem); } }
.tr-card .fchip { color: #3a2a14; background: rgba(120, 80, 30, 0.12); border-color: rgba(120, 80, 30, 0.35); }
.tr-card .est-stamp { top: 0.6rem; right: 1rem; }
.tr-card.fail { background: radial-gradient(120% 90% at 20% 0%, #f4ece0, #e2d6c2 65%, #cfc0a4); }
.tr-meta { font: 500 0.78rem var(--sans); color: #7a6444; display: flex; align-items: center; gap: 0.3rem; }
.tr-meta .icon { width: 0.9rem; height: 0.9rem; }
.tr-empty { display: flex; align-items: center; gap: 0.8rem; padding: 1.1rem 1.2rem; border-radius: 1.1rem; border: 1px dashed var(--stroke-2); color: var(--muted); font: italic 500 1.08rem var(--serif); }
.tr-empty .icon { width: 1.6rem; height: 1.6rem; color: var(--brass); flex: none; }
.talk-tabs { display: flex; gap: 0.3rem; padding: 0.3rem; border-radius: 0.9rem; background: rgba(0, 0, 0, 0.3); border: 1px solid var(--stroke); flex: none; }
.talk-tabs button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.45rem; padding: 0.55rem; border-radius: 0.65rem; border: 0; background: transparent; color: var(--text-2); font-weight: 600; font-size: 0.9rem; transition: background .2s, color .2s; }
.talk-tabs button.on { background: linear-gradient(180deg, rgba(217, 178, 108, 0.26), rgba(217, 178, 108, 0.1)); color: var(--brass-2); box-shadow: inset 0 0 0 1px rgba(217, 178, 108, 0.45); }
.talk-tabs button i { font-style: normal; min-width: 1.2rem; padding: 0 0.3rem; border-radius: 0.6rem; background: rgba(255, 255, 255, 0.1); font-size: 0.72rem; line-height: 1.2rem; }
/* счётчик показаний нейтральный: число записанных слов человека, а не намёк, что среди них есть ложь */
.talk-tabs button.hot i { background: rgba(217, 178, 108, 0.22); color: var(--brass-2); }
.talk-pane { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; display: flex; flex-direction: column; gap: 0.6rem; }
.topics { display: flex; flex-direction: column; gap: 0.4rem; }
.topic { display: flex; align-items: center; gap: 0.7rem; width: 100%; padding: 0.7rem 0.85rem; border-radius: 0.9rem; border: 1px solid var(--stroke); background: rgba(255, 255, 255, 0.035); text-align: left; transition: background .2s, border-color .2s, transform .2s var(--ease); }
.topic:hover { background: rgba(217, 178, 108, 0.1); border-color: rgba(217, 178, 108, 0.45); transform: translateX(0.2rem); }
.topic .tp-ic { width: 1.6rem; height: 1.6rem; padding: 0.3rem; border-radius: 50%; background: rgba(217, 178, 108, 0.14); color: var(--brass-2); flex: none; }
.topic .tp-label { flex: 1; font: 600 1.08rem/1.25 var(--serif); }
.topic .tp-cost { font-size: 0.78rem; color: var(--brass-2); flex: none; }
.topic.done { opacity: 0.6; }
.topic.done .tp-ic { background: rgba(143, 214, 160, 0.14); color: var(--ok); }
.topic.done .tp-cost { color: var(--muted); }
.about-head { display: flex; align-items: center; gap: 0.8rem; }
.about-head .input { flex: 1; }
.about-head .muted { font-size: 0.75rem; white-space: nowrap; }
.sg-title { font: 600 0.68rem var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass); margin: 0.2rem 0 0.4rem; }
.subjects { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.subj { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.28rem 0.7rem 0.28rem 0.3rem; border-radius: 999px; border: 1px solid var(--stroke-2); background: rgba(255, 255, 255, 0.035); font-size: 0.84rem; transition: background .2s, border-color .2s; }
.subj.clue { padding-left: 0.55rem; }
.subj .icon { color: var(--brass); width: 0.95rem; height: 0.95rem; }
.subj > .ic { width: 0.9rem; height: 0.9rem; color: var(--ok); }
.subj:hover { background: rgba(217, 178, 108, 0.12); border-color: var(--brass); }
.subj.done { opacity: 0.6; }
.subj .portrait { box-shadow: 0 0 0 1.5px var(--c); }
.confront { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; min-height: 0; }
.cf-col { display: flex; flex-direction: column; gap: 0.35rem; min-height: 0; }
.cf-stmt { text-align: left; padding: 0.6rem 0.8rem; border-radius: 0.8rem; border: 1px solid var(--stroke); background: rgba(255, 255, 255, 0.03); font: italic 500 1.02rem/1.35 var(--serif); color: var(--text-2); transition: background .2s, border-color .2s; }
.cf-stmt.on { border-color: var(--wax); background: rgba(184, 50, 42, 0.14); color: var(--text); box-shadow: 0 0 1rem rgba(184, 50, 42, 0.2); }
.cf-clues { display: flex; flex-direction: column; gap: 0.3rem; max-height: 15rem; overflow-y: auto; scrollbar-width: thin; margin-top: 0.3rem; }
.cf-clue { text-align: left; padding: 0.45rem 0.7rem; border-radius: 0.7rem; border: 1px solid var(--stroke); background: rgba(255, 255, 255, 0.03); font: 500 0.98rem/1.25 var(--serif); }
.cf-clue .cl-kind { display: block; font: 600 0.6rem var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.cf-clue.on { border-color: var(--brass); background: rgba(217, 178, 108, 0.14); }
.cf-foot { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; padding-top: 0.4rem; border-top: 1px solid var(--stroke); margin-top: auto; }
.cf-foot .muted { font-size: 0.8rem; }

/* ------------------------------------------------------------ доска выводов */
.board-modal, .report-modal { position: relative; width: min(70rem, calc(100vw - 3rem)); max-height: calc(100vh - 4rem); display: flex; flex-direction: column; border-radius: 1.6rem; overflow: hidden; border: 1px solid var(--stroke-2); box-shadow: 0 3rem 7rem rgba(0, 0, 0, 0.65); animation: rise .45s var(--ease); }
.board-modal { background: radial-gradient(circle at 30% 20%, rgba(120, 80, 40, 0.18), transparent 60%), repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.05) 0 2px, transparent 2px 7px), linear-gradient(180deg, #3a2a1c, #241910); }
.report-modal { background: var(--glass-solid); width: min(52rem, calc(100vw - 3rem)); }
.bm-head { display: flex; align-items: flex-end; gap: 2rem; padding: 1.6rem 4.5rem 1.2rem 2rem; border-bottom: 1px solid var(--stroke); background: rgba(10, 7, 5, 0.55); }
.bm-head h2 { font: 600 2.4rem/1 var(--serif); margin: 0.3rem 0 0; color: var(--brass-2); }
.bm-head p { margin: 0; color: var(--text-2); font-size: 0.88rem; max-width: 34rem; }
.bm-notes { flex: 1; overflow-y: auto; padding: 1.6rem 1.8rem 2rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: 1.4rem 1.2rem; align-content: start; }
.note { position: relative; padding: 1.3rem 1.3rem 1rem; color: #2a2116; background: linear-gradient(180deg, #fbf3dc, #efdfb8); border-radius: 0.3rem; box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.45), inset 0 0 2.2rem rgba(140, 100, 40, 0.18); transform: rotate(var(--r)); animation: noteIn .5s var(--ease) both; animation-delay: calc(var(--i) * 60ms); transition: transform .3s var(--ease); }
.note:hover { transform: rotate(0deg) translateY(-0.2rem); z-index: 2; }
@keyframes noteIn { from { opacity: 0; transform: translateY(1.2rem) rotate(calc(var(--r) * 3)); } }
.note .pin { position: absolute; left: 50%; top: -0.55rem; width: 1.1rem; height: 1.1rem; margin-left: -0.55rem; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff8a70, #9a1e14); box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.5); }
.note h3 { margin: 0 0 0.6rem; font: 700 1.3rem/1.15 var(--serif); color: #241a0e; }
.note .sentence { font: 500 1.12rem/1.75 var(--serif); margin: 0 0 0.8rem; }
.blank { display: inline; padding: 0.05rem 0.5rem; margin: 0 0.1rem; border: 0; border-bottom: 2px dashed #a8783a; border-radius: 0.3rem 0.3rem 0 0; background: rgba(168, 120, 58, 0.12); color: #6a4a1a; font: 600 1.06rem var(--serif); cursor: pointer; transition: background .2s; }
.blank:hover { background: rgba(168, 120, 58, 0.25); }
.blank.set { border-bottom-style: solid; color: #241a0e; background: rgba(168, 120, 58, 0.18); }
.note .ans { padding: 0 0.3rem; border-bottom: 2px solid #2f7a4a; color: #1e4a2e; }
.note .success { font: italic 500 1rem/1.45 var(--serif); color: #3a4a2e; margin: 0; }
.note.solved { background: linear-gradient(180deg, #f0f4dc, #dfe6c0); }
.note .est-stamp { top: auto; bottom: -0.6rem; right: 1rem; }
.note-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.note-foot .tries { font: 500 0.76rem var(--sans); color: #8a5a2a; }
.note.shake { animation: noteShake .5s; }
@keyframes noteShake { 20%, 60% { transform: translateX(-0.4rem) rotate(var(--r)); } 40%, 80% { transform: translateX(0.4rem) rotate(var(--r)); } }
.note.just { animation: noteWin .8s var(--spring); }
@keyframes noteWin { 40% { transform: scale(1.05) rotate(0deg); box-shadow: 0 0 3rem rgba(143, 214, 160, 0.6); } }

/* ------------------------------------------------------------ доклад */
.rp-body { flex: 1; overflow-y: auto; padding: 1.2rem 2rem; display: flex; flex-direction: column; gap: 1.1rem; }
.rq { border: 0; margin: 0; padding: 0; }
.rq legend { display: flex; align-items: baseline; gap: 0.7rem; padding: 0; margin-bottom: 0.55rem; font: 600 1.25rem/1.2 var(--serif); color: var(--text); }
.rq .qn { flex: none; width: 1.8rem; height: 1.8rem; border-radius: 50%; display: grid; place-items: center; background: rgba(217, 178, 108, 0.16); color: var(--brass-2); font: 700 0.85rem var(--sans); transform: translateY(-0.15rem); }
.rq legend em { margin-left: auto; font: 500 0.75rem var(--sans); color: var(--muted); font-style: normal; white-space: nowrap; }
.rq-opts { display: flex; flex-wrap: wrap; gap: 0.4rem; padding-left: 2.5rem; }
.rq-opt { padding: 0.5rem 0.9rem; border-radius: 0.8rem; border: 1px solid var(--stroke-2); background: rgba(255, 255, 255, 0.03); font: 500 1.02rem/1.25 var(--serif); text-align: left; transition: background .2s, border-color .2s, transform .15s; }
.rq-opt:hover { border-color: var(--brass); background: rgba(217, 178, 108, 0.08); }
.rq-opt.on { border-color: var(--brass); background: linear-gradient(180deg, rgba(217, 178, 108, 0.28), rgba(217, 178, 108, 0.12)); color: var(--brass-2); box-shadow: 0 0 1rem rgba(217, 178, 108, 0.2); }
.rp-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 2rem 1.3rem; border-top: 1px solid var(--stroke); color: var(--text-2); font-size: 0.9rem; background: rgba(0, 0, 0, 0.25); }

/* ------------------------------------------------------------ карта */
.map-stage { background: #d8c7a0; }
.map-node .tag text { stroke: rgba(40, 28, 14, 0.92); }
.map-node.here .disc { fill: #1d3a34; }
.map-node.here .rim, .map-node .pulse { stroke: #8ff0de; }
.map-node.here .ico, .map-node.here .st { color: #c8fff4; fill: #8ff0de; }
.map-node.fresh .rim { stroke-dasharray: 0.8 0.4; }
.map-node.sel .rim { stroke: #fff2c8; stroke-width: 0.9; }
.map-node.sel .disc { fill: #6a4a22; }
.map-routes .route { opacity: 0; transition: opacity .25s, stroke-width .25s; stroke: #6a3a14; }
.map-routes .route.focus { opacity: 0.85; stroke: #8a4a14; }
.map-routes .route.sel { opacity: 1; stroke: #a8320e; stroke-width: 0.85; }
.map-item { gap: 0.6rem; }
.map-item .mi-main { flex: 1; min-width: 0; }
.map-item .mi-t { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 0.15rem; font: 600 0.84rem var(--sans); color: var(--brass-2); font-variant-numeric: tabular-nums; }
.map-item .mi-t .new { font-style: normal; font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: #8ff0de; }
.map-item.here .mi-ic { color: #8ff0de; background: rgba(95, 216, 196, 0.12); }
.map-item.sel { background: rgba(217, 178, 108, 0.16); border-color: var(--brass); }
.map-go { position: sticky; bottom: 0; margin-top: 1rem; padding: 1rem; border-radius: 1rem; background: rgba(0, 0, 0, 0.35); border: 1px solid var(--stroke); display: flex; flex-direction: column; gap: 0.6rem; }
.map-go .mg-row b { font: 600 1.3rem var(--serif); display: block; }
.map-go .mg-row span { color: var(--text-2); font-size: 0.86rem; }
.map-go .btn { width: 100%; }

/* ------------------------------------------------------------ финал */
.end { position: absolute; inset: 0; display: flex; justify-content: flex-end; padding: var(--gap); background: linear-gradient(270deg, rgba(10, 7, 5, 0.94) 0%, rgba(10, 7, 5, 0.75) 45%, rgba(10, 7, 5, 0.1) 75%); }
.end-card { width: min(46rem, 100%); display: flex; flex-direction: column; min-height: 0; padding: 1.8rem 2rem 1.3rem; animation: rise .8s var(--ease) both; }
.end-head { position: relative; display: flex; align-items: center; gap: 1.4rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--stroke); }
.end-head h1 { font: 600 2.6rem/1 var(--serif); margin: 0.3rem 0 0.4rem; color: var(--brass-2); }
.rank-text { margin: 0; color: var(--text-2); font: 500 1.08rem/1.4 var(--serif); }
.score-ring { position: relative; width: 7rem; height: 7rem; flex: none; }
.score-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.score-ring .track { fill: none; stroke: rgba(255, 255, 255, 0.08); stroke-width: 6; }
.score-ring .arc { fill: none; stroke: var(--brass); stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset 1.6s var(--ease); filter: drop-shadow(0 0 6px rgba(217, 178, 108, 0.6)); }
.score-ring .num { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.score-ring b { font: 700 2.2rem/1 var(--sans); color: var(--brass-2); font-variant-numeric: tabular-nums; }
.score-ring small { color: var(--muted); font-size: 0.72rem; }
.end-stamp { position: absolute; right: 0; top: -0.4rem; padding: 0.4rem 1rem; border: 3px double #6fbf86; color: #8fd6a0; border-radius: 0.5rem; font: 700 1rem var(--sans); letter-spacing: 0.24em; text-transform: uppercase; transform: rotate(8deg); animation: stampIn .6s 1.2s cubic-bezier(.2, 1.6, .4, 1) both; }
.end-stamp.bad { border-color: var(--wax); color: #ff8a78; }
.end-scroll { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; padding: 0.4rem 0.6rem 0.8rem 0; }
.end-scroll h3 { font: 600 1.4rem var(--serif); color: var(--brass-2); margin: 1.3rem 0 0.6rem; }
.rows { display: flex; flex-direction: column; gap: 0.35rem; }
.row { display: grid; grid-template-columns: 1.6rem 1fr auto; gap: 0.7rem; align-items: start; padding: 0.6rem 0.75rem; border-radius: 0.8rem; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--stroke); animation: rise .5s var(--ease) both; animation-delay: calc(0.6s + var(--i, 0) * 80ms); }
.row .rw-ic { width: 1.4rem; height: 1.4rem; padding: 0.2rem; border-radius: 50%; }
.row.ok .rw-ic { color: #0e2414; background: var(--ok); }
.row.part .rw-ic { color: #2a1c08; background: var(--brass); }
.row.bad .rw-ic { color: #fff; background: var(--wax); }
.row.bonus .rw-ic { color: var(--brass-2); }
.rw-q b { display: block; font: 600 1.05rem/1.25 var(--serif); }
.rw-q span { font-size: 0.86rem; color: var(--text-2); }
.rw-q em { display: block; font-style: normal; font-size: 0.8rem; color: var(--ok); margin-top: 0.15rem; }
.rw-p { font: 700 0.95rem var(--sans); color: var(--brass-2); font-variant-numeric: tabular-nums; }
.epilogue .ep, .debrief .db { margin-bottom: 1rem; font: 500 1.1rem/1.55 var(--serif); color: var(--text-2); }
.epilogue h4, .debrief h4 { margin: 0 0 0.3rem; font: 600 1.15rem var(--serif); color: var(--text); }
.epilogue p, .debrief p { margin: 0 0 0.6rem; }
.db-clues { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.db-clues .chip { font-size: 0.76rem; padding: 0.2rem 0.55rem; }
.db-clues .chip .ic { width: 0.8rem; height: 0.8rem; }
.db-clues .chip.yes { border-color: rgba(143, 214, 160, 0.45); color: var(--ok); }
.db-clues .chip.no { opacity: 0.55; }
.source { margin-top: 1rem; }
.end-foot { display: flex; justify-content: flex-end; gap: 0.6rem; padding-top: 1rem; border-top: 1px solid var(--stroke); }

/* ------------------------------------------------------------ узкие экраны */
@media (max-width: 1280px) {
  .side-col { width: 16.5rem; }
  .loc-plate { width: 16.5rem; }
  .drawer { width: 21rem; }
  .crew small { display: none; }
  .dock-where { display: none; }
}
@media (max-width: 1050px) {
  .team .crew span { display: none; }
  .talk-modal { grid-template-columns: 14rem 1fr; }
  .confront { grid-template-columns: 1fr; }
}
@media (max-height: 820px) {
  .side-col { top: calc(var(--gap) + 7.6rem); }
  .talk-modal { height: calc(100vh - 2rem); }
  .ts-figure, .ts-figure img { height: 11rem; width: 11rem; }
}

/* лобби: фигурка сыщика целиком, на подставке */
.rec-portrait { height: 15rem; place-items: end center; overflow: hidden; }
.rec-portrait img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }
.rec-blurb { margin: 0.55rem 0 0; color: var(--text-2); font: italic 500 1rem/1.4 var(--serif); }
.rec-grid { align-content: start; }
.rec { height: auto; }
.lp-player { flex-wrap: wrap; row-gap: 0.25rem; }
.bm-notes > .empty { grid-column: 1 / -1; color: var(--text-2); border-color: rgba(230, 190, 120, 0.25); }
.bm-head > div { flex: none; } .bm-head h2 { white-space: nowrap; }



/* ============================================================ визуальная аккуратность: переходы, кадры, края
   Правило: картинка не «закрашивается» поверх цветом фона (шов на градиенте бумаги или стекла), а сама растворяется
   маской в прозрачность — под ней виден настоящий фон. Подвалы окон — вне прокрутки, без собственных плашек. */
.card-modal .modal { overflow: visible; max-height: none; }
.card-modal .card-front { display: flex; flex-direction: column; max-height: calc(100vh - 3rem); }
.card-modal .card-art { flex: none; height: clamp(10rem, 30vh, 16.5rem); background: transparent; }
.card-art::after, .loc-card .lc-art::after { display: none; }
.card-art > .art-img { -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 48%, rgba(0, 0, 0, 0.62) 70%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 48%, rgba(0, 0, 0, 0.62) 70%, transparent 100%); }
.card-art .art-kicker, .card-art .art-agent { box-shadow: 0 0.3rem 1rem rgba(0, 0, 0, 0.35); }
.card-head { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 1.4rem 2.1rem 0.2rem; }
.card-head .art-kicker, .card-head .art-agent { position: static; }
.card-head .art-kicker { padding: 0.3rem 0.75rem; border-radius: 999px; background: rgba(60, 40, 20, 0.12); color: #6a4a22; font: 600 0.72rem var(--sans); letter-spacing: 0.14em; text-transform: uppercase; }
.card-head .art-agent { display: flex; align-items: center; gap: 0.5rem; padding: 0.22rem 0.8rem 0.22rem 0.22rem; border-radius: 999px; background: rgba(60, 40, 20, 0.1); color: #3a2a16; font-size: 0.84rem; }
.card-head .art-agent .portrait { --sz: 1.9rem; }
.card-modal .card-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; padding: 0.5rem 2.1rem 0.8rem; }
.card-front.has-art .card-body { margin-top: -1.2rem; }
.card-modal .card-text { font-size: 1.16rem; }
.card-modal .card-foot { flex: none; position: relative; z-index: 1; margin: 0; padding: 0.85rem 2.1rem 1.35rem; background: none; border-top: 1px solid rgba(110, 80, 40, 0.18); }
.card-body.scrolls, .lc-body.scrolls { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 2.4rem), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 2.4rem), transparent); }
.btn kbd { height: 1.35em; min-width: 0; margin-left: 0.25rem; padding: 0 0.35em; border: 1px solid rgba(0, 0, 0, 0.22); border-bottom-width: 1px; background: rgba(0, 0, 0, 0.1); color: inherit; opacity: 0.6; font-size: 0.62rem; letter-spacing: 0.04em; }

/* описание места и событие: картинка растворяется в стекле, текст и подвал — отдельно */
.loc-modal .modal { overflow: visible; max-height: none; }
.loc-card { display: flex; flex-direction: column; max-height: calc(100vh - 3rem); }
.loc-card .lc-art { flex: none; background: transparent; }
.loc-card .lc-art > .art-img { -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 42%, rgba(0, 0, 0, 0.55) 68%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 42%, rgba(0, 0, 0, 0.55) 68%, transparent 100%); }
.loc-card .lc-title { text-shadow: 0 0.15rem 1.2rem rgba(0, 0, 0, 0.9), 0 0 0.35rem rgba(0, 0, 0, 0.7); }
.loc-card .lc-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; padding: 0.6rem 2rem 0.6rem; }
.loc-card .lc-body .card-text { max-height: none; overflow: visible; }
.loc-card > .card-foot { flex: none; margin: 0; padding: 0.8rem 2rem 1.4rem; border-top: 1px solid var(--stroke); }
.event-card.away .lc-art { background: none; }
.event-card.away .lc-art::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 120%, rgba(160, 60, 30, 0.45), transparent 60%), repeating-linear-gradient(135deg, #1e1610 0 18px, #1a130d 18px 36px); -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 100%); mask-image: linear-gradient(180deg, #000 30%, transparent 100%); }

/* разговор: фигура целиком, кадр диорамы растворяется к низу панели */
.ts-art::after { display: none; }
.ts-art .art-img { -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.8) 35%, transparent 72%); mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.8) 35%, transparent 72%); }
.ts-art .art-img.on { opacity: 0.5; }
.ts-figure { height: 17rem; overflow: visible; }
.ts-figure img { height: 17rem; width: auto; max-width: 100%; object-fit: contain; transform: none; }
@media (max-height: 820px) { .ts-figure, .ts-figure img { height: 12rem; width: auto; } }
.talk-reply { padding-top: 0.2rem; }
.talk-hist:empty, .talk-clock:not(.on) { display: none; }
.talk-history { border: 1px solid var(--stroke); border-radius: 0.9rem; background: rgba(0, 0, 0, 0.18); }
.talk-history summary { display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.85rem; cursor: pointer; color: var(--text-2); font-size: 0.85rem; list-style: none; }
.talk-history summary::-webkit-details-marker { display: none; }
.talk-history summary .icon { color: var(--brass); }
.talk-history[open] summary { border-bottom: 1px solid var(--stroke); }
.talk-history .th-item { padding: 0.6rem 0.9rem; border-bottom: 1px solid rgba(255, 255, 255, 0.04); font: 500 0.98rem/1.45 var(--serif); color: var(--text-2); max-height: none; }
.talk-history .th-item:last-child { border-bottom: 0; }
.talk-history .th-item p { margin: 0.2rem 0 0; }
.th-head { display: flex; justify-content: space-between; gap: 1rem; }
.th-head b { color: var(--text); font-weight: 600; }
.th-head span { color: var(--muted); font: 500 0.75rem var(--sans); }
.th-item.ok .th-head b { color: #ff9a88; }
.talk-history[open] { max-height: 16rem; overflow-y: auto; scrollbar-width: thin; }
.talk-clock { display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.8rem; border-radius: 0.7rem; background: rgba(217, 178, 108, 0.12); border: 1px solid rgba(217, 178, 108, 0.35); color: var(--brass-2); font-size: 0.85rem; flex: none; }
.talk-clock.late { background: rgba(184, 50, 42, 0.16); border-color: rgba(232, 96, 76, 0.5); color: #ffb0a0; }
.cf-preview { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0.8rem; align-items: center; padding: 0.7rem 0.9rem; border-radius: 0.9rem; background: rgba(0, 0, 0, 0.22); border: 1px dashed rgba(232, 96, 76, 0.4); }
.cfp-say { font: italic 500 1rem/1.35 var(--serif); color: var(--text-2); }
.cfp-vs { font: 600 0.7rem var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: #ff9a88; }
.cfp-clue b { display: block; font: 600 1rem/1.25 var(--serif); color: var(--text); }
.cfp-clue span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.8rem; color: var(--muted); }

/* прокручиваемые списки: мягкий край вместо обреза строки на полуслове */
.drawer .tab-body.on, .talk-pane, .bm-notes, .rp-body { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 1.2rem), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 1.2rem), transparent); }
.drawer .tab-body { padding-bottom: 1.6rem; }
.talk-pane { padding-bottom: 1rem; }

/* подсказка следующего шага */
.stage-hint { pointer-events: auto !important; padding: 0.4rem 0.45rem 0.4rem 0.5rem; gap: 0.55rem; opacity: 0; transform: translate(-50%, 0.6rem); transition: opacity .35s, transform .45s var(--ease); white-space: normal; max-width: min(44rem, 60vw); background: rgba(16, 11, 7, 0.88); border-color: var(--stroke-2); box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.45); }
.stage-hint.on { opacity: 1; transform: translate(-50%, 0); }
.stage-hint:not(.on) { pointer-events: none !important; }
.stage-hint .sh-ic { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; flex: none; border-radius: 50%; background: rgba(217, 178, 108, 0.16); color: var(--brass-2); }
.stage-hint .sh-ic .icon { width: 1rem; height: 1rem; }
.stage-hint .sh-t { font-size: 0.88rem; color: var(--text-2); line-height: 1.3; }
.stage-hint .sh-t b { color: var(--brass-2); }
.stage-hint .btn { flex: none; }
.stage-hint .sh-x { flex: none; width: 1.6rem; height: 1.6rem; padding: 0.4rem; border: 0; border-radius: 50%; background: transparent; color: var(--muted); }
.stage-hint .sh-x:hover { background: rgba(255, 255, 255, 0.08); color: var(--text); }
.stage-hint .sh-x .ic { width: 100%; height: 100%; }
.stage-hint.urgent { border-color: rgba(232, 96, 76, 0.55); box-shadow: 0 0 1.6rem rgba(232, 96, 76, 0.22), 0 0.8rem 2rem rgba(0, 0, 0, 0.45); }
.stage-hint.urgent .sh-ic { background: rgba(232, 96, 76, 0.2); color: #ffb0a0; }

/* срок и дорога к судье */
.td-info .clock-sub b { color: var(--brass-2); font-weight: 600; }
.td-info .clock-sub.warn { color: var(--brass-2); }
.td-info .clock-sub.late, .td-info .clock-sub.late b { color: #ff9a88; }
.pop-warn, .mg-warn { display: flex; gap: 0.45rem; align-items: flex-start; padding: 0.45rem 0.6rem; border-radius: 0.6rem; background: rgba(184, 50, 42, 0.16); color: #ffb0a0; font-size: 0.8rem; line-height: 1.3; }
.mg-note { display: flex; gap: 0.45rem; align-items: center; color: var(--brass-2); font-size: 0.82rem; }
.pop-warn .icon, .mg-warn .icon, .mg-note .icon { flex: none; margin-top: 0.05rem; }
.wait-grid button.late { opacity: 0.55; border-color: rgba(232, 96, 76, 0.45) !important; }
.wait-grid button.late small { color: #ff9a88; }
.map-item .mi-t .trap { font-style: normal; font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; color: #ff9a88; }
.map-node.trap .rim { stroke: #e8604c; stroke-dasharray: 0.7 0.45; }
.map-node.trap .st { fill: #ff9a88; }
.toast.warn { border-color: rgba(217, 178, 108, 0.65); }

/* цена осмотра на метке */
.spot-label .sl-cost { margin-left: 0.15rem; padding: 0.08rem 0.4rem; border-radius: 999px; background: rgba(217, 178, 108, 0.16); color: var(--brass-2); font: 600 0.68rem/1.2 var(--sans); font-variant-numeric: tabular-nums; }
.spot-label.is-changed .sl-cost { background: rgba(255, 160, 64, 0.2); color: #ffc080; }

/* поиск и новое в блокноте */
.nb-search { display: flex; align-items: center; gap: 0.4rem; margin: 0.55rem 0.75rem 0; padding: 0.3rem 0.4rem 0.3rem 0.7rem; border-radius: 0.75rem; border: 1px solid var(--stroke); background: rgba(0, 0, 0, 0.25); transition: border-color .2s; }
.nb-search:focus-within { border-color: var(--brass); }
.nb-search .icon { width: 0.9rem; height: 0.9rem; color: var(--muted); }
.nb-search input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; color: var(--text); font-size: 0.86rem; padding: 0.25rem 0; }
.nb-search .nb-clear { width: 1.5rem; height: 1.5rem; padding: 0.35rem; border: 0; border-radius: 50%; background: transparent; color: var(--muted); visibility: hidden; }
.nb-search.has .nb-clear { visibility: visible; }
.nb-search .nb-clear .ic { width: 100%; height: 100%; }
.drawer.closed .nb-search { display: none; }
.drawer mark { background: rgba(217, 178, 108, 0.35); color: inherit; border-radius: 0.2rem; padding: 0 0.1rem; }
.is-new { position: relative; }
.is-new::after { content: ""; position: absolute; right: 0.55rem; top: 0.6rem; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--brass); box-shadow: 0 0 0.5rem var(--brass); animation: pulse 1.6s infinite; }
.stmt.is-new::after, .dossier.is-new::after { top: 0.5rem; }

/* настройки */
.settings-pop { min-width: 19rem; padding: 0.2rem 0.3rem 0.4rem; }
.set-row { display: grid; grid-template-columns: 6.5rem 1fr; align-items: center; gap: 0.7rem; padding: 0.45rem 0.4rem; font-size: 0.86rem; color: var(--text-2); }
.set-row input[type=range] { width: 100%; }
.seg2 { display: flex; gap: 0.2rem; padding: 0.2rem; border-radius: 0.6rem; background: rgba(0, 0, 0, 0.3); border: 1px solid var(--stroke); }
.seg2 button { flex: 1; padding: 0.3rem 0.4rem !important; border-radius: 0.45rem !important; font-size: 0.78rem !important; justify-content: center; color: var(--text-2); }
.seg2 button.on { background: rgba(217, 178, 108, 0.22) !important; color: var(--brass-2); }
.seg2.four button { font-size: 0.7rem !important; padding: 0.3rem 0.2rem !important; }
html.large-text { font-size: clamp(15.5px, 1.12vw, 19.5px); }

/* вкладки блокнота помещаются в ширину: «свернуть» — в строке поиска, значки у подписей — только на широких экранах */
.drawer:not(.closed) .tabs .collapse { display: none; }
.drawer .tabs { gap: 0.15rem; padding: 0.4rem; }
.drawer .tabs button { min-width: 0; padding: 0.55rem 0.3rem; }
.drawer .tabs button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1500px) { .drawer .tabs button[data-tab]:not([data-tab=log]) .icon { display: none; } }
.nb-row { display: flex; align-items: center; gap: 0.4rem; margin: 0.55rem 0.75rem 0; }
.nb-row .nb-search { flex: 1; margin: 0; }
.nb-fold { flex: none; width: 2.1rem; height: 2.1rem; padding: 0.5rem; border-radius: 0.65rem; border: 1px solid var(--stroke); background: rgba(0, 0, 0, 0.25); color: var(--muted); }
.nb-fold:hover { color: var(--brass-2); border-color: var(--stroke-2); }
.nb-fold .ic { width: 100%; height: 100%; }
.drawer.closed .nb-row { display: none; }
.stage-hint { right: auto; }
.drawer .tabs button[data-tab] { flex: 1 1 auto; font-size: 0.8rem; }
.drawer .tabs button[data-tab=log] { flex: 0 0 auto; padding-inline: 0.55rem; }
.drawer .tabs button span { overflow: visible; }

/* окно разговора: всегда в экран; поясной портрет крупно над именем, кадр диорамы светлее */
.talk-modal { height: min(44rem, calc(100vh - 4rem)); }
@media (max-height: 820px) { .talk-modal { height: calc(100vh - 4rem); } }
.talk-side { padding: 0 1.3rem 1.2rem; gap: 0; }
.ts-figure { flex: 1 1 auto; min-height: 9rem; height: auto; margin: 0 -1.3rem 0.4rem; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent 100%); mask-image: linear-gradient(180deg, #000 80%, transparent 100%); }
.ts-figure img { height: 100%; max-height: 24rem; width: auto; max-width: none; object-fit: contain; transform: none; }
@media (max-height: 820px) { .ts-figure, .ts-figure img { height: auto; } .ts-figure img { height: 100%; } }
.ts-art .art-img.on { opacity: 0.72; }
.ts-greet { flex: none; max-height: 9.5rem; }
.popover:has(.settings-pop) { max-width: 26rem; }
.settings-pop { min-width: 23rem; }
.set-row { grid-template-columns: 6rem 1fr; }