body {
    overflow: hidden !important;
}

#game-container {
    overflow: hidden !important;
    position: fixed !important;
    width: 100vw !important;
    height: 100vh !important;
}

#main-window {
    overflow: hidden !important;
}

/* Contain the animations within their boundaries */
#background {
    transform-origin: center center;
    position: relative;
    overflow: hidden !important;
    /* Add containment for performance and bounds */
    contain: paint layout size;
}

#character-sprite {
    transform-origin: center bottom;
    position: absolute;
    overflow: visible !important;
    /* Ensure sprite animations don't affect document flow */
    contain: paint layout size;
}

/* Background Effects */
@keyframes bgShake {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(-8px, 3px); }
    50% { transform: translate(5px, -2px); }
    75% { transform: translate(-3px, 5px); }
}

@keyframes bgShakeIntense {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(-15px, 5px) rotate(-0.5deg); }
    50% { transform: translate(10px, -8px) rotate(0.8deg); }
    75% { transform: translate(-8px, 12px) rotate(-0.3deg); }
}

@keyframes bgPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

@keyframes bgDarken {
    0% { filter: brightness(1); }
    100% { filter: brightness(0.3); }
}

@keyframes bgBrighten {
    0% { filter: brightness(1); }
    100% { filter: brightness(1.5); }
}

@keyframes bgThunder {
    0%, 100% { filter: brightness(1); }
    10% { filter: brightness(1.5); }
    20% { filter: brightness(1); }
    30% { filter: brightness(1.3); }
}

@keyframes bgBlur {
    0% { filter: blur(0); }
    100% { filter: blur(3px); }
}

@keyframes bgDesaturate {
    0% { filter: saturate(1); }
    100% { filter: saturate(0); }
}

@keyframes bgWave {
    0% { transform: skewX(0deg); }
    25% { transform: skewX(1deg); }
    75% { transform: skewX(-1deg); }
    100% { transform: skewX(0deg); }
}

@keyframes bgRipple {
    0% { transform: scale(1); filter: brightness(1); }
    50% { transform: scale(1.05); filter: brightness(0.9); }
    100% { transform: scale(1); filter: brightness(1); }
}

/* Character Sprite Effects */
@keyframes charShake {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    25% { transform: translateX(-52%) translateY(-5px); }
    75% { transform: translateX(-48%) translateY(5px); }
}

@keyframes charShakeIntense {
    0%, 100% { transform: translateX(-50%) translateY(0) rotate(0deg); }
    25% { transform: translateX(-55%) translateY(-8px) rotate(-2deg); }
    75% { transform: translateX(-45%) translateY(8px) rotate(2deg); }
}

@keyframes charFlicker {
    0%, 100% { opacity: 1; transform: translateX(-50%) scale(1); }
    50% { opacity: 0.7; transform: translateX(-50%) scale(0.98); }
}

@keyframes charGlitch {
    0%, 100% { 
        clip-path: inset(0 0 0 0);
        transform: translateX(-50%);
    }
    10% {
        clip-path: inset(10% 0 80% 0);
        transform: translateX(-51%);
    }
    20% {
        clip-path: inset(50% 0 30% 0);
        transform: translateX(-49%);
    }
    30% {
        clip-path: inset(30% 0 60% 0);
        transform: translateX(-50%);
    }
}

@keyframes charPulse {
    0%, 100% { transform: translateX(-50%) scale(1); }
    50% { transform: translateX(-50%) scale(1.05); }
}

@keyframes charFloat {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-10px); }
}

@keyframes charSway {
    0%, 100% { transform: translateX(-50%) rotate(0deg); }
    25% { transform: translateX(-50%) rotate(2deg); }
    75% { transform: translateX(-50%) rotate(-2deg); }
}

@keyframes charFadeIn {
    0% { opacity: 0; transform: translateX(-50%) translateY(20px); }
    100% { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes charFadeOut {
    0% { opacity: 1; transform: translateX(-50%) translateY(0); }
    100% { opacity: 0; transform: translateX(-50%) translateY(20px); }
}

@keyframes charBlur {
    0% { filter: blur(0); }
    50% { filter: blur(3px); }
    100% { filter: blur(0); }
}

@keyframes charVibrate {
    0%, 100% { transform: translateX(-50%); }
    25% { transform: translateX(-50.5%); }
    75% { transform: translateX(-49.5%); }
}

/* Advanced Combined Keyframes */
@keyframes digitalCorruption {
    0%, 100% { 
        clip-path: inset(0 0 0 0);
        transform: translateX(-50%) scale(1);
        filter: hue-rotate(0deg);
    }
    10% { 
        clip-path: inset(10% 0 80% 0);
        transform: translateX(-51%) scale(1.02);
        filter: hue-rotate(45deg);
    }
    20% { 
        clip-path: inset(50% 0 30% 0);
        transform: translateX(-49%) scale(0.98);
        filter: hue-rotate(-45deg);
    }
    30% { 
        clip-path: inset(30% 0 60% 0);
        transform: translateX(-50%) scale(1);
        filter: hue-rotate(90deg);
    }
}

@keyframes emotionalBreakdown {
    0% { transform: translateX(-50%) scale(1) rotate(0deg); opacity: 1; }
    25% { transform: translateX(-52%) scale(0.98) rotate(-1deg); opacity: 0.8; }
    50% { transform: translateX(-50%) scale(1.02) rotate(1deg); opacity: 0.9; }
    75% { transform: translateX(-48%) scale(0.99) rotate(-0.5deg); opacity: 0.7; }
    100% { transform: translateX(-50%) scale(1) rotate(0deg); opacity: 1; }
}

@keyframes powerSurge {
    0% { filter: brightness(1) blur(0) hue-rotate(0deg); }
    25% { filter: brightness(1.5) blur(2px) hue-rotate(90deg); }
    50% { filter: brightness(0.8) blur(0) hue-rotate(180deg); }
    75% { filter: brightness(1.2) blur(1px) hue-rotate(270deg); }
    100% { filter: brightness(1) blur(0) hue-rotate(360deg); }
}

@keyframes dimensionalRift {
    0% { transform: scale(1) rotate(0deg) skew(0deg); filter: hue-rotate(0deg); }
    25% { transform: scale(1.1) rotate(2deg) skew(5deg); filter: hue-rotate(90deg); }
    50% { transform: scale(0.9) rotate(-2deg) skew(-5deg); filter: hue-rotate(180deg); }
    75% { transform: scale(1.05) rotate(1deg) skew(2deg); filter: hue-rotate(270deg); }
    100% { transform: scale(1) rotate(0deg) skew(0deg); filter: hue-rotate(360deg); }
}

@keyframes memoryFlashback {
    0% { filter: saturate(1) blur(0) brightness(1); transform: scale(1); }
    25% { filter: saturate(1.5) blur(3px) brightness(1.2); transform: scale(1.05); }
    50% { filter: saturate(0.5) blur(0) brightness(0.8); transform: scale(0.95); }
    75% { filter: saturate(2) blur(2px) brightness(1.1); transform: scale(1.02); }
    100% { filter: saturate(1) blur(0) brightness(1); transform: scale(1); }
}

@keyframes timeDistortion {
    0% { transform: translate(0, 0) scale(1); filter: blur(0); }
    25% { transform: translate(10px, -5px) scale(1.1); filter: blur(2px); }
    50% { transform: translate(-8px, 8px) scale(0.9); filter: blur(3px); }
    75% { transform: translate(5px, -10px) scale(1.05); filter: blur(1px); }
    100% { transform: translate(0, 0) scale(1); filter: blur(0); }
}

/* Effect Classes for Background */
.bg-effect-shake { animation: bgShake 0.5s ease-in-out; }
.bg-effect-shake-intense { animation: bgShakeIntense 0.8s ease-in-out; }
.bg-effect-pulse { animation: bgPulse 1s ease-in-out; }
.bg-effect-darken { animation: bgDarken 2s ease-in forwards; }
.bg-effect-brighten { animation: bgBrighten 2s ease-in forwards; }
.bg-effect-thunder { animation: bgThunder 1s ease-out; }
.bg-effect-blur { animation: bgBlur 0.5s ease-in forwards; }
.bg-effect-desaturate { animation: bgDesaturate 1s ease-in forwards; }
.bg-effect-wave { animation: bgWave 2s ease-in-out; }
.bg-effect-ripple { animation: bgRipple 1s ease-in-out; }

/* Effect Classes for Character Sprite */
.char-effect-shake { animation: charShake 0.5s ease-in-out !important; }
.char-effect-shake-intense { animation: charShakeIntense 0.8s ease-in-out !important; }
.char-effect-flicker { animation: charFlicker 2s ease-in-out !important; }
.char-effect-glitch { animation: charGlitch 0.5s steps(1) !important; }
.char-effect-pulse { animation: charPulse 1s ease-in-out !important; }
.char-effect-float { animation: charFloat 2s ease-in-out infinite !important; }
.char-effect-sway { animation: charSway 2s ease-in-out !important; }
.char-effect-fade-in { animation: charFadeIn 1s ease-out !important; }
.char-effect-fade-out { animation: charFadeOut 1s ease-in !important; }
.char-effect-blur { animation: charBlur 0.5s ease-in-out !important; }
.char-effect-vibrate { animation: charVibrate 0.1s linear infinite !important; }

/* Ensure character sprite animations maintain the horizontal centering */
#character-sprite {
    transform: translateX(-50%);
    will-change: transform, opacity, clip-path, filter;
}

/* Add transition for smooth effect removal */
#background, #character-sprite {
    transition: filter 0.3s ease;
}

/* Combined effects */
.bg-effect-dramatic {
    transform-origin: center center;
    animation: bgDarken 1s ease-in forwards, 
               bgShake 0.5s ease-in-out !important;
    contain: paint layout;
}

.char-effect-panic {
    transform-origin: center bottom;
    animation: charShake 0.3s ease-in-out infinite, 
               charPulse 1s ease-in-out infinite !important;
    contain: paint layout;
}

.char-effect-malfunction {
    animation: charGlitch 0.3s steps(1), charVibrate 0.1s linear infinite !important;
}

/* Complex Background Effects */
.bg-effect-quantum-flux {
    animation: 
        bgPulse 2s ease-in-out infinite,
        powerSurge 3s linear infinite,
        bgWave 4s ease-in-out infinite !important;
}

.bg-effect-reality-break {
    animation: 
        dimensionalRift 2s ease-in-out,
        bgShakeIntense 0.5s ease-in-out,
        bgRipple 1s ease-in-out !important;
}

.bg-effect-time-stop {
    animation: 
        timeDistortion 1s ease-in-out forwards,
        bgDesaturate 0.5s ease-in forwards !important;
}

.bg-effect-memory-surge {
    animation: 
        memoryFlashback 3s ease-in-out,
        bgBrighten 1s ease-in-out !important;
}

.bg-effect-system-crash {
    animation: 
        bgShakeIntense 0.8s ease-in-out,
        powerSurge 1s linear,
        bgDarken 2s ease-in forwards !important;
}

.bg-effect-quantum-flux,
.bg-effect-reality-break,
.bg-effect-time-stop,
.bg-effect-memory-surge,
.bg-effect-system-crash {
    transform-origin: center center;
    contain: paint layout;
}

/* Complex Character Effects */
.char-effect-digital-corruption {
    animation: 
        digitalCorruption 0.5s steps(1) infinite,
        charShake 0.3s ease-in-out infinite !important;
}

.char-effect-emotional-breakdown {
    animation: 
        emotionalBreakdown 2s ease-in-out infinite,
        charBlur 1s ease-in-out alternate infinite !important;
}

.char-effect-power-overload {
    animation: 
        charPulse 0.5s ease-in-out infinite,
        powerSurge 1s linear infinite,
        charVibrate 0.1s linear infinite !important;
}

.char-effect-dimensional-shift {
    animation: 
        charFloat 2s ease-in-out infinite,
        dimensionalRift 3s linear infinite !important;
}

.char-effect-temporal-echo {
    animation: 
        charSway 2s ease-in-out infinite,
        timeDistortion 1.5s ease-in-out infinite !important;
    opacity: 0.8;
}

.char-effect-digital-corruption,
.char-effect-emotional-breakdown,
.char-effect-power-overload,
.char-effect-dimensional-shift,
.char-effect-temporal-echo {
    transform-origin: center bottom;
    contain: paint layout;
}

.bg-effect-transition,
.char-effect-transition {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
    perspective: 1000px;
}

/* Combined Scene Effects (applying to both background and character) */
.scene-effect-reality-warp {
    filter: hue-rotate(180deg) saturate(1.5);
    animation: dimensionalRift 2s infinite !important;
}

.scene-effect-time-freeze {
    filter: contrast(1.2) brightness(0.8) saturate(0.5);
    animation: timeDistortion 1s forwards !important;
}

.scene-effect-memory-dive {
    filter: sepia(0.5) brightness(1.2);
    animation: memoryFlashback 3s infinite !important;
}

/* Add to your existing effect handling code */
.char-effect-transition {
    transition: all 0.3s ease-out;
}

.bg-effect-transition {
    transition: all 0.3s ease-out;
}