:root {
  --bg: #0d0f13; --panel: #171a20; --panel2: #1f232b; --border: #2e333d; --text: #e9e3d1; --dim: #9a958a; --faint: #666258;
  --hl: #f2cc5b; --good: #7fc46b; --bad: #e0584c; --warn: #e8a23a; --info: #69aee2;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { --bg: #f3f1ea; --panel: #ffffff; --panel2: #f6f4ee; --border: #dcd6c8; --text: #24221d; --dim: #6c675c; --faint: #9a958a; --hl: #9a6d00; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.45 "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
header { display: flex; align-items: center; gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--panel); position: sticky; top: 0; z-index: 2; flex-wrap: wrap; }
.brand { display: flex; align-items: baseline; gap: 10px; }
.logo { font-weight: 800; letter-spacing: 2px; font-size: 20px; color: var(--hl); }
.sub { color: var(--dim); font-size: 13px; }
nav { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
nav button { background: transparent; color: var(--dim); border: 1px solid transparent; padding: 6px 12px; border-radius: 6px; cursor: pointer; font: inherit; }
nav button:hover { color: var(--text); background: var(--panel2); }
nav button.on { color: var(--text); border-color: var(--border); background: var(--panel2); }
.play { background: #3c6e3c; color: #fff; text-decoration: none; padding: 7px 14px; border-radius: 6px; font-weight: 600; }
main { max-width: 1200px; margin: 0 auto; padding: 16px; }
.tab { display: none; } .tab.on { display: block; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: 16px; }
.stat { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 12px; }
.stat .l { color: var(--dim); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; }
.stat .v { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.card { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 14px; margin-bottom: 12px; }
.card h3 { margin: 0 0 4px; font-size: 17px; }
.muted { color: var(--dim); } .faint { color: var(--faint); font-size: 12px; }
.badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 4px; margin-left: 6px; vertical-align: middle; }
.badge.stable { background: #24502c; color: #9ee79a; } .badge.beta { background: #6a4a1a; color: #ffcf7a; } .badge.off { background: #5a2020; color: #ffaaa0; }
.worldgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; margin-top: 10px; }
.w { background: var(--panel2); border: 1px solid var(--border); border-radius: 6px; padding: 10px; }
.w b { font-size: 15px; }
.bar { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; margin: 6px 0; }
.bar > i { display: block; height: 100%; background: var(--good); }
.tags span { display: inline-block; font-size: 11px; color: var(--dim); border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px; margin: 2px 4px 0 0; }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th { text-align: left; font-size: 11px; color: var(--dim); text-transform: uppercase; font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--border); }
td { padding: 7px 8px; border-bottom: 1px solid var(--border); }
td.num, th.num { text-align: right; }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.pick { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.pick button { background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 5px 10px; cursor: pointer; font: inherit; font-size: 13px; }
.pick button.on { border-color: var(--hl); color: var(--hl); }
.feed { list-style: none; padding: 0; margin: 0; }
.feed li { padding: 7px 0; border-bottom: 1px solid var(--border); display: flex; gap: 12px; }
.feed .t { color: var(--faint); font-size: 12px; min-width: 70px; }
.k-threat { color: var(--bad); } .k-death { color: #ff8a7a; } .k-colony, .k-good { color: var(--good); } .k-research { color: var(--info); } .k-diplomacy { color: #c9a0ff; }
.cols { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; }
@media (max-width: 800px) { .cols { grid-template-columns: 1fr; } }
.mapwrap { position: relative; background: #0a0c10; border: 1px solid var(--border); border-radius: 8px; padding: 8px; overflow-x: auto; }
#mapCanvas { display: block; max-width: 100%; image-rendering: pixelated; }
#mapTip { position: absolute; pointer-events: none; background: rgba(10,11,14,.94); color: #eee; border: 1px solid #555; border-radius: 4px; padding: 6px 8px; font-size: 12px; white-space: pre; display: none; }
.legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; font-size: 12px; color: var(--dim); }
footer { text-align: center; color: var(--faint); font-size: 12px; padding: 20px; }
footer a { color: var(--dim); }
.scroll { overflow-x: auto; }