:root {
  --ink: #e8e4d8;
  --dim: #949ab8;
  --panel: rgba(13, 16, 34, 0.88);
  --edge: rgba(140, 160, 225, 0.22);
  --gold: #e8c15a;
  --lore: #b78ef0;
  --bad: #e0555f;
  --good: #7fd18a;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: #0a0b18;
  color: var(--ink);
  font-family: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  overflow: hidden;
  user-select: none;
  -webkit-font-smoothing: antialiased;
}

#map { position: fixed; inset: 0; width: 100%; height: 100%; display: block; cursor: default; }
#map.grabbing { cursor: grabbing; }
#map.crosshair { cursor: crosshair; }

/* ---------- top bar ---------- */
#topbar {
  position: fixed; top: 0; left: 0; right: 0; height: 52px;
  display: flex; align-items: center; gap: 18px;
  padding: 0 14px;
  background: linear-gradient(180deg, rgba(10,12,28,0.96), rgba(10,12,28,0.72));
  border-bottom: 1px solid var(--edge);
  backdrop-filter: blur(6px);
  z-index: 10;
}
.brand {
  font-size: 20px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold); text-shadow: 0 0 18px rgba(232,193,90,0.35);
  padding-right: 8px; border-right: 1px solid var(--edge);
}
.stat { display: flex; align-items: baseline; gap: 6px; font-size: 13px; }
.stat .k { color: var(--dim); text-transform: uppercase; letter-spacing: 0.08em; font-size: 10px; }
.stat .v { font-size: 19px; font-variant-numeric: tabular-nums; }
.stat .sub { color: var(--dim); font-size: 11px; }
#stat-gold .v { color: var(--gold); }
#stat-lore .v { color: var(--lore); }
.spacer { flex: 1; }

.btn {
  font-family: inherit; font-size: 13px; color: var(--ink);
  background: rgba(30,36,70,0.75); border: 1px solid var(--edge);
  padding: 7px 13px; border-radius: 6px; cursor: pointer;
  transition: background 0.12s, border-color 0.12s, transform 0.06s;
}
.btn em { font-style: normal; color: var(--dim); font-size: 11px; margin-left: 5px; }
.btn:hover { background: rgba(48,58,110,0.9); border-color: rgba(170,190,255,0.45); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: rgba(92,72,26,0.85); border-color: rgba(232,193,90,0.45); color: #f5e6bd; }
.btn.primary:hover { background: rgba(122,96,32,0.95); }
.btn.ghost { padding: 7px 10px; }
.btn.on { background: rgba(60,110,140,0.9); border-color: rgba(150,215,255,0.6); }
.btn:disabled { opacity: 0.4; cursor: default; }

#monthbar {
  position: fixed; top: 52px; left: 0; right: 0; height: 3px;
  background: rgba(255,255,255,0.05); z-index: 10;
}
#monthfill { height: 100%; width: 0%; background: linear-gradient(90deg, #6d5a22, var(--gold)); transition: width 0.25s; }

/* ---------- panels ---------- */
.panel {
  position: fixed; z-index: 9;
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: 9px;
  backdrop-filter: blur(7px);
  box-shadow: 0 10px 34px rgba(0,0,0,0.5);
}
.panel h2 {
  margin: 0; padding: 10px 13px 8px;
  font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--dim); font-weight: normal;
  border-bottom: 1px solid var(--edge);
}
.hidden { display: none !important; }

#lorepanel { left: 12px; top: 70px; width: 236px; max-height: calc(100vh - 200px); overflow-y: auto; }
#inspector { right: 12px; top: 70px; width: 292px; max-height: calc(100vh - 100px); overflow-y: auto; }

.tech {
  padding: 9px 12px; border-bottom: 1px solid rgba(140,160,225,0.09);
  cursor: pointer;
}
.tech:last-child { border-bottom: none; }
.tech:hover { background: rgba(80,100,180,0.14); }
.tech .row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.tech .name { font-size: 13.5px; }
.tech .cost { font-size: 11.5px; color: var(--lore); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tech .blurb { font-size: 11.5px; color: var(--dim); line-height: 1.35; margin-top: 3px; }
.tech.owned { opacity: 0.55; cursor: default; }
.tech.owned:hover { background: none; }
.tech.owned .cost { color: var(--good); }
.tech.locked .cost { color: rgba(183,142,240,0.4); }

/* ---------- inspector ---------- */
.insp-body { padding: 11px 13px 13px; }
.insp-title { font-size: 17px; margin: 0 0 2px; }
.insp-sub { font-size: 11.5px; color: var(--dim); margin-bottom: 9px; }
.insp-blurb { font-size: 12px; color: #b9bdd6; font-style: italic; line-height: 1.4; margin-bottom: 10px; }
.reslist { display: flex; flex-wrap: wrap; gap: 5px; margin: 4px 0 10px; }
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; padding: 3px 8px 3px 5px; border-radius: 11px;
  border: 1px solid currentColor; background: rgba(10,13,30,0.7);
}
.chip.off { opacity: 0.5; border-style: dashed; }
.chip .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.11em; color: var(--dim); }
.found-opt {
  border: 1px solid var(--edge); border-radius: 7px; padding: 9px 10px; margin-bottom: 7px;
  cursor: pointer; transition: background 0.12s, border-color 0.12s;
}
.found-opt:hover { background: rgba(80,100,180,0.16); border-color: rgba(170,190,255,0.45); }
.found-opt.disabled { opacity: 0.42; cursor: default; }
.found-opt.disabled:hover { background: none; border-color: var(--edge); }
.found-opt .row { display: flex; justify-content: space-between; align-items: baseline; }
.found-opt .name { font-size: 14px; }
.found-opt .price { font-size: 11.5px; color: var(--gold); }
.note { font-size: 11.5px; color: var(--dim); line-height: 1.4; }
.note.warn { color: var(--bad); }

/* ---------- chronicle + toast ---------- */
#chronicle {
  position: fixed; left: 12px; bottom: 12px; width: 320px; z-index: 8;
  font-size: 12px; line-height: 1.5; color: var(--dim);
  pointer-events: none;
}
#chronicle div { opacity: 0.85; }
#chronicle div .yr { color: var(--gold); opacity: 0.75; margin-right: 6px; }

#toast {
  position: fixed; left: 50%; bottom: 46px; transform: translateX(-50%);
  background: rgba(120,26,34,0.94); border: 1px solid rgba(224,85,95,0.6);
  color: #ffe3e5; padding: 9px 17px; border-radius: 7px; font-size: 13px;
  z-index: 20; box-shadow: 0 8px 26px rgba(0,0,0,0.5);
}

/* ---------- modal ---------- */
#modal {
  position: fixed; inset: 0; z-index: 30;
  background: rgba(5,6,16,0.78); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
}
.modal-card {
  background: #10142c; border: 1px solid var(--edge); border-radius: 12px;
  padding: 26px 30px; max-width: 640px; max-height: 86vh; overflow-y: auto;
  box-shadow: 0 24px 70px rgba(0,0,0,0.7);
}
.modal-card h1 { margin: 0 0 4px; font-size: 26px; color: var(--gold); letter-spacing: 0.04em; }
.modal-card h3 { margin: 18px 0 6px; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); font-weight: normal; }
.modal-card p, .modal-card li { font-size: 14px; line-height: 1.55; color: #cfd3e6; }
.modal-card ul { margin: 4px 0; padding-left: 20px; }
.modal-card .kbd { font-family: ui-monospace, monospace; font-size: 12px; background: rgba(255,255,255,0.08); padding: 1px 5px; border-radius: 3px; }
.scoretable { width: 100%; margin: 8px 0 4px; border-collapse: collapse; }
.scoretable td { padding: 5px 0; font-size: 14px; border-bottom: 1px solid rgba(140,160,225,0.12); }
.scoretable td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.scoretable tr.total td { font-size: 19px; color: var(--gold); border-bottom: none; padding-top: 12px; }
.modal-actions { margin-top: 20px; display: flex; gap: 10px; justify-content: flex-end; }

/* ---------- leaderboard ---------- */
.board { width: 100%; border-collapse: collapse; margin-top: 6px; }
.board th {
  text-align: left; font-weight: normal; font-size: 10px; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--dim); padding: 4px 6px;
  border-bottom: 1px solid var(--edge);
}
.board td { padding: 5px 6px; font-size: 13.5px; border-bottom: 1px solid rgba(140,160,225,0.09); }
.board td.num { text-align: right; font-variant-numeric: tabular-nums; }
.board tr.me td { background: rgba(232,193,90,0.10); color: #f5e6bd; }
.board .rank { color: var(--dim); width: 2.2em; }
.board .anon { color: var(--dim); font-style: italic; }
.board-note { font-size: 12px; color: var(--dim); margin-top: 8px; line-height: 1.45; }
#btn-who { max-width: 15em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }