/* =========================
   WORLD MAP
========================= */

#world-map {
    background: #feffe8;

    border: 5px solid #ff40ac;
    border-radius: 30px;

    padding: 20px;
    min-height: 600px;
}

.map-subtitle {
    margin: 0 0 20px;
    font-size: 14px;
}

.map-area {
    position: relative;

    height: 400px;
    min-height: 400px;

    background: #dff8ff;

    border: 4px dashed #ff40ac;
    border-radius: 25px;

    overflow: hidden;
}

.map-location {
    position: absolute;

    width: 110px;
    height: 85px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    gap: 3px;

    background: white;

    border: 3px solid #ff40ac;
    border-radius: 18px;

    font-size: 32px;
    cursor: pointer;

    padding: 5px;
}

.map-location span {
    font-size: 13px;
    font-weight: bold;
    color: #ff40ac;
}

.map-location:hover {
    transform: scale(1.08);
    background: #fff0fa;
}

.map-location[data-location="home"] {
    left: 8%;
    top: 38%;
}

.map-location[data-location="town"] {
    left: 38%;
    top: 38%;
}

.map-location[data-location="shop"] {
    right: 8%;
    top: 38%;
}

.map-location[data-location="forest"] {
    left: 18%;
    bottom: 8%;
}

.map-location[data-location="beach"] {
    right: 18%;
    bottom: 8%;
}

.map-location[data-location="mountain"] {
    left: 40%;
    top: 8%;
}

#map-message {
    height: 80px;
    background: white;

    border: 2px solid #ff40ac;
    border-radius: 12px;

    padding: 10px;
    margin: 15px 0 0;

    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
}

#forest-scene[hidden],
#forest-hike-scene[hidden],
#forest-river-scene[hidden],
#forest-river-fishing-scene[hidden],
#forest-spirit-scene[hidden],
#forest-snail-scene[hidden],
#beach-scene[hidden],
#beach-cleanup-scene[hidden],
#beach-treasure-scene[hidden],
#king-crab-scene[hidden],
#beach-cleanup-completion[hidden],
#bug-catching-scene[hidden],
.map-area[hidden],
.map-subtitle[hidden],
#map-message[hidden] {
    display: none !important;
}

#forest-scene,
.forest-subscene {
    min-height: 400px;
    padding: 24px 18px;
    border: 4px solid #285638;
    border-radius: 25px;
    background: #e8f4d9;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

#forest-scene {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    position: relative;
    display: block;
    height: 600px;
    min-height: 600px;
    overflow: hidden;
    padding: 0;
    border: 4px solid #285638;
    background: linear-gradient(180deg, #dcebc9 0%, #c8dfb5 58%, #b4d09d 100%);
}

.forest-map-trees {
    position: absolute;
    z-index: 1;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

#forest-river-scene {
    border: 4px solid #285638;
    background: #e8f4d9;
}

#forest-river-scene h3 {
    margin: 4px 0;
    color: #5b8442;
    font-size: 22px;
}

#forest-river-scene p {
    max-width: 420px;
    margin: 0 0 8px;
    color: #42583a;
    line-height: 1.5;
}

.forest-river-art { font-size: 42px; }

#forest-river-choices {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

#forest-river-choices button { margin: 0; }

#forest-river-fishing-scene {
    border: 4px solid #285638;
    background: #e8f4d9;
    color: #42583a;
}

#forest-river-fishing-scene button {
    border-color: #5b8442;
    background: #f5ffec;
    color: #42583a;
}

#forest-river-fishing-scene button:hover:not(:disabled) { background: #dcebc9; }
#forest-river-fishing-scene h3 { color: #5b8442; }
#forest-river-fishing-scene .forest-river-fishing-subtitle { margin-top: -4px; color: #42583a; font-style: italic; }
#forest-river-fishing-status { position: relative; top: 10px; color: #42583a; }
#forest-river-fishing-display {
    width: calc(100% + 36px);
    max-width: none;
    height: 230px;
    flex: 0 0 230px;
    margin-top: 46px;
    border-radius: 0;
    border: 0;
    background: rgba(50, 110, 104, 0.8);
    box-shadow: 0 5px 12px rgba(36, 76, 58, 0.18);
}
#forest-river-fish-swimmers,
#ice-fishing-fish-swimmers,
#seaside-fishing-swimmers {
    position: absolute;
    z-index: 0;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
}
.fishing-water-swimmer {
    position: absolute;
    left: 4px;
    display: block;
    opacity: 0;
    color: #e9fff3;
    font-size: 28px;
    line-height: 1;
    white-space: nowrap;
    filter: drop-shadow(0 1px 2px rgba(15, 65, 57, 0.28));
    animation: fishing-water-swim-right var(--swim-duration, 20s) linear var(--swim-delay, 0s) infinite;
    will-change: left, opacity;
}
.fishing-water-swimmer img {
    display: block;
    width: 1.6em;
    height: 1.2em;
    object-fit: contain;
}
@keyframes fishing-water-swim-right {
    0% { left: 4px; transform: scaleX(-1) translateY(0); }
    48% { transform: scaleX(-1) translateY(-3px); }
    88% { transform: scaleX(-1) translateY(2px); }
    100% { left: var(--swim-end, calc(100% - 44px)); transform: scaleX(-1) translateY(0); }
}
#forest-river-fishing-pet-preview { right: 4px; bottom: 60px; left: auto; }
#forest-river-fishing-result { z-index: 1; border-radius: 22px; transform: none; }
#forest-river-fishing-reel {
    position: absolute;
    z-index: 11;
    bottom: 14px;
    left: 50%;
    max-width: calc(100% - 32px);
    transform: translateX(-50%);
}
#forest-river-fishing-wait {
    position: absolute;
    z-index: 2;
    top: 14px;
    left: 50%;
    max-width: calc(100% - 32px);
    transform: translateX(-50%);
}

.forest-map-tree {
    position: absolute;
    display: grid;
    place-items: center;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    pointer-events: auto;
    user-select: none;
    translate: -50% -50%;
}

.forest-map-tree:hover:not(:disabled) {
    background: transparent;
}

.forest-map-tree[hidden] {
    display: none;
}

.forest-map-tree img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

.forest-map-tree.is-wiggling img {
    animation: forest-tree-wiggle 0.45s ease-in-out;
}

@keyframes forest-tree-wiggle {
    0%, 100% { transform: rotate(0); }
    22% { transform: rotate(-2deg); }
    48% { transform: rotate(2deg); }
    72% { transform: rotate(-1deg); }
}

#forest-scene h3,
#forest-scene p {
    position: absolute;
    z-index: 3;
    left: 50%;
    width: min(82%, 520px);
    margin: 0;
    text-align: center;
    translate: -50% 0;
}

#forest-scene h3 { top: 12%; }
#forest-scene p { top: 21%; }

#forest-scene > button {
    position: absolute;
    z-index: 4;
    margin: 0;
}

#forest-scene #forest-back-button {
    top: 12px;
    left: 50%;
    translate: -50% 0;
}

#forest-scene #forest-search-button {
    bottom: 22px;
    left: 50%;
    translate: -50% 0;
}

#forest-scene #forest-deeper-button {
    top: 50%;
    left: 34%;
    translate: -50% -50%;
}

#forest-scene #forest-bug-catching-button {
    top: 65%;
    left: 34%;
    translate: -50% -50%;
}

#forest-scene #forest-henri-visit {
    position: absolute;
    z-index: 4;
    top: 64%;
    left: 66%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 220px;
    translate: -50% -50%;
    pointer-events: none;
}

.forest-henri-button-image {
    display: block;
    width: 240px;
    height: 190px;
    object-fit: contain;
    animation: forest-henri-map-sway 4.2s ease-in-out infinite;
}

#forest-scene #forest-snail-button {
    position: relative;
    width: 100%;
    margin: 0;
    pointer-events: auto;
}

@keyframes forest-henri-map-sway {
    0%, 100% { transform: translateX(-3px) rotate(-0.5deg); }
    50% { transform: translateX(3px) rotate(0.5deg); }
}

#forest-scene > .forest-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;
    box-shadow: none;
    font-size: 28px;
    line-height: 1;
    transform: translate(-50%, -50%);
    animation: bug-fuzz-pop-out 0.25s ease-out both;
}

#forest-scene > .forest-tree-fuzz:hover:not(:disabled) {
    background: #fff;
    transform: translate(-50%, -50%) scale(1.05);
}

.forest-tree-fuzz-reward {
    position: absolute;
    z-index: 6;
    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;
}

.forest-tree-fuzz.collecting {
    animation: bug-fuzz-collect 0.25s ease-in forwards;
}

@media (max-width: 600px) {
    #forest-scene {
        height: 700px;
        min-height: 700px;
    }

    #forest-scene h3 { top: 11%; }
    #forest-scene p { top: 18%; width: 88%; }

    #forest-scene #forest-deeper-button {
        top: 43%;
        left: 50%;
    }

    #forest-scene #forest-bug-catching-button {
        top: 51%;
        left: 50%;
    }

    #forest-scene #forest-henri-visit {
        top: 70%;
        left: 50%;
        width: 190px;
    }

    .forest-henri-button-image { width: 190px; height: 150px; }

    #forest-scene #forest-search-button { bottom: 18px; }
}

#beach-scene,
.beach-subscene {
    min-height: 400px;
    padding: 24px 18px;
    border: 4px solid #70bfcb;
    border-radius: 25px;
    background: #e1f6f4;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
}