.community-atlas .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); padding: 0; border: 0; }
/* The walking world gives way to an ordinary, readable vertical atlas. */
.community-atlas { min-height: 100svh; position: relative; pointer-events: auto; background: #080e0b; border-top: 1px solid #547260; padding: 62px 32px 38px; color: #d2ead9; }
.atlas-inner { max-width: 1200px; margin: 0 auto; }
.atlas-header { position: relative; padding: 0 22px; display: flex; align-items: center; gap: 24px; margin-bottom: 24px; }
.atlas-header-copy { flex: 1; min-width: 0; }
.atlas-kicker { margin: 0 0 12px; color: var(--mint); font: 700 14px/1.3 var(--f-mono); letter-spacing: .19em; text-transform: uppercase; }
.atlas-header h2 { margin: 0; color: #d2f4d9; font: 700 clamp(36px, 4.5vw, 64px)/1.08 var(--f-pixel); letter-spacing: -.025em; }
.atlas-intro { margin: 12px 0 0; font: 500 clamp(15px, 1.7vw, 22px)/1.5 var(--f-pixel); color: #bdcec5; }
.atlas-lang { position: absolute; right: 22px; top: -28px; display: flex; gap: 2px; }
.atlas-lang button { background: transparent; border: 1px solid transparent; color: #97b6a1; font: 600 12px var(--f-mono); min-height: 32px; padding: 4px 8px; cursor: pointer; }
.atlas-lang button[aria-pressed=true] { border-color: #466854; color: var(--mint); }
.atlas-lenses { display: flex; width: min(520px, 100%); margin: 0 22px 22px; border: 1px solid #668573; border-radius: 5px; padding: 3px; }
.atlas-lenses button { flex: 1; border: 0; border-right: 1px solid #33513e; background: transparent; color: #d1e7d9; min-height: 47px; font: 600 18px var(--f-pixel); cursor: pointer; }
.atlas-lenses button:last-child { border-right: 0; }
.atlas-lenses button[aria-pressed=true] { background: #a0e5b7; color: #0b2716; border-radius: 3px; box-shadow: inset 0 0 0 1px #c8f6d9; }
.atlas-panel { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 0; border: 1px solid #668573; border-radius: 8px; padding: 26px 24px 16px; background: radial-gradient(ellipse at 28% 42%, #10271a50, transparent 60%), #080f0b; }
.atlas-geography { min-width: 0; position: relative; container-type: inline-size; }
.atlas-region { position: absolute; top: 0; font: 500 13px var(--f-mono); color: #b6c7bc; }
.atlas-region-west { left: 5px; }
.atlas-region-east { left: 59%; }
.atlas-map { width: 100%; height: auto; display: block; overflow: visible; }
.atlas-state { cursor: pointer; outline: none; }
.atlas-land-base { fill: #11251a; stroke: #86b795; stroke-width: 1; stroke-linejoin: round; }
.atlas-land-dots { transition: opacity .2s; }
.atlas-state.selected .atlas-land-base { fill: #3e3012; stroke: #ffd479; stroke-width: 1.8; }
.atlas-state:hover .atlas-land-base, .atlas-state:focus-visible .atlas-land-base { stroke: #fff2c7; stroke-width: 2.5; }
.atlas-state:focus-visible .atlas-land-dots { opacity: 1 !important; }
.atlas-leader { stroke: #6b9b7a; stroke-width: .8; opacity: .65; pointer-events: none; }
.atlas-marker { fill: #a5d8b4; stroke: #193925; stroke-width: 1.5; cursor: pointer; }
.atlas-map-label { fill: #cfdfd3; font: 500 12px var(--f-mono); paint-order: stroke; stroke: #080f0b; stroke-width: 5px; stroke-linejoin: round; cursor: pointer; }
.atlas-callout.selected .atlas-map-label { fill: #ffd479; font-weight: 700; }
.atlas-callout.selected .atlas-marker { fill: #ffce6b; stroke: #ffe3a9; stroke-width: 2; }
.atlas-callout.selected .atlas-leader { stroke: #ffd479; opacity: 1; }
.atlas-north { position: absolute; bottom: 26px; right: 22px; display: grid; gap: 6px; justify-items: center; color: #9db9a6; font: 12px var(--f-mono); }
.atlas-north svg { width: 22px; height: 26px; }
.atlas-detail { border-left: 1px solid #456a52; padding-left: 28px; min-width: 0; display: flex; flex-direction: column; }
.atlas-picker { position: relative; width: 100%; }
.atlas-picker-trigger { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; cursor: pointer; text-align: left; color: #c7efce; background: transparent; font: 700 36px/1.2 var(--f-pixel); border: 1px solid transparent; padding: 7px 0; }
.atlas-picker-name { min-width: 0; overflow-wrap: anywhere; }
.atlas-picker-trigger.long-name { font-size: 28px; }
.atlas-picker-arrow { flex: none; font: 22px/1 var(--f-mono); color: #99b9a3; transition: transform .15s; }
.atlas-picker-trigger[aria-expanded=true] .atlas-picker-arrow { transform: rotate(180deg); color: #f6c260; }
.atlas-picker-menu { position: absolute; z-index: 10; top: calc(100% + 8px); right: 0; width: max(100%, 280px); max-width: calc(100vw - 40px); max-height: min(360px, 45svh); overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; padding: 6px; border: 1px solid #87b798; background: #0b1710; box-shadow: 4px 4px 0 #254232, 0 12px 28px #0009; scrollbar-color: #648d71 #12271b; scrollbar-width: thin; }
.atlas-picker-menu[hidden] { display: none; }
.atlas-picker.opens-up .atlas-picker-menu { top: auto; bottom: calc(100% + 8px); }
.atlas-picker-option { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; min-height: 44px; padding: 9px 12px; color: #c3dfcc; font: 500 19px/1.25 var(--f-pixel); border: 1px solid transparent; }
.atlas-picker-option:hover, .atlas-picker-option.active { background: #203b2a; border-color: #4e7a5c; }
.atlas-picker-option[aria-selected=true] { color: #ffd479; background: #342b17; }
.atlas-picker-option[aria-selected=true].active { border-color: #f6c260; }
.atlas-picker-check { color: #f6c260; visibility: hidden; font: 16px var(--f-mono); }
.atlas-picker-option[aria-selected=true] .atlas-picker-check { visibility: visible; }
.atlas-count { display: block; margin-top: 7px; font: 700 78px/1.04 var(--f-pixel); color: #f6c260; font-variant-numeric: tabular-nums; }
.atlas-metric-label { display: block; font: 500 21px/1.3 var(--f-pixel); color: #bbd0c2; }
.atlas-detail hr { width: 100%; border: 0; border-top: 1px solid #40684f; margin: 24px 0 0; }
.atlas-detail-copy { font: 500 22px/1.25 var(--f-pixel); max-width: 20ch; margin: 20px 0 16px; }
.atlas-state-link { align-self: flex-start; color: #a5e2b7; font: 600 21px/1.3 var(--f-pixel); text-underline-offset: 7px; padding: 4px 0 12px; }
.atlas-landmark { margin: auto 0 0; padding-top: 14px; width: 100%; }
.atlas-landmark[hidden] { display: none; }
.atlas-landmark-art { position: relative; width: 100%; aspect-ratio: 3/4; max-height: 350px; }
.atlas-landmark-art img { display: block; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .3s ease-out; }
.atlas-landmark-art.is-loaded img { opacity: 1; }
.atlas-landmark figcaption { display: grid; gap: 5px; margin-top: 10px; text-align: center; }
.atlas-landmark-name { color: #c5e6d0; font: 500 15px/1.35 var(--f-pixel); }
.atlas-landmark-location { color: #819e8b; font: 10px/1.5 var(--f-mono); }
/* HUD departure is reversible. Audio lives on independently of its controls. */
body.atlas-view #player, body.atlas-view #world { visibility: hidden; }
body.atlas-visible #hud > :not(.music-bar):not(.hud-right) { visibility: hidden; pointer-events: none; }
#hud .music-bar.is-docked { display: none; }
.atlas-audio.music-bar { position: static; width: fit-content; max-width: 100%; margin: 0 22px 20px; }
.atlas-audio:empty { display: none; }
.atlas-audio .music-status { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; padding: 0; margin: 0; border: 0; }
.community-atlas :focus-visible { outline: 2px solid #ffe3a9; outline-offset: 5px; }
/* State focus uses its highlighted geographic outline, not a bounding box. */
.community-atlas .atlas-state:focus-visible { outline: none; }
/* Keep geographic selection and changing results in the same view. */
.atlas-header { padding: 0; gap: 18px; margin-bottom: 14px; }
.atlas-kicker { margin-bottom: 8px; font-size: 12px; }
.atlas-header h2 { font-size: clamp(34px, 3.4vw, 46px); }
.atlas-intro { margin-top: 8px; font-size: 18px; }
.atlas-lenses { margin: 0 0 16px; width: min(480px, 100%); }
.atlas-lenses button { min-height: 44px; }
.atlas-panel { grid-template-columns: minmax(0, 1fr) 340px; padding: 18px; }
.atlas-map { height: clamp(320px, calc(100svh - 330px), 400px); }
.atlas-map-label { font-size: 14px; }
.atlas-detail { padding-left: 20px; }
.atlas-state-overview { display: flex; flex-direction: column; gap: 8px; }
.atlas-picker-trigger { font-size: 28px; min-height: 44px; padding: 0; }
.atlas-picker-trigger.long-name { font-size: 24px; }
.atlas-count { margin-top: 2px; font-size: 50px; }
.atlas-metric-label { font-size: 16px; }
.atlas-detail-copy { font-size: 16px; margin: 12px 0 4px; }
.atlas-state-link { display: inline-block; font-size: 16px; padding-bottom: 8px; }
.atlas-landmark { margin: 0; padding-top: 0; }
.atlas-landmark-art { aspect-ratio: 2/3; max-height: 170px; }
.atlas-landmark figcaption { margin-top: 4px; gap: 2px; }
.atlas-landmark-name { font-size: 12px; }
.atlas-landmark-location { font-size: 9px; }
.atlas-community-summary { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 24px; margin-top: 18px; align-items: center; }
.atlas-rankings { min-width: 0; }
.atlas-ranking-head h3 { margin: 0 0 10px; font: 700 22px/1.2 var(--f-pixel); color: #bde9c8; }
.atlas-ranking { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.atlas-rank { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 6px; align-items: center; min-height: 60px; padding: 9px 10px; border: 1px solid #466852; border-radius: 4px; color: #c3e7ce; background: #0b140e; text-align: left; cursor: pointer; font: 600 17px/1.2 var(--f-pixel); }
.atlas-rank.selected { border-color: #a59557; }
.atlas-rank-number { display: grid; place-items: center; height: 22px; border: 1px solid #577c62; background: #122a1a; }
.atlas-rank b { font-size: 24px; color: #abe7bd; }
.atlas-rank.selected b { color: #f6c260; }
.atlas-bar { grid-column: 1/-1; height: 4px; background: #2d3b33; overflow: hidden; }
.atlas-bar i { display: block; height: 100%; background: #92dfad; }
.atlas-rank.selected .atlas-bar i { background: #f6c260; }
.atlas-totals { grid-column: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-left: 20px; border-left: 1px solid #405c49; }
.atlas-totals b { display: block; font: 700 32px/1.1 var(--f-pixel); color: #c1efcd; }
.atlas-totals span { display: block; font: 500 15px/1.3 var(--f-pixel); color: #bbd0c2; }
@media (min-width: 761px) and (max-height: 800px) {
  .atlas-header { margin-bottom: 8px; }
  .atlas-header h2 { font-size: 36px; }
  .atlas-kicker { margin-bottom: 6px; }
  .atlas-intro { margin-top: 6px; font-size: 16px; }
  .atlas-lenses { margin-bottom: 8px; }
}
@media (max-width: 1000px) {
  .atlas-community-summary { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .atlas-totals { grid-column: auto; justify-self: end; width: 300px; padding: 0; border-left: 0; }
  .atlas-panel { grid-template-columns: minmax(0, 1fr) 290px; padding: 16px; }
  .atlas-detail { padding-left: 20px; }
  .atlas-picker-trigger { font-size: 30px; }
  .atlas-count { font-size: 46px; }
}
@media (min-width: 761px) and (max-height: 600px) {
  .atlas-state-overview, .atlas-state-summary { display: contents; }
  .atlas-selection { position: sticky; top: var(--site-header-height); z-index: 3; background: #080f0bf5; border-bottom: 1px solid #456a52; }
  .atlas-landmark { width: 90px; align-self: flex-end; margin: 8px 0; }
}
@media (max-width: 760px) {
  .atlas-community-summary { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .atlas-ranking { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .atlas-totals { grid-column: auto; justify-self: stretch; width: auto; border-left: 0; border-top: 1px solid #405c49; padding: 14px 0 0; }
  .community-atlas { padding: 48px 16px 70px; }
  .atlas-header { padding: 0; align-items: flex-start; gap: 12px; }
  .atlas-lang { right: 0; top: -33px; }
  .atlas-lang button { min-height: 36px; }
  .atlas-kicker { font-size: 10px; letter-spacing: .16em; }
  .atlas-header h2 { font-size: clamp(30px, 7vw, 40px); max-width: 18ch; }
  .atlas-intro { font-size: 17px; margin: 12px 0 0; }
  .atlas-lenses { margin: 0 0 18px; width: 100%; }
  .atlas-audio.music-bar { margin-left: 0; margin-right: 0; }
  .atlas-lenses button { font-size: 17px; min-height: 44px; }
  .atlas-panel { grid-template-columns: minmax(0, 1fr); padding: 0 12px 14px; }
  .atlas-geography { grid-row: 2; }
  .atlas-map { height: auto; }
  .atlas-region { font-size: 9px; }
  .atlas-region-east { top: calc(100cqw * 440 / 430); left: 5px; }
  .atlas-map-label { font-size: 15px; }
  .atlas-north { bottom: 16px; right: 0; }
  .atlas-north svg { width: 16px; height: 22px; }
  .atlas-detail, .atlas-state-overview, .atlas-state-summary { display: contents; }
  .atlas-selection { grid-row: 1; position: sticky; top: var(--site-header-height); z-index: 3; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; background: #080f0bf5; border-bottom: 1px solid #456a52; padding: 10px 0; margin-bottom: 16px; }
  .atlas-picker-trigger { font-size: clamp(22px, 5.8vw, 28px); padding-top: 0; }
  .atlas-picker-menu { left: 0; right: auto; max-width: calc(100vw - 58px); }
  .atlas-detail-status { text-align: right; }
  .atlas-count { font-size: 38px; margin-top: 0; }
  .atlas-metric-label { font-size: 12px; }
  .atlas-detail hr { display: none; }
  .atlas-detail-copy { grid-row: 3; font-size: 18px; margin: 14px 0 6px; }
  .atlas-state-link { grid-row: 4; font-size: 18px; padding-bottom: 0; }
  .atlas-landmark { grid-row: 5; margin: 12px 0; display: grid; grid-template-columns: 80px minmax(0, 1fr); align-items: center; gap: 12px; }
  .atlas-landmark-art { max-height: 120px; }
  .atlas-landmark figcaption { margin-top: 8px; }
  .atlas-landmark-name { font-size: 18px; }
  .atlas-landmark-location { font-size: 11px; }
}