/* ─────────────────────────────────────────────────────────────────────────
   AI-DnD — modern minimal theme. Self-hosted Inter (offline-first), нейтральная
   палитра, токены отступов/радиусов/теней. Имена CSS-переменных сохранены
   (на них опирается main.js), значения — новые.
   ───────────────────────────────────────────────────────────────────────── */
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/static/fonts/inter-cyrillic-wght-normal.woff2") format("woff2");
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/static/fonts/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2191-2193,U+2212,U+25A0-25FF,U+2600-26FF;
}

:root {
  /* нейтральная тёмная база */
  --bg: #0d0f13; --bg2: #090a0d;
  --panel: #14171d; --panel2: #1b1f27; --elev: #232833;
  --ink: #e8ebf1; --muted: #969db0; --faint: #6b7283;
  --line: #242a34; --line2: #2f3641;
  /* единственный тёплый акцент + семантика */
  --accent: #e0a64d; --accent-ink: #17120a; --gold: #ecd29a;
  --accent2: #5fb87f; --danger: #e2604a;
  /* шкалы */
  --r: 10px; --r2: 14px; --r3: 18px;
  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;
  --sh1: 0 1px 2px rgba(0,0,0,.4);
  --sh2: 0 12px 40px rgba(0,0,0,.55), 0 0 0 1px var(--line) inset;
}
* { box-sizing: border-box; }
::selection { background: rgba(224,166,77,.28); }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 14.5px/1.55 var(--font-ui);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  height: 100vh; display: flex; flex-direction: column; letter-spacing: -0.003em;
}
h1,h2,h3,h4 { font-weight: 650; letter-spacing: -0.01em; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: #3a4250; background-clip: padding-box; }

/* ── header ─────────────────────────────────────────────────────────────── */
header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px; border-bottom: 1px solid var(--line);
  background: var(--panel); position: sticky; top: 0; z-index: 5;
}
header h1 { font-size: 17px; margin: 0; color: var(--ink); display: flex; align-items: baseline; gap: 10px; }
header .sub { font-size: 12px; color: var(--faint); font-weight: 400; letter-spacing: 0; }
.hdr-right { display: flex; align-items: center; gap: 10px; }
.badge { font-size: 11.5px; font-weight: 500; padding: 4px 11px; border-radius: 999px;
  background: var(--panel2); color: var(--muted); border: 1px solid var(--line); }
.badge.online { background: rgba(95,184,127,.12); color: #8fe0aa; border-color: rgba(95,184,127,.3); }
.badge.offline { background: rgba(224,166,77,.12); color: var(--accent); border-color: rgba(224,166,77,.3); }
/* версия игры в шапке (клик → «Что нового») */
.ver-badge { margin: 0 auto 0 10px; font-size: 11.5px; font-weight: 600; padding: 3px 10px;
  border-radius: 999px; background: var(--panel2); color: var(--gold); border: 1px solid var(--line);
  cursor: pointer; font-family: inherit; line-height: 1.4; }
.ver-badge:hover { border-color: var(--accent); color: var(--accent); }
/* новостной раздел (патчноут) — отдельный раздел на экране лобби */
.lobby-news { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); }
.lobby-news h2 { font-size: 15px; color: var(--ink); margin: 0 0 14px; display: flex; align-items: baseline; gap: 10px; }
.news-ver { font-size: 12px; font-weight: 600; color: var(--gold); }
.news-list { display: flex; flex-direction: column; gap: 16px; }
.news-item { border-left: 2px solid var(--accent); padding-left: 12px; }
.news-head { display: flex; align-items: baseline; gap: 10px; }
.news-head b { color: var(--gold); font-size: 15px; }
.news-date { color: var(--faint); font-size: 11.5px; }
.news-title { color: var(--ink); font-weight: 600; margin: 2px 0 6px; }
.news-item ul { margin: 0; padding-left: 18px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.news-item li { margin: 3px 0; }

/* ── layout ─────────────────────────────────────────────────────────────── */
main { flex: 1; display: flex; gap: 18px; padding: 18px; overflow: hidden; }
#scene { flex: 1; display: flex; flex-direction: column; min-width: 0; }
#place-bar {
  display: flex; justify-content: space-between; align-items: center; color: var(--gold);
  font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  padding-bottom: 10px; border-bottom: 1px solid var(--line); margin-bottom: 12px;
}
#place-bar #clock { color: var(--faint); font-weight: 500; }
#log { flex: 1; overflow-y: auto; padding: 2px 14px 2px 2px; white-space: pre-wrap; }
#log .entry { margin-bottom: 15px; animation: fade .35s ease; font-size: 15px; line-height: 1.65; }
#log .narration { color: var(--ink); }
#log .speaker { color: var(--gold); font-weight: 650; }
#log .system { color: var(--muted); }
#log .mech { color: var(--accent); font-family: var(--font-mono); font-size: 12.5px;
  background: rgba(224,166,77,.07); padding: 1px 7px; border-radius: 6px; }
#log .you { color: var(--accent2); }
@keyframes fade { from { opacity: 0; transform: translateY(4px);} to {opacity:1;} }

#context { font-size: 13px; color: var(--muted); padding: 0 2px 10px;
  margin-bottom: 6px; }

/* ── chips ──────────────────────────────────────────────────────────────── */
.chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 7px 0; align-items: center; }
.chip {
  cursor: pointer; padding: 5px 13px; border-radius: 999px; border: 1px solid var(--line2);
  background: var(--panel2); color: var(--ink); font-size: 13px; font-weight: 500;
  transition: background .14s, border-color .14s, color .14s, transform .14s;
}
.chip:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); transform: translateY(-1px); }
.chip.exit { border-color: rgba(95,184,127,.35); }
.chip.npc { border-color: var(--line2); }
.chip.enemy { border-color: rgba(226,96,74,.45); }
.chip.cont { background: rgba(224,166,77,.14); border-color: rgba(224,166,77,.5); color: var(--gold); font-weight: 600; }
.state { font-size: 12px; color: var(--faint); }

/* ── input ──────────────────────────────────────────────────────────────── */
#input-form { display: flex; gap: 10px; margin-top: 12px; }
#input {
  flex: 1; padding: 12px 14px; border-radius: var(--r); border: 1px solid var(--line2);
  background: var(--panel); color: var(--ink); font-size: 14.5px; font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
#input::placeholder { color: var(--faint); }
#input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(224,166,77,.16); }
#input-form button, #roll-btn {
  padding: 12px 18px; border: none; border-radius: var(--r); cursor: pointer;
  background: var(--accent); color: var(--accent-ink); font-weight: 650; font-size: 15px;
  font-family: inherit; transition: filter .15s, transform .1s;
}
#roll-btn:hover, #input-form button:hover { filter: brightness(1.07); }
#input-form button:active { transform: scale(.97); }

/* ── sidebar + panels ───────────────────────────────────────────────────── */
#sidebar { width: 300px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; padding-right: 2px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r2); padding: 15px; }
.panel h2 { margin: 0 0 11px; font-size: 11.5px; color: var(--faint); font-weight: 600;
  text-transform: uppercase; letter-spacing: .07em; }
#char { font-size: 13px; line-height: 1.6; }
#char div { font-size: 13px; }
.hpbar { position: relative; height: 22px; background: var(--panel2); border-radius: 999px;
  margin-top: 11px; overflow: hidden; border: 1px solid var(--line); }
#hpfill { height: 100%; background: linear-gradient(90deg, var(--danger), var(--accent)); transition: width .4s; }
.hpbar span { position: absolute; inset: 0; text-align: center; font-size: 12px; font-weight: 600;
  line-height: 22px; color: var(--ink); text-shadow: 0 1px 2px rgba(0,0,0,.6); }
#quests .obj { font-size: 12px; color: var(--muted); }
#journal { font-size: 12.5px; max-height: 220px; overflow-y: auto; }
.jentry { padding: 5px 0; border-bottom: 1px solid var(--line); color: var(--muted); }
.jentry:last-child { border-bottom: none; }
#connectivity .loc-here { color: var(--gold); font-weight: 600; margin-bottom: 8px; }
#connectivity .loc-edge { display: flex; align-items: center; gap: 7px; margin: 4px 0; flex-wrap: wrap; }
#connectivity .occ { font-size: 11px; color: var(--faint); }
#connectivity .dir { font-size: 11px; color: var(--accent); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; min-width: 72px; }
#quests { list-style: none; padding: 0; margin: 0; font-size: 13px; }
#quests li { padding: 7px 0; border-bottom: 1px solid var(--line); }
#quests li:last-child { border-bottom: none; }
#quests .state { font-size: 11px; color: var(--accent2); }
#quest-feed { margin-top: 8px; font-size: 12px; color: var(--muted); }

/* ── overlays / cards ───────────────────────────────────────────────────── */
.overlay { position: fixed; inset: 0; background: rgba(6,7,9,.66); display: flex;
  align-items: center; justify-content: center; z-index: 10; opacity: 1;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.overlay.hidden { display: none; }
/* появление — только по transform (opacity НЕ трогаем: anim на .overlay оставляла opacity:0 → оверлей-невидимка) */
@keyframes box-in { from { transform: translateY(8px); } to { transform: none; } }
.overlay:not(.hidden) > .ui-box,
.overlay:not(.hidden) > .combat-box,
.overlay:not(.hidden) > .dice-box { animation: box-in .18s ease; }
.combat-box, .dice-box, .ui-box {
  background: var(--panel); border: 1px solid var(--line2); border-radius: var(--r3);
  box-shadow: var(--sh2); max-height: 92vh; overflow-y: auto;
}
.combat-box { padding: 22px; width: min(800px, 94vw); }
.dice-box { padding: 24px; width: min(440px, 92vw); text-align: center; }
.ui-box { padding: 20px 22px; width: min(620px, 94vw); }
.load-box { width: min(480px, 92vw); text-align: center; }
.load-bar { height: 12px; background: var(--panel2); border: 1px solid var(--line2);
  border-radius: 999px; overflow: hidden; margin: 16px 0 10px; }
.load-fill { height: 100%; width: 4%; border-radius: 999px; transition: width .35s ease;
  background: linear-gradient(90deg, var(--accent), var(--gold)); }
.load-fill.indet { background: linear-gradient(90deg, var(--panel2) 0%, var(--accent) 50%, var(--panel2) 100%);
  background-size: 200% 100%; animation: load-slide 1.1s linear infinite; }
@keyframes load-slide { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.load-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.load-pct { color: var(--accent); font-family: var(--font-mono); font-size: 13px; font-weight: 650; }
.load-hint { color: var(--faint); font-size: 12px; margin: 12px 0 0; line-height: 1.5; }

/* всплывающие «ачивки» */
.toasts { position: fixed; top: 16px; right: 16px; z-index: 50; display: flex; flex-direction: column;
  gap: 10px; pointer-events: none; max-width: min(360px, 92vw); }
.toast { display: flex; align-items: center; gap: 12px; padding: 12px 15px;
  background: linear-gradient(135deg, var(--elev), var(--panel)); border: 1px solid var(--line2);
  border-left: 3px solid var(--accent); border-radius: var(--r2); box-shadow: var(--sh2);
  transform: translateX(118%); opacity: 0;
  transition: transform .42s cubic-bezier(.2,.85,.25,1), opacity .42s; }
.toast.in { transform: translateX(0); opacity: 1; }
.toast.out { transform: translateX(118%); opacity: 0; }
.toast-icon { font-size: 25px; line-height: 1; flex-shrink: 0; filter: drop-shadow(0 0 6px rgba(224,166,77,.4)); }
.toast-body { min-width: 0; }
.toast-title { color: var(--gold); font-weight: 700; font-size: 14px; letter-spacing: .2px; }
.toast-text { color: var(--muted); font-size: 12.5px; margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toast-quest { border-left-color: var(--gold); }
.toast-quest .toast-icon { filter: drop-shadow(0 0 7px rgba(236,210,154,.6)); }
.toast-levelup { border-left-color: var(--accent2); }
.toast-phase { border-left-color: var(--accent); }
.toast-reshape { border-left-color: #b18cff; }
.toast-event { border-left-color: var(--danger); }

/* дебаг роутинга */
.dbg-toggle { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted);
  cursor: pointer; user-select: none; white-space: nowrap; }
.dbg-toggle input { accent-color: var(--accent); cursor: pointer; margin: 0; }
#log .routing { color: var(--accent2); font-family: var(--font-mono); font-size: 11.5px;
  opacity: .85; word-break: break-word; padding: 2px 0; }
#log .thinking { color: var(--accent); font-family: var(--font-mono); font-size: 12px; opacity: .9;
  padding: 3px 0; display: flex; align-items: center; gap: 8px; animation: none; }
#log .thinking .thinking-pct { color: var(--gold); font-weight: 650; margin-left: auto; }

/* журнал квестов */
.jr-box { width: min(680px, 94vw); }
.jr-list { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.jr-entry { background: var(--panel2); border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--r2); padding: 13px 15px; }
.jr-main { border-left-color: var(--gold); }
.jr-board { border-left-color: var(--accent2); }
.jr-head { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--ink); }
.jr-tag { font-size: 10px; font-weight: 700; letter-spacing: .5px; color: var(--accent-ink);
  background: var(--accent); border-radius: 4px; padding: 2px 6px; }
.jr-ok { color: var(--accent2); font-size: 12px; }
.jr-brief { color: var(--muted); font-size: 13px; line-height: 1.55; margin: 8px 0; white-space: pre-wrap; }
.jr-stages { margin: 6px 0 0; padding: 0; list-style: none; }
.jr-stages li { font-size: 13px; color: var(--faint); padding: 2px 0; }
.jr-stages li.jr-done { color: var(--accent2); opacity: .8; }
.jr-stages li.jr-cur { color: var(--gold); font-weight: 600; }
.jr-meta { color: var(--faint); font-size: 11.5px; margin-top: 8px; }
.combat-box h2, .dice-box h2, .ui-box h2 { color: var(--ink); margin-top: 0; font-size: 17px;
  display: flex; align-items: center; gap: 10px; }
.ui-box h3 { margin: 6px 0; font-size: 13px; color: var(--muted); font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em; }
.ui-box .x, .hpop .x { margin-left: auto; cursor: pointer; background: var(--panel2); color: var(--muted);
  border: 1px solid var(--line2); border-radius: 8px; padding: 3px 10px; font-size: 13px; transition: .15s; }
.ui-box .x:hover, .hpop .x:hover { border-color: var(--danger); color: var(--danger); }

/* ── combat ─────────────────────────────────────────────────────────────── */
.combat-grid { display: flex; gap: 14px; margin-bottom: 14px; }
#battle-canvas { border: 1px solid var(--line2); border-radius: var(--r); cursor: pointer;
  background: #0c0e12; image-rendering: auto; max-width: 100%; }
.combat-side { flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: 10px; }
#combat-actions { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin-bottom: 10px; }
.cbtn { cursor: pointer; padding: 7px 13px; border-radius: 9px; border: 1px solid var(--line2);
  background: var(--panel2); color: var(--ink); font-size: 13px; font-weight: 500; font-family: inherit; transition: .14s; }
.cbtn:hover { border-color: var(--accent); background: var(--elev); }
.cbtn.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
#initiative { list-style: none; padding: 0; margin: 0 0 12px; }
#initiative li { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 9px; }
#initiative li.current { background: var(--panel2); border-left: 3px solid var(--accent); }
#initiative .name { flex: 1; }
#initiative .hp { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
#initiative .dead { opacity: .4; text-decoration: line-through; }
#initiative .pc .name { color: var(--accent2); }
#initiative .enemy .name { color: #e9a08a; }
#combat-log { font-size: 13px; max-height: 150px; overflow-y: auto; color: var(--muted); white-space: pre-wrap; }

/* ── trade ──────────────────────────────────────────────────────────────── */
.trade-cols { display: flex; gap: 18px; }
.trade-cols > div { flex: 1; min-width: 0; }
.trade-list { display: flex; flex-direction: column; gap: 7px; }
.trade-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--r);
  background: var(--panel2); border: 1px solid var(--line); }
.trade-row .nm { flex: 1; min-width: 0; }
.trade-row .nm small { display: block; color: var(--gold); opacity: .85; }
.trade-row .pr { color: var(--gold); white-space: nowrap; font-weight: 600; }
.trade-row button { cursor: pointer; border: none; border-radius: 8px;
  background: var(--accent); color: var(--accent-ink); padding: 5px 12px; font-size: 12px; font-weight: 600; }
.trade-row button:hover { filter: brightness(1.07); }

/* ── map overlay ────────────────────────────────────────────────────────── */
.map-tabs { display: inline-flex; gap: 7px; font-size: 13px; }
.map-tabs .tab { cursor: pointer; padding: 5px 12px; border-radius: 9px; border: 1px solid var(--line2);
  background: var(--panel2); color: var(--ink); font-weight: 500; }
.map-tabs .tab.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
#mapview .ui-box { width: min(860px, 95vw); }
.map-layout { display: flex; flex-wrap: wrap; gap: 14px; align-items: stretch; margin: 12px 0 4px; }
.map-stage { position: relative; flex: 1 1 440px; min-width: 0; }
.map-stage canvas { position: absolute; top: 0; left: 0; width: 100%; height: auto; border-radius: var(--r); }
#map-canvas { position: relative; background: #11141a; border: 1px solid var(--line2); }
/* SVG-город как база карты: лежит над canvas, под FX-оверлеем. pointer-events:auto, чтобы
   дом-полигон находился через elementsFromPoint (клик ловит #map-fx сверху, но дом — под ним). */
.map-svg { position: absolute; top: 0; left: 0; width: 100%; height: auto; border-radius: var(--r); overflow: hidden; }
.map-svg svg { display: block; width: 100%; height: auto; pointer-events: auto; }
#map-fx { cursor: pointer; }
.map-debug { display: flex; align-items: center; gap: 10px; margin: 8px 0 4px; flex-wrap: wrap; font-size: 13px; color: var(--ink2, #b9c2d0); }
.map-debug .inc-toggle { display: flex; align-items: center; gap: 5px; cursor: pointer; user-select: none; }
.map-debug input[type=range] { flex: 1 1 180px; min-width: 140px; accent-color: #7F77DD; }
.inc-list { display: flex; flex-direction: column; gap: 3px; margin: 2px 0 6px; font-size: 12px; max-height: 132px; overflow-y: auto; }
.inc-row { display: flex; align-items: baseline; gap: 6px; color: var(--ink2, #b9c2d0); }
.inc-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; transform: translateY(1px); }
.inc-desc { color: var(--ink3, #8b94a3); }
.inc-rumor { color: #b08a3e; }
.inc-react { color: #c66; }
.map-legend { flex: 0 0 200px; max-height: 420px; overflow-y: auto;
  background: var(--panel2); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; }
.map-legend:empty { display: none; }
.map-legend h4 { margin: 0 0 10px; color: var(--faint); font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; }
.map-legend ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 3px; }
.map-legend li { display: flex; gap: 9px; align-items: center; padding: 5px 6px; border-radius: 8px; cursor: pointer; transition: background .12s; }
.map-legend li:hover { background: rgba(224,166,77,.14); }
.map-legend .ln { flex: 0 0 22px; height: 22px; line-height: 22px; text-align: center; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: 12px; }
.map-legend .lname { flex: 1; color: var(--ink); font-size: 13px; line-height: 1.3; }
.map-actions { display: flex; align-items: center; gap: 8px; margin: 8px 0 2px; }
.map-actions.hidden { display: none; }
.map-actions .sp { flex: 1; }
.map-actions #map-sel { color: var(--gold); }

/* ── house popover ──────────────────────────────────────────────────────── */
.hpop { position: fixed; right: 20px; top: 100px; width: 308px; z-index: 12;
  background: var(--panel); border: 1px solid var(--line2); border-radius: var(--r2);
  padding: 14px 16px; box-shadow: var(--sh2); font-size: 13px; line-height: 1.5; }
.hpop.hidden { display: none; }
.hpop h3 { margin: 0 0 8px; font-size: 15px; color: var(--gold); }
.hpop .x { float: right; }
.hpop .occ { margin: 3px 0; } .hpop .tag { color: var(--gold); opacity: .85; }
.hpop .mem { margin-top: 8px; color: var(--accent2); font-size: 11.5px; }

/* ── menu / newgame / saves ─────────────────────────────────────────────── */
.menu-box { width: min(360px, 92vw); }
.menu-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.mbtn { font-family: inherit; font-size: 15px; font-weight: 500; text-align: left; cursor: pointer; padding: 13px 16px;
  border: 1px solid var(--line2); border-radius: var(--r2); background: var(--panel2); color: var(--ink); transition: .14s; }
.mbtn:hover { border-color: var(--accent); background: var(--elev); }
.ng-box { width: min(900px, 95vw); }
.ng-grid { display: flex; gap: 14px; }
.ng-grid > div { flex: 1; min-width: 0; }
.ng-cards { display: flex; flex-direction: column; gap: 8px; max-height: 50vh; overflow-y: auto; }
.ng-card { cursor: pointer; padding: 10px 12px; border: 1px solid var(--line2); border-radius: var(--r);
  background: var(--panel2); transition: .12s; }
.ng-card:hover { border-color: var(--accent); }
.ng-card.sel { border-color: var(--accent); background: rgba(224,166,77,.1); box-shadow: 0 0 0 1px var(--accent) inset; }
.ng-card .t { color: var(--ink); font-weight: 650; font-size: 14px; }
.ng-card .d { font-size: 12px; color: var(--muted); margin-top: 3px; line-height: 1.45; }
.ng-foot { display: flex; align-items: center; gap: 12px; margin-top: 16px;
  border-top: 1px solid var(--line); padding-top: 14px; }
.ng-foot .sp { flex: 1; }
.ng-foot label { font-size: 12px; color: var(--muted); }
.ng-foot input { font-family: inherit; padding: 8px 11px; border: 1px solid var(--line2); border-radius: 8px;
  background: var(--panel); color: var(--ink); width: 170px; margin-left: 6px; }
.ng-foot input:focus { outline: none; border-color: var(--accent); }
.ng-foot #ng-start { font-size: 15px; padding: 10px 20px; background: var(--accent); color: var(--accent-ink);
  border: none; border-radius: var(--r); font-weight: 650; }
.ng-skills-wrap { margin-top: 14px; }
.ng-skills-wrap h3 { margin: 0 0 8px; }
.ng-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.ng-chip { cursor: pointer; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line2);
  background: var(--panel2); color: var(--ink); font-size: 13px; transition: .14s; }
.ng-chip.sel { background: rgba(224,166,77,.12); border-color: var(--accent); color: var(--gold); }
.ng-chip.dim { opacity: .4; cursor: default; }
.xpbar { position: relative; height: 7px; border-radius: 999px; background: var(--panel2); margin: 7px 0 2px; overflow: hidden; }
.xpbar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent2), var(--accent)); }
.sheet-feats { font-size: 11.5px; color: var(--muted); margin-top: 7px; }
.sheet-feats b { color: var(--ink); }
.lvl-btn { margin-top: 10px; width: 100%; font-size: 13px; background: var(--accent2); color: #0c1410;
  border: none; border-radius: var(--r); padding: 9px; cursor: pointer; font-weight: 650; animation: pulse 1.6s infinite; }
@keyframes pulse { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.2); } }
.saves-list { display: flex; flex-direction: column; gap: 9px; max-height: 60vh; overflow-y: auto; }
.save-row { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border-radius: var(--r);
  background: var(--panel2); border: 1px solid var(--line); }
.save-row .info { flex: 1; min-width: 0; }
.save-row .nm { color: var(--gold); font-weight: 650; }
.save-row .sub2 { font-size: 11.5px; color: var(--muted); }
.save-row button { font-family: inherit; font-size: 12.5px; cursor: pointer; border: none;
  border-radius: 8px; padding: 6px 13px; background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.save-row button.del { background: transparent; color: var(--danger); border: 1px solid var(--danger); }
.saves-empty { color: var(--muted); padding: 8px 2px; }

/* ── inventory ──────────────────────────────────────────────────────────── */
.inv-slots { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.inv-slot { flex: 1; min-width: 120px; border: 1px solid var(--line); border-radius: var(--r); padding: 9px 11px; background: var(--panel2); }
.inv-slot .sl { font-size: 10.5px; color: var(--faint); text-transform: uppercase; letter-spacing: .05em; }
.inv-slot .it { color: var(--gold); font-size: 13px; margin-top: 2px; }
.inv-slot .it .empty { color: var(--faint); }
#inv-wallet { margin-top: 12px; }
#ng-l1 h4 { margin: 0 0 6px; font-size: 13px; color: var(--ink); }

/* ── factions ───────────────────────────────────────────────────────────── */
.panel-link { float: right; font-size: 11px; color: var(--accent); cursor: pointer; font-weight: 500; text-transform: none; letter-spacing: 0; }
.panel-link:hover { color: var(--gold); }
#factions .fac-mini { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 12.5px; cursor: pointer; }
#factions .fac-mini:hover { color: var(--gold); }
#factions .fac-mini .em { font-size: 15px; }
#factions .fac-mini .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#factions .fac-mini .you { color: var(--accent2); font-size: 11px; }
.stand { font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; }
.fac-list { display: flex; flex-direction: column; gap: 11px; max-height: 64vh; overflow-y: auto; }
.fac-card { border: 1px solid var(--line2); border-radius: var(--r2); padding: 12px 14px; background: var(--panel2); }
.fac-card.member { border-color: var(--accent2); box-shadow: 0 0 0 1px var(--accent2) inset; }
.fac-card h3 { margin: 0; font-size: 15px; color: var(--gold); display: flex; align-items: center; gap: 8px; text-transform: none; letter-spacing: -0.01em; }
.fac-card h3 .sp { flex: 1; }
.fac-card .blurb { font-size: 12.5px; color: var(--ink); margin: 6px 0; cursor: pointer; line-height: 1.5; }
.fac-card .meta { font-size: 11.5px; color: var(--muted); }
.fac-card .meta b { color: var(--ink); }
.fac-card .acts { margin-top: 10px; display: flex; gap: 8px; align-items: center; }
.fac-card .acts button { font-family: inherit; font-size: 12.5px; cursor: pointer; border: none;
  border-radius: 8px; padding: 6px 13px; background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.fac-card .acts button.leave { background: transparent; color: var(--danger); border: 1px solid var(--danger); }
.fac-card .acts button:disabled { opacity: .5; cursor: default; background: var(--panel2); color: var(--muted); border: 1px solid var(--line); }
.fac-card .acts .note { font-size: 11px; color: var(--muted); }

/* ── dice ───────────────────────────────────────────────────────────────── */
#dice-info { font-size: 14px; margin-bottom: 12px; color: var(--muted); }
#dice-result { font-size: 44px; font-weight: 700; text-align: center; min-height: 60px; letter-spacing: 3px; color: var(--ink); }
#dice-result .total { color: var(--gold); }
#dice-result .crit { color: var(--accent2); }
#dice-result .fumble { color: var(--danger); }

/* --- поля логина/кода --- */
.auth-input { display: block; width: 100%; margin: 6px 0; padding: 8px; box-sizing: border-box;
  border-radius: 8px; border: 1px solid rgba(255,255,255,.2); background: rgba(0,0,0,.3); color: #eee; }
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.login-box { max-width: 360px; width: 100%; text-align: center; }
.login-box h1 { margin-top: 0; }
/* .screen — отдельный полноэкранный экран (непрозрачный фон), не всплывашка */
.overlay.screen { background: #0a0c10; backdrop-filter: none; }
.overlay.screen > .ui-box { width: min(960px, 96vw); max-height: 92vh; overflow: auto; }
.screen { position: fixed; inset: 0; z-index: 11; overflow: auto; background: #0a0c10; }
.screen.hidden { display: none; }
/* лобби = панель управления мирами */
.lobby-panel { max-width: 880px; margin: 0 auto; padding: 28px 22px; }
.lobby-head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; border-bottom: 1px solid rgba(255,255,255,.1); padding-bottom: 14px; }
.lobby-head h1 { margin: 0; }
.lobby-head-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.lobby-list { display: grid; gap: 10px; margin-top: 18px; }
.lobby-empty { color: var(--muted); text-align: center; padding: 40px 0; }
.world-card { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; background: rgba(255,255,255,.03); }
.world-card .nm { font-weight: 600; }
.world-card .sub2 { color: var(--muted); font-size: 12px; }
.world-acts { display: flex; gap: 6px; }
#usage-hud { background: rgba(255,255,255,.08); }