#bug-catching-scene {
    min-height: 400px;
    padding: 24px 18px;
    border: 4px dashed #ff40ac;
    border-radius: 25px;
    background: #e8f4d9;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

#forest-scene h3,
#forest-hike-scene h3,
#forest-spirit-scene h3,
#forest-snail-scene h3,
#bug-catching-scene h3 {
    margin: 4px 0;
    color: #5b8442;
    font-size: 22px;
}

#forest-scene p,
#forest-hike-scene p,
#forest-spirit-scene p,
#forest-snail-scene p,
#bug-catching-scene p {
    max-width: 420px;
    margin: 0 0 8px;
    color: #42583a;
    line-height: 1.5;
}

.henri-sway {
    display: grid;
    place-items: center;
    animation: henri-sway 10s ease-in-out infinite;
}

.henri-wiggle {
    display: block;
    width: min(340px, 52vw);
    border-radius: 16px;
    transform-origin: 50% 85%;
    animation: henri-wiggle 2.8s ease-in-out infinite;
}

@keyframes henri-sway {
    0%, 100% { transform: translateX(-12px); }
    50% { transform: translateX(12px); }
}

@keyframes henri-wiggle {
    0%, 100% { transform: rotate(-1deg); }
    50% { transform: rotate(1.5deg); }
}

@media (prefers-reduced-motion: reduce) {
    #beach-scene::before,
    #beach-scene::after,
    .beach-fish-one,
    .beach-fish-two,
    .beach-crab-emoji,
    #beach-scene #beach-crab-button,
    .beach-cleanup-map::before,
    #pet.pet-needs-zero,
    .forest-henri-button-image,
    .forest-map-tree.is-wiggling img,
    .forest-hike-tree.is-wiggling img,
    #basecamp-lemonberry-image.is-wiggling,
    .basecamp-lemonberry img,
    .henri-sway,
    .henri-wiggle {
        animation: none;
    }

    .beach-water-creature,
    #beach-scene #beach-crab-button {
        transition: none;
    }
}

#forest-snail-trading-area {
    box-sizing: border-box;
    width: min(100%, 560px);
    padding: 12px 16px;
    border: 2px dashed #8aa56b;
    border-radius: 14px;
    background: #f7fbeF;
    text-align: center;
    margin-inline: auto;
    display: grid;
    gap: 10px;
}

#forest-snail-selected-bug {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 8px;
}

.forest-snail-trade-item {
    position: relative;
    box-sizing: border-box;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 4px;
    min-width: 0;
    min-height: 94px;
    padding: 10px 7px;
    border: 2px dotted #8aa56b !important;
    border-radius: 10px !important;
    background: #fffdf4 !important;
    color: #4b5e37 !important;
    text-align: center;
    font-size: 13px;
}

.forest-snail-trade-item:hover:not(:disabled) { background: #edf4df !important; }
.forest-snail-trade-icon { font-size: 27px; line-height: 1; }
.forest-snail-trade-name { overflow-wrap: anywhere; font-weight: 700; }
.forest-snail-owned-count { color: #65764e; font-size: 11px; }
.forest-snail-selected-badge { position: absolute; top: 4px; right: 5px; min-width: 19px; padding: 2px 4px; border-radius: 10px; background: #8aa56b; color: white; font-size: 11px; font-weight: 800; }
.forest-snail-selected-badge[hidden] { display: none; }
.forest-snail-empty-offer { grid-column: 1 / -1; margin: 8px; }
.forest-snail-offer-footer { display: flex; align-items: end; justify-content: space-between; gap: 14px; padding-top: 9px; border-top: 1px dashed #a9b78d; text-align: left; }
.forest-snail-offer-summary { display: grid; gap: 5px; min-width: 0; }
#forest-snail-offered-items { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; min-height: 27px; }
.forest-snail-offered-icon { font-size: 23px; line-height: 1; }
#forest-snail-offer-total { margin: 0; color: #465b32; font-weight: 800; }
#forest-snail-confirm-offer { flex: 0 0 auto; max-width: 50%; margin: 0 !important; }
#forest-snail-store-click-hint { margin: 0; font-size: 13px; }
.forest-snail-sale-confirm[hidden] { display: none !important; }
.forest-snail-sale-confirm { position: fixed; z-index: 10002; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(34, 45, 28, 0.48); }
.forest-snail-sale-confirm-card { box-sizing: border-box; width: min(100%, 430px); padding: 20px; border: 3px solid #718b58; border-radius: 16px; background: #f7fbef; color: #3f5033; text-align: center; box-shadow: 0 10px 35px rgba(32, 40, 26, 0.3); }
.forest-snail-sale-confirm-card h4,
.forest-snail-sale-confirm-card p { margin: 0 0 12px; }
.forest-snail-sale-confirm-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }
.forest-snail-sale-confirm-actions button { max-width: 100%; }
@media (max-width: 430px) {
    #forest-snail-trading-area { padding: 10px; }
    #forest-snail-selected-bug { gap: 5px; }
    .forest-snail-trade-item { min-height: 88px; padding-inline: 4px; font-size: 12px; }
    .forest-snail-offer-footer { align-items: center; gap: 8px; }
    #forest-snail-confirm-offer { max-width: 48%; padding-inline: 8px; font-size: 12px; }
}

#forest-snail-trading-area[hidden] {
    display: none !important;
}

#forest-snail-offering-page {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#forest-snail-offering-page[hidden] {
    display: none !important;
}

#forest-snail-confirm-offer {
    display: block;
    margin: 12px 0 0 auto;
}

#bug-catching-message {
    width: min(100%, 440px);
    height: 72px;
    flex: 0 0 72px;
    overflow-y: auto;
}

#bug-catching-instructions {
    width: min(100%, 440px);
    margin: 0;
    text-align: center;
    font-size: 13px;
}

.bug-stats-panel {
    box-sizing: border-box;
    width: min(100%, 560px);
    padding: 12px;
    border: 2px solid #8aa56b;
    border-radius: 14px;
    background: #f7fbef;
}

.bug-stats-panel summary {
    color: #5b8442;
    font-weight: bold;
    cursor: pointer;
}

.bug-stats-panel p {
    margin: 8px 0;
    font-size: 13px;
}

#bug-stats-chart {
    max-width: 100%;
    overflow-x: auto;
}

.bug-stats-table {
    width: 100%;
    min-width: 480px;
    border-collapse: collapse;
    font-size: 13px;
    text-align: left;
}

.bug-stats-table th,
.bug-stats-table td {
    padding: 7px 8px;
    border-bottom: 1px solid #ccd9bb;
}

.bug-stats-table thead th {
    color: #5b8442;
}

#forest-spirit-message {
    height: 120px;
    overflow-y: auto;
}

#bug-catching-area {
    position: relative;
    width: min(100%, 440px);
    height: 260px;
    flex: 0 0 260px;
    overflow: hidden;
    border: 3px solid #285638;
    border-radius: 18px;
    background: #feffe8;
}

.bug-catching-trees {
    position: absolute;
    inset: 0;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

.bug-catching-tree {
    position: absolute;
    width: 48px;
    height: 60px;
    object-fit: contain;
    transform: translate(-50%, -50%);
    pointer-events: auto;
    cursor: pointer;
}

.bug-catching-tree.wiggling {
    animation: bug-tree-wiggle 0.3s ease-in-out;
}

@keyframes bug-tree-wiggle {
    0%, 100% { transform: translate(-50%, -50%) rotate(0deg); }
    25% { transform: translate(calc(-50% - 2px), -50%) rotate(-4deg); }
    75% { transform: translate(calc(-50% + 2px), -50%) rotate(4deg); }
}

.bug-tree-fuzz {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    min-width: 48px;
    margin: 0;
    padding: 0;
    border: 2px solid #ff40ac;
    border-radius: 50%;
    background: white;
    font-size: 29px;
    line-height: 1;
    transform: translate(-50%, -50%);
    pointer-events: auto;
    animation: bug-fuzz-pop-out 0.25s ease-out both;
}

@keyframes bug-fuzz-pop-out {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.2);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

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

.bug-tree-fuzz-reward {
    position: absolute;
    z-index: 3;
    padding: 5px 9px;
    border: 2px solid #ff40ac;
    border-radius: 14px;
    background: white;
    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;
}

@keyframes bug-fuzz-reward-float {
    from {
        opacity: 1;
        transform: translate(12px, -50%);
    }
    to {
        opacity: 0;
        transform: translate(12px, calc(-50% - 26px));
    }
}

.bug-tree-fuzz:hover:not(:disabled) {
    transform: translate(-50%, -50%) scale(1.04);
}

@keyframes bug-fuzz-collect {
    from {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    to {
        opacity: 0;
        transform: translate(-50%, -65%) scale(0.5);
    }
}

#catchable-bug {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0;
    padding: 0;
    border: 2px solid #ff40ac;
    border-radius: 50%;
    background: white;
    font-size: 32px;
    line-height: 1;
    transform: translate(-50%, -50%);
    transition:
        left 0.7s ease-in-out,
        top 0.7s ease-in-out,
        transform 0.15s ease-in-out,
        background 0.15s ease-in-out;
    animation: catchable-bug-jiggle 0.45s ease-in-out infinite alternate;
    z-index: 1;
}

@keyframes catchable-bug-jiggle {
    from { rotate: -6deg; }
    to { rotate: 6deg; }
}

#catchable-bug[hidden] {
    display: none !important;
}

#catchable-bug:hover:not(:disabled) {
    transform: translate(-50%, -50%) scale(1.04);
}

#forest-spirit-timer {
    min-height: 1em;
    margin: 0;
    font-size: 12px;
}

#forest-spirit-choices {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    width: min(100%, 380px);
}

#forest-spirit-choices button {
    margin: 0;
    font-size: 14px;
}

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

.forest-hike-art {
    position: absolute;
    z-index: 0;
    inset: 18px 0 170px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 0 2px;
    pointer-events: none;
}

#forest-hike-scene {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 620px;
    box-sizing: border-box;
}

#forest-hike-scene::after {
    position: absolute;
    z-index: -1;
    right: 0;
    bottom: 0;
    left: 0;
    height: 110px;
    background: rgba(50, 110, 104, 0.8);
    content: "";
}

.forest-hike-art img {
    display: block;
    width: min(25%, 275px);
    height: min(58vh, 480px);
    object-fit: contain;
}

.forest-hike-tree {
    display: grid;
    place-items: start center;
    pointer-events: auto;
    width: min(25%, 275px);
    height: min(58vh, 480px);
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    cursor: pointer;
}

.forest-hike-tree:hover:not(:disabled) {
    background: transparent;
    transform: none;
    transition: none;
}
.forest-hike-tree img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.forest-hike-tree.is-wiggling img { animation: forest-tree-wiggle 0.45s ease-in-out; }

.forest-hike-drop {
    position: absolute !important;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 46px !important;
    min-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;
    background: #fff !important;
    font-size: 28px;
    line-height: 1;
    transform: translate(-50%, -50%);
    animation: bug-fuzz-pop-out 0.25s ease-out both;
}

.forest-hike-drop:hover:not(:disabled) { background: #fff !important; }
.forest-hike-drop.collecting { animation: bug-fuzz-collect 0.25s ease-in forwards; }
.forest-hike-drop-notice {
    position: absolute;
    z-index: 4;
    max-width: calc(100% - 16px);
    padding: 5px 9px;
    border: 2px solid #ff40ac;
    border-radius: 14px;
    background: #fff;
    color: #8b2867;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    pointer-events: none;
    transform: translate(-50%, -100%);
    animation: basecamp-fuzz-reward-float 2.6s ease-out forwards;
}

.forest-hike-copy {
    position: absolute;
    z-index: 1;
    top: calc(50% - 90px);
    left: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: min(46%, 430px);
    text-align: center;
    transform: translate(-50%, -50%);
}

.forest-hike-copy h3,
.forest-hike-copy p {
    max-width: 100%;
    margin: 0;
}

#forest-hike-scene #forest-river-button {
    position: absolute;
    z-index: 2;
    bottom: 38px;
    left: 50%;
    margin: 0;
    transform: translateX(-50%);
}

#forest-hike-scene #forest-hike-back-button {
    position: absolute;
    z-index: 2;
    top: 12px;
    left: 50%;
    margin: 0;
    translate: -50% 0;
}

#forest-hike-scene #forest-continue-hike-button {
    position: absolute;
    z-index: 2;
    bottom: 184px;
    left: 50%;
    margin: 0;
    transform: translateX(-50%);
}

@media (max-width: 700px) {
    #forest-hike-scene { min-height: 560px; }
    #forest-hike-scene::after { height: 100px; }
    .forest-hike-art { inset: 18px 0 145px; padding: 0 2px; }
    .forest-hike-tree { width: 25%; height: min(46vh, 340px); }
    .forest-hike-tree img { width: 100%; height: 100%; }
    .forest-hike-copy { top: calc(50% - 78px); width: min(46%, 430px); }
    #forest-hike-scene #forest-river-button { bottom: 30px; }
    #forest-hike-scene #forest-continue-hike-button { bottom: 160px; }
}