/* Path's eight illustrated worlds. Controls and connecting trails stay live. */
.view-path .path-world { min-height: 0; padding: 0; overflow: visible; }
.view-path .path-world-head { max-width: none; margin: 0 0 8px; padding: 13px 16px; }
.view-path .path-world-title { min-width: 0; gap: 9px; }
.view-path .path-world-title h2 { font-size: clamp(18px, 2vw, 24px); }
.view-path .path-world-title > img { flex: 0 0 auto; }
.view-path .path-world-label { display: flex; align-items: center; gap: 6px; min-height: 32px; }
.view-path .path-world-label.page-help-heading { padding-inline-end: 0; }
.view-path .path-world-label > .page-help-button { position: relative; top: auto; right: auto; flex: 0 0 20px; width: 20px; height: 20px; margin: 0; border-radius: 50%; box-shadow: inset 0 1px #fffdf8, 0 2px #c4a98e; }
.view-path .path-world-label > .page-help-button svg { width: 12px; height: 12px; }
.view-path .path-world-label > .page-help-button::after { content: ''; position: absolute; inset: -6px; width: auto; height: auto; transform: none; }
.path-world-progress { display: grid; flex: 0 0 auto; gap: 6px; width: 112px; color: #625443; text-align: right; font: 800 11px/1.3 var(--sans); }
.path-world-progress progress { display: block; width: 100%; height: 9px; overflow: hidden; border: 0; border-radius: 10px; appearance: none; background: #ebe5db; }
.path-world-progress progress::-webkit-progress-bar { border-radius: 10px; background: #ebe5db; }
.path-world-progress progress::-webkit-progress-value { border-radius: 10px; background: #ea765f; }
.path-world-progress progress::-moz-progress-bar { border-radius: 10px; background: #ea765f; }
.view-path .path-world-content { position: relative; }
.view-path .path-world-content[hidden] { display: none; }
.view-path .path-nodes {
    --trail-face: #f4deb2; --trail-edge: #cba775; --trail-done: #f9cf92;
    grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 128px;
    max-width: 680px; padding: 106px 14% 106px; isolation: isolate;
}
.path-world-scenery { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: fill; pointer-events: none; user-select: none; border-radius: 0; mask-image: linear-gradient(to bottom, transparent, #000 3%, #000 96%, transparent); }
.view-path .path-node:nth-child(n) { transform: none; }
.view-path .path-node:nth-of-type(3n+2) { transform: translateY(23px); }
.view-path .path-node { width: 58px; height: 58px; color: #57432f; z-index: 2; }
.view-path .path-node::before {
    inset: 0; width: auto; height: auto; border: 2px solid #fff4dd;
    background: linear-gradient(145deg, #fff4d9, #ead3a7);
    box-shadow: inset 0 2px 0 #fffaf0, 0 5px 0 #b89a6c, 0 9px 12px #44352140;
}
.view-path .path-node > strong { width: auto; height: auto; border: 0; border-radius: 0; font: 900 22px/1 var(--sans); color: inherit; }
.view-path .path-node > strong::before, .view-path .path-node > strong::after { content: none; }
.view-path .path-node.locked { color: #655d50; opacity: 1; }
.view-path .path-node.locked::before { border-color: #ede7d9; background: linear-gradient(145deg, #f1eadb, #d7cdb8); box-shadow: inset 0 2px #faf7ef, 0 5px #a89d86, 0 9px 12px #44352135; }
.view-path .path-node.locked > strong { transform: translateY(-6px); font-size: 19px; }
.path-node-lock { position: absolute; bottom: 9px; left: calc(50% - 5px); width: 10px; height: 8px; box-sizing: border-box; border-radius: 2px; background: #786d5c; pointer-events: none; }
.path-node-lock::before { position: absolute; left: 2px; top: -5px; width: 6px; height: 6px; box-sizing: border-box; border: 2px solid #786d5c; border-radius: 5px 5px 0 0; content: ''; }
.view-path .path-node.completed::before { border-color: #fff5db; background: linear-gradient(145deg, #ffedbb, #efca82); box-shadow: inset 0 2px #fff9e9, 0 5px #b38b4f, 0 9px 12px #44352140; }
.view-path .path-node.current { z-index: 5; animation: none; }
.view-path .path-node.current::before { border-color: #fff0d5; background: linear-gradient(145deg, #ff9a72, #ea6b50); box-shadow: inset 0 2px #ffc6a5, 0 5px #b84f34, 0 0 0 7px #fff8de66, 0 10px 16px #77371550; }
.view-path .path-node.current > strong { color: #fff9ea; text-shadow: 0 2px #ba5238; font-size: 25px; }
.view-path .path-node:focus-visible { outline: 3px solid #473426; outline-offset: 9px; box-shadow: 0 0 0 8px #fff9e9; }
.view-path .path-node:hover:not(:disabled)::before { filter: brightness(1.07); }
.view-path .path-node:active:not(:disabled)::before { transform: translateY(3px); box-shadow: inset 0 2px 3px #57402c26, 0 2px #ad8b64; }
.view-path .path-node-stars { top: 64px; gap: 0; }
.view-path .path-node-stars .path-star { width: 21px; height: 21px; flex-basis: 21px; filter: drop-shadow(0 1px 1px #6c482955); }
.view-path .path-node.locked .path-node-stars { opacity: .6; }
.view-path .path-current-avatar { bottom: 63px; width: 29px; height: 29px; }
.path-current-guide { display: contents; }
.path-current-guide > img { position: absolute; width: 64px; height: 64px; object-fit: contain; left: -51px; bottom: 10px; pointer-events: none; filter: drop-shadow(0 4px 3px #62442138); }
.path-current-guide > span { position: absolute; bottom: 104px; left: 50%; transform: translateX(-50%); width: max-content; padding: 9px 12px; border: 1px solid #ffd9b7; border-radius: 12px; background: #eb795b; box-shadow: inset 0 1px #ffc9a7, 0 3px #b75436, 0 5px 12px #49321b26; color: #fffdf2; font: 800 12px/1.2 var(--sans); white-space: nowrap; }
.path-current-guide > span::after { content: ''; position: absolute; left: calc(50% - 5px); bottom: -6px; width: 10px; height: 10px; background: #eb795b; transform: rotate(45deg); border-right: 1px solid #b75436; border-bottom: 1px solid #b75436; }
.view-path .path-node.boss { width: 66px; height: 66px; }
.view-path .path-node.boss::before { border-radius: 18px 18px 12px 12px; border-width: 3px; }
.view-path .path-node.boss::after { content: '♜'; position: absolute; top: -24px; left: calc(50% - 16px); width: 32px; border-radius: 8px 8px 0 0; background: #ede0c6; color: #6c563d; font: 24px/27px Georgia, serif; box-shadow: inset 0 2px #fff7e7; pointer-events: none; }
.view-path .path-node.boss .path-node-stars { top: 72px; }
.path-finale-label { position: absolute; top: 97px; left: 50%; transform: translateX(-50%); width: max-content; padding: 4px 8px; border: 1px solid #d6ba88; border-radius: 7px; background: #fff4dceF; box-shadow: 0 2px #b49b73; color: #634d34; font: 800 10px/1.2 var(--sans); }
.view-path .path-connectors { z-index: -1; }
.view-path .path-connector-segment path { stroke-dasharray: none; animation: none !important; }
.view-path .path-connector-depth { stroke: var(--trail-edge); stroke-width: 28px; opacity: .68; }
.view-path .path-connector-face { stroke: var(--trail-face); stroke-width: 23px; }
.view-path .path-connector-shine { stroke: #fff4d1; stroke-width: 2px; opacity: .65; transform: translateY(-4px); }
.view-path .path-connector-segment.completed .path-connector-depth { stroke: #c69963; }
.view-path .path-connector-segment.completed .path-connector-face { stroke: var(--trail-done); }
.view-path .path-connector-segment.completed .path-connector-shine { stroke: #fff3d1; }
.view-path .path-world-trophy { margin: -38px auto 12px; padding: 8px 14px; background: #fffaf0f2; box-shadow: 0 3px #d0bb99, 0 6px 12px #49321b12; font-size: 12px; }
.view-path .path-world-trophy.earned { background: #fff0ba; }
.view-path .path-world.is-minimized { padding: 0; }
.view-path .path-world.is-minimized .path-world-head { margin: 0; }
.view-path .path-world-gate { position: relative; min-height: 108px; gap: 12px; padding: 12px 14px 12px 124px; overflow: hidden; text-align: left; justify-content: space-between; background: var(--panel-cream, #fff8ed); }
.path-next-world-scenery, .path-world-card-scenery { position: absolute; left: 0; top: 0; width: 125px; height: 100%; object-fit: cover; object-position: 50% 80%; opacity: .85; mask-image: linear-gradient(to right, #000 65%, transparent); pointer-events: none; }
.view-path .path-world .path-world-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: center; gap: 2px 12px; min-height: 108px; padding: 12px 14px 12px 124px; overflow: hidden; background: var(--panel-cream, #fff8ed); }
.view-path .path-world .path-world-title, .view-path .path-world-title > div { display: contents; }
.view-path .path-world-label { grid-column: 1; grid-row: 1; }
.view-path .path-world-title h2 { grid-column: 1 / -1; grid-row: 2; }
.view-path .path-world-progress, .view-path .path-world-toggle { grid-column: 2; grid-row: 1; }
.view-path .path-world.is-completed .path-world-toggle { position: relative; flex: 0 0 auto; min-height: 44px; }
.view-path .path-world-gate > div { position: relative; min-width: 0; }
.view-path .path-world-gate small { display: block; margin-bottom: 3px; color: #82705a; font-size: 9px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.view-path .path-world-gate strong { font-size: 17px; color: #493c2f; }
.view-path .path-world-gate p { margin-top: 5px; font-size: 11px; line-height: 1.5; font-weight: 600; }
.view-path .path-world-gate-art { flex: 0 0 auto; width: 28px; height: 28px; }
.view-path .path-nodes.has-limit-pin.is-first-limit-row { padding-top: 106px; }
.view-path .path-limit-pin { z-index: 8; }
.view-path .path-leaderboard li.path-leaderboard-empty { display: block; padding: 12px 5px; color: var(--muted); line-height: 1.6; }
@media (min-width: 901px) {
    .view-path .path-layout { grid-template-columns: minmax(0, 1fr) 270px; gap: 20px; }
    .view-path .path-sidebar .paper-card { padding: 17px; }
    .view-path .path-leaderboard h2 { font-size: 21px; }
}
@media (max-width: 720px) {
    .view-path .path-map { gap: 18px; }
    .view-path .path-world-head { margin-inline: 4px; padding: 12px; gap: 8px; flex-wrap: wrap; }
    .view-path .path-world-title h2 { font-size: 19px; }
    .path-world-progress { width: 86px; margin-left: auto; font-size: 10px; }
    .view-path .path-nodes { grid-auto-rows: 113px; padding: 102px 12% 105px; }
    .view-path .path-node { width: 50px; height: 50px; }
    .view-path .path-node > strong { font-size: 20px; }
    .view-path .path-node.current > strong { font-size: 23px; }
    .view-path .path-node-stars { top: 55px; }
    .view-path .path-node-stars .path-star { width: 19px; height: 19px; flex-basis: 19px; }
    .view-path .path-node.boss { width: 58px; height: 58px; }
    .view-path .path-node.boss .path-node-stars { top: 64px; }
    .path-finale-label { top: 87px; font-size: 9px; }
    .view-path .path-current-avatar { bottom: 56px; }
    .path-current-guide > span { bottom: 97px; padding: 8px 9px; font-size: 11px; }
    .path-current-guide > img { width: 52px; height: 52px; left: -41px; bottom: 6px; }
    .view-path .path-connector-depth { stroke-width: 24px; }
    .view-path .path-connector-face { stroke-width: 19px; }
    .view-path .path-world-gate { padding-left: 99px; gap: 8px; }
    .path-next-world-scenery, .path-world-card-scenery { width: 103px; }
    .view-path .path-world .path-world-head { padding-left: 99px; }
    .view-path .path-world-gate strong { font-size: 15px; }
    .view-path .path-world-trophy { margin-top: -32px; }
    .view-path .path-nodes.has-limit-pin.is-first-limit-row { padding-top: 102px; }
}
@media (max-width: 370px) {
    .view-path .path-world-title h2 { font-size: 17px; }
    .view-path .path-world-title > img { width: 34px; height: 34px; }
    .path-world-progress { width: 70px; font-size: 9px; }
    .view-path .path-world-toggle { min-width: 94px; font-size: 10px; }
}

/* Terrain v2: controls are anchored to each world's illustrated journey. */
.view-path .path-nodes,
.view-path .path-nodes.has-limit-pin.is-first-limit-row {
    display: block; width: 100%; aspect-ratio: 2 / 3; min-height: 820px;
    padding: 0; margin: 0 auto; grid-template-rows: none;
}
.view-path .path-node:nth-child(n) { position: absolute; transform: translate(-50%, -50%); }
.view-path .path-connectors { opacity: 0; }
.view-path .path-art-unavailable .path-connectors { opacity: 1; }
.view-path .path-art-unavailable { background: var(--paper); }
.view-path .path-art-unavailable .path-world-scenery { visibility: hidden; }
.path-current-guide > span { font-size: 11px; }
.path-current-guide > span::after { left: var(--pin-tip, calc(50% - 5px)); }
.path-current-guide > span[data-placement="below"]::after { top: -6px; bottom: auto; transform: rotate(225deg); }
.path-current-guide > span[data-placement="top"]::after,
.path-limit-pin[data-placement="top"]::after { display: none; }
.path-limit-pin[data-placement="below"]::after { top: -8px; bottom: auto; transform: translateX(-50%) rotate(225deg); }
.view-path .path-world-trophy { margin: -12px auto 12px; }
@media (max-width:720px) {
    .view-path .path-nodes, .view-path .path-nodes.has-limit-pin.is-first-limit-row { min-height: 760px; }
    .view-path .path-node { width: 46px; height: 46px; }
    .view-path .path-node > strong { font-size: 18px; }
    .view-path .path-node.locked > strong { font-size: 17px; }
    .view-path .path-node.current > strong { font-size: 21px; }
    .view-path .path-node-stars { top: 49px; }
    .view-path .path-node-stars .path-star { width: 16px; height: 16px; flex-basis: 16px; }
    .view-path .path-node.boss { width: 52px; height: 52px; }
    .view-path .path-node.boss .path-node-stars { top: 56px; }
    .path-finale-label { top: 78px; }
    .view-path .path-current-avatar { bottom: 49px; width: 23px; height: 23px; }
    .path-current-guide > img { width: 45px; height: 45px; left: -34px; bottom: 4px; }
    .path-current-guide > span { padding: 7px 9px; font-size: 10px; }
}
.view-path .path-world, .view-path .path-world-content, .view-path .path-nodes { min-width: 0; }
.view-path .path-connectors { overflow: hidden; }
