/* Circuit atlas image, masks, beacons and hit targets share one aspect ratio. */
body.map-open { overflow: auto; }
body.map-open #game-shell { display: none; }
.world-map[hidden], .map-art-message[hidden] { display: none; }
.world-map { --map-gold: #f5d695; --map-ivory: #fff2d2; --map-cyan: #9bbdc9; position: relative; min-height: 100svh; max-width: 2814px; padding: 17px 26px 12px; margin: auto; background: #080e18; }
.map-header { display: flex; align-items: center; justify-content: space-between; min-height: 37px; margin-bottom: 12px; }
.map-header .masthead-logo { font: 26px var(--utility); text-shadow: none; }
.map-header .masthead-logo small { font-size: 7px; letter-spacing: .17em; }
.map-header button { color: #bdcdd3; background: transparent; border: 1px solid #40535f; min-height: 36px; padding: 8px 17px; font: 10px var(--utility); }
.map-layout { position: relative; width: min(100%,2750px,calc((100svh - 110px) * 1.7916667)); margin: auto; isolation: isolate; }
.map-board { position: relative; width: 100%; aspect-ratio: 2752 / 1536; min-width: 0; background: #0b1120; }
.world-before, .world-diagram { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: fill; image-rendering: auto; }
.world-before { max-width: none; }
.world-diagram { pointer-events: none; overflow: hidden; }
.world-art { contain: layout style; }
.world-city { --city-breath: 1; }
.city-aura { fill: #eac579; opacity: 0; filter: blur(7px); }
.city-ring { fill: #0c1423; stroke: #718692; stroke-width: .7; opacity: .65; }
.city-node { fill: #738993; }
.world-city[data-status="available"] .city-ring { stroke: #f5d695; opacity: 1; }
.world-city[data-status="available"] .city-node { fill: #fff2d2; filter: drop-shadow(0 0 4px #ffd77b); }
.world-city[data-status="available"] .city-aura { opacity: .14; }
.world-city[data-status="online"] .city-aura { opacity: calc(.2 * var(--city-breath)); }
.world-city[data-status="online"] .city-ring { stroke: #f5d695; opacity: calc(.6 + .4 * var(--city-breath)); }
.world-city[data-status="online"] .city-node { fill: #fff2d2; filter: drop-shadow(0 0 4px #f5d695); opacity: calc(.65 + .35 * var(--city-breath)); }
.connection-core { fill: none; stroke: #f5d695; stroke-width: .75; stroke-linejoin: round; stroke-linecap: round; opacity: 0; }
[data-powered="true"] .connection-core { opacity: calc(.23 * var(--wire-light,1)); filter: drop-shadow(0 0 3px #f5d695); }
.connection-current { fill: none; stroke: #f5d695; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: var(--soak-offset,100); opacity: var(--soak-light,0); filter: blur(3px); }
/* After the restored SVG in DOM order; keep AREA labels (z-index 3) above Pico. */
.world-pico { --pico-side-used: var(--pico-side,-56px); position: absolute; width: clamp(44px,5vw,68px); transform: translate(calc(-50% + var(--pico-side-used)),calc(-100% + var(--pico-y,4px))); z-index: 2; pointer-events: none; }
.world-pico-hover { display: block; animation: map-pico-hover 2.8s ease-in-out infinite; }
.world-pico img { display: block; width: 100%; height: auto; filter: drop-shadow(0 0 5px #f5d69580); }
.world-pico img[hidden],.world-pico-fallback[hidden] { display: none; }
.world-pico-fallback { display: block; color: #fff2d2; text-align: center; font: 10px var(--utility); text-shadow: 0 0 6px #f5d695; }
@keyframes map-pico-hover { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.map-board[data-reduced-motion="true"] .world-pico-hover { animation: none; }
/* CORE sits below SKYLINE's long label; the small Garden map needs space beside its neighbours. */
@media (min-width: 501px) { .world-pico[data-location="4"] { --pico-side-used: -108px; } }
@media (max-width: 360px) { .world-pico[data-location="0"] { --pico-side-used: -60px; --pico-y: 18px; } }
.map-node { position: absolute; width: 44px; height: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; transform: translate(-50%,-50%); color: #bdcad3; }
.map-node:hover, .map-node:active { background: transparent; transform: translate(-50%,-50%); }
.map-node-beacon { position: absolute; inset: 6px; border: 1px solid transparent; border-radius: 50%; transition: border-color .25s, box-shadow .25s; }
.map-node:hover .map-node-beacon, .map-node[aria-pressed="true"] .map-node-beacon { border-color: #f5d695a1; box-shadow: 0 0 15px #f5d69533,inset 0 0 8px #f5d69522; }
.map-node:focus-visible { outline: 2px solid #fff2d2; outline-offset: 3px; }
.map-node-label { position: absolute; top: 40px; left: 50%; transform: translateX(-50%); width: max-content; max-width: 160px; text-align: center; text-shadow: 0 1px 4px #030915,0 2px 10px #030915,0 0 8px #030915; pointer-events: auto; }
.map-node b { display: block; font: 12px var(--utility); letter-spacing: .08em; }
.map-node-number { color: #95aab5; font-size: 9px; }
.map-node small { display: block; margin-top: 3px; font: 10px 'Yu Gothic UI',sans-serif; color: #bacbd0; }
.map-node em { display: block; margin-top: 5px; color: #9db1bc; font: 8px var(--utility); letter-spacing: .12em; }
.map-node[data-status="available"] b, .map-node[data-status="available"] em, .map-node[data-status="online"] b { color: var(--map-ivory); }
.map-node[data-status="online"] em { color: #efcf95; }
.map-node[data-status="locked"] .map-node-label { opacity: .7; }
.map-intro { position: absolute; z-index: 1; top: 3%; left: 2.8%; max-width: 205px; pointer-events: none; text-shadow: 0 2px 10px #030915; }
.map-kicker { font: 9px var(--utility); letter-spacing: .14em; color: #93b0be; margin: 0 0 12px; }
.map-intro h1 { font: 22px/1 var(--utility); letter-spacing: .04em; margin: 13px 0; }
.map-intro h1 br { display: none; }.map-intro h1 span { margin-left: .2em; color: #bdcdd7; }
.map-copy { font-size: 11px; line-height: 2; letter-spacing: .08em; color: #c4d0d4; }
.map-progress { margin-top: 23px; display: grid; gap: 8px; }
.map-progress strong { color: var(--map-ivory); font: 24px var(--utility); }.map-progress strong span { font-size: 12px; color: #869aa8; }
.map-progress > span { font: 8px var(--utility); letter-spacing: .15em; color: #9ab1be; }
#map-progress-lights { display: flex; gap: 5px; }#map-progress-lights i { width: 15px; height: 2px; background: #34404b; }#map-progress-lights i.online { background: #f5d695; box-shadow: 0 0 6px #f5d69555; }
.map-notice { font: 11px/1.8 var(--utility),'Yu Gothic UI',sans-serif; max-width: 205px; color: var(--map-gold); margin-top: 18px; }.map-notice.is-locked { color: #afbec8; }
.map-detail, .journey-ending { position: absolute; z-index: 1; right: 2.8%; bottom: 3%; width: clamp(196px,13vw,260px); padding: 16px 0 0 15px; border-left: 1px solid #d7be7b50; background: linear-gradient(90deg,#070e17a8,#070e1700); text-shadow: 0 2px 8px #030915; }
.map-detail h2 { margin: 0 0 5px; font: clamp(24px,2vw,32px)/1 var(--utility); letter-spacing: .035em; }
#map-area-ja { margin: 0 0 12px; font-size: 12px; letter-spacing: .14em; color: #c0d1d6; }
#map-area-status { font: 8px var(--utility); letter-spacing: .07em; color: var(--map-gold); }
#map-area-description { margin: 12px 0; font-size: 11px; line-height: 1.8; color: #b2c4ce; }
.map-detail dl { display: flex; gap: 20px; margin: 14px 0; font: 9px var(--utility); }.map-detail dl div { display: grid; gap: 5px; }.map-detail dt { color: #8aa6b6; }.map-detail dd { color: #d6e1df; margin: 0; }
#map-enter { width: 100%; min-height: 44px; padding: 12px; border: 1px solid #efd79f; background: #f0d59d; color: #16202a; font: bold 11px var(--utility); display: flex; align-items: center; justify-content: space-between; gap: 8px; text-shadow: none; }
#map-enter b { font-size: 18px; }#map-enter:disabled { background: #152330; border-color: #3d5160; color: #a8bdc9; opacity: .85; }
#world-map #map-training { width: 100%; min-height: 52px; margin-top: 9px; padding: 10px; background: #0c1724c7; border-color: #8e805c; gap: 8px; }
#world-map #map-training strong { font-size: 10px; }#world-map #map-training span { font-size: 10px; }
.map-session-note { margin: 10px 0 0; font-size: 9px; line-height: 1.7; color: #a1b4c0; }
.map-footer { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; font: 8px var(--utility); letter-spacing: .1em; color: #9bb0bd; }
.map-footer i { display: inline-block; width: 5px; height: 5px; border: 1px solid #607886; margin: 0 7px 0 14px; }.map-footer i:first-child { margin-left: 0; }.map-key-online { background: #f5d695; }.map-key-pico { background: #f5d695; transform: rotate(45deg); }
.map-art-message { position: absolute; z-index: 2; left: 50%; top: 60%; transform: translate(-50%,-50%); width: max-content; max-width: 90%; padding: 12px 16px; background: #07111fee; color: #c4d8df; font-size: 12px; text-align: center; }
.map-art-message button { display: block; margin: 12px auto 0; min-height: 44px; padding: 8px 15px; background: #f5d695; color: #101a27; border: 1px solid #fff2d2; }.map-art-message button[hidden] { display: none; }
.area-caption { position: absolute; top: 9px; left: 13px; color: #91aebc; font: 9px var(--utility); letter-spacing: .075em; pointer-events: none; z-index: 2; }
.area-transition[hidden] { display: none; }
.area-transition { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 10px; z-index: 12; pointer-events: auto; background: #06101adb; color: #fff1ce; }
.area-transition > span { font: 12px var(--utility),"Yu Gothic UI",sans-serif; letter-spacing: .14em; }
.area-transition strong { font: clamp(38px,5vw,70px)/1 var(--display); letter-spacing: .035em; }
.area-transition small { font: 10px var(--utility); color: #b8c5bf; margin-top: 8px; }
.area-transition.is-restoring { background: transparent; justify-content: flex-end; padding-bottom: 9%; text-shadow: 0 2px 16px #030911; }
.area-transition.is-restoring strong { font-size: clamp(29px,3.7vw,54px); }
.restoring-area #wave-banner, .restoring-area #callout { visibility: hidden; }
/* The completed atlas stays in view while the epilogue occupies the area-detail column. */
.world-map { position: relative; }
.map-detail[hidden],.journey-ending[hidden],.world-sync[hidden],.stage-loading-actions[hidden] { display: none; }
.area-transition.is-restoring > :not(.stage-loading-actions) { opacity: 0; transform: translateY(5px); transition: opacity .35s ease, transform .35s ease; }
.area-transition.is-revealed > :not(.stage-loading-actions) { opacity: 1; transform: none; }
.area-transition.is-revealed { background: linear-gradient(transparent 60%,#0308115c); }
.stage-loading-actions { display: flex; gap: 12px; margin-top: 12px; }
.stage-loading-actions button { padding: 10px 16px; min-height: 44px; border: 1px solid #af9867; color: #f3daa4; background: #0b1524; font: 12px var(--utility); }
.world-sync { position: absolute; inset: 43% auto auto 48%; transform: translate(-50%,-50%); pointer-events: none; color: #fff0bd; font: clamp(32px,4vw,65px)/1 var(--display); letter-spacing: .25em; text-shadow: 0 0 22px #e5bc7066,0 3px 12px #020716; }
.is-synchronizing .map-detail { opacity: .35; pointer-events: none; }
.is-ending .map-board { filter: drop-shadow(0 0 18px #f4c5650c); }
.journey-ending { padding: 20px 0 20px 22px; border-left: 1px solid #a18d665e; color: #f6e7c6; animation: epilogue-arrives 1.2s ease both; }
.journey-ending h2 { margin: 23px 0; font: clamp(28px,2.8vw,52px)/1 var(--display); letter-spacing: .01em; white-space: nowrap; }
.journey-ending h2 span { color: #f4c565; }
.ending-copy { font: 14px/2.3 "Yu Gothic UI",sans-serif; letter-spacing: .06em; }
.ending-english { font: 9px/1.8 var(--utility); letter-spacing: .1em; color: #b3c4c5; }
.ending-small { margin-top: 40px; font: 10px/1.8 var(--utility); letter-spacing: .1em; color: #a29b89; }
.ending-score { margin: 28px 0; display: flex; justify-content: space-between; gap: 12px; font: 11px var(--utility); color: #8ca6b3; }
.ending-score strong { color: #f4db9e; font-weight: normal; }
.ending-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.ending-actions button { min-height: 44px; padding: 12px 16px; font: 11px var(--utility); color: #131b22; background: #ead09a; border: 1px solid #f4e0b7; }
.ending-actions button:last-child { color: #c5d2d0; background: transparent; border-color: #51606a; }
@keyframes epilogue-arrives { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@media(max-width:700px) {
  .journey-ending { padding: 18px 8px; border-left: 0; border-top: 1px solid #a18d665e; text-align: center; }
  .journey-ending h2 { font-size: 44px; margin: 18px 0; }.ending-small { margin-top: 18px; }.ending-actions { justify-content: center; }
  .world-sync { left: 50%; top: 37%; }.ending-score { justify-content: center; }
}
@media(prefers-reduced-motion:reduce) { .journey-ending { animation: none; }.area-transition.is-restoring > :not(.stage-loading-actions) { transform: none; transition: none; } }

/* Map-only responsive overrides: the artwork and its nodes never use separate coordinate spaces. */
.world-map .world-sync { left: 50%; top: 50%; font-size: clamp(32px,4vw,64px); }
.world-map .journey-ending { padding: 16px 0 0 15px; }
.world-map .journey-ending h2 { margin: 14px 0; font-size: clamp(26px,2.5vw,43px); }
.world-map .ending-copy { font-size: 12px; line-height: 2.1; }.world-map .ending-small { margin-top: 18px; font-size: 9px; }.world-map .ending-score { margin: 20px 0; }
.is-synchronizing .map-detail { opacity: 0; }.is-ending .map-board { filter: none; }
@media (max-height: 850px) and (min-width: 1001px) {
  .map-copy { display: none; }.map-progress { margin-top: 14px; }
  .map-detail { padding-top: 8px; }.map-detail .map-kicker { margin-bottom: 8px; }
  #map-area-description,.map-session-note { display: none; } .map-detail dl { margin: 9px 0; }
  .map-detail dl div { display: flex; align-items: center; gap: 8px; }
  #map-area-ja { margin-bottom: 8px; }
  .map-detail h2 { font-size: 26px; } .map-session-note { font-size: 8px; }
}
@media (max-width: 1000px) {
  .world-map { padding: 15px 16px; }.map-layout { width: min(100%,900px); display: flex; flex-direction: column; }
  .map-intro { position: static; max-width: none; width: 100%; display: flex; align-items: center; flex-wrap: wrap; gap: 12px 24px; padding: 12px 0 18px; }
  .map-intro .map-kicker,.map-copy,.map-progress > span { display: none; }.map-intro h1 { margin: 0; font-size: 24px; }.map-progress { margin: 0; gap: 5px; }.map-progress strong { font-size: 20px; }.map-notice { margin: 0; max-width: 300px; }
  .map-detail,.world-map .journey-ending { position: static; width: 100%; margin-top: 42px; padding: 18px 0 0; border-left: 0; border-top: 1px solid #6b745b66; background: none; }
  .map-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 20px; }.map-detail h2,#map-area-ja { grid-column: 1; margin: 0; }.map-detail .map-kicker { margin: 0; }
  #map-area-status { grid-column: 2; grid-row: 1; text-align: right; }.map-detail dl { grid-column: 2; grid-row: 2/4; margin: 0; justify-content: flex-end; align-self: center; }
  #map-area-description { grid-column: 1/-1; margin: 6px 0; }#map-enter,#world-map #map-training,.map-session-note { grid-column: 1/-1; }
  .world-map .journey-ending { text-align: center; }.ending-score,.ending-actions { justify-content: center; }
  .map-node b { font-size: 10px; }.map-node small { font-size: 9px; }.map-node em { font-size: 7px; margin-top: 3px; }
  .map-footer > span:last-child { display: none; }.map-header .masthead-logo small { display: none; }
}
@media (max-width: 500px) {
  .world-map { padding: 12px; }.map-node-label { top: 34px; }.map-node b { font-size: 9px; letter-spacing: .01em; }.map-node small,.map-node em { display: none; }.map-node-number { font-size: 8px; }
  .map-node[data-area="3"] .map-node-label { top: auto; bottom: 33px; }
  .map-notice { font-size: 10px; }.map-header .masthead-logo { font-size: 22px; }.map-detail { margin-top: 30px; }
}
@media (prefers-reduced-motion: reduce) { .map-node-beacon { transition: none; }.world-pico-hover { animation: none; } }
@media (max-width: 700px) { .area-caption { font-size: 8px; top: 6px; left: 9px; } }