:root{color-scheme:dark;--bg:#111820;--panel:#1b2530;--line:#354450;--ink:#e9eef2;--muted:#aab8c4;--gold:#edc574}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:14px system-ui,sans-serif}main{padding:20px;max-width:2000px;margin:auto}nav{display:flex;gap:20px;flex-wrap:wrap}a{color:var(--gold)}h1{margin:8px 0;font-size:26px}h2{font-size:16px;margin:0 0 12px}.eyebrow{color:var(--gold);font-size:12px}.note{color:var(--muted);font-size:12px;line-height:1.6}.layout{display:grid;grid-template-columns:290px minmax(0,1fr);gap:18px}.controls{background:var(--panel);border:1px solid var(--line);border-radius:10px}.controls section{padding:16px}.controls section+section{border-top:1px solid var(--line)}label{display:flex;flex-direction:column;gap:7px;margin:12px 0}button,input,select{font:inherit}button{min-height:40px;padding:8px;border:1px solid var(--line);border-radius:6px;background:#253340;color:var(--ink);cursor:pointer}button:hover{background:#354754}button:disabled,select:disabled{opacity:.45;cursor:default}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--gold);outline-offset:2px}select{width:100%;padding:9px;background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:6px}input[type=range]{width:100%;accent-color:var(--gold)}input[type=checkbox]{accent-color:var(--gold);width:18px;height:18px}.controls section>button{width:100%;margin-top:6px}.presets{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}.presets span{border-left:5px solid var(--alliance-color);padding:8px;background:var(--panel);font-size:12px}.map-panel{min-width:0}.viewport{max-height:83vh;overflow:auto;background:#080f15;border:1px solid var(--line);border-radius:8px;overscroll-behavior:contain}#map-stage{width:100%}svg{display:block;width:100%;height:auto}#map-status{color:var(--gold);min-height:2.5em;line-height:1.5}#territory-details p{font-size:12px;line-height:1.6;overflow-wrap:anywhere}.layer-setting{padding-bottom:6px}.layer-setting label{margin:8px 0}.layer-heading{display:flex;align-items:center;gap:8px}.layer-heading output{margin-left:auto;font-size:12px;color:var(--muted)}
.hit-area{fill:transparent;stroke:none;cursor:pointer}.hit-area:hover{fill:#ffffff28}.hit-area:focus-visible{outline:none;stroke:#1d6ce0;stroke-width:3;vector-effect:non-scaling-stroke}.selection{pointer-events:none;fill:#ffffff22;stroke:#1784ff;stroke-width:3;vector-effect:non-scaling-stroke}.visual-layer{pointer-events:none}.overlay{stroke-width:4;stroke-linejoin:round;vector-effect:non-scaling-stroke}.plan{stroke-dasharray:8 5}.alliance-label{fill:#fff;font:700 9px system-ui,sans-serif;paint-order:stroke;stroke:#18202a;stroke-width:2;text-anchor:middle}.conflict-label{fill:#df1837;font-weight:900;stroke:#fff;stroke-width:2.5}.city-label{fill:#18202a;font-family:Arial,sans-serif;paint-order:stroke;stroke:#ffffffbb;stroke-width:.8;text-anchor:middle}.number-label{fill:#23405b;font:700 7px system-ui,sans-serif;paint-order:stroke;stroke:#fff;stroke-width:2;text-anchor:middle}.arrow{fill:none;stroke-width:5;vector-effect:non-scaling-stroke}.arrow-shadow{fill:none;stroke:#fff;stroke-width:8;vector-effect:non-scaling-stroke}.axis{fill:#304357;font:8px Arial,sans-serif}
@media(max-width:1000px){.layout{grid-template-columns:250px minmax(0,1fr)}main{padding:12px}.controls section{padding:12px}}
@media(max-width:720px){.layout{display:flex;flex-direction:column}.map-panel{order:-1}.controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.controls section+section{border-top:0}.controls section{border-bottom:1px solid var(--line)}.viewport{max-height:60vh}svg{min-width:700px}}
@media(max-width:440px){.controls{display:block}}
.owner-label,.owner-label-halo{fill:#fff;font-family:"Arial Black",Arial,sans-serif;font-weight:900;paint-order:stroke;stroke-linejoin:round;text-anchor:middle}
.owner-label{stroke:var(--alliance-color);stroke-width:.18em}
.owner-label-halo{stroke:#111820;stroke-width:.25em;filter:drop-shadow(0 1px 1.5px #000b)}
.area-number-badge{fill:#18202a99}.area-number-label{fill:#fff;font:700 12px system-ui,sans-serif;text-anchor:middle;dominant-baseline:central}
.give-away-badge{fill:#ffda79;stroke:#18202a;stroke-width:1}.give-away-label{fill:#18202a;font:800 9px system-ui,sans-serif;text-anchor:middle;dominant-baseline:central}
.overlay{stroke-width:8}
.hit-area:focus{outline:none}