/* Author: goodjava@qq.com */
.journey.landscape {
  --map-ink: #263e34;
  --map-gold: #f4d38b;
  --map-sidebar: clamp(195px, 16.5vw, 290px);
  display: grid;
  grid-template-columns: var(--map-sidebar) minmax(0, 1fr);
  padding: 58px 0 0;
  gap: 0;
  color: #f1e6c9;
  background: #526b60;
}
.landscape::after { content: ''; position: absolute; inset: 0 0 auto; height: 57px; z-index: 2; background: #1e3029; border-bottom: 1px solid #b59a6077; pointer-events: none; }
.landscape-brand { position: absolute; top: 8px; left: 27px; z-index: 23; font-size: 30px; letter-spacing: .09em; line-height: 1.3; pointer-events: none; }
.landscape-brand > span { display: inline-block; font-size: 11px; color: #b66b4b; border: 1px solid; margin-left: 10px; padding: 1px 2px; vertical-align: middle; }
.landscape-vitals { position: absolute; top: 15px; left: calc(var(--map-sidebar) + 33px); display: flex; gap: 30px; z-index: 23; font-size: 16px; letter-spacing: .08em; pointer-events: none; }
.landscape-vitals > span + span { border-left: 1px solid #bba77566; padding-left: 30px; }
.landscape-vitals b { color: #eed69f; margin-left: 8px; font-size: 22px; font-weight: 500; }
.landscape-vitals small { font-size: 16px; }
.stage:has(.landscape) .game-nav { height: 58px; padding: 7px 20px; justify-content: flex-end; background: transparent; border-bottom-color: transparent; box-shadow: none; }
.stage:has(.landscape) .game-nav > div:first-child { display: none; }
.stage:has(.landscape) .nav-actions { gap: 17px; }
.stage:has(.landscape) .nav-actions .quiet { border: 0; border-radius: 0; color: #e9dfc3; padding: 5px 8px; font-size: 15px; letter-spacing: .08em; }
.stage:has(.landscape) .nav-actions .quiet + .quiet { border-left: 1px solid #a48c5b66; padding-left: 20px; }
.landscape .journey-aside { position: relative; z-index: 2; overflow: hidden; padding: 42px 25px 22px; background: linear-gradient(120deg,#273e35f0,#182e29f5),url('/art/interface-v2/landscape-map/terrain.webp') 0 50% / auto 100%; border-right: 1px solid #b49c6777; }
.landscape .journey-aside::before { content: ''; position: absolute; inset: 15px 12px; border: 1px solid #a18d5638; pointer-events: none; }
.landscape .journey-title { position: relative; inset: auto; display: block; padding: 0; z-index: 1; }
.landscape-volume { border: 1px solid #ab925eaa; text-align: center; color: #dbcca8; padding: 6px 0; margin: 0 0 25px !important; letter-spacing: .3em; clip-path: polygon(6% 0,94% 0,100% 50%,94% 100%,6% 100%,0 50%); }
.landscape .journey-title h2 { font-size: clamp(44px, 4.4vw, 72px); letter-spacing: .12em; margin: 0; line-height: 1.45; color: #f2e7c7; font-weight: 500; }
.landscape .landscape-chapter { font-size: 15px; letter-spacing: .22em; color: #ccbd94; margin-top: 5px; }
.landscape .journey-progress { margin-top: 28px; padding-top: 19px; border-top: 1px solid #a28d5b77; z-index: 1; }
.landscape .journey-progress > div:first-child { font-size: 14px; color: #d6ccb0; letter-spacing: .08em; }
.landscape .journey-progress b { font-size: 27px; color: #f1dfaf; }
.landscape .journey-progress small { font-size: 15px; color: #c1bea3; }
.landscape .progress-marks { margin-top: 15px; gap: 3px; }
.landscape .progress-marks i { height: 2px; background: #8d9a7b55; }
.landscape .progress-marks i.done { background: #a2b095; }
.landscape .progress-marks i.now { background: #e5c47d; }
.landscape .journey-guardian { margin: 15px -40px 0; flex: 1; min-height: 140px; }
.landscape .journey-guardian img { height: 125%; width: 145%; left: -24%; top: 0; object-position: center top; filter: saturate(.8); opacity: .95; }
.landscape .journey-guardian::after { inset: 60% 0 0; background: linear-gradient(transparent,#1c322be8 85%); }
.landscape .journey-guardian figcaption { bottom: 5px; left: 40px; }
.landscape .journey-guardian figcaption small { color: #babd9d; letter-spacing: .13em; font-size: 11px; }
.landscape .journey-guardian figcaption b { color: #eddbac; font-size: 23px; }
.landscape-objective { font-size: 11px; line-height: 1.85; color: #b6bca5; margin: 7px 0 0; z-index: 1; }
.landscape .journey-board { position: relative; display: flex; border: 0; border-radius: 0; overflow: hidden; background: #afbaaa url('/art/interface-v2/landscape-map/terrain.webp') center / cover; box-shadow: none; }
.landscape .journey-board::before { content: ''; position: absolute; inset: 0; z-index: 0; background: linear-gradient(#172f2980,transparent 24%,transparent 85%,#263f3444); pointer-events: none; }
.landscape .route-heading { position: relative; inset: auto; flex: 0 0 108px; box-sizing: border-box; z-index: 3; padding: 20px 38px 13px; align-items: start; border: 0; background: linear-gradient(#1b332958,transparent); pointer-events: none; }
.landscape .route-heading h3 { font-size: clamp(28px, 3vw, 43px); color: #f5e7bf; letter-spacing: .13em; text-shadow: 0 2px 7px #16382bc0; }
.landscape .route-heading p { font-size: 13px; color: #ebdbb7; letter-spacing: .22em; margin: 9px 0 0; text-shadow: 0 1px 5px #193b2d; }
.landscape .map-legend { gap: 15px; margin-top: 8px; font-size: 10px; color: #f5ead3; text-shadow: 0 1px 4px #173b2c; }
.landscape .map-legend i { width: 6px; height: 6px; border-color: #ddd5b8; }
.landscape .map-legend i.gold { background: #e9c36f; border-color: #e9c36f; box-shadow: 0 0 8px #f5cd79; }
.landscape .map-legend i.jade { background: #88b395; border-color: #b9cfac; }
.landscape .map-scroll { position: relative; flex: 1; margin: 0; inset: auto; z-index: 1; border: 0; background: none; overflow: auto; scrollbar-width: thin; scrollbar-color: #b5a67a80 transparent; overscroll-behavior: contain; scroll-behavior: auto; -webkit-mask-image: linear-gradient(transparent,#000 28px,#000 calc(100% - 13px),transparent); mask-image: linear-gradient(transparent,#000 28px,#000 calc(100% - 13px),transparent); }
.landscape .route-canvas { height: var(--map-height); min-width: 600px; }
.landscape .route-lines path { fill: none; stroke: #344d3de0; stroke-width: 2px; stroke-dasharray: 5 6; stroke-linecap: round; }
.landscape .route-lines .route-walked { stroke: #51745c; stroke-width: 3px; stroke-dasharray: 7 5; }
.landscape .route-lines .route-open { stroke: #ffe3a0; stroke-width: 3px; stroke-dasharray: 0; filter: drop-shadow(0 0 3px #aa721e) drop-shadow(0 0 4px #f6c66b); }
.landscape .route-node.landmark { width: clamp(106px, 10vw, 154px); height: 114px; z-index: 2; outline-offset: 0; }
.landscape .route-node.landmark.locked { opacity: 1; cursor: default; }
.landscape .route-node.landmark i { display: block; width: 100%; height: 100%; border: 0; border-radius: 0; background: none; box-shadow: none; transform: none; position: relative; }
.landscape .route-node.landmark:hover:not(:disabled) i { background: none; box-shadow: none; }
.landscape .route-node.landmark .landmark-art { position: absolute; inset: 0 0 auto auto; width: 91%; height: 100%; object-fit: contain; object-position: center 65%; transform: none; filter: drop-shadow(0 4px 2px #233e3330); user-select: none; pointer-events: none; }
.landscape .route-node.landmark.locked .landmark-art { filter: saturate(.76) drop-shadow(0 3px 2px #213c2830); }
.landscape .route-node.landmark .landmark-label { position: absolute; z-index: 3; left: 0; top: 38px; margin: 0; box-sizing: border-box; width: 31px; padding: 6px 3px 5px; display: flex; flex-direction: column; align-items: center; gap: 2px; background: linear-gradient(120deg,#f8efd7,#d9cba8); border: 1px solid #7c7856; clip-path: polygon(5px 0,calc(100% - 4px) 0,100% 5px,100% calc(100% - 5px),calc(100% - 5px) 100%,5px 100%,0 calc(100% - 5px),0 5px); color: #263b2e; box-shadow: 0 2px 5px #213d2d3a; }
.landscape .landmark-label svg { position: static; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8px; stroke-linecap: round; stroke-linejoin: round; transform: none; }
.landscape .route-node .landmark-label > span { font-size: 11px; font-weight: 600; line-height: 1.25; letter-spacing: 0; color: inherit; margin: 0; white-space: nowrap; }
.landscape .route-node.boss .landmark-label > span { font-size: 10px; }
.landscape .landmark-ring { display: none; position: absolute; left: 9%; right: -2%; height: 31%; bottom: 0; border: 2px solid #f6d691; border-radius: 50%; transform: rotate(-8deg); box-shadow: 0 0 8px #ffe7a1, inset 0 0 6px #f9d589; pointer-events: none; }
.landscape .landmark-ring::after { content: ''; position: absolute; inset: -5px 4px; border: 1px solid #fff0b5c9; border-radius: inherit; transform: rotate(13deg); border-left-color: transparent; border-right-color: transparent; }
.landscape .available .landmark-ring { display: block; }
.landscape .available .landmark-label { background: linear-gradient(120deg,#fff0c1,#e7c777) !important; border-color: #987239 !important; color: #664619 !important; }
.landscape .landmark.available:hover .landmark-art, .landscape .landmark.available:focus-visible .landmark-art { filter: brightness(1.1) drop-shadow(0 0 7px #f9d888); transform: translateY(-3px); }
.landscape .landmark.available:hover .landmark-ring { box-shadow: 0 0 14px #ffecb1,inset 0 0 9px #ffe09b; }
.landscape .route-node.visited .landmark-art { filter: saturate(.6) brightness(.88); }
.landscape .route-node.visited .landmark-label { color: #344f3e; background: #c7d2b5; border-color: #6a8264; }
.landscape .route-node.current .landmark-art { width: 70%; left: 18%; height: 68%; top: 30px; }
.landscape .route-node.current .landmark-ring { display: block; bottom: 17px; left: 18%; right: 3%; border-color: #bfd7aa; box-shadow: 0 0 12px #b1cca4; height: 22%; }
.landscape .route-node.current .landmark-label { top: 46px; }
.landscape .route-node.current i::after { display: none; }
.landscape .landmark-caption { position: absolute; bottom: -17px; left: 0; right: 0; font-size: 11px; color: #293e30; letter-spacing: .09em; text-shadow: 0 1px 3px #f3f0d8,0 0 5px #f5f0d3; white-space: nowrap; }
.landscape .route-node.current .landmark-caption { bottom: -1px; }
.landscape .landmark.art-unavailable .landmark-art { display: none; }
.landscape .landmark.art-unavailable .landmark-label { left: 35%; width: 40px; }
.landscape-origin { position: absolute; transform: translate(-50%,-50%); width: 78px; text-align: center; }
.landscape-origin img { width: 63px; height: 44px; object-fit: contain; filter: drop-shadow(0 2px 3px #274c39); }
.landscape-origin span { display: block; font-size: 11px; color: #304934; text-shadow: 0 1px 3px #f5ecca; letter-spacing: .12em; }
.landscape-scroll-hint { position: absolute; z-index: 2; bottom: 114px; right: 22px; margin: 0; padding: 4px 8px; color: #f0e5c7; font-size: 10px; letter-spacing: .13em; background: #29473c9c; border-radius: 2px; pointer-events: none; }
.landscape-scroll-hint span { display: none; }
.landscape .route-footer { position: relative; flex-shrink: 0; padding: 12px 23px; border-top: 1px solid #c0a46499; background: linear-gradient(115deg,#1c342cee,#2b4337f2); box-shadow: 0 -4px 20px #17352822; z-index: 4; }
.landscape .route-footer > .route-choices:first-child { display: flex; align-items: stretch; gap: 0; margin: 0; scrollbar-width: thin; scrollbar-color: #ad996966 transparent; }
.landscape .route-choice { flex: 1 0 172px; min-width: 172px; max-width: none; border: 0; border-radius: 0; box-shadow: none; background: transparent; padding: 10px 19px; gap: 12px; min-height: 58px; box-sizing: border-box; }
.landscape .route-choice + .route-choice { border-left: 1px solid #b9a16b77; }
.landscape .route-choice:hover { background: #bda36212; }
.landscape .route-choice > svg { flex-basis: 28px; width: 28px; height: 28px; color: #ead29a; stroke: currentColor; }
.landscape .route-choice b { color: #f1e4bc; font-weight: 500; font-size: 17px; letter-spacing: .07em; }
.landscape .route-choice span { margin-top: 5px; font-size: 10px; color: #bdc4a9; }
.landscape .route-footer .route-choices > .route-choice span { color: #bdc4a9; }
.landscape .route-choice em { font-size: 22px; color: #bba36d; }
.landscape-finished { margin: 12px; font-size: 14px; color: #d7c8a3; }
@media (min-width: 1700px) {
  .landscape .journey-aside { padding: 48px 35px 26px; }
  .landscape .route-node.landmark { height: 124px; }
  .landscape .landmark-label { top: 45px; }
}
@media (max-width: 1100px) {
  .journey.landscape { --map-sidebar: 180px; }
  .landscape-brand { left: 20px; font-size: 25px; top: 12px; }
  .landscape-vitals { left: 205px; gap: 15px; font-size: 13px; top: 18px; }
  .landscape-vitals b { font-size: 17px; }
  .landscape-vitals small { font-size: 12px; }
  .landscape-vitals > span + span { padding-left: 15px; }
  .landscape .journey-aside { padding: 30px 19px 18px; }
  .landscape .journey-title h2 { font-size: 45px; }
  .landscape .landscape-chapter { font-size: 12px; }
  .landscape .journey-progress > div:first-child { font-size: 12px; }
  .landscape .route-heading { padding: 22px 25px; }
  .landscape .map-legend { gap: 9px; font-size: 9px; }
  .landscape .route-choice { padding-inline: 13px; }
}
@media (max-width: 700px) {
  .journey.landscape { display: flex; flex-direction: column; padding-top: 56px; gap: 0; }
  .landscape::after { height: 55px; }
  .landscape-brand { left: 12px; top: 8px; font-size: 22px; }
  .landscape-brand > span { font-size: 8px; margin-left: 5px; }
  .landscape-vitals { top: 36px; left: 13px; gap: 12px; font-size: 10px; letter-spacing: 0; }
  .landscape-vitals b { font-size: 11px; margin-left: 3px; }
  .landscape-vitals small { font-size: 10px; }
  .landscape-vitals > span + span { border: 0; padding: 0; }
  .stage:has(.landscape) .game-nav { height: 55px; padding: 6px 10px; }
  .stage:has(.landscape) .nav-actions { gap: 1px; }
  .stage:has(.landscape) .nav-actions .quiet { font-size: 12px; padding: 5px 7px; min-height: 42px; }
  .stage:has(.landscape) .nav-actions .quiet + .quiet { padding-left: 8px; }
  .landscape .journey-aside { display: flex; flex-direction: row; align-items: center; flex: 0 0 auto; gap: 15px; padding: 11px 16px; border: 0; border-bottom: 1px solid #ac95685e; }
  .landscape .journey-aside::before { display: none; }
  .landscape .journey-title { flex: 1; min-width: 0; }
  .landscape .landscape-volume { display: none; }
  .landscape .journey-title h2 { margin: 0; font-size: 24px; display: inline; }
  .landscape .landscape-chapter { display: inline; font-size: 10px; letter-spacing: .06em; margin-left: 9px; }
  .landscape .journey-progress { display: block; width: 96px; margin: 0; padding: 0; border: 0; }
  .landscape .journey-progress > div:first-child { font-size: 9px; gap: 6px; }
  .landscape .journey-progress b { font-size: 16px; }
  .landscape .journey-progress small { font-size: 10px; }
  .landscape .progress-marks { margin-top: 6px; gap: 2px; }
  .landscape .landscape-objective, .landscape .journey-guardian { display: none; }
  .landscape .journey-board { flex: 1; }
  .landscape .route-heading { padding: 14px 17px; display: block; flex-basis: 104px; }
  .landscape .route-heading h3 { font-size: 25px; }
  .landscape .route-heading p { font-size: 10px; margin-top: 5px; }
  .landscape .map-legend { margin-top: 8px; gap: 12px; font-size: 9px; }
  .landscape .route-canvas { min-width: 600px; }
  .landscape .route-node.landmark { width: 104px; height: 104px; }
  .landscape .route-node.landmark .landmark-label { top: 36px; width: 30px; }
  .landscape .route-footer { padding: 7px 5px 8px; }
  .landscape .route-choice { min-width: 160px; flex-basis: 160px; min-height: 60px; padding: 8px 13px; gap: 9px; }
  .landscape .route-choice b { font-size: 15px; }
  .landscape .route-choice span { font-size: 9px; }
  .landscape .route-choice > svg { flex-basis: 24px; width: 24px; height: 24px; }
  .landscape-scroll-hint { bottom: 96px; right: 10px; font-size: 9px; }
  .landscape-scroll-hint span { display: inline; }
}
@media (max-height: 620px) and (min-width: 701px) {
  .journey.landscape { --map-sidebar: 158px; }
  .landscape .journey-aside { padding: 15px 16px; }
  .landscape .journey-title h2 { font-size: 36px; }
  .landscape .landscape-volume { font-size: 10px; padding: 3px; margin-bottom: 10px !important; }
  .landscape .journey-progress { margin-top: 13px; padding-top: 10px; }
  .landscape .landscape-objective { margin-top: auto; }
  .landscape .route-heading { padding: 9px 22px; flex-basis: 68px; }
  .landscape .route-heading h3 { font-size: 27px; }
  .landscape .route-heading p { font-size: 10px; margin-top: 5px; }
  .landscape .map-legend { margin-top: 4px; }
  .landscape .route-choice { min-height: 48px; padding-block: 6px; }
  .landscape .route-footer { padding: 6px 12px; }
  .landscape-scroll-hint { bottom: 96px; }
}