/* Twin Mountains and Base Camp page styles. */
#twin-mountains-scene[hidden],
.twin-mountain-view[hidden] { display: none !important; }

.twin-mountain-view {
    --mountain-border: #70bfcb;
    --mountain-background: #e1f6f4;
    --mountain-ink: #245f68;
    --mountain-button: #f0ffff;
    --mountain-hover: #c9eef0;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    min-height: 560px;
    padding: 24px 18px;
    border: 4px solid var(--mountain-border);
    border-radius: 25px;
    background: var(--mountain-background);
    color: var(--mountain-ink);
    text-align: center;
}

.twin-mountain-view h3 { margin: 4px 0; font-size: 22px; }
.twin-mountain-view h4 { margin: 4px 0; font-size: 20px; }
.twin-mountain-view h3:focus-visible { outline: 2px solid var(--mountain-ink); }
.twin-mountain-view p { max-width: 440px; margin: 0; line-height: 1.5; }
.mountain-subtitle { font-style: italic; }
.mountain-scene-art { padding: 12px 0; font-size: 40px; line-height: 1.5; }
.twin-mountain-view button { max-width: 100%; margin: 0; border-color: var(--mountain-border); background: var(--mountain-button); color: var(--mountain-ink); }
.twin-mountain-view button:hover:not(:disabled) { background: var(--mountain-hover); }

.mountain-activities,
.mountain-navigation { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.mountain-activities button { min-width: min(100%, 220px); }
.mountain-navigation { margin-top: auto; padding-top: 12px; }
.twin-mountain-view .mountain-coming-soon { min-height: 24px; font-weight: 700; }

.mountain-destinations { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; width: 100%; margin: 6px 0; }
.mountain-destinations button { min-height: 94px; padding: 18px 8px; font-size: 18px; }
.mountain-destinations [data-mountain-target="frost-base"] { background: #edfaff; }
.mountain-destinations [data-mountain-target="magma-base"] { background: #fff0dc; }

.silent-summit-activities {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 180px) minmax(0, 280px) minmax(0, 180px);
    grid-template-areas: "star moko snowflake";
    grid-auto-rows: auto;
    justify-content: center;
    align-items: end;
    min-height: 290px;
    gap: 18px;
}
.silent-summit-activities > button { width: 100%; min-width: 0; min-height: 54px; padding: 8px 10px; font-size: 15px; line-height: 1.2; }
.silent-summit-activities > button:first-child { grid-area: star; }
.silent-summit-activities > button:nth-child(2) { grid-area: snowflake; }
.silent-summit-moko-attraction { grid-area: moko; justify-self: center; align-self: end; display: grid; justify-items: center; width: min(100%, 280px); gap: 7px; }
.silent-summit-activities .silent-summit-moko-image { display: block; justify-self: center; width: 100%; max-width: 100%; height: 250px; margin: 0 auto; object-fit: contain; object-position: center; transform-origin: 50% 75%; cursor: pointer; }
.silent-summit-moko-image.is-wiggling { animation: forest-tree-wiggle 0.45s ease-in-out; }
.silent-summit-moko-attraction button { width: 100%; min-width: 0; min-height: 54px; padding: 8px 10px; font-size: 15px; line-height: 1.2; }
.silent-summit-moko-fuzz { position: absolute !important; z-index: 8; display: grid; place-items: center; box-sizing: border-box !important; width: 46px !important; min-width: 0 !important; max-width: 46px !important; height: 46px !important; min-height: 46px !important; margin: 0 !important; padding: 0 !important; border: 2px solid #ff40ac !important; border-radius: 50% !important; aspect-ratio: 1 / 1; background: #fff !important; color: #8b2867 !important; font-size: 28px !important; line-height: 1; transform: translate(-50%, -50%); animation: bug-fuzz-pop-out 0.25s ease-out both; }
.silent-summit-moko-fuzz:hover:not(:disabled) { background: #fff !important; transform: translate(-50%, -50%) scale(1.05); }
.silent-summit-moko-fuzz.collecting { animation: bug-fuzz-collect 0.25s ease-in forwards; }
.silent-summit-moko-reward { position: absolute; z-index: 9; padding: 5px 9px; border: 2px solid #ff40ac; border-radius: 14px; background: #fff; color: #8b2867; font-size: 13px; font-weight: bold; white-space: nowrap; pointer-events: none; transform: translate(12px, -50%); animation: bug-fuzz-reward-float 2.6s ease-out forwards; }

.mountain-camp { position: relative; isolation: isolate; overflow: hidden; min-height: 780px; background: #f4f2df; }
.mountain-camp > :not(#basecamp-tree-layer):not(.mountain-camp-attractions) { position: relative; z-index: 2; }
#basecamp-tree-layer { z-index: 1; }
.basecamp-tree { z-index: 1; }
.basecamp-lemonberry { display: flex; flex-direction: column; align-items: center; gap: 4px; width: min(240px, calc(100% - 24px)); }
.basecamp-lemonberry img { display: block; width: 125px; height: 125px; object-fit: contain; cursor: pointer; animation: basecamp-lemonberry-sway 5s ease-in-out infinite; }
.basecamp-lemonberry img:focus-visible { outline: 2px solid var(--mountain-ink); outline-offset: 3px; border-radius: 8px; }
#basecamp-lemonberry-image.is-wiggling { animation: forest-tree-wiggle 0.45s ease-in-out; }
@keyframes basecamp-lemonberry-sway { 0%, 100% { transform: translate(-2px, 0) rotate(-0.7deg); } 50% { transform: translate(2px, -2px) rotate(0.7deg); } }
.mountain-camp .basecamp-tree,
.mountain-camp .basecamp-tree:hover:not(:disabled) { border: 0; padding: 0; background: transparent; box-shadow: none; }
.mountain-camp > .basecamp-tree-fuzz { position: absolute; z-index: 5; display: grid; place-items: center; width: 46px; height: 46px; margin: 0; padding: 0; border: 2px solid #ff40ac; border-radius: 50%; background: #fff; font-size: 28px; line-height: 1; transform: translate(-50%, -50%); animation: bug-fuzz-pop-out 0.25s ease-out both; }
.basecamp-tree-fuzz > img,
.silent-summit-moko-fuzz > img { display: block; width: 1.2em; height: 1.2em; object-fit: contain; }
#twin-mountains-scene .mountain-camp > .basecamp-tree-fuzz { position: absolute; z-index: 20; }
.mountain-camp > .basecamp-tree-fuzz:hover:not(:disabled) { background: #fff; transform: translate(-50%, -50%) scale(1.05); }
.basecamp-tree-fuzz.collecting { animation: bug-fuzz-collect 0.25s ease-in forwards; }
.basecamp-tree-fuzz-reward { position: absolute; z-index: 6; box-sizing: border-box; max-width: calc(100% - 16px); padding: 5px 9px; border: 2px solid #ff40ac; border-radius: 14px; background: #fff; color: #8b2867; font-size: 13px; font-weight: bold; text-align: center; white-space: normal; pointer-events: none; animation: basecamp-fuzz-reward-float 2.6s ease-out forwards; }
.mountain-camp > .basecamp-tree-fuzz-reward { position: absolute; }
#twin-mountains-scene .mountain-camp > .basecamp-tree-fuzz-reward { z-index: 21; }
@keyframes basecamp-fuzz-reward-float {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-8px); }
}
.mountain-camp-attractions { position: absolute; z-index: 3; inset: 0; display: block; flex: none; width: 100%; padding: 0; pointer-events: none; }
.mountain-camp .mountain-activities { position: absolute; inset: 0; display: block; pointer-events: none; }
.mountain-camp .mountain-activities > [data-basecamp-attraction] { position: absolute; margin: 0; pointer-events: auto; }
.mountain-camp .mountain-activities > button[data-basecamp-attraction] { width: calc(50% - 24px); max-width: 220px; min-width: 0; }
.mountain-camp .basecamp-lemonberry > button { width: 100%; }
.mountain-camp .mountain-coming-soon { position: absolute; right: 0; bottom: 10px; left: 0; z-index: 3; pointer-events: none; }