/* An airy illustrated atlas: blue water, ivory shores, restrained navigation. */
#map.spatial-atlas {
  --spatial-sea: #b9deea;
  --spatial-ink: #244b59;
  --spatial-muted: #4e7480;
  --spatial-line: #47778920;
  --spatial-glass: #ffffffdd;
  --spatial-hover: #f0f8fa;
  --spatial-shadow: #29667d12;
}
body[data-theme="dark"] #map.spatial-atlas {
  --spatial-sea: #142d3d;
  --spatial-ink: #e7f1f7;
  --spatial-muted: #adc4d4;
  --spatial-line: #adc4d433;
  --spatial-glass: #132937ed;
  --spatial-hover: #244659;
  --spatial-shadow: #00000025;
}

#map.spatial-atlas { --spatial-header: 74px; padding: 0; min-height: 0; background: var(--surface); color: var(--ink); }
#map.spatial-atlas > .site-footer { display: none; }
.spatial-shell { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); padding: 0 24px 24px; height: calc(100svh - var(--spatial-header)); min-height: 660px; font-family: inherit; }
.spatial-world { border: 1px solid #a2cbd93d; border-radius: 22px; position: relative; min-width: 0; min-height: 0; overflow: hidden; background: var(--spatial-sea); }
.spatial-scene, .spatial-labels { position: absolute; inset: 0; }
.spatial-labels { z-index: 1; pointer-events: none; overflow: hidden; }
#map .spatial-scene canvas { width: 100%; height: 100%; border: 0; border-radius: 0; background: transparent; box-shadow: none; touch-action: none; outline-offset: -4px; }
.spatial-island-label { position: absolute; top: 0; left: 0; display: flex; align-items: center; gap: 0; white-space: nowrap; padding: 6px 10px; border: 1px solid #ffffff55; border-radius: 5px; background: #ffffff70; backdrop-filter: blur(6px); color: var(--spatial-ink); box-shadow: none; font-family: inherit; font-size: 11px; font-weight: 500; letter-spacing: .02em; line-height: 1.25; pointer-events: auto; cursor: pointer; will-change: transform; transition: background .2s, border-color .2s, opacity .2s; }
.spatial-island-label::before { display: none; content: ""; width: 6px; height: 6px; border: 1px solid var(--blue); border-radius: 50%; background: var(--blue); box-shadow: 0 0 6px transparent; }
.spatial-island-label:hover, .spatial-island-label[aria-pressed="true"] { background: var(--spatial-hover); border-color: var(--blue); z-index: 20 !important; }
.spatial-island-label[data-level="ocean"]::before { background: transparent; box-shadow: none; }
.spatial-caption { position: absolute; bottom: 24px; left: 25px; right: 85px; display: flex; align-items: center; gap: 30px; pointer-events: none; }
.spatial-caption > span { padding: 8px 11px; border: 1px solid var(--spatial-line); border-radius: 6px; background: var(--spatial-glass); color: var(--spatial-ink); font-size: 10px; backdrop-filter: blur(8px); }
.spatial-caption p { flex: 1; text-align: center; margin: 0; color: var(--spatial-muted); font-size: 10px; letter-spacing: .015em; }
.spatial-zoom { position: absolute; bottom: 24px; right: 24px; display: flex; flex-direction: column; border: 1px solid var(--spatial-line); border-radius: 20px; background: var(--spatial-glass); backdrop-filter: blur(12px); overflow: hidden; }
.spatial-zoom button { width: 37px; height: 36px; border: 0; background: transparent; color: var(--spatial-ink); font-size: 21px; font-weight: 300; line-height: 1; cursor: pointer; }
.spatial-zoom button + button { border-top: 1px solid var(--spatial-line); }
.spatial-zoom button:hover { background: var(--spatial-hover); }
.spatial-orientation { position: absolute; right: 21px; top: 24px; bottom: auto; width: 40px; text-align: center; color: var(--spatial-muted); font-size: 9px; line-height: 1; pointer-events: none; }
.spatial-orientation svg { width: 40px; height: 40px; }
.spatial-orientation svg circle { fill: var(--spatial-glass); stroke: var(--spatial-muted); stroke-width: .7; }
.spatial-orientation svg path { fill: var(--blue); stroke: var(--spatial-ink); stroke-width: .6; }
.spatial-detail { position: absolute; left: 26px; bottom: 82px; width: 280px; max-width: calc(100% - 103px); padding: 22px; border-radius: 10px; border: 1px solid var(--spatial-line); background: var(--spatial-glass); backdrop-filter: blur(20px); box-shadow: 0 15px 50px var(--spatial-shadow); z-index: 6; }
.spatial-detail h3 { margin: 0 16px 9px 0; color: var(--spatial-ink); font-size: 19px; line-height: 1.3; font-weight: 600; }
.spatial-detail p { color: var(--spatial-muted); font-size: 12px; line-height: 1.6; margin: 0 0 11px; }
.spatial-detail .spatial-personal-state { font-size: 10px; border-top: 1px solid var(--spatial-line); padding-top: 10px; margin-bottom: 17px; }
.spatial-detail button[data-spatial-open] { width: 100%; padding: 10px 12px; border: 0; border-radius: 5px; background: var(--blue); color: #fff; font-family: inherit; font-size: 12px; cursor: pointer; }
.spatial-detail-close { position: absolute; right: 8px; top: 8px; width: 30px; height: 30px; border: 0; border-radius: 5px; background: transparent; color: var(--spatial-muted); font-size: 20px; cursor: pointer; }
.spatial-loading { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 16px; color: var(--spatial-muted); background: var(--spatial-sea); z-index: 8; }
.spatial-loading > span { width: 32px; height: 32px; border: 1px solid var(--spatial-line); border-top-color: var(--blue); border-radius: 50%; animation: atlas-spin 1s linear infinite; }
.spatial-loading p { font-size: 12px; margin: 0; }
@keyframes atlas-spin { to { transform: rotate(360deg); } }
#map .spatial-shell button:focus-visible, #map .spatial-shell a:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* One open canvas; names live on their islands instead of a duplicated directory. */
.spatial-toolbar { position: relative; inset: auto; min-height: 72px; padding: 14px 4px; z-index: 3; display: flex; align-items: center; gap: 16px; pointer-events: none; }
#map.spatial-atlas .spatial-toolbar h1 { margin: 0 auto 0 0; color: var(--spatial-ink); font-size: 24px; line-height: 1.3; font-weight: 600; letter-spacing: -.025em; }
.spatial-modes { display: flex; gap: 3px; padding: 3px; border: 1px solid var(--spatial-line); border-radius: 8px; background: var(--spatial-glass); pointer-events: auto; }
.spatial-modes button { padding: 9px 13px; border: 0; border-radius: 5px; background: transparent; color: var(--spatial-muted); font-family: inherit; font-size: 12px; line-height: 1.2; font-weight: 500; cursor: pointer; }
.spatial-modes button[aria-pressed="true"] { background: var(--spatial-hover); color: var(--spatial-ink); }
.spatial-primary { display: inline-flex; align-items: center; gap: 16px; padding: 11px 15px; border: 1px solid var(--blue); border-radius: 7px; background: var(--blue); color: #fff; font-size: 12px; font-weight: 600; pointer-events: auto; }
.spatial-primary:hover { background: var(--blue-dark); }
.spatial-zoom svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.spatial-caption { gap: 16px; }
.spatial-caption, .spatial-zoom, .spatial-orientation { z-index: 2; }
.spatial-rotation { display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; padding: 8px 10px; border: 1px solid #ffffffa6; border-radius: 20px; background: var(--spatial-glass); color: var(--spatial-ink); font: inherit; font-size: 10px; cursor: pointer; pointer-events: auto; backdrop-filter: blur(8px); }
.spatial-rotation svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.spatial-rotation[aria-pressed="true"] { color: var(--spatial-ink); border-color: #ffffffa6; }
.spatial-rotation[aria-pressed="false"] svg { opacity: .35; }
.spatial-rotation:hover { background: var(--spatial-hover); }
#map.spatial-atlas .spatial-detail h3 { color: var(--spatial-ink); }
#map.spatial-atlas .spatial-caption p, #map.spatial-atlas .spatial-detail p { color: var(--spatial-muted); }
@media (max-height: 800px) and (min-width: 761px) { .spatial-shell { min-height: 540px; } }
@media (max-width: 760px) {
  .spatial-shell { min-height: 660px; padding: 0 12px 12px; }
  .spatial-toolbar { inset: auto; padding: 14px 4px; display: grid; grid-template-columns: 1fr auto; gap: 12px; }
  #map.spatial-atlas .spatial-toolbar h1 { font-size: 22px; }
  .spatial-primary { grid-column: 2; grid-row: 1; padding: 9px 12px; font-size: 11px; gap: 12px; }
  .spatial-modes { grid-row: 2; grid-column: 1 / -1; justify-self: center; }
  .spatial-modes button { padding: 8px 12px; font-size: 11px; }
  .spatial-island-label { font-size: 10px; padding: 5px 7px; gap: 5px; }
  .spatial-island-label::before { width: 5px; height: 5px; }
  .spatial-caption { left: 16px; bottom: 18px; right: 68px; gap: 8px; flex-wrap: wrap; }
  .spatial-caption > span, .spatial-rotation { padding: 6px 9px; font-size: 9px; }
  .spatial-caption p { flex-basis: 100%; text-align: left; font-size: 9px; }
  .spatial-zoom { right: 15px; bottom: 18px; }
  .spatial-orientation { right: 12px; top: 15px; bottom: auto; }
  .spatial-detail { left: 16px; bottom: 80px; width: 280px; max-width: calc(100% - 85px); padding: 18px; }
}
@media (prefers-reduced-motion: reduce) { .spatial-shell * { transition: none !important; animation: none !important; } }
@media (min-width: 1101px) { .spatial-island-label { font-size: 12px; } }
/* Selection uses the existing MapKAI blue. */
#map.spatial-atlas .spatial-island-label[aria-pressed="true"] { border-color: var(--blue); background: var(--surface); color: var(--ink); }

.spatial-world::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 80px #ffffff18; pointer-events: none; }
.spatial-shell[data-ready="true"] .spatial-scene { animation: atlas-reveal .9s ease-out both; }
.spatial-detail:not([hidden]) { animation: atlas-detail-in .35s cubic-bezier(.2,.8,.2,1) both; }
body[data-theme="dark"] .spatial-island-label { background: #173646a8; border-color: #b9deea30; }
@keyframes atlas-reveal { from { opacity: 0; } to { opacity: 1; } }
@keyframes atlas-detail-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }