.world-map { width: 100%; padding: 1rem; color: #e3f2ed; }
.world-map-eyebrow { text-transform: uppercase; letter-spacing: .14em; color: #79c8c2; }
.world-map h1 small { color: #79c8c2; }
.world-map-layout { display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); gap: 1.5rem; }
.world-map fieldset { border: 1px solid #54726c; padding: 1rem; }
.world-map legend { color: inherit; }
.world-map label { display: flex; align-items: baseline; gap: .6rem; padding: .35rem 0; font-weight: normal; cursor: pointer; }
.world-map input { flex-shrink: 0; accent-color: #79c8c2; }
.world-map-toolbar { position: absolute; z-index: 2; top: .75rem; left: .75rem; max-width: calc(100% - 1.5rem); padding: .5rem; border: 1px solid #54726c; border-radius: 6px; background: #071719ed; box-shadow: 0 2px 8px #0008; cursor: default; touch-action: manipulation; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.world-map button { background: #123b36; color: #e3f2ed; border: 1px solid #79c8c2; border-radius: 4px; min-height: 44px; min-width: 44px; padding: .4rem .75rem; }
.world-map button:disabled { opacity: .5; }
.world-map :focus-visible { outline: 3px solid #f5cf82; outline-offset: 3px; }
.world-map-viewport { user-select: none; height: min(75vh, 900px); min-height: 340px; overflow: hidden; background: #071719; border: 1px solid #54726c; touch-action: pan-y; position: relative; }
.world-map-viewport[data-ready] { touch-action: none; cursor: grab; }
.world-map-viewport:active { cursor: grabbing; }
.world-map [data-map-canvas], .world-map [data-map-canvas] > svg { width: 100%; height: 100%; display: block; }
.world-map [data-map-canvas] { transform-origin: 0 0; }
.world-map-legend { margin-top: 1rem; padding: 1rem; border: 1px solid #54726c; }
.world-map-legend li { margin: .4rem 0; }
.map-dot { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; margin-right: .4rem; }
.map-city { background: #79df77; } .map-new { background: #37dfe4; } .map-ruins { background: #e58b4c; }
@media (max-width: 760px) {
  .world-map-layout { grid-template-columns: 1fr; }
  .world-map fieldset { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 .6rem; }
  .world-map-viewport { user-select: none; height: 65vh; }
}

.map-key-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: .3rem 1.2rem; list-style: none; padding: 0; }
.map-key-grid li { display: flex; align-items: center; gap: .6rem; }
.map-symbol { display: inline-block; flex: 0 0 28px; width: 28px; height: 16px; }
.map-symbol.map-city, .map-symbol.map-new, .map-symbol.map-ruins { flex-basis: 14px; width: 14px; height: 14px; margin: 0 7px; border-radius: 50%; }
.map-dome { border: 4px double #56e4da; border-radius: 50%; }
.map-wall { border: 2px dashed #e2eee7; border-radius: 50%; }
.map-sprawl { background: repeating-linear-gradient(50deg, #746824 0 3px, #e1cc63 3px 4px); }
.map-border { height: 0; border-top: 3px solid #56e4da; }
.map-border-alt { border-color: #f1a8f0; }
.map-protectorate { height: 0; border-top: 3px solid #c6a5ff; }
.map-shifting { height: 0; border-top: 3px dotted #b2c9a3; }
.map-incorporated { height: 0; border-top: 3px dotted #d2bf69; }
.map-territory { flex-basis: 12px; width: 12px; height: 12px; border: 1px solid #e3f2ed; transform: rotate(45deg); margin: 0 8px; }
.map-un { font-size: 28px; line-height: 16px; text-align: center; }
.map-ltc { background: #443751; } .map-cna { background: #354b50; }
.map-coast { height: 0; border-top: 3px solid #68b582; }
.map-sea-2045 { background: #123c59; } .map-sea-2100 { background: #1b6690; }
.map-hotzone { background: #563c1e; }
.map-switchgrass { background: repeating-linear-gradient(0deg, #244b45 0 3px, #82d8c8 3px 5px); }
.map-reclaimed { background: repeating-linear-gradient(90deg, #263c20 0 4px, #acd44b 4px 7px); }
.map-rainforest-depleted { background: #66572d; } .map-rainforest-recovered { background: #6f8a3b; }
.map-event { color: #f5dcc0; background: #432c24; border: 1px solid #ffbf72; border-radius: 3px; text-align: center; font-size: 12px; }
.world-map [data-badge][role="button"] { cursor: pointer; }

.world-map output { color: inherit; }

.world-map header { margin-bottom: 1.25rem; }
.world-map-layout > aside { align-self: start; background: #0c2422; border-radius: 8px; }
.world-map fieldset { border-radius: 8px; margin: 0; }
.world-map label { min-height: 36px; border-radius: 4px; padding: .45rem .35rem; }
.world-map label:hover, .world-map label:focus-within { background: #163b35; }
.world-map [data-map-status] { color: #a8c7bf; font-size: .9em; }
.world-map summary { cursor: pointer; min-height: 44px; padding: .65rem .5rem; border-radius: 4px; list-style: none; }
.world-map summary::-webkit-details-marker { display: none; }
.world-map summary::before { content: "›"; display: inline-block; width: 1.1em; font-size: 1.2em; color: #f5cf82; transform-origin: .3em 50%; }
.world-map details[open] > summary::before { transform: rotate(90deg); }
.world-map summary:hover, .world-map summary:focus-visible { background: #163b35; }

/* Temporal navigation stays inside the map, separate from the zoom toolbar. */
.world-map-history-toolbar {
  position: absolute;
  z-index: 5;
  bottom: 10px;
  left: 10px;
  max-width: calc(100% - 20px);
  width: 350px;
  box-sizing: border-box;
  padding: 10px;
  border: 1px solid #418c83;
  border-radius: 6px;
  background: rgb(7 23 25 / 94%);
}
.world-map-selected-year { font-size: 20px; color: #dfebd6; }
.world-map-selected-year output { display: inline; font-weight: bold; }
.world-map-history-toolbar input[type="range"] { display: block; width: 100%; min-width: 0; box-sizing: border-box; margin: 8px 0; }
.world-map-year-buttons { display: flex; flex-wrap: wrap; gap: 4px; }
.world-map-year-buttons button { min-height: 44px; flex: 1 1 auto; padding: 4px; white-space: nowrap; }
.map-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

.world-map-layout { grid-template-columns: auto minmax(0, 1fr); gap: 12px; }
.world-map-layer-drawer { max-width: 280px; }
.world-map-layer-drawer > summary { border: 1px solid #54726c; padding: 10px; }
.world-map-layer-drawer[open] { width: 260px; }
.world-map-layer-drawer fieldset { max-height: 70vh; overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 760px) {
  .world-map-layout { grid-template-columns: minmax(0, 1fr); }
  .world-map-layer-drawer, .world-map-layer-drawer[open] { max-width: 100%; width: 100%; }
  .world-map-layer-drawer fieldset { max-height: none; overflow: visible; overscroll-behavior: auto; }
  .world-map-history-toolbar { width: calc(100% - 20px); }
}

/* Selected-year events sit beside the geography, never over its controls. */
.world-map-history-stage { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 12px; align-items: start; }
.world-map [data-history-year-events] { min-width: 0; box-sizing: border-box; border: 1px solid #54726c; border-radius: 6px; background: #0c2422; padding: 10px; max-height: max(340px, min(75vh, 900px)); overflow-y: auto; overscroll-behavior: contain; overflow-wrap: anywhere; }
.world-map [data-history-year-events] ol { padding-left: 1.4rem; }
.world-map [data-history-year-events] li { margin: 1rem 0; padding-bottom: 1rem; border-bottom: 1px solid #34504b; }
.world-map [data-history-year-events] li p { white-space: pre-wrap; line-height: 1.5; }
.world-map [data-history-year-events] a { color: #91e3d4; text-decoration: underline; }
.world-map [data-history-year-events] button { display: block; text-align: left; margin-top: .7rem; width: 100%; }
.world-map-history-stage:has([data-history-year-events]:not([open])) { grid-template-columns: minmax(0, 1fr) 54px; }
.world-map [data-history-year-events]:not([open]) { padding: 4px; }
.world-map [data-history-year-events]:not([open]) > summary { writing-mode: vertical-rl; }
@media (max-width: 1100px) {
  .world-map-history-stage, .world-map-history-stage:has([data-history-year-events]:not([open])) { grid-template-columns: minmax(0, 1fr); }
  .world-map [data-history-year-events] { max-height: none; overflow: visible; overscroll-behavior: auto; }
  .world-map [data-history-year-events]:not([open]) > summary { writing-mode: horizontal-tb; }
}

.world-map [data-map-copy-fallback] input { flex: 1; min-width: 0; width: 100%; color: #e3f2ed; background: #071719; }
.world-map [data-map-copy-fallback] label { display: flex; }

.world-map [data-history-year-badge] { position: absolute; z-index: 4; top: 10px; right: 10px; pointer-events: none; user-select: none; display: flex; align-items: baseline; gap: 8px; padding: 6px 10px; border: 1px solid #f5cf82; border-radius: 6px; background: #071719f5; color: #e3f2ed; font-size: 14px; line-height: 1.2; }
.world-map [data-history-year-badge] span { font-size: 26px; font-weight: bold; color: #f5cf82; font-variant-numeric: tabular-nums; }

/* Sindome atlas interface: dark instruments, sharp edges, restrained accents.
   Geographic SVG colors remain unchanged. No animated or glowing decoration. */
.world-map { background: #050d10; color: #e3f2ed; }
.world-map header { border-bottom: 1px solid #35555b; padding-bottom: 12px; }
.world-map-eyebrow { font-family: ui-monospace, "DejaVu Sans Mono", monospace; font-size: 12px; letter-spacing: .2em; color: #80d5d1; }
.world-map h1 { letter-spacing: .025em; font-weight: 700; }
.world-map #map-instructions { color: #b6cfcc; line-height: 1.5; }
.world-map .world-map-toolbar,
.world-map .world-map-history-toolbar,
.world-map [data-history-year-events],
.world-map .world-map-legend,
.world-map .world-map-layout > aside,
.world-map .world-map-layer-drawer > summary,
.world-map fieldset { background: #0a1c21; border-color: #456a70; border-radius: 2px; }
.world-map .world-map-toolbar { box-shadow: inset 3px 0 #6ed7d2; }
.world-map .world-map-history-toolbar { border-top: 2px solid #6ed7d2; }
.world-map .world-map-viewport { border-color: #52797c; }
.world-map button { border-radius: 2px; border-color: #66bdbd; background: #102e35; color: #e7f5f0; font-family: ui-monospace, "DejaVu Sans Mono", monospace; font-size: 12px; font-weight: 600; letter-spacing: .035em; min-height: 44px; }
.world-map button:hover:not(:disabled) { background: #19444b; border-color: #f5cf82; color: #fff5dd; }
.world-map button:active:not(:disabled) { background: #265459; border-color: #fff0c7; }
.world-map button:disabled { opacity: .42; cursor: not-allowed; }
.world-map [data-map-action="copy"] { border-color: #d9aa61; color: #f5cf82; }
.world-map :focus-visible { outline: 3px solid #f5cf82; outline-offset: 3px; }
.world-map summary { font-family: ui-monospace, "DejaVu Sans Mono", monospace; font-size: 13px; font-weight: 600; letter-spacing: .025em; border-radius: 1px; }
.world-map summary:hover { background: #14333a; }
.world-map details[open] > summary { color: #a0e5df; }
.world-map label { border-radius: 1px; }
.world-map label:has(input:checked) { color: #d9f4e8; }
.world-map label:hover, .world-map label:focus-within { background: #15363b; }
.world-map input[type="checkbox"] { accent-color: #72d4cd; }
.world-map .world-map-history-toolbar input[type="range"] { height: 28px; accent-color: #efbd73; cursor: pointer; }
.world-map [data-history-year-badge] { background: #08181cf5; border-color: #efbd73; border-radius: 1px; padding: 6px 12px; box-shadow: inset 3px 0 #efbd73; }
.world-map [data-history-year-badge] span { color: #f6d18b; font-family: ui-monospace, "DejaVu Sans Mono", monospace; font-size: clamp(26px, 2.2vw, 34px); letter-spacing: .035em; }
.world-map [data-map-zoom] { font-family: ui-monospace, "DejaVu Sans Mono", monospace; color: #93d8d1; font-size: 12px; }
.world-map [data-history-year-events] { border-left: 3px solid #6abdb9; }
.world-map [data-history-year-events] li { border-color: #35565a; }
.world-map [data-history-year-events] li > strong { font-family: ui-monospace, "DejaVu Sans Mono", monospace; color: #f5cf82; }
.world-map [data-history-year-events] li p { color: #dceae6; line-height: 1.6; }
.world-map [data-history-year-events] a:hover { color: #f5cf82; }
.world-map .map-key-grid { font-size: 13px; line-height: 1.5; }
.world-map .map-key-grid li { padding: .3rem 0; }
@media (max-width: 760px) {
  .world-map { padding: 10px; }
  .world-map button { letter-spacing: 0; }
  .world-map .world-map-toolbar { gap: 4px; padding: 6px; }
}

@font-face { font-family: "Atlas Intermediate"; src: url("/fonts/map-year/Rajdhani-SemiBold.ttf") format("truetype"); font-style: normal; font-weight: 600; font-display: swap; }
@font-face { font-family: "Atlas Future"; src: url("/fonts/map-year/Orbitron-variable.ttf") format("truetype"); font-style: normal; font-weight: 400 900; font-display: swap; }
.world-map [data-history-year-badge] { width: 132px; height: 54px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; }
.world-map [data-history-year-badge] span { width: 100%; line-height: 1; text-align: center; font-size: 32px; font-weight: 600; letter-spacing: .02em; font-variant-numeric: lining-nums tabular-nums; }
.world-map :is([data-year-era="classic"] span, [data-year-era="classic"] output) { font-family: Georgia, "Times New Roman", serif; font-weight: 700; }
.world-map :is([data-year-era="intermediate"] span, [data-year-era="intermediate"] output) { font-family: "Atlas Intermediate", ui-monospace, monospace; }
.world-map :is([data-year-era="future"] span, [data-year-era="future"] output) { font-family: "Atlas Future", ui-monospace, monospace; }
.world-map [data-history-action="back"], .world-map [data-history-action="forward"] { font-size: 20px; line-height: 1; }
@media (max-width: 760px) {
  .world-map [data-history-year-badge] { width: 112px; height: 48px; }
  .world-map [data-history-year-badge] span { font-size: 26px; }
}

.world-map .map-protectorate { border-color: #927eae; border-top-width: 2px; }

.map-layer-actions{display:flex;gap:.5rem;margin:0 0 .75rem}.map-layer-actions button{min-height:44px;flex:1;background:#102b30;color:#c9f8f1;border:1px solid #417b80;border-radius:4px;font:inherit;cursor:pointer}.map-layer-actions button:focus-visible{outline:2px solid #f2ac61;outline-offset:2px}

.world-map-selected-year{text-align:center;font-size:24px;line-height:1.15;font-variant-numeric:tabular-nums}
.map-marker-details{position:fixed;z-index:1000;width:min(440px,calc(100vw - 20px));max-height:min(65vh,600px);overflow:auto;overscroll-behavior:contain;box-sizing:border-box;padding:16px;background:#0b2328;color:#d5efeb;border:1px solid #73bcb5;border-radius:6px;box-shadow:0 8px 32px #0009;font-size:14px;line-height:1.5;overflow-wrap:anywhere}.map-marker-details[hidden]{display:none}.map-marker-details h2{font-size:18px;margin:0 0 12px}.map-marker-details ol{padding-left:20px}.map-marker-details li+li{margin-top:18px}.map-marker-details p{white-space:pre-wrap}.map-marker-details a{color:#8ae8dc}.map-marker-details>button{float:right;min-height:36px;margin-left:10px}.map-marker-details :focus-visible{outline:2px solid #f2ac61;outline-offset:2px}

.map-marker-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.map-marker-actions a,.map-marker-actions button { min-height:36px; display:inline-flex; align-items:center; }

@media (max-width:1100px) and (pointer:coarse) {
  .world-map-layout { grid-template-columns:minmax(0,1fr); }
  .world-map-layer-drawer,.world-map-layer-drawer[open] { width:100%;max-width:100%; }
  .world-map-layer-drawer fieldset { max-height:none;overflow:visible;overscroll-behavior:auto; }
}