#map .map-wrap { display: grid; gap: 24px; }
#map .map-phases { display: flex; }
#map .map-phases > .btn { flex: 1 1 auto; min-width: 0; justify-content: center; text-align: center; margin: -1px 0 0 -1px; border-top: 1px solid var(--ink-2); border-left: 1px solid var(--ink-2); }
#map .map-body { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 32px 44px; }
#map .map-main { flex: 999 1 640px; min-width: 0; display: grid; align-content: start; }
#map .map-aside { flex: 1 1 336px; min-width: 0; display: grid; gap: 36px; align-content: start; }
#map .map-viewbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-bottom: 14px; }
#map .map-fog { margin: 0; min-width: 20.9em; min-height: 1.45em; }
#map .map-fog[hidden] { display: block !important; visibility: hidden; }
#map .map-figure { gap: 14px; }
#map .map-plate { touch-action: manipulation; }
#map .map-lines { pointer-events: none; }
#map .map-layer-grat, #map .map-layer-pins, #map .map-layer-labels { position: absolute; inset: 0; pointer-events: none; }
#map .map-pin { left: 0; top: 0; }
#map .map-pin .dot { pointer-events: auto; }
#map .map-mk { display: block; width: 24px; height: 24px; }
#map .map-mk svg { display: block; overflow: visible; }
#map .map-label { left: 0; top: 0; }
#map .map-label[data-pin] { pointer-events: auto; cursor: pointer; }
#map .map-label-l { text-align: right; }
#map .map-label-c { text-align: center; }
#map .map-grat-label { position: absolute; left: 0; top: 0; line-height: 18px; white-space: nowrap; }
#map .map-grat-line, #map .map-ring { fill: none; stroke: var(--plate); stroke-width: 1; }
#map .map-track { fill: none; stroke-width: 1.2; stroke-opacity: .42; stroke-linejoin: round; stroke-linecap: round; }
#map .map-route { fill: none; stroke-width: 2; stroke-dasharray: 6 4; stroke-linejoin: round; }
#map .map-scout-route { fill: none; stroke-width: 1.5; stroke-dasharray: 1 4; stroke-linecap: round; }
#map .map-dr { fill: none; stroke-width: 1.3; stroke-dasharray: 1 3; stroke-linecap: round; }
#map .map-err-line { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2 3; }
#map .map-err-pt { fill: none; stroke: var(--muted); stroke-width: 1.2; }
#map .map-atoll { fill: var(--land); stroke: var(--ink-2); stroke-width: 1; }
#map .map-pulse { fill: none; stroke-width: 2; pointer-events: visibleStroke; }
#map .ln-allies { stroke: var(--allies); }
#map .ln-axis { stroke: var(--axis); }
#map .ln-ink { stroke: var(--ink); }
#map .ln-ink2 { stroke: var(--ink-2); }
#map .mk-allies, #map .mk-axis { stroke: var(--paper); stroke-width: 1.5; stroke-linejoin: round; }
#map .mk-allies { fill: var(--allies); }
#map .mk-axis { fill: var(--axis); }
#map .mk-allies-o, #map .mk-axis-o { fill: var(--sea); stroke-width: 1.5; stroke-linejoin: round; }
#map .mk-allies-o { stroke: var(--allies); }
#map .mk-axis-o { stroke: var(--axis); }
#map .mk-dash { stroke-dasharray: 3 2; }
#map .mk-burst { fill: var(--ink); stroke: var(--paper); stroke-width: 1; stroke-linejoin: round; }
#map .mk-cross { fill: none; stroke: var(--ink); stroke-width: 1.6; }
#map .mk-base { fill: var(--land); stroke: var(--ink); stroke-width: 1.4; }
#map .mk-off { fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#map .mk-off-ink { stroke: var(--ink); }
#map .mk-off-allies { stroke: var(--allies); }
#map .mk-off-axis { stroke: var(--axis); }
#map .lg-allies { fill: var(--allies); }
#map .lg-axis { fill: var(--axis); }
#map .lg-allies-o, #map .lg-axis-o { fill: none; stroke-width: 1.5; stroke-linejoin: round; }
#map .lg-allies-o { stroke: var(--allies); }
#map .lg-axis-o { stroke: var(--axis); }
#map .lg-dash { stroke-dasharray: 3 2; }
#map .lg-ink { fill: var(--ink); }
#map .lg-cross { fill: none; stroke: var(--ink); stroke-width: 1.6; }
#map .lg-arrow { fill: none; stroke-width: 1.6; }
#map .lg-route { fill: none; stroke-width: 2; stroke-dasharray: 6 4; }
#map .lg-scout { fill: none; stroke-width: 1.5; stroke-dasharray: 1 4; stroke-linecap: round; }
#map .map-controls { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px 22px; }
#map .map-play { justify-content: center; min-width: 6em; }
#map .map-play svg { display: block; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
#map .map-play[data-state="playing"] svg { stroke-width: 1.8; }
#map .map-speed { display: flex; align-items: center; gap: 10px; margin-top: 3px; }
#map .map-speed-k { font-size: 16px; font-weight: 500; font-variant-caps: all-small-caps; letter-spacing: .1em; line-height: 1.5; color: var(--muted); }
#map .map-scrub { flex: 1 1 280px; min-width: 0; display: grid; padding-top: 8px; }
#map .map-slider { position: relative; z-index: 1; }
#map .map-ticks { margin: -6px 4.5px 0; }
#map .map-ticks .tick { margin-left: -1px; }
#map .map-ticks .tick.is-now { height: 12px; }
#map .map-hour { white-space: nowrap; }
#map .map-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 24px; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
#map .map-legend-i { display: inline-flex; align-items: center; gap: 9px; }
#map .map-legend svg, #map .map-strike-n svg, #map .map-board-row svg { flex: none; display: block; overflow: visible; }
#map .map-strikes { margin-top: 48px; }
#map .map-strike-list { --cols: minmax(0, 1.3fr) minmax(0, 0.9fr) minmax(0, 1.6fr); }
#map .map-strike-list + .map-strike-list { margin-top: 16px; }
#map .map-strike-list .list-head { gap: 0 16px; line-height: 1.4; }
#map .map-strike-list .list-row { gap: 0 16px; align-items: baseline; }
#map .map-strike-side { font-weight: 600; }
#map .map-strike-n { display: flex; align-items: center; gap: 10px; font-weight: 500; }
#map .map-strike-d { font-size: 16.5px; color: var(--ink-2); }
#map .map-strike-none { margin: 8px 0 0; font-size: 16.5px; font-style: italic; line-height: 1.5; color: var(--muted); }
#map .map-aside p { margin: 0; }
#map .map-moment { display: grid; gap: 14px; }
#map .map-clock { display: grid; gap: 4px; }
#map .map-phase { display: grid; gap: 4px; padding-top: 12px; border-top: 1px solid var(--rule); }
#map .map-phase-sum { font-size: 17px; line-height: 1.5; color: var(--ink-2); }
#map .map-now { display: grid; gap: 6px; padding-top: 12px; border-top: 3px double var(--ink-2); }
#map .map-now-k { display: flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 500; font-variant-caps: all-small-caps; letter-spacing: .06em; line-height: 1.5; color: var(--muted); }
#map .map-now-t { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.35; }
#map .map-now-x { font-size: 17px; line-height: 1.5; }
#map .map-now-none { font-size: 17px; font-style: italic; line-height: 1.5; color: var(--muted); }
#map .map-msg { margin-top: 6px; padding: 10px 14px 11px; display: grid; gap: 4px; }
#map .map-msg-h { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 16px; font-size: 16px; font-weight: 500; font-variant-caps: all-small-caps; letter-spacing: .08em; line-height: 1.4; color: var(--muted); }
#map .map-msg-b { font-size: 16.5px; line-height: 1.5; letter-spacing: .04em; }
#map .map-sw-both { display: inline-flex; }
#map .map-sw-both > span { flex: 1; }
#map .map-board-wrap, #map .map-log-wrap { display: grid; }
#map .map-board-h { margin: 0; }
#map .map-board { display: grid; }
#map .map-board-side { padding: 10px 0 3px; line-height: 1.3; }
#map .map-board-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; column-gap: 10px; align-items: center; padding: 5px 0 6px; border-bottom: 1px solid var(--hairline); font-size: 17px; line-height: 1.45; }
#map .map-board-n { font-weight: 500; }
#map .map-board-s { font-size: 16px; font-style: italic; color: var(--muted); text-align: right; }
#map .map-board-s.is-hit { font-weight: 500; color: var(--ink); }
#map .map-board-burst { stroke: var(--panel); }
#map .map-log-h { margin-bottom: 12px; }
#map .map-log { max-height: 360px; overflow-y: auto; background: var(--panel); border: 1px solid var(--rule); }
#map .map-log-list { display: grid; }
#map .map-log-row { padding: 7px 12px 8px; }
#map .map-log-row:first-child { border-top: 0; }
#map .map-log-k { display: flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 500; font-variant-caps: all-small-caps; letter-spacing: .06em; line-height: 1.35; color: var(--muted); }
#map .map-log-t { font-size: 17px; line-height: 1.4; }
#map .map-log-row.is-future .map-log-t { color: var(--muted); }
#map .map-log-row:focus-visible { outline-offset: -3px; }
#map .map-log-row[aria-pressed="true"]:focus-visible { outline-color: var(--paper); }