.expansion-map{--bg:var(--dark);--sea:#0d1015;--land:#222329;--land-edge:#414047;--ink:var(--white);--muted:var(--white-mid);--line:rgba(201,168,68,.22);--panel:#100e14;--gb:var(--gold);--gb-edge:#f1dda0;--emp:#94762e;--emp-edge:#c9a844;--dom:#d2bd85;--dom-edge:#f0e0b7;--lin:#6e8290;--other:#292931;--other-edge:#50505a;--ref:var(--white);--chip:var(--gold-glow);--era:#211d20;--era-on:#94762e;--serif:var(--f-heading);--sans:var(--f-ui);--mono:var(--f-ui);position:relative;padding:0;font:15px/1.6 var(--f-body)}
.expansion-map *{box-sizing:border-box}


.expansion-map .wrap{max-width:1200px;margin:0 auto;display:grid;gap:14px}
.expansion-map header{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:8px 20px}
.expansion-map h1{font:700 clamp(26px,4vw,38px)/1.1 var(--serif);margin:0;letter-spacing:-.01em;text-wrap:balance}
.expansion-map h1 em{font-style:italic;font-weight:500;color:var(--gb)}
.expansion-map .sub{margin:4px 0 0;color:var(--muted);font-size:14px}
.expansion-map .yearbox{text-align:right}
.expansion-map .year-big{font:500 clamp(30px,5vw,48px)/1 var(--mono);font-variant-numeric:tabular-nums}
.expansion-map .era-now{font:500 12px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--gb)}
.expansion-map .grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:14px;align-items:start}
@media (max-width:880px){.expansion-map .grid{grid-template-columns:1fr}}
.expansion-map .mapbox{background:var(--sea);border:1px solid var(--line);border-radius:6px;overflow:hidden;position:relative;touch-action:none}
.expansion-map svg#map{display:block;width:100%;height:auto;aspect-ratio:16/11;max-width:100%;cursor:grab}
.expansion-map svg#map.drag{cursor:grabbing}
.expansion-map .land{fill:var(--land);stroke:var(--land-edge);stroke-width:.6}
.expansion-map .reg{fill:var(--other);stroke:var(--other-edge);stroke-width:.45;opacity:0;transition:opacity .45s ease, fill .45s ease, stroke .45s ease}
.expansion-map .reg.on{opacity:.9}
.expansion-map .reg.lin{fill:var(--lin);stroke:var(--lin)}
.expansion-map .reg.lin.on{opacity:.6}
.expansion-map .reg.emp{fill:var(--emp);stroke:var(--emp-edge);stroke-width:.6}
.expansion-map .reg.dom{fill:var(--dom);stroke:var(--dom-edge);stroke-width:.6}
.expansion-map .reg.gb{fill:var(--gb);stroke:var(--gb-edge);stroke-width:.8}
.expansion-map .reg.gb.on,.expansion-map .reg.emp.on,.expansion-map .reg.dom.on{opacity:.88}
.expansion-map .reg:hover{opacity:1 !important;stroke-width:1.4}
.expansion-map .ref{fill:none;stroke:var(--ref);stroke-width:.9;stroke-dasharray:4 3;pointer-events:none;transition:opacity .5s}
.expansion-map .ot{fill:var(--gb);stroke:var(--panel);stroke-width:1.2;transition:opacity .5s}
.expansion-map path{vector-effect:non-scaling-stroke}
.expansion-map .legend{display:flex;flex-wrap:wrap;gap:4px 14px;background:var(--panel);border-top:1px solid var(--line);padding:7px 12px;font-size:12px;color:var(--muted)}
.expansion-map .legend i{display:inline-block;width:11px;height:11px;border-radius:2px;margin-right:5px;vertical-align:-1px}
.expansion-map .hover{position:absolute;left:0;top:0;background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:5px 9px;font-size:12px;pointer-events:none;max-width:260px;box-shadow:0 2px 10px rgba(0,0,0,.12);line-height:1.35}
.expansion-map .hover b{display:block;font-weight:600}
.expansion-map .zoom{position:absolute;right:10px;top:10px;display:grid;gap:4px}
.expansion-map .zoom button{width:32px;height:32px;padding:0;font-size:17px;line-height:1;background:var(--panel)}
.expansion-map .stat{position:absolute;left:10px;top:10px;background:color-mix(in srgb,var(--panel) 90%,transparent);border-radius:4px;padding:6px 10px;font-size:12px;color:var(--muted);pointer-events:none}
.expansion-map .stat strong{display:block;font:500 17px/1.2 var(--mono);color:var(--ink);font-variant-numeric:tabular-nums}
.expansion-map .panel{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:16px;display:grid;gap:10px}
.expansion-map .eyebrow{font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.expansion-map .panel h2{font:700 22px/1.2 var(--serif);margin:0;text-wrap:balance}
.expansion-map .panel p{margin:0}
.expansion-map .panel .fade{transition:opacity .35s ease}
.expansion-map .panel .fade.out{opacity:0}
.expansion-map .chips{display:flex;flex-wrap:wrap;gap:6px}
.expansion-map .chip{background:var(--chip);border-radius:3px;padding:2px 8px;font-size:12px}
.expansion-map ol.ev{list-style:none;margin:0;padding:10px 0 0;display:grid;gap:7px;border-top:1px solid var(--line)}
.expansion-map ol.ev li{display:grid;grid-template-columns:104px 1fr;gap:8px;font-size:13px}
.expansion-map ol.ev .d{font:500 11.5px/1.5 var(--mono);color:var(--muted);font-variant-numeric:tabular-nums}
.expansion-map .controls{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:12px 14px;display:grid;gap:10px}
.expansion-map .row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.expansion-map .spacer{flex:1}
.expansion-map button{font:500 13px var(--sans);border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:4px;padding:6px 12px;cursor:pointer}
.expansion-map button:hover{border-color:var(--gb)}
.expansion-map button:focus-visible,.expansion-map input:focus-visible,.expansion-map select:focus-visible,.expansion-map .eras button:focus-visible{outline:2px solid var(--gb);outline-offset:2px}
.expansion-map button.primary{background:var(--gb);color:#fff;border-color:var(--gb)}
.expansion-map select{font:13px var(--sans);padding:5px 8px;border-radius:4px;border:1px solid var(--line);background:var(--bg);color:var(--ink)}
.expansion-map .note{font-size:12px;color:var(--muted)}
.expansion-map .eras{display:flex;gap:2px;height:30px}
.expansion-map .eras button{flex:1 1 0;min-width:0;padding:0 4px;border:0;border-radius:3px;background:var(--era);color:var(--muted);font:500 11px/1.15 var(--sans);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:background .3s,color .3s}
.expansion-map .eras button.on{background:var(--era-on);color:#fff}
.expansion-map input[type=range]{width:100%;accent-color:var(--gb);margin:0}
.expansion-map .ticks{position:relative;height:18px;font:500 10.5px var(--mono);color:var(--muted)}
.expansion-map .ticks span{position:absolute;transform:translateX(-50%);white-space:nowrap;cursor:pointer}
.expansion-map .ticks span::before{content:"";display:block;width:1px;height:5px;background:var(--muted);margin:0 auto 1px}
.expansion-map .ticks span.on{color:var(--gb)}
.expansion-map .ticks span.on::before{background:var(--gb);height:8px}
@media (max-width:640px){.expansion-map .yearbox{text-align:left}.expansion-map ol.ev li{grid-template-columns:1fr;gap:0}.expansion-map .eras button{font-size:0}.expansion-map .eras button.on{font-size:10px;flex-grow:3}.expansion-map .legend{font-size:11px}}
@media (prefers-reduced-motion: reduce){.expansion-map .reg,.expansion-map .ref,.expansion-map .ot,.expansion-map .panel .fade{transition:none}}

.expansion-map .wrap{max-width:none;gap:24px}.expansion-map .grid{grid-template-columns:minmax(0,1fr) 340px;gap:24px}.expansion-map h1{font-weight:400;font-size:clamp(30px,3.5vw,48px)}.expansion-map .year-big{color:var(--gold)}.expansion-map .panel{padding:24px}.expansion-map .panel h2{font-size:29px;font-weight:400}.expansion-map .controls{padding:20px}.expansion-map .eras{height:auto;flex-wrap:wrap;gap:5px}.expansion-map .eras button{flex:1 1 110px;min-height:34px;white-space:normal;font-size:12px}.expansion-map .primary{color:var(--dark)}.expansion-map .ticks{margin:0 12px}.expansion-map .map-notes{border-top:1px solid var(--line);padding-top:18px;color:var(--muted);font-size:13px}.expansion-map .map-notes summary{cursor:pointer;color:var(--gold);font-size:16px}.expansion-map .map-notes p{margin-top:10px}.expansion-map .map-notes a{text-decoration:underline}.expansion-map .load-status{color:var(--gold)}.expansion-map .mapbox{touch-action:auto}.expansion-map svg#map{touch-action:none}.expansion-map .reg:not(.on){pointer-events:none}.expansion-map .ticks button{position:absolute;transform:translateX(-50%);padding:0;border:0;background:none;font-size:11px;color:var(--muted)}.expansion-map .ticks button.on{color:var(--gold)}
@media(max-width:1000px){.expansion-map .grid{grid-template-columns:1fr}.expansion-map .panel{padding:20px}}
@media(max-width:640px){.expansion-map .controls{padding:14px}.expansion-map .wrap{gap:16px}.expansion-map .yearbox{text-align:right}.expansion-map .stat strong{font-size:14px}}

.expansion-map button:disabled{opacity:.4;cursor:default}.expansion-map .ticks button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

#modal.expansion-modal .modal-body{margin-top:24px}