:root {
  --bg: #0d1016;
  --panel: #161b24;
  --panel-2: #1d2431;
  --line: #2a3242;
  --text: #e7ecf4;
  --muted: #8b95a7;
  --gold: #e8c46a;
  --green: #7fd88a;
  --red: #e26a5a;
  --blue: #6ac2e8;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overflow: hidden;
}

#app { position: relative; width: 100vw; height: 100vh; }

#view { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.hud {
  position: absolute;
  background: rgba(16, 20, 28, 0.82);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 12px;
  backdrop-filter: blur(6px);
  user-select: none;
}

.hidden { display: none !important; }
.muted { color: var(--muted); font-size: 11px; }

/* Верхняя панель */
.hud-top {
  top: 12px; left: 12px;
  display: flex; gap: 28px; align-items: center;
}
.cash { font-size: 26px; font-weight: 700; letter-spacing: -0.5px; font-variant-numeric: tabular-nums; }
.money-block .sub { display: flex; gap: 12px; font-size: 11px; color: var(--muted); margin-top: 2px; }
.infl { color: var(--red); }
.top-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.stars { font-size: 18px; letter-spacing: 2px; color: var(--red); min-height: 22px; }
.mult { font-size: 13px; font-weight: 700; color: var(--gold); }

/* Репутация */
.reps { top: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 14px; }
.rep { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 78px; }
.rep-name { font-size: 10px; letter-spacing: 0.6px; color: var(--muted); }
.rep-bar { width: 100%; height: 5px; background: #10141c; border-radius: 3px; position: relative; overflow: hidden; }
.rep-bar i { position: absolute; top: 0; bottom: 0; display: block; border-radius: 3px; }
.rep-val { font-size: 10px; font-variant-numeric: tabular-nums; }
.rep.war .rep-name { color: var(--red); }

/* Часы */
.clock { top: 12px; right: 12px; text-align: right; min-width: 150px; }
.clock > div:first-child { font-size: 13px; font-weight: 600; }

/* Миникарта */
.minimap-wrap { bottom: 46px; right: 12px; padding: 6px; line-height: 0; }
#minimap { border-radius: 6px; }

/* Миссия */
.mission { bottom: 46px; left: 12px; width: 300px; }
.mission-title { font-size: 13px; font-weight: 700; color: var(--gold); }
.mission-step { font-size: 12px; margin: 3px 0 6px; }
.mission-bar { height: 4px; background: #10141c; border-radius: 3px; overflow: hidden; }
.mission-bar span { display: block; height: 100%; background: var(--gold); width: 100%; }
.mission-meta { font-size: 10px; color: var(--muted); margin-top: 5px; }

/* Подсказка действия */
.prompt {
  position: absolute; bottom: 120px; left: 50%; transform: translateX(-50%);
  background: rgba(16, 20, 28, 0.92); border: 1px solid var(--line);
  border-radius: 999px; padding: 7px 16px; font-size: 13px; user-select: none;
}
.prompt b { color: var(--gold); }

/* Тосты */
.toasts {
  position: absolute; top: 96px; left: 12px;
  display: flex; flex-direction: column; gap: 6px; width: 330px; pointer-events: none;
}
.toast {
  background: rgba(16, 20, 28, 0.92);
  border-left: 3px solid var(--muted);
  border-radius: 6px; padding: 7px 10px; font-size: 12px;
  animation: slide 0.18s ease-out;
}
.toast.good { border-color: var(--green); }
.toast.bad { border-color: var(--red); }
.toast.warn { border-color: var(--gold); }
.toast.info { border-color: var(--blue); }
.toast.tip { border-color: #b06ac0; }
@keyframes slide { from { opacity: 0; transform: translateX(-10px); } }

/* Новостная лента */
.ticker {
  position: absolute; left: 0; right: 0; bottom: 0; height: 34px;
  background: #0a0d13; border-top: 1px solid var(--line);
  display: flex; align-items: center; overflow: hidden;
}
.ticker-label {
  background: var(--gold); color: #10141c; font-size: 11px; font-weight: 800;
  padding: 0 10px; height: 100%; display: flex; align-items: center; letter-spacing: 1px;
  flex: 0 0 auto;
}
.ticker-track { white-space: nowrap; font-size: 12.5px; will-change: transform; }
.ticker-item { display: inline-block; padding: 0 26px; }
.ticker-item.good { color: var(--green); }
.ticker-item.bad { color: var(--red); }
.ticker-item.warn { color: var(--gold); }
.ticker-item.crisis { color: var(--red); font-weight: 800; }
.ticker-item.boom { color: var(--green); font-weight: 800; }
.ticker-item.macro { color: var(--blue); }
.ticker-item.city { color: #b8a3d8; }

/* Оверлеи */
.overlay {
  position: absolute; inset: 0; background: rgba(6, 8, 12, 0.72);
  display: flex; align-items: center; justify-content: center; z-index: 20;
  backdrop-filter: blur(3px);
}
.panel {
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  width: min(1020px, 94vw); max-height: 88vh; display: flex; flex-direction: column;
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
}
.panel.small { width: min(560px, 92vw); }
.panel header {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px; border-bottom: 1px solid var(--line);
}
.panel h2 { margin: 0; font-size: 17px; }
.panel-money { font-size: 12px; color: var(--muted); }
.panel-money b { color: var(--text); font-variant-numeric: tabular-nums; }
.close, button {
  font: inherit; font-size: 12px; cursor: pointer;
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--line); border-radius: 7px; padding: 6px 11px;
}
button:hover { border-color: #3d485c; background: #232b3a; }
button.primary { background: var(--gold); color: #10141c; border-color: var(--gold); font-weight: 700; }
button.primary:hover { background: #f0d07d; }
button:disabled { opacity: 0.4; cursor: not-allowed; }
.close { margin-left: auto; }

.frozen-note { margin: 12px 18px 0; padding: 8px 12px; background: rgba(226,106,90,0.12); border: 1px solid var(--red); border-radius: 8px; font-size: 12px; color: var(--red); }
.qty-row { display: flex; align-items: center; gap: 7px; padding: 12px 18px 6px; font-size: 12px; color: var(--muted); }
.qty.active { background: var(--gold); color: #10141c; border-color: var(--gold); font-weight: 700; }
.qty-row .hint { margin-left: auto; font-size: 11px; }

.table-wrap { overflow: auto; padding: 6px 18px 18px; }
table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
th { text-align: left; color: var(--muted); font-weight: 600; font-size: 11px; padding: 7px 8px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--panel); }
td { padding: 7px 8px; border-bottom: 1px solid rgba(42,50,66,0.5); vertical-align: middle; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.up { color: var(--green); }
.down { color: var(--red); }
.tick { font-weight: 700; letter-spacing: 0.4px; }
.cls-meme { color: #b06ac0; }
.cls-bond { color: var(--blue); }
.cls-blue { color: var(--gold); }
.row-actions { display: flex; gap: 5px; justify-content: flex-end; }

.dlg-body { padding: 16px 18px; font-size: 13px; line-height: 1.5; overflow: auto; }
.dlg-body p { margin: 0 0 10px; }
.dlg-body .kv { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid rgba(42,50,66,0.5); }
.dlg-body .kv b { font-variant-numeric: tabular-nums; }
.dlg-actions { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 18px; border-top: 1px solid var(--line); }
.rules { margin: 0 0 12px; padding-left: 18px; }
.rules li { margin-bottom: 5px; }
.keys { width: 100%; font-size: 12px; }
.keys td { padding: 3px 0; border: none; }
.keys td:first-child { color: var(--gold); font-weight: 600; width: 40%; }

/* Узкие окна: HUD не должен наезжать сам на себя */
@media (max-width: 1100px) {
  .cash { font-size: 20px; }
  .hud-top { gap: 16px; padding: 6px 10px; }
  .reps { top: auto; bottom: 44px; left: 12px; transform: none; }
  .rep { width: 62px; }
  .minimap-wrap { bottom: 44px; }
  #minimap { width: 150px; height: 102px; }
  .mission { bottom: 158px; left: auto; right: 12px; transform: none; width: 250px; }
  .toasts { width: 260px; }
}