body {
    margin: 0;
    padding: 0;
    background-color: black;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    font-family: 'Montserrat', sans-serif;
    transition: background-color 1.5s ease-in-out;
}

.container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-family: 'Orbitron', sans-serif;
    font-size: 5rem;
    margin: 0;
    opacity: 1;
    transition: opacity 1s ease-in-out;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}

.title.fade-out {
    opacity: 0;
}

.roll-button {
    position: absolute;
    bottom: 50px;
    background-color: transparent;
    color: white;
    border: 2px solid white;
    padding: 15px 40px;
    font-size: 1.2rem;
    cursor: pointer;
    border-radius: 30px;
    opacity: 0;
    transition: all 0.3s ease-in-out;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.roll-button:hover:not(:disabled) {
    background-color: white;
    color: black;
    transform: scale(1.05);
}

.roll-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    border-color: rgba(255, 255, 255, 0.5);
    color: rgba(255, 255, 255, 0.5);
}

.roll-button.fade-in {
    opacity: 1;
}

.luck-boost-indicator {
    position: absolute;
    top: 120px;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    color: black;
    padding: 12px 24px;
    border-radius: 25px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.6), 0 4px 15px rgba(0, 0, 0, 0.3);
    animation: luckBoostPulse 1s ease-in-out infinite;
    z-index: 1000;
}

.luck-boost-text {
    display: block;
}

@keyframes luckBoostPulse {
    0%, 100% {
        transform: translateX(-50%) scale(1);
        box-shadow: 0 0 20px rgba(255, 255, 255, 0.6), 0 4px 15px rgba(0, 0, 0, 0.3);
    }
    50% {
        transform: translateX(-50%) scale(1.05);
        box-shadow: 0 0 30px rgba(255, 255, 255, 0.8), 0 6px 20px rgba(0, 0, 0, 0.4);
    }
}

.collection-button {
    position: absolute;
    top: 50px;
    background-color: transparent;
    color: white;
    border: 2px solid white;
    padding: 15px 40px;
    font-size: 1.2rem;
    cursor: pointer;
    border-radius: 30px;
    opacity: 0;
    transition: all 0.3s ease-in-out;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.collection-button:hover {
    background-color: white;
    color: black;
    transform: scale(1.05);
}

.collection-button.fade-in {
    opacity: 1;
}

.collection-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.collection-modal.active {
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
}

.collection-content {
    background-color: rgba(20, 20, 20, 0.95);
    border: 2px solid white;
    border-radius: 15px;
    width: 80%;
    max-width: 800px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}

.collection-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.collection-header h2 {
    color: white;
    font-family: 'Orbitron', sans-serif;
    margin: 0;
    font-size: 1.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.close-button {
    background: none;
    border: none;
    color: white;
    font-size: 2rem;
    cursor: pointer;
    padding: 0 10px;
    transition: all 0.3s ease;
}

.close-button:hover {
    color: #ff4444;
    transform: scale(1.1);
}

.collection-category-switcher {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 15px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(0, 0, 0, 0.3);
}

.category-button {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.7);
    padding: 8px 20px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.category-button:hover {
    border-color: rgba(255, 255, 255, 0.6);
    color: rgba(255, 255, 255, 0.9);
    transform: translateY(-2px);
}

.category-button.active {
    background: white;
    border-color: white;
    color: black;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
}

.collection-items {
    padding: 20px;
    overflow-y: auto;
    max-height: calc(80vh - 80px);
}

.collection-items::-webkit-scrollbar {
    width: 8px;
}

.collection-items::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

.collection-items::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
}

.collection-items::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.4);
}

.empty-message {
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.2rem;
    margin: 20px 0;
}

.collection-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
}

.collection-item:last-child {
    border-bottom: none;
}

.rarity-name {
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.collection-count {
    color: rgba(255, 255, 255, 0.5);
    font-weight: 600;
}

/* Collection rarity colors */
.collection-item .rarity-name.uncommon {
    color: #00ff00;
    text-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
}

.collection-item .rarity-name.rare {
    color: #00ffff;
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

.collection-item .rarity-name.interesting {
    color: #ff69b4;
    text-shadow: 0 0 10px rgba(255, 105, 180, 0.5);
}

.collection-item .rarity-name.well {
    color: #006400;
    text-shadow: 0 0 10px rgba(0, 100, 0, 0.5);
}

.collection-item .rarity-name.epic {
    color: #ff00ff;
    text-shadow: 0 0 10px rgba(255, 0, 255, 0.5);
}

.collection-item .rarity-name.admirable {
    color: #ffa500;
    text-shadow: 0 0 10px rgba(255, 165, 0, 0.5);
}

.collection-item .rarity-name.legendary {
    color: #ffff00;
    text-shadow: 0 0 10px rgba(255, 255, 0, 0.5);
}

.collection-item .rarity-name.christmas {
    animation: christmasColor 1s infinite;
}

.collection-item .rarity-name.small-binary {
    animation: binaryColor 1s infinite;
}

.collection-item .rarity-name.hot {
    color: #8b0000;
    text-shadow: 0 0 10px rgba(139, 0, 0, 0.5);
}

.collection-item .rarity-name.camo {
    animation: camoColor 1s infinite;
}

.collection-item .rarity-name.space {
    animation: spaceColor 1s infinite;
}

.collection-item .rarity-name.triple {
    animation: tripleColor 1.5s infinite;
}

.collection-item .rarity-name.jackpot {
    color: #FFD700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.collection-item .rarity-name.mythical {
    animation: mythicalColor 1.5s infinite;
}

.collection-item .rarity-name.slashed {
    animation: slashedColor 1.5s infinite;
}

.collection-item .rarity-name.crystal {
    color: #87ceeb;
    text-shadow: 0 0 10px rgba(135, 206, 235, 0.5);
    animation: crystalPulse 3s infinite;
}

.collection-item .rarity-name.horizon {
    color: #ffa500;
    text-shadow: 0 0 25px rgba(255, 165, 0, 0.8),
                 0 0 50px rgba(255, 165, 0, 0.6),
                 0 0 75px rgba(255, 165, 0, 0.4);
    animation: horizonGlow 3s infinite;
}

.collection-item .rarity-name.eldritch {
    animation: eldritchColor 1.5s infinite;
}

.collection-item .rarity-name.astral {
    color: #ffff00;
    text-shadow: 0 0 30px rgba(255, 255, 0, 0.9),
                 0 0 60px rgba(255, 255, 0, 0.7),
                 0 0 90px rgba(255, 255, 0, 0.5);
    animation: astralGlow 3s infinite;
}

.collection-item .rarity-name.core {
    color: #4B0082;
    text-shadow: 0 0 30px rgba(75, 0, 130, 0.9),
                 0 0 60px rgba(75, 0, 130, 0.7),
                 0 0 90px rgba(75, 0, 130, 0.5);
    animation: coreGlow 3s infinite;
}

.collection-item .rarity-name.quantum {
    color: #2F2F2F;
    text-shadow: 0 0 30px rgba(47, 47, 47, 0.9),
                 0 0 60px rgba(47, 47, 47, 0.7),
                 0 0 90px rgba(47, 47, 47, 0.5);
    animation: quantumGlow 3s infinite;
}

.collection-item .rarity-name.mechanical {
    animation: mechanicalColor 1s infinite;
}

.collection-item .rarity-name.starlit {
    color: #ffffff;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.9),
                 0 0 60px rgba(255, 255, 255, 0.7),
                 0 0 90px rgba(255, 255, 255, 0.5);
    animation: starlitGlow 3s infinite;
}

.collection-item .rarity-name.close {
    color: #808080;
    text-shadow: 0 0 30px rgba(128, 128, 128, 0.9),
                 0 0 60px rgba(128, 128, 128, 0.7),
                 0 0 90px rgba(128, 128, 128, 0.5);
    animation: closeGlow 3s infinite;
}

.collection-item .rarity-name.omega {
    color: #00008B;
    text-shadow: 0 0 30px rgba(0, 0, 139, 0.9),
                 0 0 60px rgba(0, 0, 139, 0.7),
                 0 0 90px rgba(0, 0, 139, 0.5);
    animation: omegaGlow 3s infinite;
}

.collection-item .rarity-name.gilded {
    color: #FFD700;
    text-shadow: 0 0 30px rgba(255, 215, 0, 0.9),
                 0 0 60px rgba(255, 215, 0, 0.7),
                 0 0 90px rgba(255, 215, 0, 0.5);
    animation: gildedGlow 3s infinite;
}

.collection-item .rarity-name.rift {
    color: #800000;
    text-shadow: 0 0 30px rgba(128, 0, 0, 0.9),
                 0 0 60px rgba(128, 0, 0, 0.7),
                 0 0 90px rgba(128, 0, 0, 0.5);
    animation: riftGlow 3s infinite;
}

.collection-item .rarity-name.veiled {
    color: #006400;
    text-shadow: 0 0 30px rgba(0, 100, 0, 0.9),
                 0 0 60px rgba(0, 100, 0, 0.7),
                 0 0 90px rgba(0, 100, 0, 0.5);
    animation: veiledGlow 3s infinite;
}

.collection-item .rarity-name.lunar {
    color: #2F2F2F;
    text-shadow: 0 0 30px rgba(47, 47, 47, 0.9),
                 0 0 60px rgba(47, 47, 47, 0.7),
                 0 0 90px rgba(47, 47, 47, 0.5);
    animation: lunarGlow 3s infinite;
}

.collection-item .rarity-name.scribe {
    color: #8B4513;
    text-shadow: 0 0 30px rgba(139, 69, 19, 0.9),
                 0 0 60px rgba(139, 69, 19, 0.7),
                 0 0 90px rgba(139, 69, 19, 0.5);
    animation: scribeGlow 3s infinite;
}

.collection-item .rarity-name.ghost {
    color: #D3D3D3;
    text-shadow: 0 0 30px rgba(211, 211, 211, 0.9),
                 0 0 60px rgba(211, 211, 211, 0.7),
                 0 0 90px rgba(211, 211, 211, 0.5);
    animation: ghostGlow 3s infinite;
}

.collection-item .rarity-name.facet {
    color: #ADD8E6;
    text-shadow: 0 0 30px rgba(173, 216, 230, 0.9),
                 0 0 60px rgba(173, 216, 230, 0.7),
                 0 0 90px rgba(173, 216, 230, 0.5);
    animation: facetGlow 3s infinite;
}

.collection-item .rarity-name.exalted {
    color: #FFA500;
    text-shadow: 0 0 30px rgba(255, 165, 0, 0.9),
                 0 0 60px rgba(255, 165, 0, 0.7),
                 0 0 90px rgba(255, 165, 0, 0.5);
    animation: exaltedGlow 3s infinite;
}

.collection-item .rarity-name.foreground {
    animation: foregroundColor 1s infinite;
}

.collection-item .rarity-name.enraging {
    animation: enragingColor 1s infinite;
}

.collection-item .rarity-name.bloomed {
    animation: bloomedColor 1s infinite;
}

.collection-item .rarity-name.fractured {
    animation: fracturedColor 1s infinite;
}

.collection-item .rarity-name.mythical-plus-plus {
    animation: mythicalPlusPlusColor 1s infinite;
}

.collection-item .rarity-name.nebula {
    animation: nebulaColor 1s infinite;
}

.collection-item .rarity-name.singularity {
    animation: singularityColor 1s infinite;
}

.collection-item .rarity-name.lasting {
    animation: lastingColor 1s infinite;
}

.collection-item .rarity-name.frightening {
    animation: frighteningColor 1s infinite;
}

.collection-item .rarity-name.closer {
    animation: closerColor 1s infinite;
}

.collection-item .rarity-name.alpha {
    color: #CC6600;
    text-shadow: 0 0 10px rgba(204, 102, 0, 0.5);
}

.collection-item .rarity-name.exotic {
    color: #CC0000;
    text-shadow: 0 0 10px rgba(204, 0, 0, 0.5);
}

.collection-item .rarity-name.dream {
    color: #87CEEB;
    text-shadow: 0 0 10px rgba(135, 206, 235, 0.5);
}

.collection-item .rarity-name.sovereign {
    color: #006400;
    text-shadow: 0 0 10px rgba(0, 100, 0, 0.5);
}

.collection-item .rarity-name.planet {
    color: #4169E1;
    text-shadow: 0 0 10px rgba(65, 105, 225, 0.5);
}

.collection-item .rarity-name.lair {
    color: #404040;
    text-shadow: 0 0 10px rgba(64, 64, 64, 0.5);
}

.collection-item .rarity-name.handled {
    color: #808080;
    text-shadow: 0 0 10px rgba(128, 128, 128, 0.5);
}

.collection-item .rarity-name.vast {
    color: #9370DB;
    text-shadow: 0 0 10px rgba(147, 112, 219, 0.5);
}

.collection-item .rarity-name.critical {
    color: #8B0000;
    text-shadow: 0 0 10px rgba(139, 0, 0, 0.5);
}

.collection-item .rarity-name.burning {
    animation: burningColor 1s infinite;
}

.collection-item .rarity-name.crypt {
    color: #808080;
    text-shadow: 0 0 10px rgba(128, 128, 128, 0.5);
}

.collection-item .rarity-name.ultra {
    animation: ultraColor 1s infinite;
}

.collection-item .rarity-name.mythical-plus {
    animation: mythicalPlusColor 1.5s infinite;
}

.collection-item .rarity-name.eclipse {
    animation: eclipseColor 1s infinite;
}

.collection-item .rarity-name.sparked {
    animation: sparkedColor 1s infinite;
}

.collection-item .rarity-name.quarter {
    animation: quarterColor 1.5s infinite;
}

.collection-item .rarity-name.overclocked {
    animation: overclockedColor 1.5s infinite;
}

.collection-item .rarity-name.runic {
    animation: runicColor 1.5s infinite;
}

.roll-result {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.roll-result.visible {
    opacity: 1;
}

.roll-result h2 {
    color: white;
    font-family: 'Orbitron', sans-serif;
    font-size: 3rem;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}

.roll-result h2.uncommon {
    color: #00ff00;
    text-shadow: 0 0 20px rgba(0, 255, 0, 0.7),
                 0 0 40px rgba(0, 255, 0, 0.5),
                 0 0 60px rgba(0, 255, 0, 0.3);
}

.roll-result h2.rare {
    color: #00ffff;
    text-shadow: 0 0 20px rgba(0, 255, 255, 0.7),
                 0 0 40px rgba(0, 255, 255, 0.5),
                 0 0 60px rgba(0, 255, 255, 0.3);
}

.roll-result h2.interesting {
    color: #ff69b4;
    text-shadow: 0 0 20px rgba(255, 105, 180, 0.7),
                 0 0 40px rgba(255, 105, 180, 0.5),
                 0 0 60px rgba(255, 105, 180, 0.3);
}

.roll-result h2.well {
    color: #006400;
    text-shadow: 0 0 20px rgba(0, 100, 0, 0.7),
                 0 0 40px rgba(0, 100, 0, 0.5),
                 0 0 60px rgba(0, 100, 0, 0.3);
}

.roll-result h2.epic {
    color: #ff00ff;
    text-shadow: 0 0 20px rgba(255, 0, 255, 0.7),
                 0 0 40px rgba(255, 0, 255, 0.5),
                 0 0 60px rgba(255, 0, 255, 0.3);
}

.roll-result h2.admirable {
    color: #ffa500;
    text-shadow: 0 0 20px rgba(255, 165, 0, 0.7),
                 0 0 40px rgba(255, 165, 0, 0.5),
                 0 0 60px rgba(255, 165, 0, 0.3);
}

.roll-result h2.legendary {
    color: #ffff00;
    text-shadow: 0 0 20px rgba(255, 255, 0, 0.7),
                 0 0 40px rgba(255, 255, 0, 0.5),
                 0 0 60px rgba(255, 255, 0, 0.3);
}

.roll-result h2.christmas {
    animation: christmasColorResult 1s infinite;
}

.roll-result h2.small-binary {
    animation: binaryColor 1s infinite;
}

.roll-result h2.hot {
    color: #8b0000;
    text-shadow: 0 0 20px rgba(139, 0, 0, 0.7),
                 0 0 40px rgba(139, 0, 0, 0.5),
                 0 0 60px rgba(139, 0, 0, 0.3);
}

.roll-result h2.camo {
    animation: camoColor 1s infinite;
}

.roll-result h2.space {
    animation: spaceColor 1s infinite;
}

.roll-result h2.triple {
    animation: tripleColor 1.5s infinite;
}

.roll-result h2.jackpot {
    color: #FFD700;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.7),
                 0 0 40px rgba(255, 215, 0, 0.5),
                 0 0 60px rgba(255, 215, 0, 0.3);
}

.roll-result h2.mythical {
    animation: mythicalColor 1.5s infinite;
}

.roll-result h2.slashed {
    animation: slashedColor 1.5s infinite;
    position: relative;
}

.roll-result h2.slashed::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, #ffffff, transparent);
    animation: bladeSlice 5s infinite;
    z-index: 1;
}

.roll-result h2.crystal {
    color: #87ceeb;
    text-shadow: 0 0 20px rgba(135, 206, 235, 0.7),
                 0 0 40px rgba(135, 206, 235, 0.5),
                 0 0 60px rgba(135, 206, 235, 0.3);
    animation: crystalPulseResult 3s infinite;
}

.roll-result h2.horizon {
    color: #ffa500;
    text-shadow: 0 0 50px rgba(255, 165, 0, 0.9),
                 0 0 100px rgba(255, 165, 0, 0.7),
                 0 0 150px rgba(255, 165, 0, 0.5),
                 0 0 200px rgba(255, 165, 0, 0.3);
    animation: horizonGlowResult 3s infinite;
}

.roll-result h2.eldritch {
    animation: eldritchColorResult 1.5s infinite;
}

.roll-result h2.astral {
    color: #ffff00;
    font-size: 5rem;
    text-shadow: 0 0 60px rgba(255, 255, 0, 0.9),
                 0 0 120px rgba(255, 255, 0, 0.7),
                 0 0 180px rgba(255, 255, 0, 0.5),
                 0 0 240px rgba(255, 255, 0, 0.3);
    animation: astralGlowResult 3s infinite;
}

.roll-result h2.burning {
    animation: burningColorResult 1s infinite;
}

.roll-result h2.crypt {
    color: #808080;
    text-shadow: 0 0 20px rgba(128, 128, 128, 0.7),
                 0 0 40px rgba(128, 128, 128, 0.5),
                 0 0 60px rgba(128, 128, 128, 0.3);
}

.roll-result h2.ultra {
    animation: ultraColorResult 1s infinite;
}

.roll-result h2.mythical-plus {
    animation: mythicalPlusColorResult 1.5s infinite;
}

.roll-result h2.eclipse {
    animation: eclipseColorResult 1s infinite;
}

.roll-result h2.sparked {
    animation: sparkedColorResult 1s infinite;
}

.roll-result h2.quarter {
    animation: quarterColorResult 1.5s infinite;
}

.roll-result h2.overclocked {
    animation: overclockedColorResult 1.5s infinite;
}

.roll-result h2.runic {
    animation: runicColorResult 1.5s infinite;
}

.roll-result h2.core {
    color: #4B0082;
    font-size: 5rem;
    text-shadow: 0 0 60px rgba(75, 0, 130, 0.9),
                 0 0 120px rgba(75, 0, 130, 0.7),
                 0 0 180px rgba(75, 0, 130, 0.5),
                 0 0 240px rgba(75, 0, 130, 0.3);
    animation: coreGlowResult 3s infinite;
}

.roll-result h2.quantum {
    color: #2F2F2F;
    font-size: 5rem;
    text-shadow: 0 0 60px rgba(47, 47, 47, 0.9),
                 0 0 120px rgba(47, 47, 47, 0.7),
                 0 0 180px rgba(47, 47, 47, 0.5),
                 0 0 240px rgba(47, 47, 47, 0.3);
    animation: quantumGlowResult 3s infinite;
}

.roll-result h2.mechanical {
    font-size: 5rem;
    animation: mechanicalColorResult 1s infinite;
}

.roll-result h2.starlit {
    color: #ffffff;
    font-size: 5rem;
    text-shadow: 0 0 60px rgba(255, 255, 255, 0.9),
                 0 0 120px rgba(255, 255, 255, 0.7),
                 0 0 180px rgba(255, 255, 255, 0.5),
                 0 0 240px rgba(255, 255, 255, 0.3);
    animation: starlitGlowResult 3s infinite;
}

.roll-result h2.close {
    color: #808080;
    font-size: 5rem;
    text-shadow: 0 0 60px rgba(128, 128, 128, 0.9),
                 0 0 120px rgba(128, 128, 128, 0.7),
                 0 0 180px rgba(128, 128, 128, 0.5),
                 0 0 240px rgba(128, 128, 128, 0.3);
    animation: closeGlowResult 3s infinite;
}

.roll-result h2.omega {
    color: #00008B;
    font-size: 5rem;
    text-shadow: 0 0 60px rgba(0, 0, 139, 0.9),
                 0 0 120px rgba(0, 0, 139, 0.7),
                 0 0 180px rgba(0, 0, 139, 0.5),
                 0 0 240px rgba(0, 0, 139, 0.3);
    animation: omegaGlowResult 3s infinite;
    position: relative;
}

.roll-result h2.gilded {
    color: #FFD700;
    font-size: 5rem;
    text-shadow: 0 0 60px rgba(255, 215, 0, 0.9),
                 0 0 120px rgba(255, 215, 0, 0.7),
                 0 0 180px rgba(255, 215, 0, 0.5),
                 0 0 240px rgba(255, 215, 0, 0.3);
    animation: gildedGlowResult 3s infinite;
    position: relative;
}

.roll-result h2.rift {
    color: #800000;
    font-size: 5rem;
    text-shadow: 0 0 60px rgba(128, 0, 0, 0.9),
                 0 0 120px rgba(128, 0, 0, 0.7),
                 0 0 180px rgba(128, 0, 0, 0.5),
                 0 0 240px rgba(128, 0, 0, 0.3);
    animation: riftGlowResult 3s infinite;
    position: relative;
}

.roll-result h2.veiled {
    color: #006400;
    font-size: 5rem;
    text-shadow: 0 0 60px rgba(0, 100, 0, 0.9),
                 0 0 120px rgba(0, 100, 0, 0.7),
                 0 0 180px rgba(0, 100, 0, 0.5),
                 0 0 240px rgba(0, 100, 0, 0.3);
    animation: veiledGlowResult 3s infinite;
    position: relative;
}

.roll-result h2.lunar {
    color: #2F2F2F;
    font-size: 5rem;
    text-shadow: 0 0 60px rgba(47, 47, 47, 0.9),
                 0 0 120px rgba(47, 47, 47, 0.7),
                 0 0 180px rgba(47, 47, 47, 0.5),
                 0 0 240px rgba(47, 47, 47, 0.3);
    animation: lunarGlowResult 3s infinite;
    position: relative;
}

.roll-result h2.scribe {
    color: #8B4513;
    font-size: 5rem;
    text-shadow: 0 0 60px rgba(139, 69, 19, 0.9),
                 0 0 120px rgba(139, 69, 19, 0.7),
                 0 0 180px rgba(139, 69, 19, 0.5),
                 0 0 240px rgba(139, 69, 19, 0.3);
    animation: scribeGlowResult 3s infinite;
    position: relative;
}

.roll-result h2.ghost {
    color: #D3D3D3;
    font-size: 5rem;
    text-shadow: 0 0 60px rgba(211, 211, 211, 0.9),
                 0 0 120px rgba(211, 211, 211, 0.7),
                 0 0 180px rgba(211, 211, 211, 0.5),
                 0 0 240px rgba(211, 211, 211, 0.3);
    animation: ghostGlowResult 3s infinite;
    position: relative;
}

.roll-result h2.facet {
    color: #ADD8E6;
    font-size: 5rem;
    text-shadow: 0 0 60px rgba(173, 216, 230, 0.9),
                 0 0 120px rgba(173, 216, 230, 0.7),
                 0 0 180px rgba(173, 216, 230, 0.5),
                 0 0 240px rgba(173, 216, 230, 0.3);
    animation: facetGlowResult 3s infinite;
    position: relative;
}

.roll-result h2.exalted {
    color: #FFA500;
    font-size: 5rem;
    text-shadow: 0 0 60px rgba(255, 165, 0, 0.9),
                 0 0 120px rgba(255, 165, 0, 0.7),
                 0 0 180px rgba(255, 165, 0, 0.5),
                 0 0 240px rgba(255, 165, 0, 0.3);
    animation: exaltedGlowResult 3s infinite;
    position: relative;
}

.roll-result h2.foreground {
    font-size: 5rem;
    animation: foregroundColorResult 1s infinite;
    position: relative;
}

.roll-result h2.enraging {
    font-size: 5rem;
    animation: enragingColorResult 1s infinite;
    position: relative;
}

.roll-result h2.bloomed {
    font-size: 5rem;
    animation: bloomedColorResult 1s infinite;
    position: relative;
}

.roll-result h2.fractured {
    font-size: 5rem;
    animation: fracturedColorResult 1s infinite;
    position: relative;
}

.roll-result h2.mythical-plus-plus {
    font-size: 5rem;
    animation: mythicalPlusPlusColorResult 1s infinite;
    position: relative;
}

.roll-result h2.nebula {
    font-size: 5rem;
    animation: nebulaColorResult 1s infinite;
    position: relative;
}

.roll-result h2.singularity {
    font-size: 5rem;
    animation: singularityColorResult 1s infinite;
    position: relative;
}

.roll-result h2.lasting {
    font-size: 5rem;
    animation: lastingColorResult 1s infinite;
    position: relative;
}

.roll-result h2.frightening {
    font-size: 5rem;
    animation: frighteningColorResult 1s infinite;
    position: relative;
}

.roll-result h2.closer {
    font-size: 5rem;
    animation: closerColorResult 1s infinite;
    position: relative;
}

.roll-result h2.alpha {
    color: #CC6600;
    font-size: 5rem;
    text-shadow: 0 0 60px rgba(204, 102, 0, 0.9),
                 0 0 120px rgba(204, 102, 0, 0.7),
                 0 0 180px rgba(204, 102, 0, 0.5),
                 0 0 240px rgba(204, 102, 0, 0.3);
    animation: alphaGlowResult 3s infinite;
    position: relative;
}

.roll-result h2.alpha::before {
    content: 'α';
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 3rem;
    color: #CC6600;
    text-shadow: 0 0 40px rgba(204, 102, 0, 0.9),
                 0 0 80px rgba(204, 102, 0, 0.7),
                 0 0 120px rgba(204, 102, 0, 0.5);
    animation: alphaGlowSymbol 3s infinite;
}

.roll-result h2.exotic {
    color: #CC0000;
    font-size: 5rem;
    text-shadow: 0 0 60px rgba(204, 0, 0, 0.9),
                 0 0 120px rgba(204, 0, 0, 0.7),
                 0 0 180px rgba(204, 0, 0, 0.5),
                 0 0 240px rgba(204, 0, 0, 0.3);
    animation: exoticGlowResult 3s infinite;
    position: relative;
}

.roll-result h2.dream {
    color: #87CEEB;
    font-size: 5rem;
    text-shadow: 0 0 60px rgba(135, 206, 235, 0.9),
                 0 0 120px rgba(135, 206, 235, 0.7),
                 0 0 180px rgba(135, 206, 235, 0.5),
                 0 0 240px rgba(135, 206, 235, 0.3);
    animation: dreamGlowResult 3s infinite;
    position: relative;
}

.roll-result h2.sovereign {
    color: #006400;
    font-size: 5rem;
    text-shadow: 0 0 60px rgba(0, 100, 0, 0.9),
                 0 0 120px rgba(0, 100, 0, 0.7),
                 0 0 180px rgba(0, 100, 0, 0.5),
                 0 0 240px rgba(0, 100, 0, 0.3);
    animation: sovereignGlowResult 3s infinite;
    position: relative;
}

.roll-result h2.planet {
    color: #4169E1;
    font-size: 5rem;
    text-shadow: 0 0 60px rgba(65, 105, 225, 0.9),
                 0 0 120px rgba(65, 105, 225, 0.7),
                 0 0 180px rgba(65, 105, 225, 0.5),
                 0 0 240px rgba(65, 105, 225, 0.3);
    animation: planetGlowResult 3s infinite;
    position: relative;
}

.roll-result h2.lair {
    color: #404040;
    font-size: 5rem;
    text-shadow: 0 0 60px rgba(64, 64, 64, 0.9),
                 0 0 120px rgba(64, 64, 64, 0.7),
                 0 0 180px rgba(64, 64, 64, 0.5),
                 0 0 240px rgba(64, 64, 64, 0.3);
    animation: lairGlowResult 3s infinite;
    position: relative;
}

.roll-result h2.handled {
    color: #808080;
    font-size: 5rem;
    text-shadow: 0 0 60px rgba(128, 128, 128, 0.9),
                 0 0 120px rgba(128, 128, 128, 0.7),
                 0 0 180px rgba(128, 128, 128, 0.5),
                 0 0 240px rgba(128, 128, 128, 0.3);
    animation: handledGlowResult 3s infinite;
    position: relative;
}

.roll-result h2.vast {
    color: #9370DB;
    font-size: 5rem;
    text-shadow: 0 0 60px rgba(147, 112, 219, 0.9),
                 0 0 120px rgba(147, 112, 219, 0.7),
                 0 0 180px rgba(147, 112, 219, 0.5),
                 0 0 240px rgba(147, 112, 219, 0.3);
    animation: vastGlowResult 3s infinite;
    position: relative;
}

.roll-result h2.critical {
    color: #8B0000;
    font-size: 5rem;
    text-shadow: 0 0 60px rgba(139, 0, 0, 0.9),
                 0 0 120px rgba(139, 0, 0, 0.7),
                 0 0 180px rgba(139, 0, 0, 0.5),
                 0 0 240px rgba(139, 0, 0, 0.3);
    animation: criticalGlowResult 3s infinite;
    position: relative;
}

.roll-result h2.omega::before {
    content: 'Ω';
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 3rem;
    color: #00008B;
    text-shadow: 0 0 40px rgba(0, 0, 139, 0.9),
                 0 0 80px rgba(0, 0, 139, 0.7),
                 0 0 120px rgba(0, 0, 139, 0.5);
    animation: omegaGlowResult 3s infinite;
}

/* Dark purple screen effect for Ultra */
body.ultra-effect {
    background-color: #1A0033 !important;
}

body.ultra-effect * {
    transition: opacity 0.3s ease-in-out;
}

/* Omega effect - fade to black */
body.omega-effect {
    background-color: #000000 !important;
    position: relative;
    overflow: hidden;
}

body.omega-effect * {
    transition: opacity 1s ease-in-out;
    opacity: 0;
}

/* Omega pulsing edge effect */
body.omega-effect::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 0 solid #00008B;
    box-shadow: 
        inset 0 0 0 0 rgba(0, 0, 139, 0),
        inset 0 0 0 0 rgba(0, 0, 139, 0),
        inset 0 0 0 0 rgba(0, 0, 139, 0),
        inset 0 0 0 0 rgba(0, 0, 139, 0);
    animation: omegaPulse 2s ease-out 1s forwards;
    pointer-events: none;
    z-index: 9999;
}

/* Gilded effect - fade to black */
body.gilded-effect {
    background-color: #000000 !important;
    position: relative;
    overflow: hidden;
}

body.gilded-effect * {
    transition: opacity 1s ease-in-out;
    opacity: 0;
}

/* Gilded pulsing edge effect */
body.gilded-effect::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 0 solid #FFD700;
    box-shadow: 
        inset 0 0 0 0 rgba(255, 215, 0, 0),
        inset 0 0 0 0 rgba(255, 215, 0, 0),
        inset 0 0 0 0 rgba(255, 215, 0, 0),
        inset 0 0 0 0 rgba(255, 215, 0, 0);
    animation: gildedPulse 2s ease-out 1s forwards;
    pointer-events: none;
    z-index: 9999;
}

/* Rift effect - fade to black */
body.rift-effect {
    background-color: #000000 !important;
    position: relative;
    overflow: hidden;
}

body.rift-effect * {
    transition: opacity 1s ease-in-out;
    opacity: 0;
}

/* Rift pulsing edge effect */
body.rift-effect::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 0 solid #800000;
    box-shadow: 
        inset 0 0 0 0 rgba(128, 0, 0, 0),
        inset 0 0 0 0 rgba(128, 0, 0, 0),
        inset 0 0 0 0 rgba(128, 0, 0, 0),
        inset 0 0 0 0 rgba(128, 0, 0, 0);
    animation: riftPulse 2s ease-out 1s forwards;
    pointer-events: none;
    z-index: 9999;
}

/* Veiled effect - fade to black */
body.veiled-effect {
    background-color: #000000 !important;
    position: relative;
    overflow: hidden;
}

body.veiled-effect * {
    transition: opacity 1s ease-in-out;
    opacity: 0;
}

/* Veiled pulsing edge effect */
body.veiled-effect::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 0 solid #006400;
    box-shadow: 
        inset 0 0 0 0 rgba(0, 100, 0, 0),
        inset 0 0 0 0 rgba(0, 100, 0, 0),
        inset 0 0 0 0 rgba(0, 100, 0, 0),
        inset 0 0 0 0 rgba(0, 100, 0, 0);
    animation: veiledPulse 2s ease-out 1s forwards;
    pointer-events: none;
    z-index: 9999;
}

/* Lunar effect - fade to black */
body.lunar-effect {
    background-color: #000000 !important;
    position: relative;
    overflow: hidden;
}

body.lunar-effect * {
    transition: opacity 1s ease-in-out;
    opacity: 0;
}

/* Lunar pulsing edge effect */
body.lunar-effect::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 0 solid #2F2F2F;
    box-shadow: 
        inset 0 0 0 0 rgba(47, 47, 47, 0),
        inset 0 0 0 0 rgba(47, 47, 47, 0),
        inset 0 0 0 0 rgba(47, 47, 47, 0),
        inset 0 0 0 0 rgba(47, 47, 47, 0);
    animation: lunarPulse 2s ease-out 1s forwards;
    pointer-events: none;
    z-index: 9999;
}

/* Scribe effect - fade to black */
body.scribe-effect {
    background-color: #000000 !important;
    position: relative;
    overflow: hidden;
}

body.scribe-effect * {
    transition: opacity 1s ease-in-out;
    opacity: 0;
}

/* Scribe pulsing edge effect */
body.scribe-effect::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 0 solid #8B4513;
    box-shadow: 
        inset 0 0 0 0 rgba(139, 69, 19, 0),
        inset 0 0 0 0 rgba(139, 69, 19, 0),
        inset 0 0 0 0 rgba(139, 69, 19, 0),
        inset 0 0 0 0 rgba(139, 69, 19, 0);
    animation: scribePulse 2s ease-out 1s forwards;
    pointer-events: none;
    z-index: 9999;
}

/* Ghost effect - fade to black */
body.ghost-effect {
    background-color: #000000 !important;
    position: relative;
    overflow: hidden;
}

body.ghost-effect * {
    transition: opacity 1s ease-in-out;
    opacity: 0;
}

/* Ghost pulsing edge effect */
body.ghost-effect::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 0 solid #D3D3D3;
    box-shadow: 
        inset 0 0 0 0 rgba(211, 211, 211, 0),
        inset 0 0 0 0 rgba(211, 211, 211, 0),
        inset 0 0 0 0 rgba(211, 211, 211, 0),
        inset 0 0 0 0 rgba(211, 211, 211, 0);
    animation: ghostPulse 2s ease-out 1s forwards;
    pointer-events: none;
    z-index: 9999;
}

/* Facet effect - fade to black */
body.facet-effect {
    background-color: #000000 !important;
    position: relative;
    overflow: hidden;
}

body.facet-effect * {
    transition: opacity 1s ease-in-out;
    opacity: 0;
}

/* Facet pulsing edge effect */
body.facet-effect::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 0 solid #ADD8E6;
    box-shadow: 
        inset 0 0 0 0 rgba(173, 216, 230, 0),
        inset 0 0 0 0 rgba(173, 216, 230, 0),
        inset 0 0 0 0 rgba(173, 216, 230, 0),
        inset 0 0 0 0 rgba(173, 216, 230, 0);
    animation: facetPulse 2s ease-out 1s forwards;
    pointer-events: none;
    z-index: 9999;
}

/* Exalted effect - fade to black */
body.exalted-effect {
    background-color: #000000 !important;
    position: relative;
    overflow: hidden;
}

body.exalted-effect * {
    transition: opacity 1s ease-in-out;
    opacity: 0;
}

/* Exalted pulsing edge effect */
body.exalted-effect::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 0 solid #FFA500;
    box-shadow: 
        inset 0 0 0 0 rgba(255, 165, 0, 0),
        inset 0 0 0 0 rgba(255, 165, 0, 0),
        inset 0 0 0 0 rgba(255, 165, 0, 0),
        inset 0 0 0 0 rgba(255, 165, 0, 0);
    animation: exaltedPulse 2s ease-out 1s forwards;
    pointer-events: none;
    z-index: 9999;
}

/* Foreground effect - fade to black */
body.foreground-effect {
    background-color: #000000 !important;
    position: relative;
    overflow: hidden;
}

body.foreground-effect * {
    transition: opacity 1s ease-in-out;
    opacity: 0;
}

/* Foreground pulsing edge effect (orange and red) */
body.foreground-effect::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 0 solid #FFA500;
    animation: foregroundPulse 2s ease-out 1s forwards;
    pointer-events: none;
    z-index: 9999;
}

/* Enraging effect - fade to black */
body.enraging-effect {
    background-color: #000000 !important;
    position: relative;
    overflow: hidden;
}

body.enraging-effect * {
    transition: opacity 1s ease-in-out;
    opacity: 0;
}

/* Enraging pulsing edge effect (dark red and purple) */
body.enraging-effect::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 0 solid #8B0000;
    animation: enragingPulse 2s ease-out 1s forwards;
    pointer-events: none;
    z-index: 9999;
}

/* Bloomed effect - fade to black */
body.bloomed-effect {
    background-color: #000000 !important;
    position: relative;
    overflow: hidden;
}

body.bloomed-effect * {
    transition: opacity 1s ease-in-out;
    opacity: 0;
}

/* Bloomed pulsing edge effect (yellow and green) */
body.bloomed-effect::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 0 solid #FFFF00;
    animation: bloomedPulse 2s ease-out 1s forwards;
    pointer-events: none;
    z-index: 9999;
}

/* Fractured effect - fade to black */
body.fractured-effect {
    background-color: #000000 !important;
    position: relative;
    overflow: hidden;
}

body.fractured-effect * {
    transition: opacity 1s ease-in-out;
    opacity: 0;
}

/* Fractured pulsing edge effect (gray and white) */
body.fractured-effect::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 0 solid #808080;
    animation: fracturedPulse 2s ease-out 1s forwards;
    pointer-events: none;
    z-index: 9999;
}

/* Mythical++ effect - fade to black */
body.mythical-plus-plus-effect {
    background-color: #000000 !important;
    position: relative;
    overflow: hidden;
}

body.mythical-plus-plus-effect * {
    transition: opacity 1s ease-in-out;
    opacity: 0;
}

/* Mythical++ pulsing edge effect (yellow and pink) */
body.mythical-plus-plus-effect::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 0 solid #FFFF00;
    animation: mythicalPlusPlusPulse 2s ease-out 1s forwards;
    pointer-events: none;
    z-index: 9999;
}

/* Nebula effect - fade to black */
body.nebula-effect {
    background-color: #000000 !important;
    position: relative;
    overflow: hidden;
}

body.nebula-effect * {
    transition: opacity 1s ease-in-out;
    opacity: 0;
}

/* Nebula pulsing edge effect (light blue and pink) */
body.nebula-effect::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 0 solid #ADD8E6;
    animation: nebulaPulse 2s ease-out 1s forwards;
    pointer-events: none;
    z-index: 9999;
}

/* Singularity effect - fade to black */
body.singularity-effect {
    background-color: #000000 !important;
    position: relative;
    overflow: hidden;
}

body.singularity-effect * {
    transition: opacity 1s ease-in-out;
    opacity: 0;
}

/* Singularity pulsing edge effect (purple and black) */
body.singularity-effect::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 0 solid #800080;
    animation: singularityPulse 2s ease-out 1s forwards;
    pointer-events: none;
    z-index: 9999;
}

/* Lasting effect - fade to black */
body.lasting-effect {
    background-color: #000000 !important;
    position: relative;
    overflow: hidden;
}

body.lasting-effect * {
    transition: opacity 1s ease-in-out;
    opacity: 0;
}

/* Lasting pulsing edge effect (dark blue and dark green) */
body.lasting-effect::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 0 solid #00008B;
    animation: lastingPulse 2s ease-out 1s forwards;
    pointer-events: none;
    z-index: 9999;
}

/* Frightening effect - fade to black */
body.frightening-effect {
    background-color: #000000 !important;
    position: relative;
    overflow: hidden;
}

body.frightening-effect * {
    transition: opacity 1s ease-in-out;
    opacity: 0;
}

/* Frightening pulsing edge effect (white and black) */
body.frightening-effect::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 0 solid #FFFFFF;
    animation: frighteningPulse 2s ease-out 1s forwards;
    pointer-events: none;
    z-index: 9999;
}

/* Closer effect - fade to black */
body.closer-effect {
    background-color: #000000 !important;
    position: relative;
    overflow: hidden;
}

body.closer-effect * {
    transition: opacity 1s ease-in-out;
    opacity: 0;
}

/* Closer pulsing edge effect (dark gray and gray) */
body.closer-effect::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 0 solid #2F2F2F;
    animation: closerPulse 2s ease-out 1s forwards;
    pointer-events: none;
    z-index: 9999;
}

@keyframes omegaPulse {
    0% {
        border-width: 0;
        box-shadow: 
            inset 0 0 0 0 rgba(0, 0, 139, 0),
            inset 0 0 0 0 rgba(0, 0, 139, 0),
            inset 0 0 0 0 rgba(0, 0, 139, 0),
            inset 0 0 0 0 rgba(0, 0, 139, 0);
    }
    50% {
        border-width: 15px;
        box-shadow: 
            inset 0 0 40px 15px rgba(0, 0, 139, 0.7),
            inset 0 0 80px 30px rgba(0, 0, 139, 0.5),
            inset 0 0 120px 45px rgba(0, 0, 139, 0.3),
            inset 0 0 160px 60px rgba(0, 0, 139, 0.1);
    }
    100% {
        border-width: 30px;
        box-shadow: 
            inset 0 0 80px 30px rgba(0, 0, 139, 0.9),
            inset 0 0 160px 60px rgba(0, 0, 139, 0.7),
            inset 0 0 240px 90px rgba(0, 0, 139, 0.5),
            inset 0 0 320px 120px rgba(0, 0, 139, 0.3);
    }
}

/* Fade back in after omega effect */
body.omega-fade-in {
    background-color: #000000 !important;
}

body.omega-fade-in * {
    transition: opacity 0.5s ease-in-out;
    opacity: 1;
}

body.omega-fade-in::before {
    animation: none;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

/* Fade back in after gilded effect */
body.gilded-fade-in {
    background-color: #000000 !important;
}

body.gilded-fade-in * {
    transition: opacity 0.5s ease-in-out;
    opacity: 1;
}

body.gilded-fade-in::before {
    animation: none;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

/* Fade back in after rift effect */
body.rift-fade-in {
    background-color: #000000 !important;
}

body.rift-fade-in * {
    transition: opacity 0.5s ease-in-out;
    opacity: 1;
}

body.rift-fade-in::before {
    animation: none;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

/* Fade back in after veiled effect */
body.veiled-fade-in {
    background-color: #000000 !important;
}

body.veiled-fade-in * {
    transition: opacity 0.5s ease-in-out;
    opacity: 1;
}

body.veiled-fade-in::before {
    animation: none;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

/* Fade back in after lunar effect */
body.lunar-fade-in {
    background-color: #000000 !important;
}

body.lunar-fade-in * {
    transition: opacity 0.5s ease-in-out;
    opacity: 1;
}

body.lunar-fade-in::before {
    animation: none;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

/* Fade back in after scribe effect */
body.scribe-fade-in {
    background-color: #000000 !important;
}

body.scribe-fade-in * {
    transition: opacity 0.5s ease-in-out;
    opacity: 1;
}

body.scribe-fade-in::before {
    animation: none;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

/* Fade back in after ghost effect */
body.ghost-fade-in {
    background-color: #000000 !important;
}

body.ghost-fade-in * {
    transition: opacity 0.5s ease-in-out;
    opacity: 1;
}

body.ghost-fade-in::before {
    animation: none;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

/* Fade back in after facet effect */
body.facet-fade-in {
    background-color: #000000 !important;
}

body.facet-fade-in * {
    transition: opacity 0.5s ease-in-out;
    opacity: 1;
}

body.facet-fade-in::before {
    animation: none;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

/* Fade back in after exalted effect */
body.exalted-fade-in {
    background-color: #000000 !important;
}

body.exalted-fade-in * {
    transition: opacity 0.5s ease-in-out;
    opacity: 1;
}

body.exalted-fade-in::before {
    animation: none;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

/* Fade back in after foreground effect */
body.foreground-fade-in {
    background-color: #000000 !important;
}

body.foreground-fade-in * {
    transition: opacity 0.5s ease-in-out;
    opacity: 1;
}

body.foreground-fade-in::before {
    animation: none;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

/* Fade back in after enraging effect */
body.enraging-fade-in {
    background-color: #000000 !important;
}

body.enraging-fade-in * {
    transition: opacity 0.5s ease-in-out;
    opacity: 1;
}

body.enraging-fade-in::before {
    animation: none;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

/* Fade back in after bloomed effect */
body.bloomed-fade-in {
    background-color: #000000 !important;
}

body.bloomed-fade-in * {
    transition: opacity 0.5s ease-in-out;
    opacity: 1;
}

body.bloomed-fade-in::before {
    animation: none;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

/* Fade back in after fractured effect */
body.fractured-fade-in {
    background-color: #000000 !important;
}

body.fractured-fade-in * {
    transition: opacity 0.5s ease-in-out;
    opacity: 1;
}

body.fractured-fade-in::before {
    animation: none;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

/* Fade back in after mythical++ effect */
body.mythical-plus-plus-fade-in {
    background-color: #000000 !important;
}

body.mythical-plus-plus-fade-in * {
    transition: opacity 0.5s ease-in-out;
    opacity: 1;
}

body.mythical-plus-plus-fade-in::before {
    animation: none;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

/* Fade back in after nebula effect */
body.nebula-fade-in {
    background-color: #000000 !important;
}

body.nebula-fade-in * {
    transition: opacity 0.5s ease-in-out;
    opacity: 1;
}

body.nebula-fade-in::before {
    animation: none;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

/* Fade back in after singularity effect */
body.singularity-fade-in {
    background-color: #000000 !important;
}

body.singularity-fade-in * {
    transition: opacity 0.5s ease-in-out;
    opacity: 1;
}

body.singularity-fade-in::before {
    animation: none;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

/* Fade back in after lasting effect */
body.lasting-fade-in {
    background-color: #000000 !important;
}

body.lasting-fade-in * {
    transition: opacity 0.5s ease-in-out;
    opacity: 1;
}

body.lasting-fade-in::before {
    animation: none;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

/* Fade back in after frightening effect */
body.frightening-fade-in {
    background-color: #000000 !important;
}

body.frightening-fade-in * {
    transition: opacity 0.5s ease-in-out;
    opacity: 1;
}

body.frightening-fade-in::before {
    animation: none;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

/* Fade back in after closer effect */
body.closer-fade-in {
    background-color: #000000 !important;
}

body.closer-fade-in * {
    transition: opacity 0.5s ease-in-out;
    opacity: 1;
}

body.closer-fade-in::before {
    animation: none;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

/* Alpha effect - fade to black */
body.alpha-effect {
    background-color: #000000 !important;
    position: relative;
    overflow: hidden;
}

body.alpha-effect * {
    transition: opacity 1s ease-in-out;
    opacity: 0;
}

/* Alpha typing text - must be visible even when body.alpha-effect * hides everything */
body.alpha-effect #alpha-typing-text {
    opacity: 1 !important;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #CC6600;
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
    z-index: 10000;
    text-shadow: 0 0 20px rgba(204, 102, 0, 0.8),
                0 0 40px rgba(204, 102, 0, 0.6),
                0 0 60px rgba(204, 102, 0, 0.4);
    white-space: pre-wrap;
    line-height: 1.6;
    transition: opacity 1s ease-in-out;
    pointer-events: none;
}

/* Alpha pulsing edge effect (dark orange) - starts after typing completes */
body.alpha-effect::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 0 solid #CC6600;
    box-shadow: 
        inset 0 0 0 0 rgba(204, 102, 0, 0),
        inset 0 0 0 0 rgba(204, 102, 0, 0),
        inset 0 0 0 0 rgba(204, 102, 0, 0),
        inset 0 0 0 0 rgba(204, 102, 0, 0);
    animation: none; /* Will be started via JavaScript after typing */
    pointer-events: none;
    z-index: 9999;
}

/* Fade back in after alpha effect */
body.alpha-fade-in {
    background-color: #000000 !important;
}

body.alpha-fade-in * {
    transition: opacity 0.5s ease-in-out;
    opacity: 1;
}

body.alpha-fade-in::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 0 solid #CC6600;
    box-shadow: 
        inset 0 0 0 0 rgba(204, 102, 0, 0),
        inset 0 0 0 0 rgba(204, 102, 0, 0),
        inset 0 0 0 0 rgba(204, 102, 0, 0),
        inset 0 0 0 0 rgba(204, 102, 0, 0);
    animation: alphaPulse 2s infinite;
    pointer-events: none;
    z-index: 9999;
}

/* Exotic effect - fade to black (same as Alpha but red) */
body.exotic-effect {
    background-color: #000000 !important;
    position: relative;
    overflow: hidden;
}

body.exotic-effect * {
    transition: opacity 1s ease-in-out;
    opacity: 0;
}

/* Exotic typing text - must be visible even when body.exotic-effect * hides everything */
body.exotic-effect #exotic-typing-text {
    opacity: 1 !important;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #CC0000;
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
    z-index: 10000;
    text-shadow: 0 0 20px rgba(204, 0, 0, 0.8),
                0 0 40px rgba(204, 0, 0, 0.6),
                0 0 60px rgba(204, 0, 0, 0.4);
    white-space: pre-wrap;
    line-height: 1.6;
    transition: opacity 1s ease-in-out;
    pointer-events: none;
}

/* Exotic pulsing edge effect (red) - starts after typing completes */
body.exotic-effect::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 0 solid #CC0000;
    box-shadow: 
        inset 0 0 0 0 rgba(204, 0, 0, 0),
        inset 0 0 0 0 rgba(204, 0, 0, 0),
        inset 0 0 0 0 rgba(204, 0, 0, 0),
        inset 0 0 0 0 rgba(204, 0, 0, 0);
    animation: none; /* Will be started via JavaScript after typing */
    pointer-events: none;
    z-index: 9999;
}

/* Fade back in after exotic effect */
body.exotic-fade-in {
    background-color: #000000 !important;
}

body.exotic-fade-in * {
    transition: opacity 0.5s ease-in-out;
    opacity: 1;
}

body.exotic-fade-in::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 0 solid #CC0000;
    box-shadow: 
        inset 0 0 0 0 rgba(204, 0, 0, 0),
        inset 0 0 0 0 rgba(204, 0, 0, 0),
        inset 0 0 0 0 rgba(204, 0, 0, 0),
        inset 0 0 0 0 rgba(204, 0, 0, 0);
    animation: exoticPulse 2s infinite;
    pointer-events: none;
    z-index: 9999;
}

/* Dream effect - fade to black (light blue) */
body.dream-effect {
    background-color: #000000 !important;
    position: relative;
    overflow: hidden;
}

body.dream-effect * {
    transition: opacity 1s ease-in-out;
    opacity: 0;
}

body.dream-effect #dream-typing-text {
    opacity: 1 !important;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #87CEEB;
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
    z-index: 10000;
    text-shadow: 0 0 20px rgba(135, 206, 235, 0.8),
                0 0 40px rgba(135, 206, 235, 0.6),
                0 0 60px rgba(135, 206, 235, 0.4);
    white-space: pre-wrap;
    line-height: 1.6;
    transition: opacity 1s ease-in-out;
    pointer-events: none;
}

body.dream-effect::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 0 solid #87CEEB;
    box-shadow: 
        inset 0 0 0 0 rgba(135, 206, 235, 0),
        inset 0 0 0 0 rgba(135, 206, 235, 0),
        inset 0 0 0 0 rgba(135, 206, 235, 0),
        inset 0 0 0 0 rgba(135, 206, 235, 0);
    animation: none;
    pointer-events: none;
    z-index: 9999;
}

body.dream-fade-in {
    background-color: #000000 !important;
}

body.dream-fade-in * {
    transition: opacity 0.5s ease-in-out;
    opacity: 1;
}

body.dream-fade-in::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 0 solid #87CEEB;
    box-shadow: 
        inset 0 0 0 0 rgba(135, 206, 235, 0),
        inset 0 0 0 0 rgba(135, 206, 235, 0),
        inset 0 0 0 0 rgba(135, 206, 235, 0),
        inset 0 0 0 0 rgba(135, 206, 235, 0);
    animation: dreamPulse 2s infinite;
    pointer-events: none;
    z-index: 9999;
}

/* Sovereign effect - fade to black (dark green) */
body.sovereign-effect {
    background-color: #000000 !important;
    position: relative;
    overflow: hidden;
}

body.sovereign-effect * {
    transition: opacity 1s ease-in-out;
    opacity: 0;
}

body.sovereign-effect #sovereign-typing-text {
    opacity: 1 !important;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #006400;
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
    z-index: 10000;
    text-shadow: 0 0 20px rgba(0, 100, 0, 0.8),
                0 0 40px rgba(0, 100, 0, 0.6),
                0 0 60px rgba(0, 100, 0, 0.4);
    white-space: pre-wrap;
    line-height: 1.6;
    transition: opacity 1s ease-in-out;
    pointer-events: none;
}

body.sovereign-effect::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 0 solid #006400;
    box-shadow: 
        inset 0 0 0 0 rgba(0, 100, 0, 0),
        inset 0 0 0 0 rgba(0, 100, 0, 0),
        inset 0 0 0 0 rgba(0, 100, 0, 0),
        inset 0 0 0 0 rgba(0, 100, 0, 0);
    animation: none;
    pointer-events: none;
    z-index: 9999;
}

body.sovereign-fade-in {
    background-color: #000000 !important;
}

body.sovereign-fade-in * {
    transition: opacity 0.5s ease-in-out;
    opacity: 1;
}

body.sovereign-fade-in::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 0 solid #006400;
    box-shadow: 
        inset 0 0 0 0 rgba(0, 100, 0, 0),
        inset 0 0 0 0 rgba(0, 100, 0, 0),
        inset 0 0 0 0 rgba(0, 100, 0, 0),
        inset 0 0 0 0 rgba(0, 100, 0, 0);
    animation: sovereignPulse 2s infinite;
    pointer-events: none;
    z-index: 9999;
}

/* Planet effect - fade to black (blue) */
body.planet-effect {
    background-color: #000000 !important;
    position: relative;
    overflow: hidden;
}

body.planet-effect * {
    transition: opacity 1s ease-in-out;
    opacity: 0;
}

body.planet-effect #planet-typing-text {
    opacity: 1 !important;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #4169E1;
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
    z-index: 10000;
    text-shadow: 0 0 20px rgba(65, 105, 225, 0.8),
                0 0 40px rgba(65, 105, 225, 0.6),
                0 0 60px rgba(65, 105, 225, 0.4);
    white-space: pre-wrap;
    line-height: 1.6;
    transition: opacity 1s ease-in-out;
    pointer-events: none;
}

body.planet-effect::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 0 solid #4169E1;
    box-shadow: 
        inset 0 0 0 0 rgba(65, 105, 225, 0),
        inset 0 0 0 0 rgba(65, 105, 225, 0),
        inset 0 0 0 0 rgba(65, 105, 225, 0),
        inset 0 0 0 0 rgba(65, 105, 225, 0);
    animation: none;
    pointer-events: none;
    z-index: 9999;
}

body.planet-fade-in {
    background-color: #000000 !important;
}

body.planet-fade-in * {
    transition: opacity 0.5s ease-in-out;
    opacity: 1;
}

body.planet-fade-in::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 0 solid #4169E1;
    box-shadow: 
        inset 0 0 0 0 rgba(65, 105, 225, 0),
        inset 0 0 0 0 rgba(65, 105, 225, 0),
        inset 0 0 0 0 rgba(65, 105, 225, 0),
        inset 0 0 0 0 rgba(65, 105, 225, 0);
    animation: planetPulse 2s infinite;
    pointer-events: none;
    z-index: 9999;
}

/* Lair effect - fade to black (dark gray) */
body.lair-effect {
    background-color: #000000 !important;
    position: relative;
    overflow: hidden;
}

body.lair-effect * {
    transition: opacity 1s ease-in-out;
    opacity: 0;
}

body.lair-effect #lair-typing-text {
    opacity: 1 !important;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #404040;
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
    z-index: 10000;
    text-shadow: 0 0 20px rgba(64, 64, 64, 0.8),
                0 0 40px rgba(64, 64, 64, 0.6),
                0 0 60px rgba(64, 64, 64, 0.4);
    white-space: pre-wrap;
    line-height: 1.6;
    transition: opacity 1s ease-in-out;
    pointer-events: none;
}

body.lair-effect::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 0 solid #404040;
    box-shadow: 
        inset 0 0 0 0 rgba(64, 64, 64, 0),
        inset 0 0 0 0 rgba(64, 64, 64, 0),
        inset 0 0 0 0 rgba(64, 64, 64, 0),
        inset 0 0 0 0 rgba(64, 64, 64, 0);
    animation: none;
    pointer-events: none;
    z-index: 9999;
}

body.lair-fade-in {
    background-color: #000000 !important;
}

body.lair-fade-in * {
    transition: opacity 0.5s ease-in-out;
    opacity: 1;
}

body.lair-fade-in::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 0 solid #404040;
    box-shadow: 
        inset 0 0 0 0 rgba(64, 64, 64, 0),
        inset 0 0 0 0 rgba(64, 64, 64, 0),
        inset 0 0 0 0 rgba(64, 64, 64, 0),
        inset 0 0 0 0 rgba(64, 64, 64, 0);
    animation: lairPulse 2s infinite;
    pointer-events: none;
    z-index: 9999;
}

/* Handled effect - fade to black (gray) */
body.handled-effect {
    background-color: #000000 !important;
    position: relative;
    overflow: hidden;
}

body.handled-effect * {
    transition: opacity 1s ease-in-out;
    opacity: 0;
}

body.handled-effect #handled-typing-text {
    opacity: 1 !important;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #808080;
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
    z-index: 10000;
    text-shadow: 0 0 20px rgba(128, 128, 128, 0.8),
                0 0 40px rgba(128, 128, 128, 0.6),
                0 0 60px rgba(128, 128, 128, 0.4);
    white-space: pre-wrap;
    line-height: 1.6;
    transition: opacity 1s ease-in-out;
    pointer-events: none;
}

body.handled-effect::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 0 solid #808080;
    box-shadow: 
        inset 0 0 0 0 rgba(128, 128, 128, 0),
        inset 0 0 0 0 rgba(128, 128, 128, 0),
        inset 0 0 0 0 rgba(128, 128, 128, 0),
        inset 0 0 0 0 rgba(128, 128, 128, 0);
    animation: none;
    pointer-events: none;
    z-index: 9999;
}

body.handled-fade-in {
    background-color: #000000 !important;
}

body.handled-fade-in * {
    transition: opacity 0.5s ease-in-out;
    opacity: 1;
}

body.handled-fade-in::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 0 solid #808080;
    box-shadow: 
        inset 0 0 0 0 rgba(128, 128, 128, 0),
        inset 0 0 0 0 rgba(128, 128, 128, 0),
        inset 0 0 0 0 rgba(128, 128, 128, 0),
        inset 0 0 0 0 rgba(128, 128, 128, 0);
    animation: handledPulse 2s infinite;
    pointer-events: none;
    z-index: 9999;
}

/* Vast effect - fade to black (purple) */
body.vast-effect {
    background-color: #000000 !important;
    position: relative;
    overflow: hidden;
}

body.vast-effect * {
    transition: opacity 1s ease-in-out;
    opacity: 0;
}

body.vast-effect #vast-typing-text {
    opacity: 1 !important;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #9370DB;
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
    z-index: 10000;
    text-shadow: 0 0 20px rgba(147, 112, 219, 0.8),
                0 0 40px rgba(147, 112, 219, 0.6),
                0 0 60px rgba(147, 112, 219, 0.4);
    white-space: pre-wrap;
    line-height: 1.6;
    transition: opacity 1s ease-in-out;
    pointer-events: none;
}

body.vast-effect::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 0 solid #9370DB;
    box-shadow: 
        inset 0 0 0 0 rgba(147, 112, 219, 0),
        inset 0 0 0 0 rgba(147, 112, 219, 0),
        inset 0 0 0 0 rgba(147, 112, 219, 0),
        inset 0 0 0 0 rgba(147, 112, 219, 0);
    animation: none;
    pointer-events: none;
    z-index: 9999;
}

body.vast-fade-in {
    background-color: #000000 !important;
}

body.vast-fade-in * {
    transition: opacity 0.5s ease-in-out;
    opacity: 1;
}

body.vast-fade-in::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 0 solid #9370DB;
    box-shadow: 
        inset 0 0 0 0 rgba(147, 112, 219, 0),
        inset 0 0 0 0 rgba(147, 112, 219, 0),
        inset 0 0 0 0 rgba(147, 112, 219, 0),
        inset 0 0 0 0 rgba(147, 112, 219, 0);
    animation: vastPulse 2s infinite;
    pointer-events: none;
    z-index: 9999;
}

/* Critical effect - fade to black (dark red) */
body.critical-effect {
    background-color: #000000 !important;
    position: relative;
    overflow: hidden;
}

body.critical-effect * {
    transition: opacity 1s ease-in-out;
    opacity: 0;
}

body.critical-effect #critical-typing-text {
    opacity: 1 !important;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #8B0000;
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
    z-index: 10000;
    text-shadow: 0 0 20px rgba(139, 0, 0, 0.8),
                0 0 40px rgba(139, 0, 0, 0.6),
                0 0 60px rgba(139, 0, 0, 0.4);
    white-space: pre-wrap;
    line-height: 1.6;
    transition: opacity 1s ease-in-out;
    pointer-events: none;
}

body.critical-effect::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 0 solid #8B0000;
    box-shadow: 
        inset 0 0 0 0 rgba(139, 0, 0, 0),
        inset 0 0 0 0 rgba(139, 0, 0, 0),
        inset 0 0 0 0 rgba(139, 0, 0, 0),
        inset 0 0 0 0 rgba(139, 0, 0, 0);
    animation: none;
    pointer-events: none;
    z-index: 9999;
}

body.critical-fade-in {
    background-color: #000000 !important;
}

body.critical-fade-in * {
    transition: opacity 0.5s ease-in-out;
    opacity: 1;
}

body.critical-fade-in::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 0 solid #8B0000;
    box-shadow: 
        inset 0 0 0 0 rgba(139, 0, 0, 0),
        inset 0 0 0 0 rgba(139, 0, 0, 0),
        inset 0 0 0 0 rgba(139, 0, 0, 0),
        inset 0 0 0 0 rgba(139, 0, 0, 0);
    animation: criticalPulse 2s infinite;
    pointer-events: none;
    z-index: 9999;
}

@keyframes christmasColor {
    0% {
        color: #ff0000;
        text-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
    }
    50% {
        color: #00ff00;
        text-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
    }
    100% {
        color: #ff0000;
        text-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
    }
}

@keyframes christmasColorResult {
    0% {
        color: #ff0000;
        text-shadow: 0 0 20px rgba(255, 0, 0, 0.7),
                     0 0 40px rgba(255, 0, 0, 0.5),
                     0 0 60px rgba(255, 0, 0, 0.3);
    }
    50% {
        color: #00ff00;
        text-shadow: 0 0 20px rgba(0, 255, 0, 0.7),
                     0 0 40px rgba(0, 255, 0, 0.5),
                     0 0 60px rgba(0, 255, 0, 0.3);
    }
    100% {
        color: #ff0000;
        text-shadow: 0 0 20px rgba(255, 0, 0, 0.7),
                     0 0 40px rgba(255, 0, 0, 0.5),
                     0 0 60px rgba(255, 0, 0, 0.3);
    }
}

@keyframes binaryColor {
    0% {
        color: #006400;
        text-shadow: 0 0 20px rgba(0, 100, 0, 0.7),
                     0 0 40px rgba(0, 100, 0, 0.5),
                     0 0 60px rgba(0, 100, 0, 0.3);
    }
    50% {
        color: #000000;
        text-shadow: 0 0 20px rgba(0, 0, 0, 0.7),
                     0 0 40px rgba(0, 0, 0, 0.5),
                     0 0 60px rgba(0, 0, 0, 0.3);
    }
    100% {
        color: #006400;
        text-shadow: 0 0 20px rgba(0, 100, 0, 0.7),
                     0 0 40px rgba(0, 100, 0, 0.5),
                     0 0 60px rgba(0, 100, 0, 0.3);
    }
}

@keyframes camoColor {
    0% {
        color: #006400;
        text-shadow: 0 0 20px rgba(0, 100, 0, 0.7),
                     0 0 40px rgba(0, 100, 0, 0.5),
                     0 0 60px rgba(0, 100, 0, 0.3);
    }
    50% {
        color: #000000;
        text-shadow: 0 0 20px rgba(0, 0, 0, 0.7),
                     0 0 40px rgba(0, 0, 0, 0.5),
                     0 0 60px rgba(0, 0, 0, 0.3);
    }
    100% {
        color: #006400;
        text-shadow: 0 0 20px rgba(0, 100, 0, 0.7),
                     0 0 40px rgba(0, 100, 0, 0.5),
                     0 0 60px rgba(0, 100, 0, 0.3);
    }
}

@keyframes spaceColor {
    0% {
        color: #ffffff;
        text-shadow: 0 0 20px rgba(255, 255, 255, 0.7),
                     0 0 40px rgba(255, 255, 255, 0.5),
                     0 0 60px rgba(255, 255, 255, 0.3);
    }
    50% {
        color: #000000;
        text-shadow: 0 0 20px rgba(0, 0, 0, 0.7),
                     0 0 40px rgba(0, 0, 0, 0.5),
                     0 0 60px rgba(0, 0, 0, 0.3);
    }
    100% {
        color: #ffffff;
        text-shadow: 0 0 20px rgba(255, 255, 255, 0.7),
                     0 0 40px rgba(255, 255, 255, 0.5),
                     0 0 60px rgba(255, 255, 255, 0.3);
    }
}

@keyframes tripleColor {
    0% {
        color: #0000ff;
        text-shadow: 0 0 20px rgba(0, 0, 255, 0.7),
                     0 0 40px rgba(0, 0, 255, 0.5),
                     0 0 60px rgba(0, 0, 255, 0.3);
    }
    33.33% {
        color: #ffffff;
        text-shadow: 0 0 20px rgba(255, 255, 255, 0.7),
                     0 0 40px rgba(255, 255, 255, 0.5),
                     0 0 60px rgba(255, 255, 255, 0.3);
    }
    66.66% {
        color: #000000;
        text-shadow: 0 0 20px rgba(0, 0, 0, 0.7),
                     0 0 40px rgba(0, 0, 0, 0.5),
                     0 0 60px rgba(0, 0, 0, 0.3);
    }
    100% {
        color: #0000ff;
        text-shadow: 0 0 20px rgba(0, 0, 255, 0.7),
                     0 0 40px rgba(0, 0, 255, 0.5),
                     0 0 60px rgba(0, 0, 255, 0.3);
    }
}

@keyframes mythicalColor {
    0% {
        color: #800080;
        text-shadow: 0 0 20px rgba(128, 0, 128, 0.7),
                     0 0 40px rgba(128, 0, 128, 0.5),
                     0 0 60px rgba(128, 0, 128, 0.3);
    }
    33.33% {
        color: #ff69b4;
        text-shadow: 0 0 20px rgba(255, 105, 180, 0.7),
                     0 0 40px rgba(255, 105, 180, 0.5),
                     0 0 60px rgba(255, 105, 180, 0.3);
    }
    66.66% {
        color: #ffff00;
        text-shadow: 0 0 20px rgba(255, 255, 0, 0.7),
                     0 0 40px rgba(255, 255, 0, 0.5),
                     0 0 60px rgba(255, 255, 0, 0.3);
    }
    100% {
        color: #800080;
        text-shadow: 0 0 20px rgba(128, 0, 128, 0.7),
                     0 0 40px rgba(128, 0, 128, 0.5),
                     0 0 60px rgba(128, 0, 128, 0.3);
    }
}

@keyframes slashedColor {
    0% {
        color: #000000;
        text-shadow: 0 0 20px rgba(0, 0, 0, 0.7),
                     0 0 40px rgba(0, 0, 0, 0.5),
                     0 0 60px rgba(0, 0, 0, 0.3);
    }
    33.33% {
        color: #808080;
        text-shadow: 0 0 20px rgba(128, 128, 128, 0.7),
                     0 0 40px rgba(128, 128, 128, 0.5),
                     0 0 60px rgba(128, 128, 128, 0.3);
    }
    66.66% {
        color: #a52a2a;
        text-shadow: 0 0 20px rgba(165, 42, 42, 0.7),
                     0 0 40px rgba(165, 42, 42, 0.5),
                     0 0 60px rgba(165, 42, 42, 0.3);
    }
    100% {
        color: #000000;
        text-shadow: 0 0 20px rgba(0, 0, 0, 0.7),
                     0 0 40px rgba(0, 0, 0, 0.5),
                     0 0 60px rgba(0, 0, 0, 0.3);
    }
}

@keyframes bladeSlice {
    0% {
        left: -100%;
        opacity: 0;
    }
    10% {
        left: 0%;
        opacity: 1;
    }
    20% {
        left: 100%;
        opacity: 1;
    }
    30% {
        left: 100%;
        opacity: 0;
    }
    100% {
        left: 100%;
        opacity: 0;
    }
}

.roll-result p {
    color: rgba(255, 255, 255, 0.8);
    font-family: 'Montserrat', sans-serif;
    font-size: 1.5rem;
    margin: 10px 0 0 0;
}

@keyframes crystalPulse {
    0% {
        text-shadow: 0 0 10px rgba(135, 206, 235, 0.5);
    }
    50% {
        text-shadow: 0 0 10px rgba(135, 206, 235, 0.7);
    }
    100% {
        text-shadow: 0 0 10px rgba(135, 206, 235, 0.5);
    }
}

@keyframes crystalPulseResult {
    0% {
        text-shadow: 0 0 20px rgba(135, 206, 235, 0.7),
                     0 0 40px rgba(135, 206, 235, 0.5),
                     0 0 60px rgba(135, 206, 235, 0.3);
    }
    50% {
        text-shadow: 0 0 30px rgba(135, 206, 235, 0.9),
                     0 0 60px rgba(135, 206, 235, 0.7),
                     0 0 90px rgba(135, 206, 235, 0.5);
    }
    100% {
        text-shadow: 0 0 20px rgba(135, 206, 235, 0.7),
                     0 0 40px rgba(135, 206, 235, 0.5),
                     0 0 60px rgba(135, 206, 235, 0.3);
    }
}

@keyframes horizonGlow {
    0% {
        text-shadow: 0 0 25px rgba(255, 165, 0, 0.8),
                     0 0 50px rgba(255, 165, 0, 0.6),
                     0 0 75px rgba(255, 165, 0, 0.4);
    }
    50% {
        text-shadow: 0 0 40px rgba(255, 165, 0, 1.0),
                     0 0 80px rgba(255, 165, 0, 0.8),
                     0 0 120px rgba(255, 165, 0, 0.6),
                     0 0 160px rgba(255, 165, 0, 0.4);
    }
    100% {
        text-shadow: 0 0 25px rgba(255, 165, 0, 0.8),
                     0 0 50px rgba(255, 165, 0, 0.6),
                     0 0 75px rgba(255, 165, 0, 0.4);
    }
}

@keyframes horizonGlowResult {
    0% {
        text-shadow: 0 0 50px rgba(255, 165, 0, 0.9),
                     0 0 100px rgba(255, 165, 0, 0.7),
                     0 0 150px rgba(255, 165, 0, 0.5),
                     0 0 200px rgba(255, 165, 0, 0.3);
    }
    50% {
        text-shadow: 0 0 80px rgba(255, 165, 0, 1.0),
                     0 0 150px rgba(255, 165, 0, 0.9),
                     0 0 220px rgba(255, 165, 0, 0.7),
                     0 0 300px rgba(255, 165, 0, 0.5);
    }
    100% {
        text-shadow: 0 0 50px rgba(255, 165, 0, 0.9),
                     0 0 100px rgba(255, 165, 0, 0.7),
                     0 0 150px rgba(255, 165, 0, 0.5),
                     0 0 200px rgba(255, 165, 0, 0.3);
    }
}

@keyframes eldritchColor {
    0% {
        color: #808080;
        text-shadow: 0 0 10px rgba(128, 128, 128, 0.5);
    }
    33.33% {
        color: #ffffff;
        text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    }
    66.66% {
        color: #000000;
        text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    100% {
        color: #808080;
        text-shadow: 0 0 10px rgba(128, 128, 128, 0.5);
    }
}

@keyframes eldritchColorResult {
    0% {
        color: #808080;
        text-shadow: 0 0 20px rgba(128, 128, 128, 0.7),
                     0 0 40px rgba(128, 128, 128, 0.5),
                     0 0 60px rgba(128, 128, 128, 0.3);
    }
    33.33% {
        color: #ffffff;
        text-shadow: 0 0 20px rgba(255, 255, 255, 0.7),
                     0 0 40px rgba(255, 255, 255, 0.5),
                     0 0 60px rgba(255, 255, 255, 0.3);
    }
    66.66% {
        color: #000000;
        text-shadow: 0 0 20px rgba(0, 0, 0, 0.7),
                     0 0 40px rgba(0, 0, 0, 0.5),
                     0 0 60px rgba(0, 0, 0, 0.3);
    }
    100% {
        color: #808080;
        text-shadow: 0 0 20px rgba(128, 128, 128, 0.7),
                     0 0 40px rgba(128, 128, 128, 0.5),
                     0 0 60px rgba(128, 128, 128, 0.3);
    }
}

@keyframes astralGlow {
    0% {
        text-shadow: 0 0 30px rgba(255, 255, 0, 0.9),
                     0 0 60px rgba(255, 255, 0, 0.7),
                     0 0 90px rgba(255, 255, 0, 0.5);
    }
    50% {
        text-shadow: 0 0 50px rgba(255, 255, 0, 1.0),
                     0 0 100px rgba(255, 255, 0, 0.9),
                     0 0 150px rgba(255, 255, 0, 0.7),
                     0 0 200px rgba(255, 255, 0, 0.5);
    }
    100% {
        text-shadow: 0 0 30px rgba(255, 255, 0, 0.9),
                     0 0 60px rgba(255, 255, 0, 0.7),
                     0 0 90px rgba(255, 255, 0, 0.5);
    }
}

@keyframes astralGlowResult {
    0% {
        text-shadow: 0 0 60px rgba(255, 255, 0, 0.9),
                     0 0 120px rgba(255, 255, 0, 0.7),
                     0 0 180px rgba(255, 255, 0, 0.5),
                     0 0 240px rgba(255, 255, 0, 0.3);
    }
    50% {
        text-shadow: 0 0 100px rgba(255, 255, 0, 1.0),
                     0 0 200px rgba(255, 255, 0, 0.9),
                     0 0 300px rgba(255, 255, 0, 0.7),
                     0 0 400px rgba(255, 255, 0, 0.5);
    }
    100% {
        text-shadow: 0 0 60px rgba(255, 255, 0, 0.9),
                     0 0 120px rgba(255, 255, 0, 0.7),
                     0 0 180px rgba(255, 255, 0, 0.5),
                     0 0 240px rgba(255, 255, 0, 0.3);
    }
}

@keyframes burningColor {
    0% {
        color: #ff0000;
        text-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
    }
    50% {
        color: #000000;
        text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    100% {
        color: #ff0000;
        text-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
    }
}

@keyframes burningColorResult {
    0% {
        color: #ff0000;
        text-shadow: 0 0 20px rgba(255, 0, 0, 0.7),
                     0 0 40px rgba(255, 0, 0, 0.5),
                     0 0 60px rgba(255, 0, 0, 0.3);
    }
    50% {
        color: #000000;
        text-shadow: 0 0 20px rgba(0, 0, 0, 0.7),
                     0 0 40px rgba(0, 0, 0, 0.5),
                     0 0 60px rgba(0, 0, 0, 0.3);
    }
    100% {
        color: #ff0000;
        text-shadow: 0 0 20px rgba(255, 0, 0, 0.7),
                     0 0 40px rgba(255, 0, 0, 0.5),
                     0 0 60px rgba(255, 0, 0, 0.3);
    }
}

@keyframes ultraColor {
    0% {
        color: #ff69b4;
        text-shadow: 0 0 10px rgba(255, 105, 180, 0.5);
    }
    50% {
        color: #000000;
        text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    100% {
        color: #ff69b4;
        text-shadow: 0 0 10px rgba(255, 105, 180, 0.5);
    }
}

@keyframes ultraColorResult {
    0% {
        color: #ff69b4;
        text-shadow: 0 0 20px rgba(255, 105, 180, 0.7),
                     0 0 40px rgba(255, 105, 180, 0.5),
                     0 0 60px rgba(255, 105, 180, 0.3);
    }
    50% {
        color: #000000;
        text-shadow: 0 0 20px rgba(0, 0, 0, 0.7),
                     0 0 40px rgba(0, 0, 0, 0.5),
                     0 0 60px rgba(0, 0, 0, 0.3);
    }
    100% {
        color: #ff69b4;
        text-shadow: 0 0 20px rgba(255, 105, 180, 0.7),
                     0 0 40px rgba(255, 105, 180, 0.5),
                     0 0 60px rgba(255, 105, 180, 0.3);
    }
}

@keyframes mythicalPlusColor {
    0% {
        color: #ff69b4;
        text-shadow: 0 0 10px rgba(255, 105, 180, 0.5);
    }
    33.33% {
        color: #ffff00;
        text-shadow: 0 0 10px rgba(255, 255, 0, 0.5);
    }
    66.66% {
        color: #00ff00;
        text-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
    }
    100% {
        color: #ff69b4;
        text-shadow: 0 0 10px rgba(255, 105, 180, 0.5);
    }
}

@keyframes mythicalPlusColorResult {
    0% {
        color: #ff69b4;
        text-shadow: 0 0 20px rgba(255, 105, 180, 0.7),
                     0 0 40px rgba(255, 105, 180, 0.5),
                     0 0 60px rgba(255, 105, 180, 0.3);
    }
    33.33% {
        color: #ffff00;
        text-shadow: 0 0 20px rgba(255, 255, 0, 0.7),
                     0 0 40px rgba(255, 255, 0, 0.5),
                     0 0 60px rgba(255, 255, 0, 0.3);
    }
    66.66% {
        color: #00ff00;
        text-shadow: 0 0 20px rgba(0, 255, 0, 0.7),
                     0 0 40px rgba(0, 255, 0, 0.5),
                     0 0 60px rgba(0, 255, 0, 0.3);
    }
    100% {
        color: #ff69b4;
        text-shadow: 0 0 20px rgba(255, 105, 180, 0.7),
                     0 0 40px rgba(255, 105, 180, 0.5),
                     0 0 60px rgba(255, 105, 180, 0.3);
    }
}

@keyframes eclipseColor {
    0% {
        color: #ffff00;
        text-shadow: 0 0 10px rgba(255, 255, 0, 0.5);
    }
    50% {
        color: #000000;
        text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    100% {
        color: #ffff00;
        text-shadow: 0 0 10px rgba(255, 255, 0, 0.5);
    }
}

@keyframes eclipseColorResult {
    0% {
        color: #ffff00;
        text-shadow: 0 0 20px rgba(255, 255, 0, 0.7),
                     0 0 40px rgba(255, 255, 0, 0.5),
                     0 0 60px rgba(255, 255, 0, 0.3);
    }
    50% {
        color: #000000;
        text-shadow: 0 0 20px rgba(0, 0, 0, 0.7),
                     0 0 40px rgba(0, 0, 0, 0.5),
                     0 0 60px rgba(0, 0, 0, 0.3);
    }
    100% {
        color: #ffff00;
        text-shadow: 0 0 20px rgba(255, 255, 0, 0.7),
                     0 0 40px rgba(255, 255, 0, 0.5),
                     0 0 60px rgba(255, 255, 0, 0.3);
    }
}

@keyframes sparkedColor {
    0% {
        color: #ffffff;
        text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    }
    50% {
        color: #000000;
        text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    100% {
        color: #ffffff;
        text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    }
}

@keyframes sparkedColorResult {
    0% {
        color: #ffffff;
        text-shadow: 0 0 20px rgba(255, 255, 255, 0.7),
                     0 0 40px rgba(255, 255, 255, 0.5),
                     0 0 60px rgba(255, 255, 255, 0.3);
    }
    50% {
        color: #000000;
        text-shadow: 0 0 20px rgba(0, 0, 0, 0.7),
                     0 0 40px rgba(0, 0, 0, 0.5),
                     0 0 60px rgba(0, 0, 0, 0.3);
    }
    100% {
        color: #ffffff;
        text-shadow: 0 0 20px rgba(255, 255, 255, 0.7),
                     0 0 40px rgba(255, 255, 255, 0.5),
                     0 0 60px rgba(255, 255, 255, 0.3);
    }
}

@keyframes quarterColor {
    0% {
        color: #808080;
        text-shadow: 0 0 10px rgba(128, 128, 128, 0.5);
    }
    33.33% {
        color: #000000;
        text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    66.66% {
        color: #a52a2a;
        text-shadow: 0 0 10px rgba(165, 42, 42, 0.5);
    }
    100% {
        color: #808080;
        text-shadow: 0 0 10px rgba(128, 128, 128, 0.5);
    }
}

@keyframes quarterColorResult {
    0% {
        color: #808080;
        text-shadow: 0 0 20px rgba(128, 128, 128, 0.7),
                     0 0 40px rgba(128, 128, 128, 0.5),
                     0 0 60px rgba(128, 128, 128, 0.3);
    }
    33.33% {
        color: #000000;
        text-shadow: 0 0 20px rgba(0, 0, 0, 0.7),
                     0 0 40px rgba(0, 0, 0, 0.5),
                     0 0 60px rgba(0, 0, 0, 0.3);
    }
    66.66% {
        color: #a52a2a;
        text-shadow: 0 0 20px rgba(165, 42, 42, 0.7),
                     0 0 40px rgba(165, 42, 42, 0.5),
                     0 0 60px rgba(165, 42, 42, 0.3);
    }
    100% {
        color: #808080;
        text-shadow: 0 0 20px rgba(128, 128, 128, 0.7),
                     0 0 40px rgba(128, 128, 128, 0.5),
                     0 0 60px rgba(128, 128, 128, 0.3);
    }
}

@keyframes overclockedColor {
    0% {
        color: #0000ff;
        text-shadow: 0 0 10px rgba(0, 0, 255, 0.5);
    }
    33.33% {
        color: #00ff00;
        text-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
    }
    66.66% {
        color: #800080;
        text-shadow: 0 0 10px rgba(128, 0, 128, 0.5);
    }
    100% {
        color: #0000ff;
        text-shadow: 0 0 10px rgba(0, 0, 255, 0.5);
    }
}

@keyframes overclockedColorResult {
    0% {
        color: #0000ff;
        text-shadow: 0 0 20px rgba(0, 0, 255, 0.7),
                     0 0 40px rgba(0, 0, 255, 0.5),
                     0 0 60px rgba(0, 0, 255, 0.3);
    }
    33.33% {
        color: #00ff00;
        text-shadow: 0 0 20px rgba(0, 255, 0, 0.7),
                     0 0 40px rgba(0, 255, 0, 0.5),
                     0 0 60px rgba(0, 255, 0, 0.3);
    }
    66.66% {
        color: #800080;
        text-shadow: 0 0 20px rgba(128, 0, 128, 0.7),
                     0 0 40px rgba(128, 0, 128, 0.5),
                     0 0 60px rgba(128, 0, 128, 0.3);
    }
    100% {
        color: #0000ff;
        text-shadow: 0 0 20px rgba(0, 0, 255, 0.7),
                     0 0 40px rgba(0, 0, 255, 0.5),
                     0 0 60px rgba(0, 0, 255, 0.3);
    }
}

@keyframes runicColor {
    0% {
        color: #808080;
        text-shadow: 0 0 10px rgba(128, 128, 128, 0.5);
    }
    33.33% {
        color: #0000ff;
        text-shadow: 0 0 10px rgba(0, 0, 255, 0.5);
    }
    66.66% {
        color: #000000;
        text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    100% {
        color: #808080;
        text-shadow: 0 0 10px rgba(128, 128, 128, 0.5);
    }
}

@keyframes runicColorResult {
    0% {
        color: #808080;
        text-shadow: 0 0 20px rgba(128, 128, 128, 0.7),
                     0 0 40px rgba(128, 128, 128, 0.5),
                     0 0 60px rgba(128, 128, 128, 0.3);
    }
    33.33% {
        color: #0000ff;
        text-shadow: 0 0 20px rgba(0, 0, 255, 0.7),
                     0 0 40px rgba(0, 0, 255, 0.5),
                     0 0 60px rgba(0, 0, 255, 0.3);
    }
    66.66% {
        color: #000000;
        text-shadow: 0 0 20px rgba(0, 0, 0, 0.7),
                     0 0 40px rgba(0, 0, 0, 0.5),
                     0 0 60px rgba(0, 0, 0, 0.3);
    }
    100% {
        color: #808080;
        text-shadow: 0 0 20px rgba(128, 128, 128, 0.7),
                     0 0 40px rgba(128, 128, 128, 0.5),
                     0 0 60px rgba(128, 128, 128, 0.3);
    }
}

.updates-box {
    position: absolute;
    top: 20px;
    left: 20px;
    background-color: rgba(20, 20, 20, 0.95);
    border: 2px solid white;
    border-radius: 15px;
    width: 250px;
    max-height: 200px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    z-index: 100;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

.updates-box:hover {
    transform: scale(1.02);
    box-shadow: 0 0 40px rgba(255, 255, 255, 0.2);
}

.updates-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.updates-header h3 {
    color: white;
    font-family: 'Orbitron', sans-serif;
    margin: 0;
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.updates-content {
    padding: 15px;
    overflow-y: auto;
    max-height: 150px;
}

.updates-content p {
    color: rgba(255, 255, 255, 0.8);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    margin: 5px 0;
    line-height: 1.4;
}

.updates-content::-webkit-scrollbar {
    width: 6px;
}

.updates-content::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

.updates-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
}

.updates-content::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.4);
}

.recap-box {
    position: absolute;
    top: 20px;
    right: 20px;
    background-color: rgba(20, 20, 20, 0.95);
    border: 2px solid white;
    border-radius: 15px;
    width: 150px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    z-index: 100;
    transition: all 0.3s ease-in-out;
    cursor: default;
}

.recap-header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px 15px;
}

.recap-header h3 {
    color: white;
    font-family: 'Orbitron', sans-serif;
    margin: 0;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-align: center;
}

.recap-timer {
    color: rgba(255, 255, 255, 0.8);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    text-align: center;
    padding: 5px 15px;
    margin-top: 5px;
}

.begin-recap-button {
    background-color: transparent;
    color: white;
    border: 2px solid white;
    padding: 10px 20px;
    font-size: 0.9rem;
    cursor: pointer;
    border-radius: 8px;
    margin: 10px;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transition: all 0.3s ease-in-out;
}

.begin-recap-button:hover {
    background-color: white;
    color: black;
    transform: scale(1.05);
}

.recap-fade-black {
    background-color: #000000 !important;
    transition: background-color 1s ease-in-out;
}

.recap-fade-black > *:not(.recap-screen) {
    transition: opacity 1s ease-in-out;
    opacity: 0;
}

.recap-fade-black .recap-screen {
    opacity: 0;
}

.recap-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000;
    z-index: 10000;
    display: none;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.recap-screen[style*="display: flex"],
.recap-screen.show {
    display: flex;
}

.recap-screen.visible {
    opacity: 1;
}

.recap-content {
    text-align: center;
    color: white;
    max-width: 90%;
    position: relative;
    z-index: 10001;
}

.recap-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 3rem;
    margin-bottom: 30px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: white !important;
}

.recap-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.5rem;
    margin-bottom: 40px;
    min-height: 60px;
    color: white !important;
}

.recap-decorations {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10000;
}

.recap-decoration {
    position: absolute;
    font-family: 'Orbitron', sans-serif;
    font-size: 1.5rem;
    opacity: 0.3;
    animation: float 15s infinite ease-in-out;
    color: rgba(255, 255, 255, 0.4);
}

.recap-decoration-large {
    font-size: 4rem !important;
    opacity: 0.5 !important;
    font-weight: bold;
    z-index: 10002;
}

.recap-decoration.recap-common {
    color: rgba(255, 255, 255, 0.3);
}

.recap-decoration.recap-uncommon {
    color: rgba(0, 255, 0, 0.4);
}

.recap-decoration.recap-rare {
    color: rgba(0, 255, 255, 0.4);
}

@keyframes float {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    25% {
        transform: translate(100px, -100px) rotate(90deg);
    }
    50% {
        transform: translate(-100px, -200px) rotate(180deg);
    }
    75% {
        transform: translate(-200px, -100px) rotate(270deg);
    }
}

.recap-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-top: 40px;
}

.recap-nav-button {
    background-color: transparent;
    color: white;
    border: 2px solid white;
    padding: 15px 40px;
    font-size: 1.2rem;
    cursor: pointer;
    border-radius: 30px;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transition: all 0.3s ease-in-out;
}

.recap-nav-button:hover {
    background-color: white;
    color: black;
    transform: scale(1.05);
}

.recap-nav-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.recap-nav-button:disabled:hover {
    background-color: transparent;
    color: white;
    transform: none;
}

.updates-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.updates-modal.active {
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
}

.updates-modal-content {
    background-color: rgba(20, 20, 20, 0.95);
    border: 2px solid white;
    border-radius: 15px;
    width: 80%;
    max-width: 600px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}

.updates-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.updates-modal-header h2 {
    color: white;
    font-family: 'Orbitron', sans-serif;
    margin: 0;
    font-size: 1.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.updates-close-button {
    background: none;
    border: none;
    color: white;
    font-size: 2rem;
    cursor: pointer;
    padding: 0 10px;
    transition: all 0.3s ease;
}

.updates-close-button:hover {
    color: #ff4444;
    transform: scale(1.1);
}

.updates-modal-body {
    padding: 20px;
    overflow-y: auto;
    max-height: calc(80vh - 80px);
}

.updates-modal-body p {
    color: rgba(255, 255, 255, 0.8);
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
    line-height: 1.6;
    margin: 0;
}

.recap-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.recap-modal.active {
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
}

.recap-modal-content {
    background-color: rgba(20, 20, 20, 0.95);
    border: 2px solid white;
    border-radius: 15px;
    width: 80%;
    max-width: 500px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}

.recap-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.recap-modal-header h2 {
    color: white;
    font-family: 'Orbitron', sans-serif;
    margin: 0;
    font-size: 1.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.recap-close-button {
    background: none;
    border: none;
    color: white;
    font-size: 2rem;
    cursor: pointer;
    padding: 0 10px;
    transition: all 0.3s ease;
}

.recap-close-button:hover {
    color: #ff4444;
    transform: scale(1.1);
}

.recap-modal-body {
    padding: 20px;
    text-align: center;
}

.recap-modal-body p {
    color: rgba(255, 255, 255, 0.8);
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
    line-height: 1.6;
    margin: 0;
}

@keyframes coreGlow {
    0% {
        text-shadow: 0 0 30px rgba(75, 0, 130, 0.9),
                     0 0 60px rgba(75, 0, 130, 0.7),
                     0 0 90px rgba(75, 0, 130, 0.5);
    }
    50% {
        text-shadow: 0 0 50px rgba(75, 0, 130, 1.0),
                     0 0 100px rgba(75, 0, 130, 0.9),
                     0 0 150px rgba(75, 0, 130, 0.7),
                     0 0 200px rgba(75, 0, 130, 0.5);
    }
    100% {
        text-shadow: 0 0 30px rgba(75, 0, 130, 0.9),
                     0 0 60px rgba(75, 0, 130, 0.7),
                     0 0 90px rgba(75, 0, 130, 0.5);
    }
}

@keyframes coreGlowResult {
    0% {
        text-shadow: 0 0 60px rgba(75, 0, 130, 0.9),
                     0 0 120px rgba(75, 0, 130, 0.7),
                     0 0 180px rgba(75, 0, 130, 0.5),
                     0 0 240px rgba(75, 0, 130, 0.3);
    }
    50% {
        text-shadow: 0 0 100px rgba(75, 0, 130, 1.0),
                     0 0 200px rgba(75, 0, 130, 0.9),
                     0 0 300px rgba(75, 0, 130, 0.7),
                     0 0 400px rgba(75, 0, 130, 0.5);
    }
    100% {
        text-shadow: 0 0 60px rgba(75, 0, 130, 0.9),
                     0 0 120px rgba(75, 0, 130, 0.7),
                     0 0 180px rgba(75, 0, 130, 0.5),
                     0 0 240px rgba(75, 0, 130, 0.3);
    }
}

@keyframes quantumGlow {
    0% {
        text-shadow: 0 0 30px rgba(47, 47, 47, 0.9),
                     0 0 60px rgba(47, 47, 47, 0.7),
                     0 0 90px rgba(47, 47, 47, 0.5);
    }
    50% {
        text-shadow: 0 0 50px rgba(47, 47, 47, 1.0),
                     0 0 100px rgba(47, 47, 47, 0.9),
                     0 0 150px rgba(47, 47, 47, 0.7),
                     0 0 200px rgba(47, 47, 47, 0.5);
    }
    100% {
        text-shadow: 0 0 30px rgba(47, 47, 47, 0.9),
                     0 0 60px rgba(47, 47, 47, 0.7),
                     0 0 90px rgba(47, 47, 47, 0.5);
    }
}

@keyframes quantumGlowResult {
    0% {
        text-shadow: 0 0 60px rgba(47, 47, 47, 0.9),
                     0 0 120px rgba(47, 47, 47, 0.7),
                     0 0 180px rgba(47, 47, 47, 0.5),
                     0 0 240px rgba(47, 47, 47, 0.3);
    }
    50% {
        text-shadow: 0 0 100px rgba(47, 47, 47, 1.0),
                     0 0 200px rgba(47, 47, 47, 0.9),
                     0 0 300px rgba(47, 47, 47, 0.7),
                     0 0 400px rgba(47, 47, 47, 0.5);
    }
    100% {
        text-shadow: 0 0 60px rgba(47, 47, 47, 0.9),
                     0 0 120px rgba(47, 47, 47, 0.7),
                     0 0 180px rgba(47, 47, 47, 0.5),
                     0 0 240px rgba(47, 47, 47, 0.3);
    }
}

@keyframes mechanicalColor {
    0% {
        color: #000000;
        text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    50% {
        color: #8B0000;
        text-shadow: 0 0 10px rgba(139, 0, 0, 0.5);
    }
    100% {
        color: #000000;
        text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
}

@keyframes mechanicalColorResult {
    0% {
        color: #000000;
        text-shadow: 0 0 20px rgba(0, 0, 0, 0.7),
                     0 0 40px rgba(0, 0, 0, 0.5),
                     0 0 60px rgba(0, 0, 0, 0.3);
    }
    50% {
        color: #8B0000;
        text-shadow: 0 0 20px rgba(139, 0, 0, 0.7),
                     0 0 40px rgba(139, 0, 0, 0.5),
                     0 0 60px rgba(139, 0, 0, 0.3);
    }
    100% {
        color: #000000;
        text-shadow: 0 0 20px rgba(0, 0, 0, 0.7),
                     0 0 40px rgba(0, 0, 0, 0.5),
                     0 0 60px rgba(0, 0, 0, 0.3);
    }
}

@keyframes starlitGlow {
    0% {
        text-shadow: 0 0 30px rgba(255, 255, 255, 0.9),
                     0 0 60px rgba(255, 255, 255, 0.7),
                     0 0 90px rgba(255, 255, 255, 0.5);
    }
    50% {
        text-shadow: 0 0 50px rgba(255, 255, 255, 1.0),
                     0 0 100px rgba(255, 255, 255, 0.9),
                     0 0 150px rgba(255, 255, 255, 0.7),
                     0 0 200px rgba(255, 255, 255, 0.5);
    }
    100% {
        text-shadow: 0 0 30px rgba(255, 255, 255, 0.9),
                     0 0 60px rgba(255, 255, 255, 0.7),
                     0 0 90px rgba(255, 255, 255, 0.5);
    }
}

@keyframes starlitGlowResult {
    0% {
        text-shadow: 0 0 60px rgba(255, 255, 255, 0.9),
                     0 0 120px rgba(255, 255, 255, 0.7),
                     0 0 180px rgba(255, 255, 255, 0.5),
                     0 0 240px rgba(255, 255, 255, 0.3);
    }
    50% {
        text-shadow: 0 0 100px rgba(255, 255, 255, 1.0),
                     0 0 200px rgba(255, 255, 255, 0.9),
                     0 0 300px rgba(255, 255, 255, 0.7),
                     0 0 400px rgba(255, 255, 255, 0.5);
    }
    100% {
        text-shadow: 0 0 60px rgba(255, 255, 255, 0.9),
                     0 0 120px rgba(255, 255, 255, 0.7),
                     0 0 180px rgba(255, 255, 255, 0.5),
                     0 0 240px rgba(255, 255, 255, 0.3);
    }
}

@keyframes closeGlow {
    0% {
        text-shadow: 0 0 30px rgba(128, 128, 128, 0.9),
                     0 0 60px rgba(128, 128, 128, 0.7),
                     0 0 90px rgba(128, 128, 128, 0.5);
    }
    50% {
        text-shadow: 0 0 50px rgba(128, 128, 128, 1.0),
                     0 0 100px rgba(128, 128, 128, 0.9),
                     0 0 150px rgba(128, 128, 128, 0.7),
                     0 0 200px rgba(128, 128, 128, 0.5);
    }
    100% {
        text-shadow: 0 0 30px rgba(128, 128, 128, 0.9),
                     0 0 60px rgba(128, 128, 128, 0.7),
                     0 0 90px rgba(128, 128, 128, 0.5);
    }
}

@keyframes closeGlowResult {
    0% {
        text-shadow: 0 0 60px rgba(128, 128, 128, 0.9),
                     0 0 120px rgba(128, 128, 128, 0.7),
                     0 0 180px rgba(128, 128, 128, 0.5),
                     0 0 240px rgba(128, 128, 128, 0.3);
    }
    50% {
        text-shadow: 0 0 100px rgba(128, 128, 128, 1.0),
                     0 0 200px rgba(128, 128, 128, 0.9),
                     0 0 300px rgba(128, 128, 128, 0.7),
                     0 0 400px rgba(128, 128, 128, 0.5);
    }
    100% {
        text-shadow: 0 0 60px rgba(128, 128, 128, 0.9),
                     0 0 120px rgba(128, 128, 128, 0.7),
                     0 0 180px rgba(128, 128, 128, 0.5),
                     0 0 240px rgba(128, 128, 128, 0.3);
    }
}

@keyframes omegaGlow {
    0% {
        text-shadow: 0 0 30px rgba(0, 0, 139, 0.9),
                     0 0 60px rgba(0, 0, 139, 0.7),
                     0 0 90px rgba(0, 0, 139, 0.5);
    }
    50% {
        text-shadow: 0 0 50px rgba(0, 0, 139, 1.0),
                     0 0 100px rgba(0, 0, 139, 0.9),
                     0 0 150px rgba(0, 0, 139, 0.7),
                     0 0 200px rgba(0, 0, 139, 0.5);
    }
    100% {
        text-shadow: 0 0 30px rgba(0, 0, 139, 0.9),
                     0 0 60px rgba(0, 0, 139, 0.7),
                     0 0 90px rgba(0, 0, 139, 0.5);
    }
}

@keyframes omegaGlowResult {
    0% {
        text-shadow: 0 0 60px rgba(0, 0, 139, 0.9),
                     0 0 120px rgba(0, 0, 139, 0.7),
                     0 0 180px rgba(0, 0, 139, 0.5),
                     0 0 240px rgba(0, 0, 139, 0.3);
    }
    50% {
        text-shadow: 0 0 100px rgba(0, 0, 139, 1.0),
                     0 0 200px rgba(0, 0, 139, 0.9),
                     0 0 300px rgba(0, 0, 139, 0.7),
                     0 0 400px rgba(0, 0, 139, 0.5);
    }
    100% {
        text-shadow: 0 0 60px rgba(0, 0, 139, 0.9),
                     0 0 120px rgba(0, 0, 139, 0.7),
                     0 0 180px rgba(0, 0, 139, 0.5),
                     0 0 240px rgba(0, 0, 139, 0.3);
    }
}

@keyframes gildedPulse {
    0% {
        border-width: 0;
        box-shadow: 
            inset 0 0 0 0 rgba(255, 215, 0, 0),
            inset 0 0 0 0 rgba(255, 215, 0, 0),
            inset 0 0 0 0 rgba(255, 215, 0, 0),
            inset 0 0 0 0 rgba(255, 215, 0, 0);
    }
    50% {
        border-width: 15px;
        box-shadow: 
            inset 0 0 40px 15px rgba(255, 215, 0, 0.7),
            inset 0 0 80px 30px rgba(255, 215, 0, 0.5),
            inset 0 0 120px 45px rgba(255, 215, 0, 0.3),
            inset 0 0 160px 60px rgba(255, 215, 0, 0.1);
    }
    100% {
        border-width: 30px;
        box-shadow: 
            inset 0 0 80px 30px rgba(255, 215, 0, 0.9),
            inset 0 0 160px 60px rgba(255, 215, 0, 0.7),
            inset 0 0 240px 90px rgba(255, 215, 0, 0.5),
            inset 0 0 320px 120px rgba(255, 215, 0, 0.3);
    }
}

@keyframes gildedGlow {
    0% {
        text-shadow: 0 0 30px rgba(255, 215, 0, 0.9),
                     0 0 60px rgba(255, 215, 0, 0.7),
                     0 0 90px rgba(255, 215, 0, 0.5);
    }
    50% {
        text-shadow: 0 0 50px rgba(255, 215, 0, 1.0),
                     0 0 100px rgba(255, 215, 0, 0.9),
                     0 0 150px rgba(255, 215, 0, 0.7),
                     0 0 200px rgba(255, 215, 0, 0.5);
    }
    100% {
        text-shadow: 0 0 30px rgba(255, 215, 0, 0.9),
                     0 0 60px rgba(255, 215, 0, 0.7),
                     0 0 90px rgba(255, 215, 0, 0.5);
    }
}

@keyframes gildedGlowResult {
    0% {
        text-shadow: 0 0 60px rgba(255, 215, 0, 0.9),
                     0 0 120px rgba(255, 215, 0, 0.7),
                     0 0 180px rgba(255, 215, 0, 0.5),
                     0 0 240px rgba(255, 215, 0, 0.3);
    }
    50% {
        text-shadow: 0 0 100px rgba(255, 215, 0, 1.0),
                     0 0 200px rgba(255, 215, 0, 0.9),
                     0 0 300px rgba(255, 215, 0, 0.7),
                     0 0 400px rgba(255, 215, 0, 0.5);
    }
    100% {
        text-shadow: 0 0 60px rgba(255, 215, 0, 0.9),
                     0 0 120px rgba(255, 215, 0, 0.7),
                     0 0 180px rgba(255, 215, 0, 0.5),
                     0 0 240px rgba(255, 215, 0, 0.3);
    }
}

@keyframes riftPulse {
    0% {
        border-width: 0;
        box-shadow: 
            inset 0 0 0 0 rgba(128, 0, 0, 0),
            inset 0 0 0 0 rgba(128, 0, 0, 0),
            inset 0 0 0 0 rgba(128, 0, 0, 0),
            inset 0 0 0 0 rgba(128, 0, 0, 0);
    }
    50% {
        border-width: 15px;
        box-shadow: 
            inset 0 0 40px 15px rgba(128, 0, 0, 0.7),
            inset 0 0 80px 30px rgba(128, 0, 0, 0.5),
            inset 0 0 120px 45px rgba(128, 0, 0, 0.3),
            inset 0 0 160px 60px rgba(128, 0, 0, 0.1);
    }
    100% {
        border-width: 30px;
        box-shadow: 
            inset 0 0 80px 30px rgba(128, 0, 0, 0.9),
            inset 0 0 160px 60px rgba(128, 0, 0, 0.7),
            inset 0 0 240px 90px rgba(128, 0, 0, 0.5),
            inset 0 0 320px 120px rgba(128, 0, 0, 0.3);
    }
}

@keyframes riftGlow {
    0% {
        text-shadow: 0 0 30px rgba(128, 0, 0, 0.9),
                     0 0 60px rgba(128, 0, 0, 0.7),
                     0 0 90px rgba(128, 0, 0, 0.5);
    }
    50% {
        text-shadow: 0 0 50px rgba(128, 0, 0, 1.0),
                     0 0 100px rgba(128, 0, 0, 0.9),
                     0 0 150px rgba(128, 0, 0, 0.7),
                     0 0 200px rgba(128, 0, 0, 0.5);
    }
    100% {
        text-shadow: 0 0 30px rgba(128, 0, 0, 0.9),
                     0 0 60px rgba(128, 0, 0, 0.7),
                     0 0 90px rgba(128, 0, 0, 0.5);
    }
}

@keyframes riftGlowResult {
    0% {
        text-shadow: 0 0 60px rgba(128, 0, 0, 0.9),
                     0 0 120px rgba(128, 0, 0, 0.7),
                     0 0 180px rgba(128, 0, 0, 0.5),
                     0 0 240px rgba(128, 0, 0, 0.3);
    }
    50% {
        text-shadow: 0 0 100px rgba(128, 0, 0, 1.0),
                     0 0 200px rgba(128, 0, 0, 0.9),
                     0 0 300px rgba(128, 0, 0, 0.7),
                     0 0 400px rgba(128, 0, 0, 0.5);
    }
    100% {
        text-shadow: 0 0 60px rgba(128, 0, 0, 0.9),
                     0 0 120px rgba(128, 0, 0, 0.7),
                     0 0 180px rgba(128, 0, 0, 0.5),
                     0 0 240px rgba(128, 0, 0, 0.3);
    }
}

@keyframes veiledPulse {
    0% {
        border-width: 0;
        box-shadow: 
            inset 0 0 0 0 rgba(0, 100, 0, 0),
            inset 0 0 0 0 rgba(0, 100, 0, 0),
            inset 0 0 0 0 rgba(0, 100, 0, 0),
            inset 0 0 0 0 rgba(0, 100, 0, 0);
    }
    50% {
        border-width: 15px;
        box-shadow: 
            inset 0 0 40px 15px rgba(0, 100, 0, 0.7),
            inset 0 0 80px 30px rgba(0, 100, 0, 0.5),
            inset 0 0 120px 45px rgba(0, 100, 0, 0.3),
            inset 0 0 160px 60px rgba(0, 100, 0, 0.1);
    }
    100% {
        border-width: 30px;
        box-shadow: 
            inset 0 0 80px 30px rgba(0, 100, 0, 0.9),
            inset 0 0 160px 60px rgba(0, 100, 0, 0.7),
            inset 0 0 240px 90px rgba(0, 100, 0, 0.5),
            inset 0 0 320px 120px rgba(0, 100, 0, 0.3);
    }
}

@keyframes veiledGlow {
    0% {
        text-shadow: 0 0 30px rgba(0, 100, 0, 0.9),
                     0 0 60px rgba(0, 100, 0, 0.7),
                     0 0 90px rgba(0, 100, 0, 0.5);
    }
    50% {
        text-shadow: 0 0 50px rgba(0, 100, 0, 1.0),
                     0 0 100px rgba(0, 100, 0, 0.9),
                     0 0 150px rgba(0, 100, 0, 0.7),
                     0 0 200px rgba(0, 100, 0, 0.5);
    }
    100% {
        text-shadow: 0 0 30px rgba(0, 100, 0, 0.9),
                     0 0 60px rgba(0, 100, 0, 0.7),
                     0 0 90px rgba(0, 100, 0, 0.5);
    }
}

@keyframes veiledGlowResult {
    0% {
        text-shadow: 0 0 60px rgba(0, 100, 0, 0.9),
                     0 0 120px rgba(0, 100, 0, 0.7),
                     0 0 180px rgba(0, 100, 0, 0.5),
                     0 0 240px rgba(0, 100, 0, 0.3);
    }
    50% {
        text-shadow: 0 0 100px rgba(0, 100, 0, 1.0),
                     0 0 200px rgba(0, 100, 0, 0.9),
                     0 0 300px rgba(0, 100, 0, 0.7),
                     0 0 400px rgba(0, 100, 0, 0.5);
    }
    100% {
        text-shadow: 0 0 60px rgba(0, 100, 0, 0.9),
                     0 0 120px rgba(0, 100, 0, 0.7),
                     0 0 180px rgba(0, 100, 0, 0.5),
                     0 0 240px rgba(0, 100, 0, 0.3);
    }
}

@keyframes lunarPulse {
    0% {
        border-width: 0;
        box-shadow: 
            inset 0 0 0 0 rgba(47, 47, 47, 0),
            inset 0 0 0 0 rgba(47, 47, 47, 0),
            inset 0 0 0 0 rgba(47, 47, 47, 0),
            inset 0 0 0 0 rgba(47, 47, 47, 0);
    }
    50% {
        border-width: 15px;
        box-shadow: 
            inset 0 0 40px 15px rgba(47, 47, 47, 0.7),
            inset 0 0 80px 30px rgba(47, 47, 47, 0.5),
            inset 0 0 120px 45px rgba(47, 47, 47, 0.3),
            inset 0 0 160px 60px rgba(47, 47, 47, 0.1);
    }
    100% {
        border-width: 30px;
        box-shadow: 
            inset 0 0 80px 30px rgba(47, 47, 47, 0.9),
            inset 0 0 160px 60px rgba(47, 47, 47, 0.7),
            inset 0 0 240px 90px rgba(47, 47, 47, 0.5),
            inset 0 0 320px 120px rgba(47, 47, 47, 0.3);
    }
}

@keyframes lunarGlow {
    0% {
        text-shadow: 0 0 30px rgba(47, 47, 47, 0.9),
                     0 0 60px rgba(47, 47, 47, 0.7),
                     0 0 90px rgba(47, 47, 47, 0.5);
    }
    50% {
        text-shadow: 0 0 50px rgba(47, 47, 47, 1.0),
                     0 0 100px rgba(47, 47, 47, 0.9),
                     0 0 150px rgba(47, 47, 47, 0.7),
                     0 0 200px rgba(47, 47, 47, 0.5);
    }
    100% {
        text-shadow: 0 0 30px rgba(47, 47, 47, 0.9),
                     0 0 60px rgba(47, 47, 47, 0.7),
                     0 0 90px rgba(47, 47, 47, 0.5);
    }
}

@keyframes lunarGlowResult {
    0% {
        text-shadow: 0 0 60px rgba(47, 47, 47, 0.9),
                     0 0 120px rgba(47, 47, 47, 0.7),
                     0 0 180px rgba(47, 47, 47, 0.5),
                     0 0 240px rgba(47, 47, 47, 0.3);
    }
    50% {
        text-shadow: 0 0 100px rgba(47, 47, 47, 1.0),
                     0 0 200px rgba(47, 47, 47, 0.9),
                     0 0 300px rgba(47, 47, 47, 0.7),
                     0 0 400px rgba(47, 47, 47, 0.5);
    }
    100% {
        text-shadow: 0 0 60px rgba(47, 47, 47, 0.9),
                     0 0 120px rgba(47, 47, 47, 0.7),
                     0 0 180px rgba(47, 47, 47, 0.5),
                     0 0 240px rgba(47, 47, 47, 0.3);
    }
}

@keyframes scribePulse {
    0% {
        border-width: 0;
        box-shadow: 
            inset 0 0 0 0 rgba(139, 69, 19, 0),
            inset 0 0 0 0 rgba(139, 69, 19, 0),
            inset 0 0 0 0 rgba(139, 69, 19, 0),
            inset 0 0 0 0 rgba(139, 69, 19, 0);
    }
    50% {
        border-width: 15px;
        box-shadow: 
            inset 0 0 40px 15px rgba(139, 69, 19, 0.7),
            inset 0 0 80px 30px rgba(139, 69, 19, 0.5),
            inset 0 0 120px 45px rgba(139, 69, 19, 0.3),
            inset 0 0 160px 60px rgba(139, 69, 19, 0.1);
    }
    100% {
        border-width: 30px;
        box-shadow: 
            inset 0 0 80px 30px rgba(139, 69, 19, 0.9),
            inset 0 0 160px 60px rgba(139, 69, 19, 0.7),
            inset 0 0 240px 90px rgba(139, 69, 19, 0.5),
            inset 0 0 320px 120px rgba(139, 69, 19, 0.3);
    }
}

@keyframes scribeGlow {
    0% {
        text-shadow: 0 0 30px rgba(139, 69, 19, 0.9),
                     0 0 60px rgba(139, 69, 19, 0.7),
                     0 0 90px rgba(139, 69, 19, 0.5);
    }
    50% {
        text-shadow: 0 0 50px rgba(139, 69, 19, 1.0),
                     0 0 100px rgba(139, 69, 19, 0.9),
                     0 0 150px rgba(139, 69, 19, 0.7),
                     0 0 200px rgba(139, 69, 19, 0.5);
    }
    100% {
        text-shadow: 0 0 30px rgba(139, 69, 19, 0.9),
                     0 0 60px rgba(139, 69, 19, 0.7),
                     0 0 90px rgba(139, 69, 19, 0.5);
    }
}

@keyframes scribeGlowResult {
    0% {
        text-shadow: 0 0 60px rgba(139, 69, 19, 0.9),
                     0 0 120px rgba(139, 69, 19, 0.7),
                     0 0 180px rgba(139, 69, 19, 0.5),
                     0 0 240px rgba(139, 69, 19, 0.3);
    }
    50% {
        text-shadow: 0 0 100px rgba(139, 69, 19, 1.0),
                     0 0 200px rgba(139, 69, 19, 0.9),
                     0 0 300px rgba(139, 69, 19, 0.7),
                     0 0 400px rgba(139, 69, 19, 0.5);
    }
    100% {
        text-shadow: 0 0 60px rgba(139, 69, 19, 0.9),
                     0 0 120px rgba(139, 69, 19, 0.7),
                     0 0 180px rgba(139, 69, 19, 0.5),
                     0 0 240px rgba(139, 69, 19, 0.3);
    }
}

@keyframes ghostPulse {
    0% {
        border-width: 0;
        box-shadow: 
            inset 0 0 0 0 rgba(211, 211, 211, 0),
            inset 0 0 0 0 rgba(211, 211, 211, 0),
            inset 0 0 0 0 rgba(211, 211, 211, 0),
            inset 0 0 0 0 rgba(211, 211, 211, 0);
    }
    50% {
        border-width: 15px;
        box-shadow: 
            inset 0 0 40px 15px rgba(211, 211, 211, 0.7),
            inset 0 0 80px 30px rgba(211, 211, 211, 0.5),
            inset 0 0 120px 45px rgba(211, 211, 211, 0.3),
            inset 0 0 160px 60px rgba(211, 211, 211, 0.1);
    }
    100% {
        border-width: 30px;
        box-shadow: 
            inset 0 0 80px 30px rgba(211, 211, 211, 0.9),
            inset 0 0 160px 60px rgba(211, 211, 211, 0.7),
            inset 0 0 240px 90px rgba(211, 211, 211, 0.5),
            inset 0 0 320px 120px rgba(211, 211, 211, 0.3);
    }
}

@keyframes ghostGlow {
    0% {
        text-shadow: 0 0 30px rgba(211, 211, 211, 0.9),
                     0 0 60px rgba(211, 211, 211, 0.7),
                     0 0 90px rgba(211, 211, 211, 0.5);
    }
    50% {
        text-shadow: 0 0 50px rgba(211, 211, 211, 1.0),
                     0 0 100px rgba(211, 211, 211, 0.9),
                     0 0 150px rgba(211, 211, 211, 0.7),
                     0 0 200px rgba(211, 211, 211, 0.5);
    }
    100% {
        text-shadow: 0 0 30px rgba(211, 211, 211, 0.9),
                     0 0 60px rgba(211, 211, 211, 0.7),
                     0 0 90px rgba(211, 211, 211, 0.5);
    }
}

@keyframes ghostGlowResult {
    0% {
        text-shadow: 0 0 60px rgba(211, 211, 211, 0.9),
                     0 0 120px rgba(211, 211, 211, 0.7),
                     0 0 180px rgba(211, 211, 211, 0.5),
                     0 0 240px rgba(211, 211, 211, 0.3);
    }
    50% {
        text-shadow: 0 0 100px rgba(211, 211, 211, 1.0),
                     0 0 200px rgba(211, 211, 211, 0.9),
                     0 0 300px rgba(211, 211, 211, 0.7),
                     0 0 400px rgba(211, 211, 211, 0.5);
    }
    100% {
        text-shadow: 0 0 60px rgba(211, 211, 211, 0.9),
                     0 0 120px rgba(211, 211, 211, 0.7),
                     0 0 180px rgba(211, 211, 211, 0.5),
                     0 0 240px rgba(211, 211, 211, 0.3);
    }
}

@keyframes facetPulse {
    0% {
        border-width: 0;
        box-shadow: 
            inset 0 0 0 0 rgba(173, 216, 230, 0),
            inset 0 0 0 0 rgba(173, 216, 230, 0),
            inset 0 0 0 0 rgba(173, 216, 230, 0),
            inset 0 0 0 0 rgba(173, 216, 230, 0);
    }
    50% {
        border-width: 15px;
        box-shadow: 
            inset 0 0 40px 15px rgba(173, 216, 230, 0.7),
            inset 0 0 80px 30px rgba(173, 216, 230, 0.5),
            inset 0 0 120px 45px rgba(173, 216, 230, 0.3),
            inset 0 0 160px 60px rgba(173, 216, 230, 0.1);
    }
    100% {
        border-width: 30px;
        box-shadow: 
            inset 0 0 80px 30px rgba(173, 216, 230, 0.9),
            inset 0 0 160px 60px rgba(173, 216, 230, 0.7),
            inset 0 0 240px 90px rgba(173, 216, 230, 0.5),
            inset 0 0 320px 120px rgba(173, 216, 230, 0.3);
    }
}

@keyframes facetGlow {
    0% {
        text-shadow: 0 0 30px rgba(173, 216, 230, 0.9),
                     0 0 60px rgba(173, 216, 230, 0.7),
                     0 0 90px rgba(173, 216, 230, 0.5);
    }
    50% {
        text-shadow: 0 0 50px rgba(173, 216, 230, 1.0),
                     0 0 100px rgba(173, 216, 230, 0.9),
                     0 0 150px rgba(173, 216, 230, 0.7),
                     0 0 200px rgba(173, 216, 230, 0.5);
    }
    100% {
        text-shadow: 0 0 30px rgba(173, 216, 230, 0.9),
                     0 0 60px rgba(173, 216, 230, 0.7),
                     0 0 90px rgba(173, 216, 230, 0.5);
    }
}

@keyframes facetGlowResult {
    0% {
        text-shadow: 0 0 60px rgba(173, 216, 230, 0.9),
                     0 0 120px rgba(173, 216, 230, 0.7),
                     0 0 180px rgba(173, 216, 230, 0.5),
                     0 0 240px rgba(173, 216, 230, 0.3);
    }
    50% {
        text-shadow: 0 0 100px rgba(173, 216, 230, 1.0),
                     0 0 200px rgba(173, 216, 230, 0.9),
                     0 0 300px rgba(173, 216, 230, 0.7),
                     0 0 400px rgba(173, 216, 230, 0.5);
    }
    100% {
        text-shadow: 0 0 60px rgba(173, 216, 230, 0.9),
                     0 0 120px rgba(173, 216, 230, 0.7),
                     0 0 180px rgba(173, 216, 230, 0.5),
                     0 0 240px rgba(173, 216, 230, 0.3);
    }
}

@keyframes exaltedPulse {
    0% {
        border-width: 0;
        box-shadow: 
            inset 0 0 0 0 rgba(255, 165, 0, 0),
            inset 0 0 0 0 rgba(255, 165, 0, 0),
            inset 0 0 0 0 rgba(255, 165, 0, 0),
            inset 0 0 0 0 rgba(255, 165, 0, 0);
    }
    50% {
        border-width: 15px;
        box-shadow: 
            inset 0 0 40px 15px rgba(255, 165, 0, 0.7),
            inset 0 0 80px 30px rgba(255, 165, 0, 0.5),
            inset 0 0 120px 45px rgba(255, 165, 0, 0.3),
            inset 0 0 160px 60px rgba(255, 165, 0, 0.1);
    }
    100% {
        border-width: 30px;
        box-shadow: 
            inset 0 0 80px 30px rgba(255, 165, 0, 0.9),
            inset 0 0 160px 60px rgba(255, 165, 0, 0.7),
            inset 0 0 240px 90px rgba(255, 165, 0, 0.5),
            inset 0 0 320px 120px rgba(255, 165, 0, 0.3);
    }
}

@keyframes exaltedGlow {
    0% {
        text-shadow: 0 0 30px rgba(255, 165, 0, 0.9),
                     0 0 60px rgba(255, 165, 0, 0.7),
                     0 0 90px rgba(255, 165, 0, 0.5);
    }
    50% {
        text-shadow: 0 0 50px rgba(255, 165, 0, 1.0),
                     0 0 100px rgba(255, 165, 0, 0.9),
                     0 0 150px rgba(255, 165, 0, 0.7),
                     0 0 200px rgba(255, 165, 0, 0.5);
    }
    100% {
        text-shadow: 0 0 30px rgba(255, 165, 0, 0.9),
                     0 0 60px rgba(255, 165, 0, 0.7),
                     0 0 90px rgba(255, 165, 0, 0.5);
    }
}

@keyframes exaltedGlowResult {
    0% {
        text-shadow: 0 0 60px rgba(255, 165, 0, 0.9),
                     0 0 120px rgba(255, 165, 0, 0.7),
                     0 0 180px rgba(255, 165, 0, 0.5),
                     0 0 240px rgba(255, 165, 0, 0.3);
    }
    50% {
        text-shadow: 0 0 100px rgba(255, 165, 0, 1.0),
                     0 0 200px rgba(255, 165, 0, 0.9),
                     0 0 300px rgba(255, 165, 0, 0.7),
                     0 0 400px rgba(255, 165, 0, 0.5);
    }
    100% {
        text-shadow: 0 0 60px rgba(255, 165, 0, 0.9),
                     0 0 120px rgba(255, 165, 0, 0.7),
                     0 0 180px rgba(255, 165, 0, 0.5),
                     0 0 240px rgba(255, 165, 0, 0.3);
    }
}

@keyframes foregroundPulse {
    0% {
        border-width: 0;
        border-color: #FFA500;
        box-shadow: 
            inset 0 0 0 0 rgba(255, 165, 0, 0),
            inset 0 0 0 0 rgba(255, 165, 0, 0),
            inset 0 0 0 0 rgba(255, 165, 0, 0),
            inset 0 0 0 0 rgba(255, 165, 0, 0);
    }
    50% {
        border-width: 15px;
        border-color: #FF4500;
        box-shadow: 
            inset 0 0 40px 15px rgba(255, 69, 0, 0.7),
            inset 0 0 80px 30px rgba(255, 69, 0, 0.5),
            inset 0 0 120px 45px rgba(255, 69, 0, 0.3),
            inset 0 0 160px 60px rgba(255, 69, 0, 0.1);
    }
    100% {
        border-width: 30px;
        border-color: #FFA500;
        box-shadow: 
            inset 0 0 80px 30px rgba(255, 165, 0, 0.9),
            inset 0 0 160px 60px rgba(255, 165, 0, 0.7),
            inset 0 0 240px 90px rgba(255, 165, 0, 0.5),
            inset 0 0 320px 120px rgba(255, 165, 0, 0.3);
    }
}

@keyframes foregroundColor {
    0% {
        color: #ff0000;
        text-shadow: 0 0 30px rgba(255, 0, 0, 0.9),
                     0 0 60px rgba(255, 0, 0, 0.7),
                     0 0 90px rgba(255, 0, 0, 0.5);
    }
    50% {
        color: #ffa500;
        text-shadow: 0 0 30px rgba(255, 165, 0, 0.9),
                     0 0 60px rgba(255, 165, 0, 0.7),
                     0 0 90px rgba(255, 165, 0, 0.5);
    }
    100% {
        color: #ff0000;
        text-shadow: 0 0 30px rgba(255, 0, 0, 0.9),
                     0 0 60px rgba(255, 0, 0, 0.7),
                     0 0 90px rgba(255, 0, 0, 0.5);
    }
}

@keyframes foregroundColorResult {
    0% {
        color: #ff0000;
        text-shadow: 0 0 60px rgba(255, 0, 0, 0.9),
                     0 0 120px rgba(255, 0, 0, 0.7),
                     0 0 180px rgba(255, 0, 0, 0.5),
                     0 0 240px rgba(255, 0, 0, 0.3);
    }
    50% {
        color: #ffa500;
        text-shadow: 0 0 60px rgba(255, 165, 0, 0.9),
                     0 0 120px rgba(255, 165, 0, 0.7),
                     0 0 180px rgba(255, 165, 0, 0.5),
                     0 0 240px rgba(255, 165, 0, 0.3);
    }
    100% {
        color: #ff0000;
        text-shadow: 0 0 60px rgba(255, 0, 0, 0.9),
                     0 0 120px rgba(255, 0, 0, 0.7),
                     0 0 180px rgba(255, 0, 0, 0.5),
                     0 0 240px rgba(255, 0, 0, 0.3);
    }
}

@keyframes enragingPulse {
    0% {
        border-width: 0;
        border-color: #8B0000;
        box-shadow: 
            inset 0 0 0 0 rgba(139, 0, 0, 0),
            inset 0 0 0 0 rgba(139, 0, 0, 0),
            inset 0 0 0 0 rgba(139, 0, 0, 0),
            inset 0 0 0 0 rgba(139, 0, 0, 0);
    }
    50% {
        border-width: 15px;
        border-color: #800080;
        box-shadow: 
            inset 0 0 40px 15px rgba(128, 0, 128, 0.7),
            inset 0 0 80px 30px rgba(128, 0, 128, 0.5),
            inset 0 0 120px 45px rgba(128, 0, 128, 0.3),
            inset 0 0 160px 60px rgba(128, 0, 128, 0.1);
    }
    100% {
        border-width: 30px;
        border-color: #8B0000;
        box-shadow: 
            inset 0 0 80px 30px rgba(139, 0, 0, 0.9),
            inset 0 0 160px 60px rgba(139, 0, 0, 0.7),
            inset 0 0 240px 90px rgba(139, 0, 0, 0.5),
            inset 0 0 320px 120px rgba(139, 0, 0, 0.3);
    }
}

@keyframes enragingColor {
    0% {
        color: #8B0000;
        text-shadow: 0 0 30px rgba(139, 0, 0, 0.9),
                     0 0 60px rgba(139, 0, 0, 0.7),
                     0 0 90px rgba(139, 0, 0, 0.5);
    }
    50% {
        color: #800080;
        text-shadow: 0 0 30px rgba(128, 0, 128, 0.9),
                     0 0 60px rgba(128, 0, 128, 0.7),
                     0 0 90px rgba(128, 0, 128, 0.5);
    }
    100% {
        color: #8B0000;
        text-shadow: 0 0 30px rgba(139, 0, 0, 0.9),
                     0 0 60px rgba(139, 0, 0, 0.7),
                     0 0 90px rgba(139, 0, 0, 0.5);
    }
}

@keyframes enragingColorResult {
    0% {
        color: #8B0000;
        text-shadow: 0 0 60px rgba(139, 0, 0, 0.9),
                     0 0 120px rgba(139, 0, 0, 0.7),
                     0 0 180px rgba(139, 0, 0, 0.5),
                     0 0 240px rgba(139, 0, 0, 0.3);
    }
    50% {
        color: #800080;
        text-shadow: 0 0 60px rgba(128, 0, 128, 0.9),
                     0 0 120px rgba(128, 0, 128, 0.7),
                     0 0 180px rgba(128, 0, 128, 0.5),
                     0 0 240px rgba(128, 0, 128, 0.3);
    }
    100% {
        color: #8B0000;
        text-shadow: 0 0 60px rgba(139, 0, 0, 0.9),
                     0 0 120px rgba(139, 0, 0, 0.7),
                     0 0 180px rgba(139, 0, 0, 0.5),
                     0 0 240px rgba(139, 0, 0, 0.3);
    }
}

@keyframes bloomedPulse {
    0% {
        border-width: 0;
        border-color: #FFFF00;
        box-shadow: 
            inset 0 0 0 0 rgba(255, 255, 0, 0),
            inset 0 0 0 0 rgba(255, 255, 0, 0),
            inset 0 0 0 0 rgba(255, 255, 0, 0),
            inset 0 0 0 0 rgba(255, 255, 0, 0);
    }
    50% {
        border-width: 15px;
        border-color: #00FF00;
        box-shadow: 
            inset 0 0 40px 15px rgba(0, 255, 0, 0.7),
            inset 0 0 80px 30px rgba(0, 255, 0, 0.5),
            inset 0 0 120px 45px rgba(0, 255, 0, 0.3),
            inset 0 0 160px 60px rgba(0, 255, 0, 0.1);
    }
    100% {
        border-width: 30px;
        border-color: #FFFF00;
        box-shadow: 
            inset 0 0 80px 30px rgba(255, 255, 0, 0.9),
            inset 0 0 160px 60px rgba(255, 255, 0, 0.7),
            inset 0 0 240px 90px rgba(255, 255, 0, 0.5),
            inset 0 0 320px 120px rgba(255, 255, 0, 0.3);
    }
}

@keyframes bloomedColor {
    0% {
        color: #FFFF00;
        text-shadow: 0 0 30px rgba(255, 255, 0, 0.9),
                     0 0 60px rgba(255, 255, 0, 0.7),
                     0 0 90px rgba(255, 255, 0, 0.5);
    }
    50% {
        color: #00FF00;
        text-shadow: 0 0 30px rgba(0, 255, 0, 0.9),
                     0 0 60px rgba(0, 255, 0, 0.7),
                     0 0 90px rgba(0, 255, 0, 0.5);
    }
    100% {
        color: #FFFF00;
        text-shadow: 0 0 30px rgba(255, 255, 0, 0.9),
                     0 0 60px rgba(255, 255, 0, 0.7),
                     0 0 90px rgba(255, 255, 0, 0.5);
    }
}

@keyframes bloomedColorResult {
    0% {
        color: #FFFF00;
        text-shadow: 0 0 60px rgba(255, 255, 0, 0.9),
                     0 0 120px rgba(255, 255, 0, 0.7),
                     0 0 180px rgba(255, 255, 0, 0.5),
                     0 0 240px rgba(255, 255, 0, 0.3);
    }
    50% {
        color: #00FF00;
        text-shadow: 0 0 60px rgba(0, 255, 0, 0.9),
                     0 0 120px rgba(0, 255, 0, 0.7),
                     0 0 180px rgba(0, 255, 0, 0.5),
                     0 0 240px rgba(0, 255, 0, 0.3);
    }
    100% {
        color: #FFFF00;
        text-shadow: 0 0 60px rgba(255, 255, 0, 0.9),
                     0 0 120px rgba(255, 255, 0, 0.7),
                     0 0 180px rgba(255, 255, 0, 0.5),
                     0 0 240px rgba(255, 255, 0, 0.3);
    }
}

@keyframes fracturedPulse {
    0% {
        border-width: 0;
        border-color: #808080;
        box-shadow: 
            inset 0 0 0 0 rgba(128, 128, 128, 0),
            inset 0 0 0 0 rgba(128, 128, 128, 0),
            inset 0 0 0 0 rgba(128, 128, 128, 0),
            inset 0 0 0 0 rgba(128, 128, 128, 0);
    }
    50% {
        border-width: 15px;
        border-color: #FFFFFF;
        box-shadow: 
            inset 0 0 40px 15px rgba(255, 255, 255, 0.7),
            inset 0 0 80px 30px rgba(255, 255, 255, 0.5),
            inset 0 0 120px 45px rgba(255, 255, 255, 0.3),
            inset 0 0 160px 60px rgba(255, 255, 255, 0.1);
    }
    100% {
        border-width: 30px;
        border-color: #808080;
        box-shadow: 
            inset 0 0 80px 30px rgba(128, 128, 128, 0.9),
            inset 0 0 160px 60px rgba(128, 128, 128, 0.7),
            inset 0 0 240px 90px rgba(128, 128, 128, 0.5),
            inset 0 0 320px 120px rgba(128, 128, 128, 0.3);
    }
}

@keyframes fracturedColor {
    0% {
        color: #808080;
        text-shadow: 0 0 30px rgba(128, 128, 128, 0.9),
                     0 0 60px rgba(128, 128, 128, 0.7),
                     0 0 90px rgba(128, 128, 128, 0.5);
    }
    50% {
        color: #FFFFFF;
        text-shadow: 0 0 30px rgba(255, 255, 255, 0.9),
                     0 0 60px rgba(255, 255, 255, 0.7),
                     0 0 90px rgba(255, 255, 255, 0.5);
    }
    100% {
        color: #808080;
        text-shadow: 0 0 30px rgba(128, 128, 128, 0.9),
                     0 0 60px rgba(128, 128, 128, 0.7),
                     0 0 90px rgba(128, 128, 128, 0.5);
    }
}

@keyframes fracturedColorResult {
    0% {
        color: #808080;
        text-shadow: 0 0 60px rgba(128, 128, 128, 0.9),
                     0 0 120px rgba(128, 128, 128, 0.7),
                     0 0 180px rgba(128, 128, 128, 0.5),
                     0 0 240px rgba(128, 128, 128, 0.3);
    }
    50% {
        color: #FFFFFF;
        text-shadow: 0 0 60px rgba(255, 255, 255, 0.9),
                     0 0 120px rgba(255, 255, 255, 0.7),
                     0 0 180px rgba(255, 255, 255, 0.5),
                     0 0 240px rgba(255, 255, 255, 0.3);
    }
    100% {
        color: #808080;
        text-shadow: 0 0 60px rgba(128, 128, 128, 0.9),
                     0 0 120px rgba(128, 128, 128, 0.7),
                     0 0 180px rgba(128, 128, 128, 0.5),
                     0 0 240px rgba(128, 128, 128, 0.3);
    }
}

@keyframes mythicalPlusPlusPulse {
    0% {
        border-width: 0;
        border-color: #FFFF00;
        box-shadow: 
            inset 0 0 0 0 rgba(255, 255, 0, 0),
            inset 0 0 0 0 rgba(255, 255, 0, 0),
            inset 0 0 0 0 rgba(255, 255, 0, 0),
            inset 0 0 0 0 rgba(255, 255, 0, 0);
    }
    50% {
        border-width: 15px;
        border-color: #FF69B4;
        box-shadow: 
            inset 0 0 40px 15px rgba(255, 105, 180, 0.7),
            inset 0 0 80px 30px rgba(255, 105, 180, 0.5),
            inset 0 0 120px 45px rgba(255, 105, 180, 0.3),
            inset 0 0 160px 60px rgba(255, 105, 180, 0.1);
    }
    100% {
        border-width: 30px;
        border-color: #FFFF00;
        box-shadow: 
            inset 0 0 80px 30px rgba(255, 255, 0, 0.9),
            inset 0 0 160px 60px rgba(255, 255, 0, 0.7),
            inset 0 0 240px 90px rgba(255, 255, 0, 0.5),
            inset 0 0 320px 120px rgba(255, 255, 0, 0.3);
    }
}

@keyframes mythicalPlusPlusColor {
    0% {
        color: #FFFF00;
        text-shadow: 0 0 30px rgba(255, 255, 0, 0.9),
                     0 0 60px rgba(255, 255, 0, 0.7),
                     0 0 90px rgba(255, 255, 0, 0.5);
    }
    50% {
        color: #FF69B4;
        text-shadow: 0 0 30px rgba(255, 105, 180, 0.9),
                     0 0 60px rgba(255, 105, 180, 0.7),
                     0 0 90px rgba(255, 105, 180, 0.5);
    }
    100% {
        color: #FFFF00;
        text-shadow: 0 0 30px rgba(255, 255, 0, 0.9),
                     0 0 60px rgba(255, 255, 0, 0.7),
                     0 0 90px rgba(255, 255, 0, 0.5);
    }
}

@keyframes mythicalPlusPlusColorResult {
    0% {
        color: #FFFF00;
        text-shadow: 0 0 60px rgba(255, 255, 0, 0.9),
                     0 0 120px rgba(255, 255, 0, 0.7),
                     0 0 180px rgba(255, 255, 0, 0.5),
                     0 0 240px rgba(255, 255, 0, 0.3);
    }
    50% {
        color: #FF69B4;
        text-shadow: 0 0 60px rgba(255, 105, 180, 0.9),
                     0 0 120px rgba(255, 105, 180, 0.7),
                     0 0 180px rgba(255, 105, 180, 0.5),
                     0 0 240px rgba(255, 105, 180, 0.3);
    }
    100% {
        color: #FFFF00;
        text-shadow: 0 0 60px rgba(255, 255, 0, 0.9),
                     0 0 120px rgba(255, 255, 0, 0.7),
                     0 0 180px rgba(255, 255, 0, 0.5),
                     0 0 240px rgba(255, 255, 0, 0.3);
    }
}

@keyframes nebulaPulse {
    0% {
        border-width: 0;
        border-color: #ADD8E6;
        box-shadow: 
            inset 0 0 0 0 rgba(173, 216, 230, 0),
            inset 0 0 0 0 rgba(173, 216, 230, 0),
            inset 0 0 0 0 rgba(173, 216, 230, 0),
            inset 0 0 0 0 rgba(173, 216, 230, 0);
    }
    50% {
        border-width: 15px;
        border-color: #FF69B4;
        box-shadow: 
            inset 0 0 40px 15px rgba(255, 105, 180, 0.7),
            inset 0 0 80px 30px rgba(255, 105, 180, 0.5),
            inset 0 0 120px 45px rgba(255, 105, 180, 0.3),
            inset 0 0 160px 60px rgba(255, 105, 180, 0.1);
    }
    100% {
        border-width: 30px;
        border-color: #ADD8E6;
        box-shadow: 
            inset 0 0 80px 30px rgba(173, 216, 230, 0.9),
            inset 0 0 160px 60px rgba(173, 216, 230, 0.7),
            inset 0 0 240px 90px rgba(173, 216, 230, 0.5),
            inset 0 0 320px 120px rgba(173, 216, 230, 0.3);
    }
}

@keyframes nebulaColor {
    0% {
        color: #ADD8E6;
        text-shadow: 0 0 30px rgba(173, 216, 230, 0.9),
                     0 0 60px rgba(173, 216, 230, 0.7),
                     0 0 90px rgba(173, 216, 230, 0.5);
    }
    50% {
        color: #FF69B4;
        text-shadow: 0 0 30px rgba(255, 105, 180, 0.9),
                     0 0 60px rgba(255, 105, 180, 0.7),
                     0 0 90px rgba(255, 105, 180, 0.5);
    }
    100% {
        color: #ADD8E6;
        text-shadow: 0 0 30px rgba(173, 216, 230, 0.9),
                     0 0 60px rgba(173, 216, 230, 0.7),
                     0 0 90px rgba(173, 216, 230, 0.5);
    }
}

@keyframes nebulaColorResult {
    0% {
        color: #ADD8E6;
        text-shadow: 0 0 60px rgba(173, 216, 230, 0.9),
                     0 0 120px rgba(173, 216, 230, 0.7),
                     0 0 180px rgba(173, 216, 230, 0.5),
                     0 0 240px rgba(173, 216, 230, 0.3);
    }
    50% {
        color: #FF69B4;
        text-shadow: 0 0 60px rgba(255, 105, 180, 0.9),
                     0 0 120px rgba(255, 105, 180, 0.7),
                     0 0 180px rgba(255, 105, 180, 0.5),
                     0 0 240px rgba(255, 105, 180, 0.3);
    }
    100% {
        color: #ADD8E6;
        text-shadow: 0 0 60px rgba(173, 216, 230, 0.9),
                     0 0 120px rgba(173, 216, 230, 0.7),
                     0 0 180px rgba(173, 216, 230, 0.5),
                     0 0 240px rgba(173, 216, 230, 0.3);
    }
}

@keyframes singularityPulse {
    0% {
        border-width: 0;
        border-color: #800080;
        box-shadow: 
            inset 0 0 0 0 rgba(128, 0, 128, 0),
            inset 0 0 0 0 rgba(128, 0, 128, 0),
            inset 0 0 0 0 rgba(128, 0, 128, 0),
            inset 0 0 0 0 rgba(128, 0, 128, 0);
    }
    50% {
        border-width: 15px;
        border-color: #000000;
        box-shadow: 
            inset 0 0 40px 15px rgba(0, 0, 0, 0.7),
            inset 0 0 80px 30px rgba(0, 0, 0, 0.5),
            inset 0 0 120px 45px rgba(0, 0, 0, 0.3),
            inset 0 0 160px 60px rgba(0, 0, 0, 0.1);
    }
    100% {
        border-width: 30px;
        border-color: #800080;
        box-shadow: 
            inset 0 0 80px 30px rgba(128, 0, 128, 0.9),
            inset 0 0 160px 60px rgba(128, 0, 128, 0.7),
            inset 0 0 240px 90px rgba(128, 0, 128, 0.5),
            inset 0 0 320px 120px rgba(128, 0, 128, 0.3);
    }
}

@keyframes singularityColor {
    0% {
        color: #800080;
        text-shadow: 0 0 30px rgba(128, 0, 128, 0.9),
                     0 0 60px rgba(128, 0, 128, 0.7),
                     0 0 90px rgba(128, 0, 128, 0.5);
    }
    50% {
        color: #000000;
        text-shadow: 0 0 30px rgba(0, 0, 0, 0.9),
                     0 0 60px rgba(0, 0, 0, 0.7),
                     0 0 90px rgba(0, 0, 0, 0.5);
    }
    100% {
        color: #800080;
        text-shadow: 0 0 30px rgba(128, 0, 128, 0.9),
                     0 0 60px rgba(128, 0, 128, 0.7),
                     0 0 90px rgba(128, 0, 128, 0.5);
    }
}

@keyframes singularityColorResult {
    0% {
        color: #800080;
        text-shadow: 0 0 60px rgba(128, 0, 128, 0.9),
                     0 0 120px rgba(128, 0, 128, 0.7),
                     0 0 180px rgba(128, 0, 128, 0.5),
                     0 0 240px rgba(128, 0, 128, 0.3);
    }
    50% {
        color: #000000;
        text-shadow: 0 0 60px rgba(0, 0, 0, 0.9),
                     0 0 120px rgba(0, 0, 0, 0.7),
                     0 0 180px rgba(0, 0, 0, 0.5),
                     0 0 240px rgba(0, 0, 0, 0.3);
    }
    100% {
        color: #800080;
        text-shadow: 0 0 60px rgba(128, 0, 128, 0.9),
                     0 0 120px rgba(128, 0, 128, 0.7),
                     0 0 180px rgba(128, 0, 128, 0.5),
                     0 0 240px rgba(128, 0, 128, 0.3);
    }
}

@keyframes lastingPulse {
    0% {
        border-width: 0;
        border-color: #00008B;
        box-shadow: 
            inset 0 0 0 0 rgba(0, 0, 139, 0),
            inset 0 0 0 0 rgba(0, 0, 139, 0),
            inset 0 0 0 0 rgba(0, 0, 139, 0),
            inset 0 0 0 0 rgba(0, 0, 139, 0);
    }
    50% {
        border-width: 15px;
        border-color: #006400;
        box-shadow: 
            inset 0 0 40px 15px rgba(0, 100, 0, 0.7),
            inset 0 0 80px 30px rgba(0, 100, 0, 0.5),
            inset 0 0 120px 45px rgba(0, 100, 0, 0.3),
            inset 0 0 160px 60px rgba(0, 100, 0, 0.1);
    }
    100% {
        border-width: 30px;
        border-color: #00008B;
        box-shadow: 
            inset 0 0 80px 30px rgba(0, 0, 139, 0.9),
            inset 0 0 160px 60px rgba(0, 0, 139, 0.7),
            inset 0 0 240px 90px rgba(0, 0, 139, 0.5),
            inset 0 0 320px 120px rgba(0, 0, 139, 0.3);
    }
}

@keyframes lastingColor {
    0% {
        color: #00008B;
        text-shadow: 0 0 30px rgba(0, 0, 139, 0.9),
                     0 0 60px rgba(0, 0, 139, 0.7),
                     0 0 90px rgba(0, 0, 139, 0.5);
    }
    50% {
        color: #006400;
        text-shadow: 0 0 30px rgba(0, 100, 0, 0.9),
                     0 0 60px rgba(0, 100, 0, 0.7),
                     0 0 90px rgba(0, 100, 0, 0.5);
    }
    100% {
        color: #00008B;
        text-shadow: 0 0 30px rgba(0, 0, 139, 0.9),
                     0 0 60px rgba(0, 0, 139, 0.7),
                     0 0 90px rgba(0, 0, 139, 0.5);
    }
}

@keyframes lastingColorResult {
    0% {
        color: #00008B;
        text-shadow: 0 0 60px rgba(0, 0, 139, 0.9),
                     0 0 120px rgba(0, 0, 139, 0.7),
                     0 0 180px rgba(0, 0, 139, 0.5),
                     0 0 240px rgba(0, 0, 139, 0.3);
    }
    50% {
        color: #006400;
        text-shadow: 0 0 60px rgba(0, 100, 0, 0.9),
                     0 0 120px rgba(0, 100, 0, 0.7),
                     0 0 180px rgba(0, 100, 0, 0.5),
                     0 0 240px rgba(0, 100, 0, 0.3);
    }
    100% {
        color: #00008B;
        text-shadow: 0 0 60px rgba(0, 0, 139, 0.9),
                     0 0 120px rgba(0, 0, 139, 0.7),
                     0 0 180px rgba(0, 0, 139, 0.5),
                     0 0 240px rgba(0, 0, 139, 0.3);
    }
}

@keyframes frighteningPulse {
    0% {
        border-width: 0;
        border-color: #FFFFFF;
        box-shadow: 
            inset 0 0 0 0 rgba(255, 255, 255, 0),
            inset 0 0 0 0 rgba(255, 255, 255, 0),
            inset 0 0 0 0 rgba(255, 255, 255, 0),
            inset 0 0 0 0 rgba(255, 255, 255, 0);
    }
    50% {
        border-width: 15px;
        border-color: #000000;
        box-shadow: 
            inset 0 0 40px 15px rgba(0, 0, 0, 0.7),
            inset 0 0 80px 30px rgba(0, 0, 0, 0.5),
            inset 0 0 120px 45px rgba(0, 0, 0, 0.3),
            inset 0 0 160px 60px rgba(0, 0, 0, 0.1);
    }
    100% {
        border-width: 30px;
        border-color: #FFFFFF;
        box-shadow: 
            inset 0 0 80px 30px rgba(255, 255, 255, 0.9),
            inset 0 0 160px 60px rgba(255, 255, 255, 0.7),
            inset 0 0 240px 90px rgba(255, 255, 255, 0.5),
            inset 0 0 320px 120px rgba(255, 255, 255, 0.3);
    }
}

@keyframes frighteningColor {
    0% {
        color: #FFFFFF;
        text-shadow: 0 0 30px rgba(255, 255, 255, 0.9),
                     0 0 60px rgba(255, 255, 255, 0.7),
                     0 0 90px rgba(255, 255, 255, 0.5);
    }
    50% {
        color: #000000;
        text-shadow: 0 0 30px rgba(0, 0, 0, 0.9),
                     0 0 60px rgba(0, 0, 0, 0.7),
                     0 0 90px rgba(0, 0, 0, 0.5);
    }
    100% {
        color: #FFFFFF;
        text-shadow: 0 0 30px rgba(255, 255, 255, 0.9),
                     0 0 60px rgba(255, 255, 255, 0.7),
                     0 0 90px rgba(255, 255, 255, 0.5);
    }
}

@keyframes frighteningColorResult {
    0% {
        color: #FFFFFF;
        text-shadow: 0 0 60px rgba(255, 255, 255, 0.9),
                     0 0 120px rgba(255, 255, 255, 0.7),
                     0 0 180px rgba(255, 255, 255, 0.5),
                     0 0 240px rgba(255, 255, 255, 0.3);
    }
    50% {
        color: #000000;
        text-shadow: 0 0 60px rgba(0, 0, 0, 0.9),
                     0 0 120px rgba(0, 0, 0, 0.7),
                     0 0 180px rgba(0, 0, 0, 0.5),
                     0 0 240px rgba(0, 0, 0, 0.3);
    }
    100% {
        color: #FFFFFF;
        text-shadow: 0 0 60px rgba(255, 255, 255, 0.9),
                     0 0 120px rgba(255, 255, 255, 0.7),
                     0 0 180px rgba(255, 255, 255, 0.5),
                     0 0 240px rgba(255, 255, 255, 0.3);
    }
}

@keyframes closerPulse {
    0% {
        border-width: 0;
        border-color: #2F2F2F;
        box-shadow: 
            inset 0 0 0 0 rgba(47, 47, 47, 0),
            inset 0 0 0 0 rgba(47, 47, 47, 0),
            inset 0 0 0 0 rgba(47, 47, 47, 0),
            inset 0 0 0 0 rgba(47, 47, 47, 0);
    }
    50% {
        border-width: 15px;
        border-color: #808080;
        box-shadow: 
            inset 0 0 40px 15px rgba(128, 128, 128, 0.7),
            inset 0 0 80px 30px rgba(128, 128, 128, 0.5),
            inset 0 0 120px 45px rgba(128, 128, 128, 0.3),
            inset 0 0 160px 60px rgba(128, 128, 128, 0.1);
    }
    100% {
        border-width: 30px;
        border-color: #2F2F2F;
        box-shadow: 
            inset 0 0 80px 30px rgba(47, 47, 47, 0.9),
            inset 0 0 160px 60px rgba(47, 47, 47, 0.7),
            inset 0 0 240px 90px rgba(47, 47, 47, 0.5),
            inset 0 0 320px 120px rgba(47, 47, 47, 0.3);
    }
}

@keyframes closerColor {
    0% {
        color: #2F2F2F;
        text-shadow: 0 0 30px rgba(47, 47, 47, 0.9),
                     0 0 60px rgba(47, 47, 47, 0.7),
                     0 0 90px rgba(47, 47, 47, 0.5);
    }
    50% {
        color: #808080;
        text-shadow: 0 0 30px rgba(128, 128, 128, 0.9),
                     0 0 60px rgba(128, 128, 128, 0.7),
                     0 0 90px rgba(128, 128, 128, 0.5);
    }
    100% {
        color: #2F2F2F;
        text-shadow: 0 0 30px rgba(47, 47, 47, 0.9),
                     0 0 60px rgba(47, 47, 47, 0.7),
                     0 0 90px rgba(47, 47, 47, 0.5);
    }
}

@keyframes closerColorResult {
    0% {
        color: #2F2F2F;
        text-shadow: 0 0 60px rgba(47, 47, 47, 0.9),
                     0 0 120px rgba(47, 47, 47, 0.7),
                     0 0 180px rgba(47, 47, 47, 0.5),
                     0 0 240px rgba(47, 47, 47, 0.3);
    }
    50% {
        color: #808080;
        text-shadow: 0 0 60px rgba(128, 128, 128, 0.9),
                     0 0 120px rgba(128, 128, 128, 0.7),
                     0 0 180px rgba(128, 128, 128, 0.5),
                     0 0 240px rgba(128, 128, 128, 0.3);
    }
    100% {
        color: #2F2F2F;
        text-shadow: 0 0 60px rgba(47, 47, 47, 0.9),
                     0 0 120px rgba(47, 47, 47, 0.7),
                     0 0 180px rgba(47, 47, 47, 0.5),
                     0 0 240px rgba(47, 47, 47, 0.3);
    }
}

@keyframes alphaPulse {
    0% {
        border-width: 0;
        border-color: #CC6600;
        box-shadow: 
            inset 0 0 0 0 rgba(204, 102, 0, 0),
            inset 0 0 0 0 rgba(204, 102, 0, 0),
            inset 0 0 0 0 rgba(204, 102, 0, 0),
            inset 0 0 0 0 rgba(204, 102, 0, 0);
    }
    50% {
        border-width: 15px;
        border-color: #CC6600;
        box-shadow: 
            inset 0 0 40px 15px rgba(204, 102, 0, 0.7),
            inset 0 0 80px 30px rgba(204, 102, 0, 0.5),
            inset 0 0 120px 45px rgba(204, 102, 0, 0.3),
            inset 0 0 160px 60px rgba(204, 102, 0, 0.1);
    }
    100% {
        border-width: 30px;
        border-color: #CC6600;
        box-shadow: 
            inset 0 0 80px 30px rgba(204, 102, 0, 0.9),
            inset 0 0 160px 60px rgba(204, 102, 0, 0.7),
            inset 0 0 240px 90px rgba(204, 102, 0, 0.5),
            inset 0 0 320px 120px rgba(204, 102, 0, 0.3);
    }
}

@keyframes alphaGlowResult {
    0%, 100% {
        text-shadow: 0 0 60px rgba(204, 102, 0, 0.9),
                     0 0 120px rgba(204, 102, 0, 0.7),
                     0 0 180px rgba(204, 102, 0, 0.5),
                     0 0 240px rgba(204, 102, 0, 0.3);
    }
    50% {
        text-shadow: 0 0 80px rgba(204, 102, 0, 1),
                     0 0 160px rgba(204, 102, 0, 0.8),
                     0 0 240px rgba(204, 102, 0, 0.6),
                     0 0 320px rgba(204, 102, 0, 0.4);
    }
}

@keyframes alphaGlowSymbol {
    0%, 100% {
        text-shadow: 0 0 40px rgba(204, 102, 0, 0.9),
                     0 0 80px rgba(204, 102, 0, 0.7),
                     0 0 120px rgba(204, 102, 0, 0.5);
    }
    50% {
        text-shadow: 0 0 60px rgba(204, 102, 0, 1),
                     0 0 120px rgba(204, 102, 0, 0.8),
                     0 0 180px rgba(204, 102, 0, 0.6);
    }
}

@keyframes exoticPulse {
    0% {
        border-width: 0;
        border-color: #CC0000;
        box-shadow: 
            inset 0 0 0 0 rgba(204, 0, 0, 0),
            inset 0 0 0 0 rgba(204, 0, 0, 0),
            inset 0 0 0 0 rgba(204, 0, 0, 0),
            inset 0 0 0 0 rgba(204, 0, 0, 0);
    }
    50% {
        border-width: 15px;
        border-color: #CC0000;
        box-shadow: 
            inset 0 0 40px 15px rgba(204, 0, 0, 0.7),
            inset 0 0 80px 30px rgba(204, 0, 0, 0.5),
            inset 0 0 120px 45px rgba(204, 0, 0, 0.3),
            inset 0 0 160px 60px rgba(204, 0, 0, 0.1);
    }
    100% {
        border-width: 30px;
        border-color: #CC0000;
        box-shadow: 
            inset 0 0 80px 30px rgba(204, 0, 0, 0.9),
            inset 0 0 160px 60px rgba(204, 0, 0, 0.7),
            inset 0 0 240px 90px rgba(204, 0, 0, 0.5),
            inset 0 0 320px 120px rgba(204, 0, 0, 0.3);
    }
}

@keyframes exoticGlowResult {
    0%, 100% {
        text-shadow: 0 0 60px rgba(204, 0, 0, 0.9),
                     0 0 120px rgba(204, 0, 0, 0.7),
                     0 0 180px rgba(204, 0, 0, 0.5),
                     0 0 240px rgba(204, 0, 0, 0.3);
    }
    50% {
        text-shadow: 0 0 80px rgba(204, 0, 0, 1),
                     0 0 160px rgba(204, 0, 0, 0.8),
                     0 0 240px rgba(204, 0, 0, 0.6),
                     0 0 320px rgba(204, 0, 0, 0.4);
    }
}

@keyframes exoticGlowSymbol {
    0%, 100% {
        text-shadow: 0 0 40px rgba(204, 0, 0, 0.9),
                     0 0 80px rgba(204, 0, 0, 0.7),
                     0 0 120px rgba(204, 0, 0, 0.5);
    }
    50% {
        text-shadow: 0 0 60px rgba(204, 0, 0, 1),
                     0 0 120px rgba(204, 0, 0, 0.8),
                     0 0 180px rgba(204, 0, 0, 0.6);
    }
}

@keyframes dreamPulse {
    0% {
        border-width: 0;
        border-color: #87CEEB;
        box-shadow: 
            inset 0 0 0 0 rgba(135, 206, 235, 0),
            inset 0 0 0 0 rgba(135, 206, 235, 0),
            inset 0 0 0 0 rgba(135, 206, 235, 0),
            inset 0 0 0 0 rgba(135, 206, 235, 0);
    }
    50% {
        border-width: 15px;
        border-color: #87CEEB;
        box-shadow: 
            inset 0 0 40px 15px rgba(135, 206, 235, 0.7),
            inset 0 0 80px 30px rgba(135, 206, 235, 0.5),
            inset 0 0 120px 45px rgba(135, 206, 235, 0.3),
            inset 0 0 160px 60px rgba(135, 206, 235, 0.1);
    }
    100% {
        border-width: 30px;
        border-color: #87CEEB;
        box-shadow: 
            inset 0 0 80px 30px rgba(135, 206, 235, 0.9),
            inset 0 0 160px 60px rgba(135, 206, 235, 0.7),
            inset 0 0 240px 90px rgba(135, 206, 235, 0.5),
            inset 0 0 320px 120px rgba(135, 206, 235, 0.3);
    }
}

@keyframes dreamGlowResult {
    0%, 100% {
        text-shadow: 0 0 60px rgba(135, 206, 235, 0.9),
                     0 0 120px rgba(135, 206, 235, 0.7),
                     0 0 180px rgba(135, 206, 235, 0.5),
                     0 0 240px rgba(135, 206, 235, 0.3);
    }
    50% {
        text-shadow: 0 0 80px rgba(135, 206, 235, 1),
                     0 0 160px rgba(135, 206, 235, 0.8),
                     0 0 240px rgba(135, 206, 235, 0.6),
                     0 0 320px rgba(135, 206, 235, 0.4);
    }
}

@keyframes sovereignPulse {
    0% {
        border-width: 0;
        border-color: #006400;
        box-shadow: 
            inset 0 0 0 0 rgba(0, 100, 0, 0),
            inset 0 0 0 0 rgba(0, 100, 0, 0),
            inset 0 0 0 0 rgba(0, 100, 0, 0),
            inset 0 0 0 0 rgba(0, 100, 0, 0);
    }
    50% {
        border-width: 15px;
        border-color: #006400;
        box-shadow: 
            inset 0 0 40px 15px rgba(0, 100, 0, 0.7),
            inset 0 0 80px 30px rgba(0, 100, 0, 0.5),
            inset 0 0 120px 45px rgba(0, 100, 0, 0.3),
            inset 0 0 160px 60px rgba(0, 100, 0, 0.1);
    }
    100% {
        border-width: 30px;
        border-color: #006400;
        box-shadow: 
            inset 0 0 80px 30px rgba(0, 100, 0, 0.9),
            inset 0 0 160px 60px rgba(0, 100, 0, 0.7),
            inset 0 0 240px 90px rgba(0, 100, 0, 0.5),
            inset 0 0 320px 120px rgba(0, 100, 0, 0.3);
    }
}

@keyframes sovereignGlowResult {
    0%, 100% {
        text-shadow: 0 0 60px rgba(0, 100, 0, 0.9),
                     0 0 120px rgba(0, 100, 0, 0.7),
                     0 0 180px rgba(0, 100, 0, 0.5),
                     0 0 240px rgba(0, 100, 0, 0.3);
    }
    50% {
        text-shadow: 0 0 80px rgba(0, 100, 0, 1),
                     0 0 160px rgba(0, 100, 0, 0.8),
                     0 0 240px rgba(0, 100, 0, 0.6),
                     0 0 320px rgba(0, 100, 0, 0.4);
    }
}

@keyframes planetPulse {
    0% {
        border-width: 0;
        border-color: #4169E1;
        box-shadow: 
            inset 0 0 0 0 rgba(65, 105, 225, 0),
            inset 0 0 0 0 rgba(65, 105, 225, 0),
            inset 0 0 0 0 rgba(65, 105, 225, 0),
            inset 0 0 0 0 rgba(65, 105, 225, 0);
    }
    50% {
        border-width: 15px;
        border-color: #4169E1;
        box-shadow: 
            inset 0 0 40px 15px rgba(65, 105, 225, 0.7),
            inset 0 0 80px 30px rgba(65, 105, 225, 0.5),
            inset 0 0 120px 45px rgba(65, 105, 225, 0.3),
            inset 0 0 160px 60px rgba(65, 105, 225, 0.1);
    }
    100% {
        border-width: 30px;
        border-color: #4169E1;
        box-shadow: 
            inset 0 0 80px 30px rgba(65, 105, 225, 0.9),
            inset 0 0 160px 60px rgba(65, 105, 225, 0.7),
            inset 0 0 240px 90px rgba(65, 105, 225, 0.5),
            inset 0 0 320px 120px rgba(65, 105, 225, 0.3);
    }
}

@keyframes planetGlowResult {
    0%, 100% {
        text-shadow: 0 0 60px rgba(65, 105, 225, 0.9),
                     0 0 120px rgba(65, 105, 225, 0.7),
                     0 0 180px rgba(65, 105, 225, 0.5),
                     0 0 240px rgba(65, 105, 225, 0.3);
    }
    50% {
        text-shadow: 0 0 80px rgba(65, 105, 225, 1),
                     0 0 160px rgba(65, 105, 225, 0.8),
                     0 0 240px rgba(65, 105, 225, 0.6),
                     0 0 320px rgba(65, 105, 225, 0.4);
    }
}

@keyframes lairPulse {
    0% {
        border-width: 0;
        border-color: #404040;
        box-shadow: 
            inset 0 0 0 0 rgba(64, 64, 64, 0),
            inset 0 0 0 0 rgba(64, 64, 64, 0),
            inset 0 0 0 0 rgba(64, 64, 64, 0),
            inset 0 0 0 0 rgba(64, 64, 64, 0);
    }
    50% {
        border-width: 15px;
        border-color: #404040;
        box-shadow: 
            inset 0 0 40px 15px rgba(64, 64, 64, 0.7),
            inset 0 0 80px 30px rgba(64, 64, 64, 0.5),
            inset 0 0 120px 45px rgba(64, 64, 64, 0.3),
            inset 0 0 160px 60px rgba(64, 64, 64, 0.1);
    }
    100% {
        border-width: 30px;
        border-color: #404040;
        box-shadow: 
            inset 0 0 80px 30px rgba(64, 64, 64, 0.9),
            inset 0 0 160px 60px rgba(64, 64, 64, 0.7),
            inset 0 0 240px 90px rgba(64, 64, 64, 0.5),
            inset 0 0 320px 120px rgba(64, 64, 64, 0.3);
    }
}

@keyframes lairGlowResult {
    0%, 100% {
        text-shadow: 0 0 60px rgba(64, 64, 64, 0.9),
                     0 0 120px rgba(64, 64, 64, 0.7),
                     0 0 180px rgba(64, 64, 64, 0.5),
                     0 0 240px rgba(64, 64, 64, 0.3);
    }
    50% {
        text-shadow: 0 0 80px rgba(64, 64, 64, 1),
                     0 0 160px rgba(64, 64, 64, 0.8),
                     0 0 240px rgba(64, 64, 64, 0.6),
                     0 0 320px rgba(64, 64, 64, 0.4);
    }
}

@keyframes handledPulse {
    0% {
        border-width: 0;
        border-color: #808080;
        box-shadow: 
            inset 0 0 0 0 rgba(128, 128, 128, 0),
            inset 0 0 0 0 rgba(128, 128, 128, 0),
            inset 0 0 0 0 rgba(128, 128, 128, 0),
            inset 0 0 0 0 rgba(128, 128, 128, 0);
    }
    50% {
        border-width: 15px;
        border-color: #808080;
        box-shadow: 
            inset 0 0 40px 15px rgba(128, 128, 128, 0.7),
            inset 0 0 80px 30px rgba(128, 128, 128, 0.5),
            inset 0 0 120px 45px rgba(128, 128, 128, 0.3),
            inset 0 0 160px 60px rgba(128, 128, 128, 0.1);
    }
    100% {
        border-width: 30px;
        border-color: #808080;
        box-shadow: 
            inset 0 0 80px 30px rgba(128, 128, 128, 0.9),
            inset 0 0 160px 60px rgba(128, 128, 128, 0.7),
            inset 0 0 240px 90px rgba(128, 128, 128, 0.5),
            inset 0 0 320px 120px rgba(128, 128, 128, 0.3);
    }
}

@keyframes handledGlowResult {
    0%, 100% {
        text-shadow: 0 0 60px rgba(128, 128, 128, 0.9),
                     0 0 120px rgba(128, 128, 128, 0.7),
                     0 0 180px rgba(128, 128, 128, 0.5),
                     0 0 240px rgba(128, 128, 128, 0.3);
    }
    50% {
        text-shadow: 0 0 80px rgba(128, 128, 128, 1),
                     0 0 160px rgba(128, 128, 128, 0.8),
                     0 0 240px rgba(128, 128, 128, 0.6),
                     0 0 320px rgba(128, 128, 128, 0.4);
    }
}

@keyframes vastPulse {
    0% {
        border-width: 0;
        border-color: #9370DB;
        box-shadow: 
            inset 0 0 0 0 rgba(147, 112, 219, 0),
            inset 0 0 0 0 rgba(147, 112, 219, 0),
            inset 0 0 0 0 rgba(147, 112, 219, 0),
            inset 0 0 0 0 rgba(147, 112, 219, 0);
    }
    50% {
        border-width: 15px;
        border-color: #9370DB;
        box-shadow: 
            inset 0 0 40px 15px rgba(147, 112, 219, 0.7),
            inset 0 0 80px 30px rgba(147, 112, 219, 0.5),
            inset 0 0 120px 45px rgba(147, 112, 219, 0.3),
            inset 0 0 160px 60px rgba(147, 112, 219, 0.1);
    }
    100% {
        border-width: 30px;
        border-color: #9370DB;
        box-shadow: 
            inset 0 0 80px 30px rgba(147, 112, 219, 0.9),
            inset 0 0 160px 60px rgba(147, 112, 219, 0.7),
            inset 0 0 240px 90px rgba(147, 112, 219, 0.5),
            inset 0 0 320px 120px rgba(147, 112, 219, 0.3);
    }
}

@keyframes vastGlowResult {
    0%, 100% {
        text-shadow: 0 0 60px rgba(147, 112, 219, 0.9),
                     0 0 120px rgba(147, 112, 219, 0.7),
                     0 0 180px rgba(147, 112, 219, 0.5),
                     0 0 240px rgba(147, 112, 219, 0.3);
    }
    50% {
        text-shadow: 0 0 80px rgba(147, 112, 219, 1),
                     0 0 160px rgba(147, 112, 219, 0.8),
                     0 0 240px rgba(147, 112, 219, 0.6),
                     0 0 320px rgba(147, 112, 219, 0.4);
    }
}

@keyframes criticalPulse {
    0% {
        border-width: 0;
        border-color: #8B0000;
        box-shadow: 
            inset 0 0 0 0 rgba(139, 0, 0, 0),
            inset 0 0 0 0 rgba(139, 0, 0, 0),
            inset 0 0 0 0 rgba(139, 0, 0, 0),
            inset 0 0 0 0 rgba(139, 0, 0, 0);
    }
    50% {
        border-width: 15px;
        border-color: #8B0000;
        box-shadow: 
            inset 0 0 40px 15px rgba(139, 0, 0, 0.7),
            inset 0 0 80px 30px rgba(139, 0, 0, 0.5),
            inset 0 0 120px 45px rgba(139, 0, 0, 0.3),
            inset 0 0 160px 60px rgba(139, 0, 0, 0.1);
    }
    100% {
        border-width: 30px;
        border-color: #8B0000;
        box-shadow: 
            inset 0 0 80px 30px rgba(139, 0, 0, 0.9),
            inset 0 0 160px 60px rgba(139, 0, 0, 0.7),
            inset 0 0 240px 90px rgba(139, 0, 0, 0.5),
            inset 0 0 320px 120px rgba(139, 0, 0, 0.3);
    }
}

@keyframes criticalGlowResult {
    0%, 100% {
        text-shadow: 0 0 60px rgba(139, 0, 0, 0.9),
                     0 0 120px rgba(139, 0, 0, 0.7),
                     0 0 180px rgba(139, 0, 0, 0.5),
                     0 0 240px rgba(139, 0, 0, 0.3);
    }
    50% {
        text-shadow: 0 0 80px rgba(139, 0, 0, 1),
                     0 0 160px rgba(139, 0, 0, 0.8),
                     0 0 240px rgba(139, 0, 0, 0.6),
                     0 0 320px rgba(139, 0, 0, 0.4);
    }
}