/* Forest container */
#wriwoods-forest-container {
    background:
        url('../media/images/mist.png') repeat-x,      /* foreground mist */
        url('../media/images/woods-background.jpg') repeat, /* distant trees */
        linear-gradient(to top, #1b3a1a, #4b6b3a);   /* general green gradient */
    background-size: cover, auto, auto;
    background-position: bottom;
    position:relative;
    width:100%;
    overflow:hidden;
    border-radius: 15px;
}

#wriwoods-forest-container.forest-morning {
    background:
        url('../media/images/mist.png') repeat-x,      /* foreground mist */
        url('../media/images/morning-forest-3.jpg') repeat, /* distant trees */
        linear-gradient(to top, #1b3a1a, #4b6b3a);   /* general green gradient */
    background-size: auto, cover, auto;
    background-position: bottom;
    position:relative;
}

#wriwoods-forest-container.forest-morning::before {
    content: "";
    position: absolute;
    inset: 0; /* top:0; right:0; bottom:0; left:0; */
    background: rgba(255, 200, 100, 0.2);
    pointer-events: none; /* so it doesn't block clicks */
    border-radius: 15px;
    z-index: 5; /* below trees/animals but above background */
}

#wriwoods-forest-container.forest-night {
    background:
        url('../media/images/mist.png') repeat-x,      /* foreground mist */
        url('../media/images/night-forest.jpg') repeat, /* distant trees */
        linear-gradient(to top, #1b3a1a, #4b6b3a);   /* general green gradient */
    background-size: auto, cover, auto;
    background-position: bottom;
    position:relative;
}

#wriwoods-forest-container.forest-night::before {
    content: "";
    position: absolute;
    inset: 0; /* top:0; right:0; bottom:0; left:0; */
    background: rgba(0, 0, 30, 0.35); /* semi-transparent dark blue overlay */
    pointer-events: none; /* so it doesn't block clicks */
    border-radius: 15px;
    z-index: 5; /* below trees/animals but above background */
}

/* All forest items fade in gently */
#wriwoods-forest-container img.wriwoods-not-creature:not(.new-forest-item) {
    opacity: 0;
    animation: forest-fade-in 1s ease forwards;
}

/* Apply only to animals + rare */
.wriwoods-forest img.wriwoods-creature {
    animation:
        var(--wriwoods-animation-forest-fade-in) 0.8s ease forwards,
        var(--wriwoods-animation-forest-creature-life) var(--life-speed, 10s) ease-in-out infinite;

    animation-delay:
        0s,
        var(--life-delay, 0s);

    transform-origin: center bottom;
    will-change: transform;
}

/* Newly added item */
#wriwoods-forest-container img.new-forest-item {
    filter: drop-shadow(0 0 10px #FFD700) drop-shadow(0 0 20px #FFC845);
    animation: var(--wriwoods-animation-forest-glow) 2s ease-in-out infinite alternate;
    z-index: 10; /* Make sure it's on top */
}
/* First appearance */
#wriwoods-forest-container img.new-forest-item.magic {
    opacity: 0;
}

/* Fade-in keyframes */
@keyframes forest-fade-in {
    0% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Subtle floating motion */
@keyframes forest-float {
    0%   { transform: translateY(0px) scaleX(var(--flip, 1)); }
    50%  { transform: translateY(-6px) scaleX(var(--flip, 1)); }
    100% { transform: translateY(0px) scaleX(var(--flip, 1)); }
}

/* Creature life */
@keyframes forest-creature-life {
    0%   { transform: translateY(0px) scale(1) scaleX(var(--flip, 1)); }
    50%  { transform: translateY(-4px) scale(1.035) scaleX(var(--flip, 1)); }
    100% { transform: translateY(0px) scale(1) scaleX(var(--flip, 1)); }
}

/* Gold glow */
@keyframes forest-glow {
    0% {
        filter: drop-shadow(0 0 10px #FFD700) drop-shadow(0 0 20px #FFC845);
    }
    50% {
        filter: drop-shadow(0 0 20px #FFD700) drop-shadow(0 0 40px #FFC845);
    }
    100% {
        filter: drop-shadow(0 0 10px #FFD700) drop-shadow(0 0 20px #FFC845);
    }
}

/* Pop in new item */
@keyframes forest-pop-in {
    0% {
        opacity: 0;
        transform: scale(0.3) translateY(20px);
    }
    60% {
        opacity: 1;
        transform: scale(1.15) translateY(-5px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Info and tooltip */
.wriwoods-info-icon {
    position: relative;
    display: inline-block;
    text-align: center;
    color: #555;
    font-size: 18px;
    cursor: pointer;
}

.wriwoods-info-icon .wriwoods-tooltip {
    visibility: hidden;
    width: 260px;
    background-color: #333;
    color: #fff;
    text-align: left;
    border-radius: 6px;
    padding: 16px;
    font-size: 14px;
    line-height: 1.5;
    position: absolute;
    z-index: 100;
    bottom: 125%; /* Position above icon */
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s;
}

.wriwoods-info-icon:hover .wriwoods-tooltip {
    visibility: visible;
    opacity: 1;
}

/* Responsive */
@media (max-width: 600px) {

    .wriwoods-info-icon .wriwoods-tooltip {
        position: fixed;        /* detach from icon */
        left: 50%;
        top: 50%;
        bottom: auto;
        transform: translate(-50%, -50%);
        
        width: 85vw;
        max-width: 320px;

        opacity: 0;
        visibility: hidden;
        z-index: 9999;
    }

    /* Show tooltip when active */
    .wriwoods-info-icon.active .wriwoods-tooltip {
        opacity: 1;
        visibility: visible;
    }

}

/* Button */
.wriwoods-add-tree-button:active {
    transform: scale(0.95);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Pixie dust */
.forest-dust {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff, rgba(255,255,255,0));
    pointer-events: none;
    z-index: 9999;
}

.wriwoods-add-tree-button.clicked {
    transform: scale(0.95);
    transition: transform 0.15s ease;
}

/* Canvas */
#wriwoods-pixie-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* so clicks go through */
    z-index: 99999; /* on top */
}