body.on-map .wrap { max-width: 1180px; padding-inline: max(24px, var(--safe-left)) max(24px, var(--safe-right)); }
.journey-heading { margin: 10px 0 20px; }
.journey-heading h3 { font-size: 24px; font-weight: 500; line-height: 1.5; }
.journey-heading > p:last-child { color: var(--ink-soft); font-size: 12px; margin-top: 10px; line-height: 1.8; }
.map-region-label { display: flex; align-items: center; gap: 14px; font-size: 12px; color: var(--ink-soft); margin-bottom: 16px; }
.map-region-label select { min-width: 0; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 7px; font: inherit; font-size: 14px; color: var(--ink); background: #f8f5eb; }
.journey-layout { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.journey-map { position: relative; isolation: isolate; min-height: 410px; overflow: hidden; border: 1px solid #b9c8bc; border-radius: 4px 18px 4px 18px; background: radial-gradient(ellipse at 80% 60%, #e2e8da 0, transparent 60%), #edf0e5; box-shadow: inset 0 0 0 7px #f9f6ea, inset 0 0 0 8px #cbd3c5, 0 12px 32px #3e59460b; }
.journey-map::before { content: ""; position: absolute; inset: 0; z-index: -1; background: repeating-radial-gradient(ellipse at -10% 105%, transparent 0 27px, #64867812 28px 29px, transparent 30px 44px); }
.island-sea { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.sea-wave { fill: none; stroke: #809f9470; stroke-width: .25; }
.voyage-route { fill: none; stroke: #9d9478; stroke-width: 1.5px; stroke-dasharray: 3 6; vector-effect: non-scaling-stroke; }
.map-land { fill: #eee7d5; fill: color-mix(in srgb, var(--island-color) 12%, #f7f2de); stroke: #fcfaec; stroke-width: 6px; paint-order: stroke; vector-effect: non-scaling-stroke; }
.map-land.visited { fill: #e1e6c9; fill: color-mix(in srgb, var(--island-color) 22%, #f7f2de); }
.map-land.mastered { fill: #c8dbb9; fill: color-mix(in srgb, var(--island-color) 35%, #f7f2de); }
.map-land.selected { stroke: var(--island-color); stroke-width: 2px; }
.map-compass { position: absolute; right: 24px; top: 22px; width: 60px; height: 60px; border: 1px solid #76908666; border-radius: 50%; color: #4d7267; font-size: 8px; text-align: center; display: grid; justify-items: center; align-content: center; gap: 3px; transform: rotate(9deg); }
.map-compass img { width: 30px; height: 30px; object-fit: contain; opacity: .65; }
.sea-label { position: absolute; left: 25px; top: 26px; color: #4d645b; letter-spacing: .13em; display: grid; gap: 6px; }
.sea-label > span { font-size: 16px; }
.sea-label > small { font-size: 9px; letter-spacing: .1em; opacity: .8; }
.map-sea-caption { position: absolute; bottom: 26px; left: 0; width: 100%; text-align: center; color: #687e70; font-size: 11px; letter-spacing: .18em; }
.island-node { position: absolute; transform: translate(-50%,-50%); width: 29%; max-width: 176px; min-height: 144px; padding: 7px 5px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: #344c48; cursor: pointer; font: inherit; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; transition: background .2s, border-color .2s; }
.island-node:hover { background: #fffdf070; border-color: #84968655; }
.island-node[aria-pressed="true"] b { text-decoration: underline; text-decoration-color: var(--island-color); text-underline-offset: 5px; }
.island-scenery { position: relative; width: 112px; height: 58px; flex: 0 0 auto; color: var(--island-color); }
.island-motif { width: 88px; height: 58px; display: block; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.island-cover { position: absolute; right: 0; bottom: 0; width: 35px; height: 35px; object-fit: cover; border: 3px solid #f9f6e9; box-shadow: 0 1px 3px #30433b36; transform: rotate(8deg); }
.island-node b { display: block; max-width: 100%; font-size: 15px; font-weight: 500; line-height: 1.6; overflow-wrap: anywhere; }
.island-album { max-width: 100%; min-height: 28px; display: grid; place-items: center; font-size: 10px; line-height: 1.4; overflow-wrap: anywhere; color: #53665b; }
.island-node small { font-size: 10px; line-height: 1.6; color: #54695d; }
.island-pin { color: var(--island-color); font-family: sans-serif; }
.mastered .island-scenery::after { content: "已点亮"; position: absolute; top: -3px; right: -1px; font-size: 9px; color: #416855; background: #faf8e9; border: 1px solid #668976; border-radius: 3px; padding: 3px; transform: rotate(-13deg); }
.journey-map[data-columns="2"] .island-node { width: 43%; max-width: 175px; }
.map-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 18px; font-size: 11px; color: #4d6359; margin: 12px 0 6px; }
.map-note { font-size: 11px; color: var(--ink-soft); line-height: 1.8; margin: 10px 0; }
.map-island-detail { min-width: 0; padding: 24px; background: rgba(250,248,242,.97); border: 1px solid var(--line); border-radius: 4px; scroll-margin-top: max(20px, var(--safe-top)); box-shadow: 4px 4px 0 #ebe7db; }
.island-postcard { display: grid; grid-template-columns: 100px 1fr; gap: 18px; align-items: center; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px dashed var(--line); }
.postcard-cover { width: 100px; height: 100px; object-fit: cover; border: 5px solid #fffdf6; outline: 1px solid #d8d5c9; transform: rotate(-4deg); }
.island-postcard .island-motif { width: 62px; height: 40px; color: var(--island-color); margin-top: 8px; }
.island-status { font-size: 10px; color: #4d7267; margin-bottom: 7px; }
.postcard-title { font-size: 17px; line-height: 1.5; }
.island-story { font-size: 12px; line-height: 1.9; margin-top: 12px; color: #516054; }
.island-echo { font-size: 10px; line-height: 1.8; margin-top: 10px; color: var(--ink-soft); }
.map-island-detail h3 { font-weight: 500; font-size: 21px; line-height: 1.6; overflow-wrap: anywhere; }
.island-description { font-size: 12px; color: var(--ink-soft); margin: 16px 0 10px; }
.island-progress { height: 5px; background: #dee3d8; border-radius: 9px; overflow: hidden; }
.island-progress > span { display: block; height: 100%; background: #608567; }
.map-island-detail .btn { width: 100%; min-height: 48px; margin-top: 12px; font-size: 14px; border-radius: 8px; letter-spacing: .04em; }
.map-return { min-height: 44px; width: 100%; border: 0; background: transparent; font: inherit; color: var(--ink-soft); font-size: 12px; cursor: pointer; }
.island-song-details { margin-top: 12px; border-top: 1px solid var(--line); }
.island-song-details summary { min-height: 44px; padding: 13px 0; font-size: 12px; cursor: pointer; }
.island-song-details ol { list-style: none; max-height: min(240px, 38svh); overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding-right: 6px; }
.island-song-details[open] ol { animation: ui-panel-in .24s ease both; }
.island-song-details li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-block: 10px; border-top: 1px solid var(--line); font-size: 11px; line-height: 1.7; }
.island-song-details li > span { min-width: 0; overflow-wrap: anywhere; }
.island-song-details small { display: block; color: #4d7267; font-size: 10px; }
.island-song-details em { flex-shrink: 0; font-style: normal; color: var(--ink-soft); font-size: 10px; }
#screen-map :is(button, select, summary):focus-visible { outline: 2px solid #3d6358; outline-offset: 3px; }
#screen-map.active .journey-heading, #screen-map.active .journey-layout { animation: home-emerge .6s ease both; }
#screen-map.active .journey-layout { animation-delay: .12s; }
/* Same breakpoints when Toy reports a smaller embedded container. */
.toy-compact body.on-map .wrap { max-width: 540px; padding-inline: max(16px, var(--safe-left)) max(16px, var(--safe-right)); }
.toy-compact .journey-heading h3 { font-size: 20px; }
.toy-compact .journey-layout { grid-template-columns: minmax(0,1fr); gap: 12px; }
.toy-compact .map-region-label { gap: 10px; }
.toy-compact .map-region-label select { flex: 1; width: 100%; font-size: 13px; }
.toy-compact .map-island-detail { padding: 20px; }
@media (max-width: 760px) {
  body.on-map .wrap { max-width: 540px; padding-inline: max(16px, var(--safe-left)) max(16px, var(--safe-right)); }
  .journey-heading h3 { font-size: 20px; }
  .journey-layout { grid-template-columns: minmax(0,1fr); gap: 12px; }
  .map-region-label { gap: 10px; }
  .map-region-label select { flex: 1; width: 100%; font-size: 13px; }
  .map-island-detail { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  #screen-map, #screen-map * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}