/* World, Players, and Objects */

#game-screen {
    background: #0a051a; /* Matches the deep forest tone to prevent visible black bars */
    display: block; /* Disable flex centering for the game viewport */
}

.game-world-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.game-world {
    position: absolute;
    top: 0;
    left: 0;
    width: 100000px;
    height: 100%;
    transition: transform 0.1s linear;
}

.world-bg {
    position: absolute;
    left: 0;
    width: 102000px; /* Slightly wider than WORLD_WIDTH for safety */
    height: 100%;
    background-image: url('main_bg.png');
    background-size: auto 100%;
    background-repeat: repeat-x;
    filter: brightness(0.6) saturate(1.2);
    bottom: 0;
    transition: filter 2s ease, background-image 1s ease-in-out;
    background-position: left bottom;
}

.ground-platform {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100000px;
    height: 120px;
    background: linear-gradient(to bottom, #1a0a2e, #0a051a);
    border-top: 4px solid #553377;
    box-shadow: 0 -10px 20px rgba(0,0,0,0.8);
    z-index: 40;
}

.player {
    position: absolute;
    width: 80px;
    height: 100px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom center;
    z-index: 50;
    transition: top 0.1s linear, left 0.1s linear;
    transform-origin: bottom center;
}

.player.walking {
    animation: walkCycle 0.7s infinite ease-in-out;
}

.player.idle {
    animation: idleAnim 2s infinite ease-in-out;
}

@keyframes idleAnim {
    0%, 100% { 
        transform: scaleY(1); 
        filter: brightness(1);
    }
    50% { 
        transform: scaleY(0.94) translateY(2px); 
        filter: brightness(1.1);
    }
}



.player.flipped {
    /* Use scale property instead of transform to avoid clashing with walk animation */
    scale: -1 1;
}

.player.dashing {
    filter: brightness(2) saturate(2);
    transition: left 0.1s linear;
}

.flint-sprite {
    background-image: url('flint.png');
}

.lumi-sprite {
    background-image: url('lumi.png');
}

.astra-sprite {
    background-image: url('astra.png');
}

.player-glow {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 20px;
    background: radial-gradient(ellipse, rgba(255,215,0,0.4) 0%, transparent 70%);
    border-radius: 50%;
}

.flint-sprite .player-glow {
    background: radial-gradient(ellipse, rgba(255, 100, 0, 0.6) 0%, transparent 70%);
}

.lumi-sprite .player-glow {
    background: radial-gradient(ellipse, rgba(0, 200, 255, 0.6) 0%, transparent 70%);
}

.astra-sprite .player-glow {
    background: radial-gradient(ellipse, rgba(158, 111, 255, 0.75) 0%, transparent 70%);
}

.astral-leap-fx {
    display: none;
    width: 180px;
    height: 100px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(255, 255, 255, 0.9), rgba(103, 238, 255, 0.6) 22%, rgba(139, 79, 255, 0.35) 48%, transparent 72%);
    filter: blur(3px);
    animation: astralBurst 0.7s ease-out;
}

.player.astral-leaping {
    filter: brightness(1.5) drop-shadow(0 0 18px #8ff6ff) drop-shadow(0 0 28px #9a5cff);
}

@keyframes astralBurst {
    from { transform: translate(-50%, -50%) scale(0.25) rotate(0deg); opacity: 1; }
    to { transform: translate(-50%, -50%) scale(1.8) rotate(160deg); opacity: 0; }
}

.obstacle {
    position: absolute;
    background: rgba(40, 20, 60, 0.8);
    border: 2px solid #553377;
    border-radius: 8px;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.5), 0 0 10px rgba(224, 167, 255, 0.3);
    z-index: 45;
    background-image: linear-gradient(45deg, #2a1a3a 25%, #3a2a4a 25%, #3a2a4a 50%, #2a1a3a 50%, #2a1a3a 75%, #3a2a4a 75%, #3a2a4a 100%);
    background-size: 20px 20px;
    pointer-events: none;
}

.dynamic-obstacle {
    background: linear-gradient(135deg, #ff4e50, #f9d423);
    border: 2px solid #fff;
    box-shadow: 0 0 15px #ff4e50;
    border-radius: 4px;
}

.challenge-btn {
    position: absolute;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    background: #553377;
    padding: 8px 20px;
    border-radius: 10px;
    border: 2px solid #ffd700;
    cursor: pointer;
    font-size: 0.9rem;
    z-index: 100;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { transform: translateX(-50%) scale(1); }
    50% { transform: translateX(-50%) scale(1.05); box-shadow: 0 0 15px #ffd700; }
    100% { transform: translateX(-50%) scale(1); }
}

.solid-rock {
    position: absolute;
    background: #444;
    border: 4px solid #222;
    border-radius: 10px;
    z-index: 42;
    background-image: radial-gradient(circle at 30% 30%, #666, #333);
}

.portal {
    position: absolute;
    width: 150px;
    height: 250px;
    background: radial-gradient(ellipse, #7b2ff7 0%, transparent 70%);
    border: 4px solid #ffd700;
    border-radius: 50% / 100% 100% 0 0;
    box-shadow: 0 0 50px #7b2ff7;
    z-index: 45;
    animation: portalPulse 2s infinite ease-in-out;
}

.fallen-tree {
    position: absolute;
    width: 80px;
    height: 350px;
    background: #5d4037;
    border: 4px solid #3e2723;
    border-radius: 10px;
    z-index: 46;
    background-image: linear-gradient(90deg, transparent 50%, rgba(0,0,0,0.1) 50%);
    background-size: 10px 100%;
}

.collectible {
    position: absolute;
    width: 30px;
    height: 30px;
    background: gold;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    box-shadow: 0 0 15px gold;
    animation: float 2s infinite ease-in-out;
}

.magic-wall {
    position: absolute;
    background-image: url('magic_wall.png');
    background-size: cover;
    z-index: 44;
    border-radius: 5px;
    box-shadow: 0 0 30px rgba(123, 47, 247, 0.5);
    transition: opacity 0.3s;
}

.scorpion-enemy {
    position: absolute;
    width: 120px;
    height: 120px;
    background-image: url('scorpion.png');
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 45;
    filter: drop-shadow(0 0 10px #ff4e50);
    animation: skitter 0.2s infinite alternate;
    transition: transform 0.1s linear;
}

@keyframes skitter {
    from { transform: translateX(-2px) rotate(-2deg); }
    to { transform: translateX(2px) rotate(2deg); }
}

.quest-lock {
    position: absolute;
    background: repeating-linear-gradient(
        45deg,
        rgba(255, 215, 0, 0.3),
        rgba(255, 215, 0, 0.3) 10px,
        rgba(0, 0, 0, 0.5) 10px,
        rgba(0, 0, 0, 0.5) 20px
    );
    border: 4px solid #ffd700;
    z-index: 43;
    display: flex;
    align-items: center;
    justify-content: center;
}

.quest-icon {
    font-size: 40px;
    animation: bounce 1s infinite alternate;
}

.key-sphere {
    position: absolute;
    width: 60px;
    height: 60px;
    background-image: url('key.png');
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 42;
    animation: float 2s infinite ease-in-out;
    filter: drop-shadow(0 0 10px gold);
}

.ice-patch {
    position: absolute;
    width: 200px;
    height: 20px;
    background-image: url('ice_patch.png');
    background-size: 100% 100%;
    z-index: 41;
    opacity: 0.8;
}

.snow-flake {
    position: absolute;
    background: white;
    border-radius: 50%;
    pointer-events: none;
    z-index: 100;
    opacity: 0.8;
    box-shadow: 0 0 5px white;
}

.berry-bush {
    position: absolute;
    width: 50px;
    height: 50px;
    background-image: url('berry.png');
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 41;
}

.berry-bush.cactus-fruit { background-image: url('cactus_fruit.png'); }
.berry-bush.frozen-berry { background-image: url('frozen_berry.png'); }
.berry-bush.magic-food { 
    background-image: url('magic_food.png'); 
    filter: drop-shadow(0 0 15px #a020f0);
    animation: magicFloat 2s infinite ease-in-out;
}

.dark-mage {
    position: absolute;
    width: 80px;
    height: 150px;
    background-image: url('evil_mages.png');
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 45;
    filter: drop-shadow(0 0 10px #7b2ff7);
    animation: float 3s infinite ease-in-out;
}

.magic-bolt {
    position: absolute;
    width: 20px;
    height: 20px;
    background: radial-gradient(circle, #fff 0%, #7b2ff7 100%);
    box-shadow: 0 0 15px #e0a7ff;
    border-radius: 50%;
    z-index: 46;
}

.boss-mage {
    position: absolute;
    width: 300px;
    height: 400px;
    background-image: url('evil_mages.png');
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 44;
    filter: drop-shadow(0 0 40px #7b2ff7) brightness(0.8);
    transition: transform 2s;
}

.boss-death {
    transform: scale(0) rotate(720deg);
    opacity: 0;
}

.magic-sparkle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #e0a7ff;
    border-radius: 50%;
    pointer-events: none;
    animation: sparkleAnim 1s infinite;
}

.lava-trigger-block {
    position: absolute;
    width: 40px;
    height: 20px;
    background-image: url('lava_trigger.png');
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 41;
    filter: drop-shadow(0 0 5px #ff4e50);
}

.lava-spike-hidden {
    position: absolute;
    width: 40px;
    height: 80px;
    background: linear-gradient(to top, #ff4e50, #f9d423);
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
    z-index: 40;
    opacity: 0;
    pointer-events: none;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s;
    transform: translateY(0);
}

.lava-spike {
    position: absolute;
    width: 40px;
    height: 80px;
    background: linear-gradient(to top, #ff4e50, #f9d423);
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
    z-index: 45;
    box-shadow: 0 0 20px #ff4e50;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s;
    transform: translateY(-80px);
    opacity: 1;
}

@keyframes magicFloat {
    0%, 100% { transform: translateY(0) scale(1); filter: drop-shadow(0 0 15px #a020f0); }
    50% { transform: translateY(-10px) scale(1.1); filter: drop-shadow(0 0 25px #e0a7ff); }
}

@keyframes sparkleAnim {
    0% { transform: translate(0, 0) scale(0); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translate(var(--tx), var(--ty)) scale(1.5); opacity: 0; }
}

.ability-fx {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    display: none;
}

.fire-dash-fx {
    width: 150px;
    height: 80px;
    background: radial-gradient(ellipse, rgba(255, 100, 0, 0.8), transparent);
    border-radius: 50%;
    filter: blur(10px);
}

.crystal-fx {
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(0, 255, 255, 0.6), transparent);
    border-radius: 50%;
    filter: blur(5px);
    border: 2px solid #fff;
}

.wandering-wisp {
    position: absolute;
    width: 68px;
    height: 68px;
    z-index: 45;
    border-radius: 48% 52% 58% 42%;
    background: radial-gradient(circle at 50% 60%, #ffffff 0 9%, #6dfff2 12% 28%, #8d5cff 48%, transparent 72%);
    filter: drop-shadow(0 0 12px #6dfff2) drop-shadow(0 0 28px #8d5cff);
    animation: wispDrift 2.2s ease-in-out infinite;
}

.wandering-wisp::before,
.wandering-wisp::after {
    content: '';
    position: absolute;
    inset: 18px -12px 4px;
    border-radius: 50%;
    border-top: 3px solid rgba(170, 255, 247, 0.8);
    transform: rotate(24deg);
}

.wandering-wisp::after {
    transform: rotate(-24deg);
}

.wisp-core {
    position: absolute;
    inset: 27px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 15px 6px #9ffff6;
}

.frost-hopper {
    position: absolute;
    width: 86px;
    height: 78px;
    z-index: 45;
    border: 3px solid #d9fbff;
    border-radius: 46% 46% 30% 30%;
    background: linear-gradient(145deg, #e9fdff 0 35%, #72cfff 38% 72%, #4776d9 100%);
    box-shadow: inset 0 -12px 0 rgba(33, 69, 145, 0.35), 0 0 20px #8de9ff;
    animation: frostHop 1.15s ease-in-out infinite;
}

.frost-hopper::before {
    content: '';
    position: absolute;
    left: 22px;
    top: -20px;
    width: 38px;
    height: 28px;
    background: #b8f3ff;
    clip-path: polygon(50% 0, 64% 52%, 100% 28%, 72% 100%, 28% 100%, 0 28%, 36% 52%);
}

.frost-eye {
    display: inline-block;
    width: 9px;
    height: 12px;
    margin: 27px 0 0 22px;
    border-radius: 50%;
    background: #10244e;
    box-shadow: 0 0 4px #fff;
}

@keyframes wispDrift {
    0%, 100% { transform: translateY(0) rotate(-3deg); }
    50% { transform: translateY(-22px) rotate(3deg); }
}

@keyframes frostHop {
    0%, 100% { transform: translateY(0) scaleX(1.04); }
    50% { transform: translateY(-18px) scaleX(0.96); }
}