:root {
  --bg: #0a0f16;
  --sea: #0d1725;
  --panel: #111a25;
  --panel2: #16212e;
  --line: #263342;
  --text: #e6eef7;
  --dim: #8fa3b8;
  --gold: #e0b356;
  --red: #e05a4c;
  --green: #4fbf7a;
  --blue: #58a6ff;
  --violet: #a882ff;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text);
  font-family: "Segoe UI", Roboto, Arial, sans-serif; font-size: 14px; overflow: hidden; }
button { font: inherit; font-size: 13px; color: var(--text); background: var(--panel2); border: 1px solid var(--line);
  border-radius: 6px; padding: 6px 10px; cursor: pointer; }
button:hover:not(:disabled) { background: #1e2b3b; border-color: #3a4c60; }
button:disabled { opacity: .45; cursor: not-allowed; }
button.primary { background: #1d5c3a; border-color: #2f7d52; }
button.primary:hover:not(:disabled) { background: #24704a; }
button.danger { background: #63262a; border-color: #8f3a3f; }
button.big { font-size: 16px; padding: 11px 20px; }
button.ghost { background: transparent; }
input, select, textarea { font: inherit; color: var(--text); background: #0c141d; border: 1px solid var(--line);
  border-radius: 6px; padding: 7px 9px; }
textarea { width: 100%; resize: vertical; line-height: 1.5; font-size: 13.5px; }
input:focus, textarea:focus, select:focus { outline: 1px solid var(--gold); }
.spacer { flex: 1; }
.lbl { font-size: 11.5px; text-transform: uppercase; letter-spacing: 1px; color: var(--dim); margin: 10px 0 5px; }
.chip { background: var(--panel2); border: 1px solid var(--line); border-radius: 13px; padding: 3px 10px;
  font-size: 12.5px; color: var(--dim); white-space: nowrap; }
.chip b { color: var(--text); }
.chip.date { color: var(--gold); border-color: #4a3d22; background: #1d1a10; }
.row { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; margin-top: 16px; }

/* ---------- старт ---------- */
/* Экран создания игры. Верхний отступ раньше стоял на самом экране (padding: 26px ...),
   из-за чего липкая шапка прилипала на 26px от верха, а полоса над ней оставалась
   открытой — при прокрутке по ней ехал контент, и шапка выглядела незакреплённой.
   Теперь отступ отдан содержимому: шапка прилипает к самому верху и перекрывает всё. */
#start { position: absolute; inset: 0; overflow: auto; padding: 0 30px 70px; }
#start > .topbar { margin: 0 -30px; }
#start > .wrap { padding-top: 26px; }
.startbox { max-width: 1080px; margin: 0 auto; }
#start h1 { margin: 0 0 6px; font-size: 34px; letter-spacing: 1px; }
#start h1 span { color: var(--gold); }
.tagline { color: var(--dim); line-height: 1.6; max-width: 900px; margin-bottom: 18px; }
.startgrid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 26px; }
.countrylist { height: 340px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.crow { display: flex; align-items: center; gap: 8px; padding: 7px 10px; cursor: pointer; border-bottom: 1px solid #1a2431; }
.crow:hover { background: #182431; }
.crow.on { background: #1d2c3d; box-shadow: inset 3px 0 0 var(--gold); }
.crow .nm { flex: 1; }
.crow .tiny { font-size: 11.5px; color: var(--dim); }
.radio { display: flex; gap: 8px; align-items: flex-start; margin: 6px 0; font-size: 13px; line-height: 1.45; cursor: pointer; }
.radio small { color: var(--dim); }
.startinfo { margin-top: 16px; font-size: 13.5px; line-height: 1.65; color: var(--dim); border-left: 3px solid var(--line); padding-left: 12px; }
.startinfo b { color: var(--text); }

/* ---------- игра ---------- */
#game { display: none; position: absolute; inset: 0; grid-template-rows: auto 1fr auto; }
#game.on { display: grid; }
.top { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; padding: 7px 11px;
  background: var(--panel); border-bottom: 1px solid var(--line); }
.flagLbl { font-weight: 700; font-size: 15px; margin-right: 4px; }
.mid { display: grid; grid-template-columns: 1fr 400px; min-height: 0; }
#mapWrap { position: relative; overflow: hidden; background: radial-gradient(120% 120% at 40% 0%, #12203a 0%, #08101c 70%); }
#map { display: block; cursor: grab; }
#map.drag { cursor: grabbing; }
#tip { position: absolute; pointer-events: none; display: none; background: #0b131d; border: 1px solid var(--line);
  border-radius: 6px; padding: 7px 10px; font-size: 12.5px; line-height: 1.5; max-width: 300px; z-index: 30; }
.mapctl { position: absolute; left: 10px; bottom: 10px; display: flex; gap: 5px; }
.layers { position: absolute; left: 10px; top: 10px; background: rgba(9,15,23,.85); border: 1px solid var(--line);
  border-radius: 8px; padding: 7px 9px; font-size: 12px; line-height: 1.75; color: var(--dim); }
.layers label { display: block; cursor: pointer; }
.legend { position: absolute; right: 10px; bottom: 10px; background: rgba(9,15,23,.85); border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 10px; font-size: 12px; line-height: 1.8; color: var(--dim); }
.legend .sw { width: 11px; height: 11px; border-radius: 2px; display: inline-block; margin-right: 6px; }
.swOwn { background: #2f7d52; } .swOccupied { background: #a3563a; } .swLost { background: #7a2f3a; }

.side { display: flex; flex-direction: column; min-height: 0; background: var(--panel); border-left: 1px solid var(--line); }
.tabs { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.tabs button { border: 0; border-radius: 0; background: transparent; color: var(--dim); padding: 9px 11px;
  border-bottom: 2px solid transparent; }
.tabs button.on { color: var(--text); background: var(--panel2); border-bottom-color: var(--gold); }
.tabbody { flex: 1; min-height: 0; overflow: auto; padding: 11px; }
h3.sec { font-size: 11.5px; text-transform: uppercase; letter-spacing: 1px; color: var(--dim); margin: 14px 0 7px; }
h3.sec:first-child { margin-top: 0; }
.kv { display: grid; grid-template-columns: 1fr auto; gap: 3px 12px; font-size: 13px; line-height: 1.65; }
.kv span:nth-child(even) { text-align: right; }
.ev { border-left: 3px solid var(--line); background: #0d151f; border-radius: 0 6px 6px 0; padding: 7px 9px; margin-bottom: 7px; font-size: 13px; line-height: 1.55; cursor: pointer; }
.ev:hover { background: #131e2b; }
.ev.real { border-left-color: var(--blue); }
.ev.mil { border-left-color: var(--red); }
.ev.dip { border-left-color: var(--gold); }
.ev.eco { border-left-color: var(--green); }
.ev .h { display: flex; gap: 8px; align-items: baseline; }
.ev .d { color: var(--dim); font-size: 11.5px; white-space: nowrap; }
.ev .t { font-weight: 600; }
.ev .src { font-size: 11px; color: var(--dim); margin-top: 4px; }
.ev .src a { color: var(--blue); text-decoration: none; }
.verdict { font-size: 13px; line-height: 1.55; padding: 7px 9px; border-radius: 6px; margin-bottom: 6px; background: #0d151f; }
.verdict.no { box-shadow: inset 3px 0 0 var(--red); }
.verdict.yes { box-shadow: inset 3px 0 0 var(--green); }
.order-item { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; padding: 6px 0; border-bottom: 1px solid #1a2431; }
.order-item .x { color: var(--dim); cursor: pointer; }
.unit { display: flex; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid #1a2431; font-size: 12.5px; }
.unit .grow { flex: 1; min-width: 0; }
.unit .nm { font-weight: 600; }
.unit .tiny { color: var(--dim); font-size: 11.5px; }
.dotc { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.chat { font-size: 13px; line-height: 1.6; }
.chat .me { background: #16222f; border-radius: 8px; padding: 7px 10px; margin: 6px 0 6px 22px; }
.chat .ai { background: #101a26; border-radius: 8px; padding: 7px 10px; margin: 6px 22px 6px 0; white-space: pre-wrap; }
.chat .ai b { color: var(--gold); }
.ideas button { display: block; width: 100%; text-align: left; margin-bottom: 5px; }
.tl { position: relative; padding-left: 14px; }
.tl:before { content: ''; position: absolute; left: 4px; top: 4px; bottom: 4px; width: 2px; background: var(--line); }
.tlrow { position: relative; padding: 5px 0; font-size: 12.5px; cursor: pointer; }
.tlrow:before { content: ''; position: absolute; left: -13px; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--dim); }
.tlrow.real:before { background: var(--blue); }
.tlrow.mil:before { background: var(--red); }
.tlrow .d { color: var(--dim); font-size: 11.5px; }

.bottom { background: var(--panel); border-top: 1px solid var(--line); padding: 9px 11px; }
.orderbox textarea { min-height: 62px; }
.orderrow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.switch { display: flex; gap: 6px; align-items: center; font-size: 12.5px; color: var(--dim); cursor: pointer; }
#logline { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); background: #0d151f;
  border: 1px solid var(--line); border-radius: 8px; padding: 7px 13px; font-size: 13px; display: none; max-width: 70%; z-index: 40; }
#logline.bad { border-color: #7d3b3b; } #logline.good { border-color: #2f7d52; }

#modal { position: absolute; inset: 0; background: rgba(4,7,11,.75); display: none; align-items: center;
  justify-content: center; z-index: 60; padding: 20px; }
#modal.on { display: flex; }
.mbox { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; width: 100%; max-width: 720px;
  max-height: 86vh; overflow: auto; padding: 18px 20px; box-shadow: 0 20px 60px rgba(0,0,0,.55); }
.mbox h2 { margin: 0 0 10px; font-size: 19px; }
.mbox .body { line-height: 1.62; font-size: 14px; }
.mbox .body ul { padding-left: 20px; }
.mbox .acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.mbox table { width: 100%; border-collapse: collapse; font-size: 13px; }
.mbox td, .mbox th { border-bottom: 1px solid #1c2734; padding: 5px 6px; text-align: left; }
.report .b { padding: 6px 9px; border-left: 3px solid var(--line); background: #0d151f; border-radius: 0 6px 6px 0; margin-bottom: 6px; font-size: 13.5px; line-height: 1.55; }
.report .b.real { border-left-color: var(--blue); }
.report .b.win { border-left-color: var(--green); }
.report .b.loss { border-left-color: var(--red); }
#toast { position: absolute; left: 50%; bottom: 70px; transform: translateX(-50%); display: none; z-index: 70;
  background: #0d151f; border: 1px solid var(--line); border-radius: 8px; padding: 9px 14px; max-width: 70%; font-size: 13.5px; }
#busy { position: absolute; inset: 0; background: rgba(4,7,11,.6); display: none; align-items: center; justify-content: center; z-index: 80; }
#busy.on { display: flex; }
.busybox { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 20px 26px;
  display: flex; gap: 14px; align-items: center; font-size: 14px; }
.spin { width: 22px; height: 22px; border: 3px solid var(--line); border-top-color: var(--gold); border-radius: 50%; animation: sp 1s linear infinite; }
@keyframes sp { to { transform: rotate(360deg); } }
.flag { font-size: 15px; }
.marker-dlg input, .marker-dlg select { width: 100%; }

/* ---------- чаты: советник и переговоры ---------- */
.quickbtns { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.quickbtns button { font-size: 12px; padding: 5px 9px; background: #17222f; border-color: #2b3a4c; }
.quickbtns button:hover { background: #1e2c3c; border-color: var(--gold); }
.chat .ai, .chat .me { white-space: pre-wrap; }
.chat .ai b { color: var(--gold); }
.talkbox { border: 1px solid var(--line); border-radius: 9px; padding: 9px; margin-bottom: 10px; background: #0e1620; }
.talkhead { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.talkhead b { font-size: 13.5px; }
.talkhead button { margin-left: auto; padding: 2px 7px; font-size: 12px; }
.talkbox .row { margin-top: 7px; }
.tiny { font-size: 11.5px; color: var(--dim); }
.countrylist { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); overflow: auto; }
.countrylist .crow { display: flex; align-items: center; gap: 8px; padding: 7px 10px; cursor: pointer; border-bottom: 1px solid #1a2431; }
.countrylist .crow:hover { background: #182431; }
.countrylist .crow.on { background: #1d2c3d; box-shadow: inset 3px 0 0 var(--gold); }
.countrylist .crow .nm { flex: 1; }

/* ---------- markdown в чатах ---------- */
.chat p { margin: 0 0 5px; }
.chat h4 { margin: 9px 0 4px; font-size: 13px; color: var(--gold); text-transform: none; letter-spacing: 0; }
.chat ul, .chat ol { margin: 3px 0 6px; padding-left: 20px; }
.chat li { margin-bottom: 2px; }
.chat code { background: #0a121b; padding: 1px 5px; border-radius: 4px; font-size: 12.5px; color: #ffd98a; }
.chat a { color: var(--blue); }
.chat .sp { height: 5px; }
.chat table { border-collapse: collapse; margin: 5px 0 7px; font-size: 12.5px; }
.chat td { border: 1px solid #22303f; padding: 3px 7px; }

/* ---------- слоты сохранений ---------- */
.slots { margin-top: 10px; }
.slotrow { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 9px;
  padding: 9px 11px; margin-bottom: 7px; background: #0e1620; }
.slotrow.auto { border-color: #2f5c3f; background: #0e1a14; }
.slotrow.empty { opacity: .6; }
.slotrow .sl-meta { flex: 1; min-width: 0; }
.slotrow .sl-acts { display: flex; gap: 5px; }
.slotrow .sl-acts button { font-size: 12px; padding: 5px 9px; }

/* ---------- задачи и сроки ---------- */
.mods { margin-bottom: 8px; }
.mod { font-size: 12.5px; line-height: 1.6; color: var(--dim); }
.mod.plus { color: #7fd6a0; }
.mod.minus { color: #e08a7a; }
.tl-axis { position: relative; display: flex; justify-content: space-between; font-size: 11.5px; color: var(--dim);
  border-bottom: 1px solid var(--line); padding-bottom: 14px; margin-bottom: 10px; }
.tl-now { position: absolute; bottom: 0; transform: translateX(-50%); color: var(--gold); font-size: 11px; white-space: nowrap; }
.tl-now:before { content: '▼'; display: block; text-align: center; line-height: 8px; }
.task { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; background: #0e1620; }
.task-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; }
.task-title { font-size: 13.5px; font-weight: 600; }
.task-bar { position: relative; height: 12px; background: #0a121b; border-radius: 6px; overflow: hidden; }
.task-bar i { position: absolute; top: 0; bottom: 0; background: #2b4a6b; border-radius: 6px; }
.task-bar u { position: absolute; top: 0; bottom: 0; background: #3f8fd0; border-radius: 6px; text-decoration: none; }
.task.done .task-bar i { background: #2f6b45; }
.task.failed .task-bar i { background: #6b2f34; }
.task.impossible .task-bar i { background: #3a3f47; }
.task.impossible .task-title { color: var(--dim); text-decoration: line-through; }
.task-factors { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.task-factors .f { font-size: 11.5px; padding: 2px 7px; border-radius: 10px; border: 1px solid var(--line); }
.task-factors .f.plus { color: #7fd6a0; border-color: #2f5c3f; background: #0e1a14; }
.task-factors .f.minus { color: #e08a7a; border-color: #5c2f2f; background: #1a0e0e; }
.idearow { display: flex; gap: 9px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--line);
  border-radius: 8px; margin-bottom: 6px; cursor: pointer; background: #0e1620; }
.idearow:hover { background: #16222f; border-color: #3a4c60; }
.idearow input { margin-top: 2px; }
.idearow .ideartext { flex: 1; line-height: 1.5; }

/* ---------- отчёт: датированная лента ---------- */
.mbox.wide { max-width: 940px; }
.rep-head { border-bottom: 1px solid var(--line); padding-bottom: 12px; margin-bottom: 14px; }
.rep-period { font-size: 23px; font-weight: 700; letter-spacing: .3px; display: flex; align-items: baseline; gap: 12px; }
.rep-period .rep-days { font-size: 13px; font-weight: 400; color: var(--gold); }
.rep-stats { display: flex; flex-wrap: wrap; gap: 15px; margin-top: 9px; font-size: 14.5px; color: var(--dim); }
.rep-story { font-size: 16.5px; line-height: 1.8; color: #dbe7f3; margin-bottom: 18px; }
.rep-story p { margin: 0 0 11px; }
.rep-feed { position: relative; }
.rep-feed:before { content: ''; position: absolute; left: 15px; top: 6px; bottom: 6px; width: 2px; background: #22303f; }
.rep-date { position: relative; margin: 18px 0 10px; padding-left: 46px; }
.rep-date:first-child { margin-top: 4px; }
.rep-date { position: sticky; top: 0; z-index: 2; background: linear-gradient(180deg, #111a25 70%, rgba(17,26,37,.85));
  padding-top: 8px; padding-bottom: 6px; }
.rep-date span { display: inline-block; background: #1d2c3d; border: 1px solid #3a4c60; border-radius: 13px;
  padding: 3px 14px; font-size: 15px; color: var(--gold); font-weight: 700; letter-spacing: .3px; }
.rep-date i { margin-left: 11px; font-style: normal; font-size: 14px; color: #a8bccf; }
.rep-item { position: relative; display: flex; gap: 12px; padding: 11px 13px 11px 46px; margin-bottom: 9px;
  background: #0e1620; border: 1px solid #1b2735; border-left: 3px solid #2b3a4c; border-radius: 0 9px 9px 0; }
.rep-item.mine { border-left-color: var(--gold); background: #131a14; }
.rep-item.real { border-left-color: var(--blue); background: #0d1622; }
.rep-item.k-territory { border-left-color: var(--red); }
.rep-item.k-politics, .rep-item.k-election { border-left-color: #a882ff; }
.rep-icon { position: absolute; left: 6px; top: 12px; width: 20px; text-align: center; font-size: 14px; background: #0a121b;
  border-radius: 50%; line-height: 20px; }
.rep-body { flex: 1; min-width: 0; }
.rep-item h5 { margin: 0 0 6px; font-size: 17.5px; line-height: 1.4; font-weight: 600; }
.rep-text { font-size: 16px; line-height: 1.75; color: #c9d7e5; }
.rep-text p { margin: 0 0 8px; }
.rep-text p:last-child { margin-bottom: 0; }
.rep-tags { margin-top: 8px; font-size: 12.5px; color: var(--dim); }
.rep-tags a { color: var(--blue); }

/* ---------- панель живой симуляции ---------- */
.livepanel { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: #0f1a24;
  border: 1px solid #26374a; border-radius: 9px; padding: 8px 11px; margin-bottom: 8px; }
.livepanel.playing { border-color: #2f6b45; background: #0e1a14; }
.livepanel.paused { border-color: #7a6a2f; background: #1a1710; }
.livepanel.done { border-color: var(--line); }
.lp-left { display: flex; align-items: center; gap: 11px; flex: 1; min-width: 240px; }
.lp-badge { font-size: 12px; padding: 2px 9px; border-radius: 11px; background: #16222f; border: 1px solid var(--line); }
.livepanel.playing .lp-badge { color: #7fd6a0; border-color: #2f5c3f; }
.livepanel.paused .lp-badge { color: var(--gold); border-color: #6b5b2f; }
#lpDate { font-size: 16px; }
.lp-progress { flex: 1; height: 7px; background: #0a121b; border-radius: 4px; overflow: hidden; min-width: 90px; }
.lp-progress i { display: block; height: 100%; width: 0; background: var(--blue); transition: width .12s linear; }
.lp-right { display: flex; gap: 6px; }
.lp-right button { font-size: 12.5px; padding: 6px 10px; }
/* живaя лента внутри модалки */
.livefeed { max-height: 46vh; overflow: auto; }
.livefeed .rep-item { animation: pop .25s ease-out; }
@keyframes pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.live-day { text-align: center; color: var(--dim); font-size: 12.5px; margin: 10px 0 6px; }
.live-day b { color: var(--gold); font-size: 14px; }

/* ---------- мультиплеер в стартовом меню ---------- */
.mpbox { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 14px; margin-bottom: 6px; }
@media (max-width: 1100px) { .mpbox { grid-template-columns: 1fr 1fr; } .mp-col.mp-wide { grid-column: 1 / -1; } }
.mp-col { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.mp-col input { width: 100%; margin-bottom: 8px; }
.mp-col button { width: 100%; }
.mp-col .tiny { margin-top: 7px; line-height: 1.5; }
.mplist { max-height: 132px; overflow: auto; }
.mprow { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid #1a2431; font-size: 13px; }
.mprow:last-child { border-bottom: 0; }
.mprow b { color: var(--gold); }
.mprow button { width: auto; margin-left: auto; padding: 3px 9px; font-size: 12px; }


/* ==========================================================================
   Полосы прокрутки — единый вид во всех областях (отчёт, вкладки, модалки).
   Ползунок золотой при наведении: он же акцент игры. Трек почти невидим,
   чтобы не спорить с содержимым.
   ========================================================================== */
:root {
  --sb-track: rgba(255, 255, 255, .035);
  --sb-thumb: #2f3d4e;
  --sb-thumb-hover: var(--gold);
  --sb-thumb-active: #f0c469;
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--sb-thumb) var(--sb-track);
}

/* Chrome / Edge / Safari */
::-webkit-scrollbar { width: 13px; height: 13px; }
::-webkit-scrollbar-track {
  background: var(--sb-track);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb {
  background-color: var(--sb-thumb);
  border-radius: 999px;
  border: 3px solid transparent;      /* ползунок «плавает» внутри жёлоба */
  background-clip: content-box;
  transition: background-color .16s ease;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--sb-thumb-hover); }
::-webkit-scrollbar-thumb:active { background-color: var(--sb-thumb-active); }
::-webkit-scrollbar-corner { background: transparent; }

/* Отчёт о событиях и лента симуляции — главная «читаемая» прокрутка игры */
.livefeed { scroll-behavior: smooth; }
.livefeed::-webkit-scrollbar { width: 15px; }
.livefeed::-webkit-scrollbar-track {
  background: linear-gradient(180deg, rgba(224, 179, 86, .05), rgba(255, 255, 255, .02));
  border-radius: 999px;
  margin: 8px 0;
}
.livefeed::-webkit-scrollbar-thumb {
  background-color: #3c4d61;
  border: 3px solid transparent;
  background-clip: content-box;
}
.livefeed::-webkit-scrollbar-thumb:hover {
  background-color: var(--gold);
  border-width: 2px;
}
.livefeed::-webkit-scrollbar-thumb:active { background-color: var(--sb-thumb-active); border-width: 2px; }

/* Отчёт в модальном окне: тот же вид, чуть компактнее */
.mbox::-webkit-scrollbar { width: 12px; }
.report::-webkit-scrollbar { width: 14px; }

/* Боковая панель вкладок */
.tabbody::-webkit-scrollbar { width: 12px; }
.tabbody::-webkit-scrollbar-thumb { background-color: #2b3947; }
.tabbody::-webkit-scrollbar-thumb:hover { background-color: var(--gold); }

/* Приказы: длинный текст тоже прокручивается */
textarea::-webkit-scrollbar { width: 11px; }

/* Плавное появление содержимого при прокрутке отчёта */
.livefeed .rep-item { scroll-margin-top: 8px; }

/* Подсветка кнопки «Вмешаться» в день события */
button.pulse {
  animation: intervenePulse 1.6s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(224, 179, 86, .55);
}
@keyframes intervenePulse {
  0%   { box-shadow: 0 0 0 0 rgba(224, 179, 86, .55); }
  70%  { box-shadow: 0 0 0 9px rgba(224, 179, 86, 0); }
  100% { box-shadow: 0 0 0 0 rgba(224, 179, 86, 0); }
}

/* Подпись скорости в панели симуляции */
#lpSpeed { font-variant-numeric: tabular-nums; min-width: 74px; }
.livepanel .switch { white-space: nowrap; }


/* ==========================================================================
   Диалоги переговоров: сворачивание.
   Диалогов может быть много — свёрнутый показывает только шапку и последнюю
   реплику, чтобы до следующего диалога не приходилось листать простыню.
   ========================================================================== */
.row.spread { justify-content: space-between; }
.row.spread .sp { flex: 1 1 auto; }
.row.spread h3.sec { margin: 0; }

.talktoggle { padding: 2px 8px; font-size: 12px; }
.talkbox .talkhead button { margin-left: 0; }
.talkbox .talkhead button:first-of-type { margin-left: auto; }

.talkbox.collapsed { padding: 8px 10px; background: #0c141d; }
.talkbox.collapsed .talkhead { margin-bottom: 5px; }

.talkpreview {
  cursor: pointer;
  color: var(--dim);
  background: #0b131c;
  border: 1px dashed #22303f;
  border-radius: 6px;
  padding: 6px 9px;
  line-height: 1.5;
}
.talkpreview:hover { border-color: var(--gold); color: var(--text); }
.talkpreview b { color: var(--text); }
.talkpreview .talkopen { color: var(--gold); white-space: nowrap; }


/* ==========================================================================
   Перекрытие области карты.
   Подсказка рисуется внутри области карты и не должна вылезать на панели:
   холст обрезается строго по своим краям, а слой интерфейса выше карты.
   ========================================================================== */
#mapWrap { position: relative; overflow: hidden; }
#mapWrap #tip { z-index: 5; }
.side, header.top, footer.bottom, #livePanel { position: relative; z-index: 20; }


/* ==========================================================================
   Окно хода событий: шкала периода, вердикты по приказам и лента новостей.
   Управление ходом живёт здесь — отдельной панели внизу больше нет.
   ========================================================================== */
.evwin { display: flex; flex-direction: column; gap: 12px; }

.evscale { background: #0d151f; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.evhead { display: flex; align-items: baseline; gap: 10px; margin-bottom: 9px; }
.evhead b { font-size: 17px; letter-spacing: -.2px; }
.evhead .tiny { margin-left: auto; }

.evtrack {
  position: relative; height: 8px; border-radius: 999px;
  background: #16222f; overflow: visible;
}
.evtrack i {
  position: absolute; left: 0; top: 0; height: 8px; width: 0;
  border-radius: 999px; background: linear-gradient(90deg, #2f7d52, var(--gold));
  transition: width .18s linear;
}
.evmarks { position: absolute; inset: 0; }
.evmark {
  position: absolute; top: -3px; width: 3px; height: 14px; border-radius: 2px;
  background: #e05a4c; box-shadow: 0 0 6px rgba(224, 90, 76, .7);
  transform: translateX(-1px);
}

.evorders { background: #0d151f; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.evorder { font-size: 13.5px; line-height: 1.55; padding: 5px 0 5px 22px; position: relative; }
.evorder b { position: absolute; left: 0; top: 5px; }
.evorder.yes b { color: var(--green); }
.evorder.no b { color: var(--red); }
.evorder .tiny { display: block; margin-top: 3px; }

.evwin .livefeed { max-height: 44vh; }


/* ==========================================================================
   Вкладка «Партия»: показатели партии, ресурсы, давление власти.
   ========================================================================== */
.party-head { background: linear-gradient(150deg, rgba(224,179,86,.10), rgba(255,255,255,.02));
  border: 1px solid var(--line); border-left: 3px solid var(--gold);
  border-radius: 10px; padding: 12px 14px; }
.party-head .ph-name { font-size: 19px; font-weight: 600; letter-spacing: -.3px; margin-bottom: 4px; }

.party-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pstat { background: #0e1620; border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px;
  display: flex; flex-direction: column; gap: 2px; }
.pstat b { font-size: 20px; font-weight: 600; letter-spacing: -.4px; line-height: 1.15; }
.pstat .tiny { line-height: 1.35; }
.pstat.good { border-color: rgba(79,191,122,.4); background: #0e1a14; }
.pstat.good b { color: var(--green); }
.pstat.bad { border-color: rgba(224,90,76,.4); background: #1a1012; }
.pstat.bad b { color: var(--red); }


/* ==========================================================================
   Последствия события в ленте: что конкретно изменилось.
   ========================================================================== */
.rep-eff {
  margin: 7px 0 2px;
  padding: 8px 11px 7px;
  border-left: 3px solid var(--gold);
  background: rgba(224, 179, 86, .06);
  border-radius: 0 7px 7px 0;
}
.rep-eff .eff-t {
  font-size: 11px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--gold); margin-bottom: 4px;
}
.rep-eff ul { margin: 0; padding-left: 16px; }
.rep-eff li { font-size: 13.5px; line-height: 1.5; margin-bottom: 3px; color: var(--text); }
.rep-eff li:last-child { margin-bottom: 0; }

/* ---- Уведомления: важные события не должны проходить молча ---- */
.notices { display: flex; flex-direction: column; gap: 6px; padding: 8px 12px 0; }
.notice { display: flex; align-items: center; gap: 10px; padding: 8px 11px; border-radius: 8px;
  border: 1px solid var(--line); background: #121c27; font-size: 13px; line-height: 1.4; }
.notice .nt { flex: 1; }
.notice.n-election { border-color: rgba(224, 179, 86, .55); background: #1c1810; }
.notice.n-election .nt::before { content: "🗳 "; }
.notice.n-money { border-color: rgba(224, 90, 76, .5); background: #1b1213; }
.notice.n-money .nt::before { content: "💰 "; }
.notice button { flex: none; }

/* ---- Книга операций партии ---- */
table.ledger { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 12.5px; }
table.ledger th { text-align: left; color: var(--dim); font-weight: 500; padding: 4px 6px;
  border-bottom: 1px solid var(--line); }
table.ledger td { padding: 4px 6px; border-bottom: 1px solid rgba(38, 51, 66, .5); vertical-align: top; }

/* ---- Штаб партии: действия за деньги ---- */
.acts-party { display: flex; flex-direction: column; gap: 6px; }
.pact { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--line); background: #0e1620; }
.pact .grow { flex: 1; min-width: 0; }
.pact .cost { color: var(--gold); font-size: 12.5px; white-space: nowrap; }
.pact button:disabled { opacity: .45; cursor: not-allowed; }

/* ---- Форма приказов по направлениям ---- */
.orderhead { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; flex-wrap: wrap; }
.ordertabs { display: flex; gap: 4px; background: #0d151f; border: 1px solid var(--line);
  border-radius: 7px; padding: 2px; }
.ordertabs button { border: 0; background: transparent; padding: 4px 10px; border-radius: 5px;
  font-size: 12.5px; color: var(--dim); }
.ordertabs button.on { background: var(--panel2); color: var(--text); }
.ordercount { font-size: 12px; color: var(--dim); }
#btnRecs { margin-left: auto; }

.orderform { display: flex; flex-direction: column; gap: 5px; max-height: 22vh; overflow-y: auto;
  padding-right: 4px; }
.odom { border: 1px solid var(--line); border-radius: 8px; background: #0e1620; padding: 6px 8px; }
.odom.has { border-color: rgba(224, 179, 86, .45); background: #10161e; }
.odom-head { display: flex; align-items: center; gap: 7px; font-size: 12.5px; }
.odom-head b { font-weight: 600; }
.odom-ic { font-size: 14px; }
.odom-n { background: var(--gold); color: #1a1206; border-radius: 9px; padding: 0 6px;
  font-size: 11px; font-weight: 600; }
.odom-hint { color: var(--dim); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.odom-items { display: flex; flex-direction: column; gap: 3px; margin: 5px 0 4px; }
.oitem { display: flex; align-items: flex-start; gap: 6px; font-size: 12.5px;
  background: #131d29; border-radius: 5px; padding: 3px 6px; }
.oitem .otext { flex: 1; min-width: 0; }
.odel { border: 0; background: transparent; color: var(--dim); padding: 0 3px; font-size: 12px; }
.odel:hover { color: var(--red); }
.odom-add { display: flex; gap: 6px; margin-top: 5px; }
.odom-add .oin { flex: 1; min-width: 0; font-size: 12.5px; padding: 4px 8px; border-radius: 5px;
  background: #0a121b; border: 1px solid var(--line); color: var(--text); }
.oadd { font-size: 12px; padding: 4px 9px; }
.orecs { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 6px; }
.orecs-l { color: var(--dim); font-size: 11.5px; }
.orec { text-align: left; font-size: 11.5px; padding: 3px 8px; border-radius: 11px;
  background: #14202c; border: 1px solid #24384c; color: #b9cfe4; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orec:hover { border-color: var(--gold); color: var(--text); }

/* ---- Читы песочницы ---- */
.cheatline { font-size: 12px; color: #e0b356; background: #1c1810; border: 1px solid rgba(224,179,86,.4);
  border-radius: 7px; padding: 5px 9px; margin-bottom: 6px; }
.cheatbox { border: 1px solid rgba(224, 90, 76, .5); border-radius: 9px; background: #1a1113;
  padding: 8px 10px; }
.cheat-head { font-weight: 600; color: #ff8a7a; font-size: 13px; margin-bottom: 5px; }
.cheat-note { font-size: 12px; color: #e8c9c4; line-height: 1.45; margin-bottom: 7px; }
.cheat-ex { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-bottom: 7px; }
.cheat-ex-b { background: #2a171a; border-color: #5c2f2f; color: #ffb9ae; }
.cheat-ex-b:hover { border-color: var(--red); color: #fff; }
.oitem-cheat { background: #241519; border: 1px solid rgba(224, 90, 76, .35); }
#otabCheat.on { background: rgba(224, 90, 76, .28); color: #ffd2cb; }