/* Core layout — module styles live in css/<module>.css */
:root {
  --bg: #1a1612;
  --panel: #262019;
  --panel-light: #332a20;
  --text: #e8ddc8;
  --text-dim: #a89878;
  --accent: #c8a44d;
  --border: #4a3d2c;
  --topbar-h: 52px;
  --bottombar-h: 110px;
  --sidebar-w: 360px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text);
  font-family: Georgia, 'Times New Roman', serif; overflow: hidden; }
#app { display: flex; flex-direction: column; height: 100vh; }
#topbar { height: var(--topbar-h); display: flex; align-items: center; gap: 16px;
  padding: 0 16px; background: var(--panel); border-bottom: 1px solid var(--border); }
#campaign-title { font-weight: bold; font-size: 18px; color: var(--accent); }
#turn-nav { display: flex; align-items: center; gap: 8px; margin: 0 auto; }
#turn-date { text-align: center; min-width: 240px; }
#turn-label { display: block; font-size: 15px; font-weight: bold; }
#date-label { display: block; font-size: 12px; color: var(--text-dim); }
#topbar-actions { display: flex; gap: 8px; }
button { background: var(--panel-light); color: var(--text); border: 1px solid var(--border);
  border-radius: 4px; padding: 6px 12px; cursor: pointer; font-family: inherit; font-size: 13px; }
button:hover { background: var(--border); }
button.active { background: var(--accent); color: #1a1612; }
#main { flex: 1; display: flex; min-height: 0; }
#map-container { flex: 1; position: relative; overflow: hidden; background: #0d0b08; }
#sidebar { width: var(--sidebar-w); background: var(--panel); border-left: 1px solid var(--border);
  overflow-y: auto; padding: 12px; }
#bottombar { height: var(--bottombar-h); background: var(--panel);
  border-top: 1px solid var(--border); overflow: hidden; }
.hidden { display: none !important; }
.fatal { padding: 40px; font-size: 16px; color: #e8ddc8; }
#random-panel, #editor-panel { position: absolute; top: calc(var(--topbar-h) + 12px); left: 12px;
  z-index: 50; background: var(--panel); border: 1px solid var(--accent); border-radius: 6px;
  padding: 14px; max-width: 380px; max-height: 70vh; overflow-y: auto; }
#replay-overlay { position: absolute; bottom: calc(var(--bottombar-h) + 20px); left: 50%;
  transform: translateX(-50%); z-index: 60; }