:root{
  --bg:#0b1512;--panel:#0f1d19ee;--line:#2c4a40;--ivory:#f3e7c9;--gold:#d9b35c;--muted:#9fb3a8;--teal:#3f8f86;--violet:#8d6bc4;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--ivory);font:15px/1.45 Georgia,"Iowan Old Style","Palatino Linotype",serif}
canvas#map{position:fixed;inset:0;width:100%;height:100%;display:block;image-rendering:pixelated;cursor:grab;touch-action:none}
canvas#map.drag{cursor:grabbing}
button,input{font:inherit;color:inherit}
.top{position:fixed;top:0;left:0;right:0;display:flex;gap:12px;align-items:center;justify-content:space-between;padding:12px 16px;padding-top:max(12px,env(safe-area-inset-top));background:linear-gradient(#0b1512f0,#0b151200);pointer-events:none}
.top>*{pointer-events:auto}
.brand{display:flex;flex-direction:column;line-height:1}
.title{font-family:"Courier New",monospace;font-weight:700;letter-spacing:.18em;font-size:22px;color:var(--ivory);text-shadow:2px 2px 0 #000}
.sub{color:var(--gold);font-size:13px;letter-spacing:.08em;margin-top:4px}
.search{position:relative;width:min(320px,52vw)}
.search input{width:100%;padding:9px 12px;border:2px solid var(--line);background:#08110ee6;border-radius:0;outline:none}
.search input:focus{border-color:var(--gold)}
.results{position:absolute;left:0;right:0;top:100%;margin:0;padding:0;list-style:none;background:#08110ef5;border:2px solid var(--line);border-top:0;max-height:50vh;overflow:auto}
.results li button{display:flex;justify-content:space-between;gap:8px;width:100%;padding:8px 12px;background:none;border:0;text-align:left;cursor:pointer}
.results li button:hover,.results li button:focus{background:#1b3029;outline:none}
.results small{color:var(--muted)}
.panel{position:fixed;left:16px;bottom:16px;width:330px;max-height:calc(100% - 110px);display:flex;flex-direction:column;background:var(--panel);border:2px solid var(--line);box-shadow:4px 4px 0 #0008}
.toggle{background:#13261f;border:0;border-bottom:2px solid var(--line);padding:9px 12px;text-align:left;cursor:pointer;color:var(--gold);letter-spacing:.06em}
.toggle::after{content:"▾";float:right}
.panel.closed .toggle::after{content:"▸"}
.panel.closed .body{display:none}
.body{overflow:auto;padding:12px 14px 14px}
h2{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:16px 0 8px;font-weight:normal}
.counts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.counts div{display:flex;flex-direction:column;align-items:flex-start}
.counts b{font-size:24px;font-family:"Courier New",monospace;color:var(--ivory)}
.counts span{font-size:12px;color:var(--muted);line-height:1.2}
.districts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.districts li{border-left:3px solid var(--line);padding:4px 0 4px 10px;cursor:pointer}
.districts li.open{border-color:var(--gold)}
.districts li .n{display:flex;justify-content:space-between;gap:8px}
.districts li .st{font-size:12px;color:var(--muted)}
.districts li.open .st{color:var(--gold)}
.districts li p{margin:2px 0 0;font-size:13px;color:var(--muted)}
.bar{height:6px;background:#1c2f29;margin-top:5px}
.bar i{display:block;height:100%;background:var(--teal)}
.roles{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.roles li{border:1px solid var(--line);padding:2px 8px;font-size:13px}
.roles li b{color:var(--gold);font-weight:normal;margin-left:4px}
.how,.note{font-size:13px;color:var(--muted);margin:0 0 8px}
.how a{color:var(--gold)}
.stamp{font-size:12px;color:#7f948a;margin:8px 0 0}
.card{position:fixed;z-index:5;pointer-events:none;background:#08110ef2;border:2px solid var(--gold);padding:6px 10px;font-size:14px;white-space:nowrap;transform:translate(-50%,calc(-100% - 14px))}
.card small{display:block;color:var(--muted);font-size:12px}
.zoom{position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;gap:6px}
.zoom button{width:40px;height:40px;background:#0f1d19ee;border:2px solid var(--line);cursor:pointer;font-size:18px}
.zoom button:hover{border-color:var(--gold)}
@media (max-width:700px){
  .panel{left:8px;right:8px;width:auto;bottom:8px;max-height:46vh}
  .panel.closed{max-height:none}
  .zoom{bottom:auto;top:76px;right:10px}
  .title{font-size:18px}
  .search{width:min(240px,56vw)}
}
.campaign{margin-top:14px;border:2px solid var(--gold);background:#1a1a12cc;padding:10px 12px}
.campaign .k{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.campaign h3{margin:4px 0 2px;font-size:17px;font-weight:normal}
.campaign .phase{display:flex;justify-content:space-between;gap:8px;margin-top:8px;font-size:13px}
.campaign .phase b{font-family:"Courier New",monospace;color:var(--ivory)}
.campaign .bar i{background:var(--gold)}
.campaign ul{margin:4px 0 0;padding-left:18px;font-size:13px;color:var(--muted)}
.campaign .lbl{font-size:12px;color:var(--gold);margin-top:8px}
.campaign .result{margin-top:8px;font-size:14px}
.hud{position:fixed;top:64px;left:50%;transform:translateX(-50%);width:min(440px,calc(100% - 32px));display:block;text-align:left;background:#0f1d19f0;border:2px solid var(--gold);box-shadow:4px 4px 0 #0008;padding:7px 10px 8px;cursor:pointer;z-index:4}
.hud .row{display:flex;justify-content:space-between;gap:8px;font-size:13px}
.hud .row b{font-family:"Courier New",monospace;font-weight:700}
.hud .t{color:var(--gold);letter-spacing:.04em}
.hud .bar{height:8px;margin-top:6px;background:#1c2f29;position:relative}
.hud .bar i{display:block;height:100%;background:var(--gold)}
.hud .bar s{position:absolute;top:-2px;bottom:-2px;width:2px;background:#f3e7c9;opacity:.7}
.hud .sub{font-size:11px;color:var(--muted);margin-top:4px;display:flex;justify-content:space-between}
@media (max-width:700px){.hud{left:8px;right:60px;width:auto;transform:none;top:70px}}