#modal[data-kind="map"]{width:min(1120px,calc(100cqw - 32px));max-height:calc(100cqh - 24px);padding:24px;overflow:auto;background-color:#10191a}
#modal[data-kind="map"] #modal-body{padding:0;min-width:0}
#modal[data-kind="map"]>header{margin:0;padding:0 0 14px;height:auto}
.atlas{display:grid;grid-template-columns:minmax(0,1fr) 228px;gap:22px;margin-top:20px}
.atlas-chart{min-width:0;align-self:start}
.atlas-board{position:relative;aspect-ratio:3/2;isolation:isolate;box-shadow:0 0 0 1px #887957;overflow:hidden;border-radius:2px}
.atlas-art{position:absolute;width:100%;height:100%;object-fit:cover;filter:brightness(.85);user-select:none;pointer-events:none}
/* Map art is decoration: only this board reports loading, never the game. */
.map-art-status{position:absolute;z-index:3;left:10px;bottom:10px;max-width:calc(100% - 20px);display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:8px 10px;background:#10191aee;border:1px solid #887957;border-radius:3px;color:#f1e7ce;font-size:12px;line-height:1.5}
.map-art-status button{min-height:36px;padding:5px 10px;border:1px solid #a48c5c;background:#263b36;color:#fff0c5;border-radius:3px;font:inherit}
.map-art-status button:focus-visible{outline:2px solid #fff0c5;outline-offset:2px}
.content-world>.map-art-status{position:sticky;top:10px;bottom:auto;width:fit-content;margin:10px}
.atlas-paths{position:absolute;width:100%;height:100%;pointer-events:none}
.atlas-paths line{stroke:#e0d5ae;stroke-width:1.5;stroke-dasharray:4 5;vector-effect:non-scaling-stroke;opacity:.6}
.atlas-paths line.is-selected{stroke:#ffe4a3;opacity:1;stroke-width:2}
#modal[data-kind="map"] .atlas-node{position:absolute;transform:translate(-50%,-10px);min-width:44px;min-height:44px;padding:0 3px 5px;display:flex;align-items:center;flex-direction:column;gap:5px;background:none;border:0;border-radius:3px;box-shadow:none;color:#f6eacf;font-size:12px;font-weight:600;line-height:1.5;white-space:nowrap;z-index:1}
.atlas-pin{display:block;width:13px;height:13px;background:#263d3d;border:2px solid #e4d3a9;border-radius:50%;box-shadow:0 1px 5px #000}
.atlas-label{padding:4px 9px;background:#111d20ed;border:1px solid #8a7c61;border-radius:3px;font-size:12px;line-height:1.5;text-shadow:0 1px #000}
.atlas-here{font-size:12px;line-height:1.4;padding:1px 6px;background:#e5c783;color:#182022;border-radius:2px;text-shadow:none}
.atlas-node.is-current .atlas-pin{background:#f5cf79;box-shadow:0 0 0 4px #edc77640,0 1px 5px #000}
.atlas-node[aria-pressed="true"] .atlas-label{border-color:#f2d598;color:#fff4db;background:#273939}
#modal-body .atlas-node:focus-visible{outline:2px solid #fff0c5;outline-offset:4px}
.atlas-legend{position:static;display:flex;justify-content:flex-start;gap:22px;padding:14px 0 0;color:#c7c5b5;font-size:12px;letter-spacing:0}
.atlas-legend>span{display:flex;gap:8px;align-items:center}
.atlas-legend-dot{width:8px;height:8px;border-radius:50%;background:#efcf81}
.atlas-legend-route{width:18px;border-top:2px dashed #d6c99f}
.atlas-detail{min-width:0;max-height:510px;overflow:auto;padding:2px 4px 8px 0;scrollbar-width:thin;scrollbar-color:#73694e #152021}
.atlas-category{font-size:12px;letter-spacing:.06em;color:#a7d2be}.atlas-category.is-danger{color:#e6ac90}
#modal-body .atlas-detail h3{font-size:20px;line-height:1.4;color:#f3e5c1;margin:9px 0 10px}
.atlas-location{display:inline-block;font-size:12px;color:#efcf81;padding-bottom:4px}
.atlas-facts{border-top:1px solid #6771664d;margin-top:18px;padding-top:14px}
#modal-body .atlas-facts h4{font-size:12px;color:#adbab3;margin:0 0 8px;line-height:1.5;font-weight:400}
.atlas-facts ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px 12px;font-size:12px;line-height:1.8;color:#ece6d3}
.atlas-lock{font-size:12px;color:#d9b784;margin-top:8px}
#modal[data-kind="map"] .atlas-link{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-width:0;min-height:44px;padding:8px 10px;margin:6px 0 0;border:1px solid #5c6a60;background:#1b2b2b;border-radius:3px;color:#f1e7ce;font-size:12px;line-height:1.5;box-shadow:none}
#modal[data-kind="map"] .atlas-link:hover,#modal[data-kind="map"] .atlas-link:focus-visible{background:#30423b;border-color:#d6bc83}
.atlas-overview .atlas-paths line:not(.is-planned){stroke-dasharray:none;stroke-width:2;opacity:.9}
.atlas-paths line.is-planned{stroke:#eedabb;stroke-dasharray:3 6;stroke-width:1.5;opacity:.65;filter:drop-shadow(0 1px 1px #101919)}
.atlas-paths line.is-planned.is-selected{opacity:1}
.atlas-legend-route.is-planned{border-top:1px dotted #a89e87}
.atlas-overview .atlas-legend-route:not(.is-planned){border-top-style:solid}
.atlas-overview .atlas-legend{gap:16px;flex-wrap:wrap}
.atlas-overview .atlas-label{display:flex;align-items:center;gap:5px}
.atlas-lock-icon{width:12px;height:12px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5}
.atlas-unopened{color:#e1d6c2;background:#1a2021e8;padding:1px 5px;border-radius:2px;font-size:12px;line-height:1.4}
.atlas-node.is-unopened .atlas-pin{background:#393c39;border-color:#a5a497}
.atlas-node.is-unopened .atlas-label{color:#d4d0c4}
#modal[data-kind="map"] .atlas-link:disabled{opacity:.65;cursor:not-allowed;background:#202727;border-color:#535a52;justify-content:center}
#modal[data-kind="map"] .atlas-back{margin:0 0 14px;min-height:36px;justify-content:flex-start;color:#ddc99d}
.atlas-route-status{color:#bbb5a0;font-size:12px}
@container game-viewport (max-width:900px) or (max-height:650px){
  #modal[data-kind="map"]{width:calc(100cqw - 24px);padding:10px;border-width:8px;max-height:calc(100cqh - 16px)}
  #modal[data-kind="map"] #modal-title{font-size:18px;margin-top:3px;margin-bottom:0;line-height:1.3}
  #modal[data-kind="map"] #modal-kicker{font-size:12px;line-height:1.3}
  #modal[data-kind="map"]>header{padding-bottom:9px}
  .atlas{grid-template-columns:minmax(0,1fr) 176px;gap:16px;margin-top:12px}
  .atlas-chart{display:flex;flex-direction:column;align-items:center}
  .atlas-board{width:100%;max-width:calc((100cqh - 140px)*1.5)}
  .atlas-detail{max-height:calc(100cqh - 112px)}
  #modal-body .atlas-detail h3{font-size:16px;margin:5px 0 7px}
  .atlas-facts{margin-top:12px;padding-top:10px}
  .atlas-label{padding:3px 6px}.atlas-legend{padding-top:10px;gap:16px}
}
@container game-viewport (max-width:620px){
  .atlas{grid-template-columns:minmax(0,1fr) 150px;gap:12px}
  .atlas-node .atlas-label{padding:2px 4px}.atlas-node .atlas-pin{width:10px;height:10px}
  #modal[data-kind="map"] .atlas-node{gap:3px}.atlas-here{padding:0 3px}
}
