* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "KiwiSoda";
}

.leaderboardStatic {
    transform: none !important;
}

/* =================================
   SPIDER RANKING
================================= */

#leaderboardBtn {

    position: fixed;

    bottom: 20px;
    left: 20px;

    padding: 12px 22px;

    background: #0b0b14;

    color: white;

    border: 1px solid rgba(255,255,255,0.15);

    border-radius: 8px;

    font-family: Inter, sans-serif;

    font-weight: bold;

    cursor: pointer;

    z-index: 1000;

    transition: 0.2s;

}


#leaderboardBtn:hover {

    transform: scale(1.05);

    background: #151525;

}


/* =================================
   PÁGINA
================================= */

#leaderboardPage {
    position: fixed;
    inset: 0;

    width: 100%;
    height: 100%;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(125,45,190,0.16),
            transparent 38%
        ),
        #07070D;

    z-index: 5000;

    display: none;

    overflow-y: auto;
}

.verifiedBadge {
    width: 30px;
    height: 30px;
    object-fit: contain;
    display: inline-block;
    vertical-align: middle
}


/* =================================
   TOPO
================================= */

.leaderboardTop {
    width: 100%;
    height: 80px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 40px;

    border-bottom:
        1px solid rgba(255,255,255,0.07);

    background:
        rgba(7,7,13,0.78);

    backdrop-filter: blur(18px);
}

.leaderboardTop h1 {
    margin: 0;

    color: white;

    font-family: Inter, sans-serif;

    letter-spacing: 3px;

    text-shadow:
        0 0 25px rgba(139,92,246,0.25);
}


#leaderboardClose {
    padding: 10px 20px;

    background:
        rgba(255,255,255,0.04);

    color: rgba(255,255,255,0.75);

    border: 1px solid rgba(255,255,255,0.08);

    border-radius: 9px;

    font-weight: bold;

    cursor: pointer;

    transition: 0.2s ease;
}

#leaderboardClose:hover {
    color: white;

    background:
        rgba(255,255,255,0.08);

    border-color:
        rgba(139,92,246,0.3);

    transform: translateY(-2px);
}


/* =================================
   CONTEÚDO
================================= */

.leaderboardContent {

    width: 900px;

    max-width: 90%;

    margin: 50px auto;

}


/* =================================
   TÍTULO
================================= */

.leaderboardTitle {

    text-align: center;

    margin-bottom: 35px;

}


.leaderboardTitle h2 {

    margin: 0;

    color: white;

    font-size: 32px;

    letter-spacing: 4px;

}


.leaderboardTitle p {

    color: #666;

    margin-top: 10px;

}


/* =================================
   TABS
================================= */

.leaderboardTabs {

    display: flex;

    gap: 10px;

    margin-bottom: 25px;

}


.leaderboardTab {
    flex: 1;

    padding: 15px;

    background:
        rgba(255,255,255,0.025);

    color: #777;

    border:
        1px solid rgba(255,255,255,0.06);

    border-radius: 10px;

    font-weight: bold;

    cursor: pointer;

    transition: 0.2s ease;
}

.leaderboardTab:hover {
    color: white;

    background:
        rgba(255,255,255,0.05);
}

.leaderboardTab.active {
    color: white;

    background:
        linear-gradient(
            135deg,
            rgba(139,92,246,0.18),
            rgba(80,40,130,0.10)
        );

    border-color:
        rgba(139,92,246,0.3);

    box-shadow:
        0 0 20px rgba(139,92,246,0.06);
}


/* =================================
   LISTA
================================= */

#leaderboardList {

    display: flex;

    flex-direction: column;

    gap: 10px;

}


/* =================================
   JOGADOR
================================= */

.leaderboardPlayer {
    display: flex;

    align-items: center;

    gap: 20px;

    height: 70px;
    min-height: 70px;

    padding: 18px 22px;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,0.035),
            rgba(255,255,255,0.012)
        );

    border:
        1px solid rgba(255,255,255,0.06);

    border-radius: 12px;

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease;
}

.leaderboardPlayer:hover {
    transform: translateX(4px);

    background:
        linear-gradient(
            90deg,
            rgba(139,92,246,0.08),
            rgba(255,255,255,0.015)
        );

    border-color:
        rgba(139,92,246,0.2);
}


/* =================================
   POSIÇÃO
================================= */

.leaderboardRank {

    width: 45px;

    font-size: 22px;

    font-weight: bold;

    color: #666;

    text-align: center;

}


/* =================================
   NOME
================================= */

.leaderboardName {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    overflow: visible;
    white-space: nowrap;
    text-overflow: clip;
    flex: 1;
}


/* =================================
   VALOR
================================= */

.leaderboardValue {

    color: #aaa;

    font-family: monospace;

    font-size: 18px;

}


/* =================================
   TOP 3
================================= */

.leaderboardPlayer:nth-child(1) {

    border-color:

        rgba(255,215,0,0.25);

}


.leaderboardPlayer:nth-child(2) {

    border-color:

        rgba(192,192,192,0.2);

}


.leaderboardPlayer:nth-child(3) {

    border-color:

        rgba(205,127,50,0.2);

}


/* =================================
   LOADING
================================= */

.leaderboardLoading {

    text-align: center;

    color: #555;

    padding: 50px;

}



#startScreen {
    position: fixed;
    inset: 0;
    
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(10px);

    display: flex;
    justify-content: center;
    align-items: center;

    z-index: 9999;

    transition: 0.8s;
}

.playerBox{

    position: absolute;

    top: 20px;
    left: 20px;

    display: flex;

    align-items: center;

}


#playerBadges{

    position: absolute;

    top: 20px;
    left: 200px;

    align-items:center;

    gap:5px;

}




.badgeIcon{

    width:35px;
    height:35px;

    object-fit:contain;

    image-rendering:pixelated;

}


.startBox {
    text-align: center;
}


.startBox h1 {

    font-size: 70px;

    color: white;

    text-shadow:
    0 0 20px #9b00ff,
    0 0 40px #9b00ff;

    margin-bottom: 40px;

    font-family: "KiwiSoda";
}



#startBtn {

    width: 220px;
    height: 70px;

    border: none;
    border-radius: 15px;

    background:
    linear-gradient(
        135deg,
        #8b00ff,
        #ff00aa
    );

    color:white;

    font-size: 30px;
    font-weight: bold;

    cursor:pointer;

    box-shadow:
    0 0 20px #ff00aa;

    transition:0.3s;

}


#startBtn:hover {

    transform: scale(1.1);

    box-shadow:
    0 0 40px #ff00aa;

}

body {
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(125, 45, 190, 0.18),
            transparent 38%
        ),
        radial-gradient(
            circle at 10% 90%,
            rgba(80, 20, 140, 0.10),
            transparent 32%
        ),
        radial-gradient(
            circle at 90% 80%,
            rgba(160, 40, 200, 0.07),
            transparent 30%
        ),
        #07070D;

    color: white;

    min-height: 100vh;

    display: flex;
    justify-content: center;
    align-items: center;

    font-size: 20px;

    overflow: hidden;
}

body::before {
    content: "";

    position: fixed;
    inset: -50%;

    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(139, 92, 246, 0.08),
            transparent 50%
        );

    animation: ambientGlow 12s ease-in-out infinite alternate;

    pointer-events: none;
    z-index: -1;
}

@keyframes ambientGlow {
    0% {
        transform: translate(-8%, -5%) scale(1);
    }

    50% {
        transform: translate(8%, 5%) scale(1.1);
    }

    100% {
        transform: translate(-3%, 8%) scale(1.05);
    }
}
@font-face {
    font-family: "KiwiSoda";
    src: url("KiwiSoda.ttf");
}

.container {

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

.container h1 {
    position: absolute;
    top: 10%;

    font-size: 60px;
}

#rollBtn {
    cursor: pointer;

    width: 300px;
    height: 90px;

    padding: 10px;

    position: absolute;
    bottom: 160px;

    border: 1px solid rgba(255,255,255,0.12);

    border-radius: 18px;

    color: white;

    background:
        linear-gradient(
            135deg,
            rgba(139,92,246,0.22),
            rgba(70,35,110,0.18)
        );

    box-shadow:
        0 10px 40px rgba(0,0,0,0.35),
        inset 0 1px 0 rgba(255,255,255,0.08);

    backdrop-filter: blur(12px);

    font-size: 28px;
    font-weight: bold;

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}

#rollBtn:active {
    transform: translateY(1px) scale(0.98);
}

#quickRollBtn {

    cursor: pointer;

    width: 150px;
    height: 70px;

    padding: 10px;

    position: absolute;
    bottom: 160px;

    border: 1px solid rgba(255,255,255,0.12);

    border-radius: 18px;

    color: white;

    background:
        linear-gradient(
            135deg,
            rgba(139,92,246,0.22),
            rgba(70,35,110,0.18)
        );

    box-shadow:
        0 10px 40px rgba(0,0,0,0.35),
        inset 0 1px 0 rgba(255,255,255,0.08);

    backdrop-filter: blur(12px);

    font-size: 18px;
    font-weight: bold;

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
    

    position: absolute;
    bottom: 160px;
    left: 450px;
}

#autoRollBtn {

    cursor: pointer;

    width: 150px;
    height: 70px;

    padding: 10px;

    position: absolute;
    bottom: 160px;

    border: 1px solid rgba(255,255,255,0.12);

    border-radius: 18px;

    color: white;

    background:
        linear-gradient(
            135deg,
            rgba(139,92,246,0.22),
            rgba(70,35,110,0.18)
        );

    box-shadow:
        0 10px 40px rgba(0,0,0,0.35),
        inset 0 1px 0 rgba(255,255,255,0.08);

    backdrop-filter: blur(12px);

    font-size: 18px;
    font-weight: bold;

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
    

    position: absolute;
    bottom: 160px;
    right: 450px;
}

#rollBtn:hover {
    transform: translateY(-4px) scale(1.03);

    background:
        linear-gradient(
            135deg,
            rgba(139,92,246,0.35),
            rgba(110,50,160,0.25)
        );

    border-color:
        rgba(168,85,247,0.45);

    box-shadow:
        0 15px 45px rgba(0,0,0,0.45),
        0 0 25px rgba(139,92,246,0.15),
        inset 0 1px 0 rgba(255,255,255,0.12);
}

#inventoryBtn {
    position: absolute;
    right: 80px;
    bottom: 20px;
    color: white;

    padding: 10px;

    border: none;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 15px;
    cursor: pointer;
}

#inventoryMenu::-webkit-scrollbar {
    width: 8px;
}

#inventoryMenu::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 10px;
}

#inventoryMenu::-webkit-scrollbar-track {
    background: transparent;
}


#inventoryBtn:hover {
    background-color: rgb(255, 255, 255, 0.30);
    transform: scale(1.05);
    transition: 0.2s ease-in-out;
}

#chance {
    display: flex;
    justify-content: center;
    align-items: center;

    font-size: 18px;

    padding: 8px 18px;

    color: rgba(255,255,255,0.55);

    border-radius: 10px;

}

#title {
    display: flex;
    justify-content: center;
    align-items: center;

    min-height: 100px;

    font-size: 30px;
    font-weight: bold;

    text-align: center;

    transition: transform 0.1s ease;

    filter: drop-shadow(0 0 15px rgba(255,255,255,0.12));
}

@font-face {
    font-family: "Game";
    src: url("Game.ttf");
}

#inventoryMenu {
    position: fixed;

    right: -700px;
    top: 50px;

    width: 700px;
    height: 80vh;

    padding: 25px;

    background:
        linear-gradient(
            135deg,
            rgba(14,14,24,0.96),
            rgba(8,8,15,0.96)
        );

    border: 1px solid rgba(255,255,255,0.08);

    border-radius: 18px;

    box-shadow:
        -20px 20px 60px rgba(0,0,0,0.45),
        inset 0 1px 0 rgba(255,255,255,0.04);

    backdrop-filter: blur(18px);

    z-index: 999;

    overflow-y: scroll;
    overflow-x: hidden;

    transition:
        right 0.4s ease;
}



#discordButton {
    position: absolute;
    right: 20px;
    top: 20px;
    width: 55px;
    cursor: pointer;
    transition: .2s;
}

#discordButton:hover {
    transform: scale(1.2);
}


#inventoryMenu.active {
    right: 350px;
}


#inventory-card {
    cursor: pointer;

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 14px;

    padding-top: 10px;
}

#inventoryClose {
    position: absolute;

    top: 15px;
    right: 18px;

    width: 36px;
    height: 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(255,255,255,0.04);

    color: rgba(255,255,255,0.55);

    border: 1px solid rgba(255,255,255,0.06);

    border-radius: 9px;

    font-size: 20px;

    cursor: pointer;

    transition:
        0.2s ease;
}

#inventoryClose:hover {
    color: #ff5555;

    background: rgba(255,60,60,0.08);

    border-color: rgba(255,60,60,0.2);

    transform: scale(1.05);
}

#spiderFooter {

    font-size: 15px;
    position: absolute;

    bottom: 5px;
}

#versionFooter {

    font-size: 15px;
    position: absolute;

    bottom: 5px;
    right: 200px;
}

.luck-box {
    display: flex;
    align-items: center;
    gap: 8px;

    position: fixed;
    bottom: 300px;
    left: 20px;

    min-width: 150px;

    padding: 10px 16px;

    color: #f5f5f5;

    background:
        linear-gradient(
            135deg,
            rgba(20, 20, 32, 0.85),
            rgba(10, 10, 18, 0.75)
        );

    border: 1px solid rgba(255,255,255,0.08);

    border-radius: 12px;

    backdrop-filter: blur(12px);

    box-shadow:
        0 10px 30px rgba(0,0,0,0.3),
        inset 0 1px 0 rgba(255,255,255,0.05);

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.luck-box:hover {
    transform: translateY(-2px);

    border-color: rgba(139,92,246,0.3);

    box-shadow:
        0 12px 35px rgba(0,0,0,0.4),
        0 0 20px rgba(139,92,246,0.08);
}

.luck-box img {
    width: 24px;
    height: 28px;

    object-fit: contain;

    image-rendering: pixelated;
}

#luckText {
    font-size: 20px;
    font-weight: bold;

    color: #f5f5f5;
}

#coinDisplay {
    position: fixed;
    top: 300px;
    left: 20px;

    display: flex;
    align-items: center;
    gap: 8px;

    min-width: 150px;

    padding: 10px 16px;

    color: #f5f5f5;

    background:
        linear-gradient(
            135deg,
            rgba(20, 20, 32, 0.85),
            rgba(10, 10, 18, 0.75)
        );

    border: 1px solid rgba(255,255,255,0.08);

    border-radius: 12px;

    backdrop-filter: blur(12px);

    box-shadow:
        0 10px 30px rgba(0,0,0,0.3),
        inset 0 1px 0 rgba(255,255,255,0.05);

    font-size: 20px;
    font-weight: bold;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

#coinDisplay:hover {
    transform: translateY(-2px);

    border-color: rgba(255, 215, 80, 0.25);

    box-shadow:
        0 12px 35px rgba(0,0,0,0.4),
        0 0 20px rgba(255,215,80,0.06);
}

#coinDisplay img {
    width: 28px;
    height: 28px;

    object-fit: contain;

    image-rendering: pixelated;
}



#buyLuck {
    padding: 10px 20px;
    border-radius: 15px;
    height: 40px;
}

#buyCoins {
    padding: 10px 20px;
    border-radius: 15px;
    height: 40px;
}

#shop {
    display: flex;
    flex-direction: column;
    gap: 20px;

    overflow-y: auto;
    overflow-x: hidden;

    position: fixed;

    top: 0;
    right: -300px;

    width: 300px;
    height: 100vh;

    padding: 25px;

    background:
        linear-gradient(
            160deg,
            rgba(18,14,28,0.97),
            rgba(7,7,14,0.98)
        );

    color: white;

    border-left: 1px solid rgba(255,255,255,0.08);

    box-shadow:
        -20px 0 60px rgba(0,0,0,0.45);

    backdrop-filter: blur(18px);

    transition: right 0.4s ease;

    z-index: 999;
}

#shop::-webkit-scrollbar {
    width: 8px;
}

#shop::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 10px;
}

#shop::-webkit-scrollbar-track {
    background: transparent;
}


#shop.open {

    right: 0;
}

#shopButton {
    position: absolute;
    right: 20px;
    bottom: 20px;
    color: white;

    padding: 10px;

    border: none;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 15px;

    z-index: 1000;

    cursor:pointer;

}

#shopButton:hover {

    transform: scale(1.05);
    background-color: rgb(255, 255, 255, 0.30);
    transition: 0.2s ease-in-out;
}

#buyLuck {
    display: flex;
    justify-content: center;
    align-items: center;
}

#shop h2 {
    text-align: center;

    font-size: 30px;

    margin-bottom: 20px;

    color: white;

    text-shadow:
        0 0 20px rgba(139,92,246,0.25);
}

.shopItem {
    width: 100%;

    padding: 20px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.045),
            rgba(255,255,255,0.015)
        );

    border: 1px solid rgba(255,255,255,0.07);

    border-radius: 14px;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 12px;

    backdrop-filter: blur(10px);

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease;

    cursor: pointer;
}

.shopItem:hover {
    transform: translateY(-4px);

    background:
        linear-gradient(
            135deg,
            rgba(139,92,246,0.10),
            rgba(255,255,255,0.025)
        );

    border-color:
        rgba(139,92,246,0.3);
}


.shopItem h3 {

    margin: 0;

    font-size: 22px;

}


.shopItem p {

    margin: 0;

    opacity: 0.8;

}


.shopItem button {
    padding: 10px 25px;

    border: 1px solid rgba(139,92,246,0.35);

    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            #3b176b,
            #251044
        );

    color: white;

    font-weight: bold;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;

    z-index: 1000;

    font-size: 18px;
}

.shopItem button:hover {
    transform: scale(1.05);

    background:
        linear-gradient(
            135deg,
            #54228f,
            #32145c
        );

    box-shadow:
        0 0 20px rgba(139,92,246,0.2);
}



@font-face {
    font-family: "Sirius";
    src: url("Sirius.otf");
}

@font-face {
    font-family: "Superior";
    src: url("Superior.otf");
}

@font-face {
    font-family: "Refined";
    src: url("Refined.ttf");
}
@font-face {
    font-family: "Mystic";
    src: url("Mystic.ttf");
}

@font-face {
    font-family: "Arcane";
    src: url("Arcane.ttf");
}

@font-face {
    font-family: "Cinzel";
    src: url("Cinzel.ttf");
}

@font-face {
    font-family: "Enchanted";
    src: url("Enchanted.ttf");
}

@font-face {
    font-family: "Ancient";
    src: url("Ancient.ttf");
}

@font-face {
    font-family: "Astral";
    src: url("Astral.ttf");
}

@font-face {
    font-family: "Royal";
    src: url("Royal.otf");
}

@font-face {
    font-family: "Prismatic";
    src: url("Prismatic.ttf");
}

@font-face {
    font-family: "Stars";
    src: url("Stars.ttf");
}

@font-face {
    font-family: "Dragonline";
    src: url("Dragonline.ttf");
}

@font-face {
    font-family: "Radiant";
    src: url("Radiant.ttf");
}

@font-face {
    font-family: "Infernal";
    src: url("Infernal.otf");
}

@font-face {
    font-family: "Ascend";
    src: url("Ascend.ttf");
}




.legendary {
    animation: legendary 1.5s infinite alternate;
}

@keyframes legendary {
    
    from {

        filter: drop-shadow(0 0 5px gold);
    }

    to {
        filter: drop-shadow(0 0 25px gold);
    }
}

.heroic {
    animation:
    heroicGlow 1s infinite alternate,
    heroicFloat 2s infinite ease-in-out;
}

@keyframes heroicGlow {
    from {
        filter: drop-shadow(0 0 8px #ff5500);
    }
    to {
        filter: drop-shadow(0 0 35px #ff0000);
    }
}

@keyframes heroicFloat {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
    
    100% {
        transform: translateY(0);
    }
}

.mythic {

    background-size: 300% 300%;

    animation:
    mythicGlow 1.5s infinite alternate,
    mythicGradient 3s infinite linear,
    mythicFloat 2.5s infinite ease-in-out;

}


@keyframes mythicGlow {

    from {

        filter: drop-shadow(0 0 8px #b700ff);

    }


    to {

        filter: drop-shadow(0 0 35px #ff00dd);

    }

}


@keyframes mythicGradient {

    0% {

        background-position: 0% 50%;

    }


    50% {

        background-position: 100% 50%;

    }


    100% {

        background-position: 0% 50%;

    }

}


@keyframes mythicFloat {

    0% {

        transform: translateY(0);

    }


    50% {

        transform: translateY(-8px);

    }


    100% {

        transform: translateY(0);

    }

}

.godly {

    background-size: 400% 400%;

    animation:
    godlyGlow 1s infinite alternate,
    godlyGradient 4s infinite linear,
    godlyFloat 3s infinite ease-in-out;

}

@keyframes godlyGlow {

    from {

        filter: drop-shadow(0 0 10px white)
                drop-shadow(0 0 20px gold);

    }


    to {

        filter: drop-shadow(0 0 35px white)
                drop-shadow(0 0 60px gold);

    }

}

@keyframes godlyGradient {

    0% {

        background-position: 0% 50%;

    }


    50% {

        background-position: 100% 50%;

    }


    100% {

        background-position: 0% 50%;

    }

}

@keyframes godlyFloat {

    0% {

        transform: translateY(0);

    }


    50% {

        transform: translateY(-10px);

    }


    100% {

        transform: translateY(0);

    }

}

.ascend {

    background-size: 500% 500%;

    animation:
    ascendGlow 1.2s infinite alternate,
    ascendGradient 5s infinite linear,
    ascendFloat 3s infinite ease-in-out;

}

@keyframes ascendGlow {

    from {

        filter:
        drop-shadow(0 0 10px white)
        drop-shadow(0 0 25px #8b5cf6);

    }


    to {

        filter:
        drop-shadow(0 0 40px white)
        drop-shadow(0 0 80px #00eaff);

    }

}

@keyframes ascendGradient {

    0% {

        background-position: 0% 50%;

    }


    50% {

        background-position: 100% 50%;

    }


    100% {

        background-position: 0% 50%;

    }

}

@keyframes ascendFloat {

    0% {

        transform: translateY(0);

    }


    50% {

        transform: translateY(-12px);

    }


    100% {

        transform: translateY(0);

    }

}

.sirius {

    background-size: 400% 400%;

    animation:
    siriusGlow 1s infinite alternate,
    siriusGradient 4s infinite linear,
    siriusPulse 2s infinite ease-in-out;

}

@keyframes siriusGlow {

    from {

        filter:
        drop-shadow(0 0 10px white)
        drop-shadow(0 0 25px #00c8ff);

    }


    to {

        filter:
        drop-shadow(0 0 45px white)
        drop-shadow(0 0 90px #0066ff);

    }

}

@keyframes siriusPulse {

    0% {

        transform: scale(1);

    }


    50% {

        transform: scale(1.08);

    }


    100% {

        transform: scale(1);

    }

}

.superior {

    background-size: 300% 300%;

    animation:
    superiorGlow 1.5s infinite alternate,
    superiorGradient 3s infinite linear,
    superiorFloat 2.5s infinite ease-in-out;

}

@keyframes superiorGlow {

    from {

        filter:
        drop-shadow(0 0 8px #ffffff)
        drop-shadow(0 0 20px #38bdf8);

    }


    to {

        filter:
        drop-shadow(0 0 35px #ffffff)
        drop-shadow(0 0 60px #2563eb);

    }

}

@keyframes superiorGradient {

    0% {

        background-position: 0% 50%;

    }


    50% {

        background-position: 100% 50%;

    }


    100% {

        background-position: 0% 50%;

    }

}

@keyframes superiorFloat {

    0% {

        transform: translateY(0);

    }


    50% {

        transform: translateY(-6px);

    }


    100% {

        transform: translateY(0);

    }

}

.refined {

    background-size: 400% 400%;

    animation:
    refinedGlow 1.8s infinite alternate,
    refinedGradient 4s infinite linear,
    refinedFloat 3s infinite ease-in-out;

}

@keyframes refinedGlow {

    from {

        filter:
        drop-shadow(0 0 5px #ffffff)
        drop-shadow(0 0 15px #00ffff);

    }


    to {

        filter:
        drop-shadow(0 0 30px #ffffff)
        drop-shadow(0 0 55px #00ffff);

    }

}

@keyframes refinedGradient {

    0% {

        background-position: 0% 50%;

    }


    50% {

        background-position: 100% 50%;

    }


    100% {

        background-position: 0% 50%;

    }

}

@keyframes refinedFloat {

    0% {

        transform: translateY(0);

    }


    50% {

        transform: translateY(-5px);

    }


    100% {

        transform: translateY(0);

    }

}

.mystic {

    background-size: 400% 400%;

    animation:
    mysticGlow 1.3s infinite alternate,
    mysticGradient 4s infinite linear,
    mysticFloat 2.5s infinite ease-in-out;

}

@keyframes mysticGlow {

    from {

        filter:
        drop-shadow(0 0 8px #7b00ff)
        drop-shadow(0 0 20px #00aaff);

    }


    to {

        filter:
        drop-shadow(0 0 35px #c000ff)
        drop-shadow(0 0 60px #00ffff);

    }

}

@keyframes mysticGradient {

    0% {

        background-position: 0% 50%;

    }

    50% {

        background-position: 100% 50%;

    }

    100% {

        background-position: 0% 50%;

    }

}

@keyframes mysticFloat {

    0% {

        transform: translateY(0) rotate(0deg);

    }

    50% {

        transform: translateY(-7px) rotate(1deg);

    }

    100% {

        transform: translateY(0) rotate(0deg);

    }

}

.arcane {

    background-size: 200% 200%;

    animation:
    arcaneGlow 1.5s infinite alternate,
    arcaneGradient 0.5s infinite linear,
    arcaneFloat 3s infinite ease-in-out;

}

@keyframes arcaneGlow {

    from {

        filter:
        drop-shadow(0 0 8px #09b71a)
        drop-shadow(0 0 20px #0a6e1d);

    }


    to {

        filter:
        drop-shadow(0 0 40px #17ff60)
        drop-shadow(0 0 70px #05b01c);

    }

}

@keyframes arcaneGradient {

    0% {

        background-position: 0% 100%;

    }


    50% {

        background-position: 200% 400%;

    }


    100% {

        background-position: 100% 0%;

    }

}

@keyframes arcaneFloat {

    0% {

        transform: translateY(0) scale(1);

    }


    50% {

        transform: translateY(-8px) scale(1.03);

    }


    100% {

        transform: translateY(0) scale(1);

    }

}

.enchanted {

    background-size: 300% 300%;

    animation:
    enchantedGlow 1.5s infinite alternate,
    enchantedGradient 3s infinite linear,
    enchantedPixel 0.2s infinite;

}

@keyframes enchantedGlow {

    from {

        filter:
        drop-shadow(0 0 5px #ffc400)
        drop-shadow(0 0 15px #fbff00);

    }

    to {

        filter:
        drop-shadow(0 0 25px #f6ff00)
        drop-shadow(0 0 50px #ff9d00);

    }

}

@keyframes enchantedGradient {

    0% {

        background-position: 0% 50%;

    }

    50% {

        background-position: 100% 50%;

    }

    100% {

        background-position: 0% 50%;

    }

}

@keyframes enchantedPixel {

    0% {

        transform: translate(0);

    }

    20% {

        transform: translate(1px,-1px);

    }

    40% {

        transform: translate(-1px,1px);

    }

    60% {

        transform: translate(0);

    }

}

.ancient {

    background-size: 400% 400%;

    animation:
    ancientGlow 3s infinite alternate,
    ancientFlow 8s infinite linear,
    ancientPulse 4s infinite ease-in-out;

}

@keyframes ancientGlow {

    from {

        filter:
        drop-shadow(0 0 5px #0ea5e9)
        drop-shadow(0 0 15px #082f49);

    }


    to {

        filter:
        drop-shadow(0 0 25px #38bdf8)
        drop-shadow(0 0 60px #020617);

    }

}

@keyframes ancientFlow {

    0% {

        background-position: 0% 50%;

    }

    50% {

        background-position: 100% 50%;

    }

    100% {

        background-position: 0% 50%;

    }

}

@keyframes ancientPulse {

    0% {

        transform: scale(1);

    }

    50% {

        transform: scale(1.03);

    }

    100% {

        transform: scale(1);

    }

}

.astral {

    background-size: 500% 500%;

    animation:
    astralGlow 2s infinite alternate,
    astralSpace 6s infinite linear,
    astralFloat 4s infinite ease-in-out;

}

@keyframes astralGlow {

    from {

        filter:
        drop-shadow(0 0 8px #7b2cbf)
        drop-shadow(0 0 20px #00b4d8);

    }


    to {

        filter:
        drop-shadow(0 0 40px #c77dff)
        drop-shadow(0 0 80px #00ffff);

    }

}

@keyframes astralSpace {

    0% {

        background-position: 0% 50%;

    }


    50% {

        background-position: 100% 50%;

    }


    100% {

        background-position: 0% 50%;

    }

}

@keyframes astralFloat {

    0% {

        transform: translateY(0) rotate(0deg);

    }


    50% {

        transform: translateY(-8px) rotate(-2deg);

    }


    100% {

        transform: translateY(0) rotate(0deg);

    }

}

.royal {

    background-size: 400% 400%;

    animation:
    royalGlow 1.5s infinite alternate,
    royalGradient 5s infinite linear,
    royalFloat 3s infinite ease-in-out;

}

@keyframes royalGlow {

    from {

        filter:
        drop-shadow(0 0 10px gold)
        drop-shadow(0 0 20px #800080);

    }


    to {

        filter:
        drop-shadow(0 0 40px #ffd700)
        drop-shadow(0 0 70px #a020f0);

    }

}

@keyframes royalGradient {

    0% {

        background-position: 0% 50%;

    }


    50% {

        background-position: 100% 50%;

    }


    100% {

        background-position: 0% 50%;

    }

}

@keyframes royalFloat {

    0% {

        transform: translateY(0);

    }


    50% {

        transform: translateY(-5px);

    }


    100% {

        transform: translateY(0);

    }

}

.prismatic {

    background-size: 600% 600%;

    animation:
    prismaticGlow 1s infinite alternate,
    prismaticShift 4s infinite linear,
    prismaticPulse 2s infinite ease-in-out;

}

@keyframes prismaticGlow {

    from {

        filter:
        drop-shadow(0 0 10px white)
        drop-shadow(0 0 25px #ff00ff);

    }


    to {

        filter:
        drop-shadow(0 0 40px white)
        drop-shadow(0 0 80px #00ffff);

    }

}

@keyframes prismaticShift {

    0% {

        background-position: 0% 50%;

    }


    50% {

        background-position: 100% 50%;

    }


    100% {

        background-position: 0% 50%;

    }

}

@keyframes prismaticPulse {

    0% {

        transform: scale(1);

    }


    50% {

        transform: scale(1.06);

    }


    100% {

        transform: scale(1);

    }

}

.fiveStar {

    background-size: 300% 300%;

    animation:
    fiveStarGlow 1s infinite alternate,
    fiveStarShine 3s infinite linear,
    fiveStarPulse 2s infinite ease-in-out;

}

@keyframes fiveStarGlow {

    from {

        filter:
        drop-shadow(0 0 8px #ff69b4)
        drop-shadow(0 0 20px #ff1493);

    }


    to {

        filter:
        drop-shadow(0 0 35px #ff69b4)
        drop-shadow(0 0 70px #ff1493);

    }

}

@keyframes fiveStarShine {

    0% {

        background-position: 0% 50%;

    }

    50% {

        background-position: 100% 50%;

    }

    100% {

        background-position: 0% 50%;

    }

}

@keyframes fiveStarPulse {

    0% {

        transform: scale(1);

    }


    50% {

        transform: scale(1.12);

    }


    100% {

        transform: scale(1);

    }

}

.fiveStar::after {

    content:"✦";

    position:absolute;

    animation: sparkle 1.5s infinite;

}

@keyframes sparkle {

    0% {

        opacity:0;
        transform:scale(0);

    }


    50% {

        opacity:1;
        transform:scale(1.5);

    }


    100% {

        opacity:0;
        transform:scale(0);

    }

}

.dragonline {

    background-size: 400% 400%;

    animation:
    dragonGlow 1.2s infinite alternate,
    dragonEnergy 3s infinite linear,
    dragonPulse 2s infinite ease-in-out,
    dragonShake 0.15s infinite;
}

@keyframes dragonGlow {

    from {

        filter:
        drop-shadow(0 0 8px #ffff00)
        drop-shadow(0 0 20px #00ff44);

    }


    to {

        filter:
        drop-shadow(0 0 35px #ffff00)
        drop-shadow(0 0 70px #00ff44);

    }

}

@keyframes dragonEnergy {

    0% {

        background-position:0% 50%;

    }


    50% {

        background-position:100% 50%;

    }


    100% {

        background-position:0% 50%;

    }

}

@keyframes dragonPulse {

    0% {

        transform:scale(1);

    }


    50% {

        transform:scale(1.08);

    }


    100% {

        transform:scale(1);

    }

}

@keyframes dragonShake {

    0% {
        transform:translateX(0);
    }

    50% {
        transform:translateX(1px);
    }

    100% {
        transform:translateX(0);
    }

}

.radiant {

    background-size: 300% 300%;

    animation:
    radiantGlow 1s infinite alternate,
    radiantShine 3s infinite linear,
    radiantPulse 2s infinite ease-in-out;

}

@keyframes radiantGlow {

    from {

        filter:
        drop-shadow(0 0 10px white)
        drop-shadow(0 0 25px #ffd700);

    }


    to {

        filter:
        drop-shadow(0 0 45px white)
        drop-shadow(0 0 90px #ffff00);

    }

}

@keyframes radiantShine {

    0% {

        background-position:0% 50%;

    }


    50% {

        background-position:100% 50%;

    }


    100% {

        background-position:0% 50%;

    }

}

@keyframes radiantPulse {

    0% {

        transform:scale(1);

    }


    50% {

        transform:scale(1.1);

    }


    100% {

        transform:scale(1);

    }

}

.radiant::after {

    content:"✦";

    position:absolute;

    animation:radiantStar 1.5s infinite;

}

@keyframes radiantStar {

    0% {

        opacity:0;
        transform:scale(0);

    }

    50% {

        opacity:1;
        transform:scale(1.5);

    }

    100% {

        opacity:0;
        transform:scale(0);

    }

}

.infernal {

    background-size: 500% 500%;

    animation:
    infernalGlow 0.8s infinite alternate,
    infernalFlow 3s infinite linear,
    infernalShake 0.15s infinite,
    infernalPulse 2s infinite;

}

@keyframes infernalGlow {

    from {

        filter:
        drop-shadow(0 0 10px #ff0000)
        drop-shadow(0 0 25px #ff5500);

    }


    to {

        filter:
        drop-shadow(0 0 50px #ff0000)
        drop-shadow(0 0 100px #ff9900);

    }

}

@keyframes infernalFlow {

    0% {

        background-position:0% 50%;

    }


    50% {

        background-position:100% 50%;

    }


    100% {

        background-position:0% 50%;

    }

}

@keyframes infernalShake {

    0% {

        transform:translateX(0);

    }


    25% {

        transform:translateX(-1px);

    }


    50% {

        transform:translateX(1px);

    }


    75% {

        transform:translateX(-1px);

    }


    100% {

        transform:translateX(0);

    }

}

@keyframes infernalPulse {

    0% {

        transform:scale(1);

    }


    50% {

        transform:scale(1.12);

    }


    100% {

        transform:scale(1);

    }

}

.calm {

    background-size: 300% 300%;

    animation:

    calmGlow 1s infinite alternate;



}

@keyframes calmGlow {

    from {

        filter:

        drop-shadow(0 0 10px #00ff00)

        drop-shadow(0 0 25px #00ff00);

    }

    to {

        filter:

        drop-shadow(0 0 45px #00ff00)

        drop-shadow(0 0 90px #00ff00);

    }   
}

.empyrean {

    background-size: 400% 400%;
    animation:
    empyreanGlow 1s infinite alternate,
    empyreanGradient 4s infinite linear

}

@keyframes empyreanGlow {

    from {

        filter:

        drop-shadow(0 0 10px #ff0000)

        drop-shadow(0 0 25px #ff0000);

    }

    to {

        filter:

        drop-shadow(0 0 45px #ff0000)

        drop-shadow(0 0 90px #ff0000);

    }   
}

@keyframes empyreanGradient {

    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.relic {

    background-size: 400% 400%;

    animation:
    relicGlow 1s infinite alternate,
    relicGradient 4s infinite linear
}

@keyframes relicGlow {

    from {
        filter:
        drop-shadow(0 0 10px #ff0000)
        drop-shadow(0 0 25px #f6ff00);
    }

    to {
        filter:
        drop-shadow(0 0 45px #00ff08)
        drop-shadow(0 0 90px #00aaff);
    }   
}

@keyframes relicGradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.ninetyNine {

    background-size: 400% 400%;

    animation:
    ninetyNineGlow 1s infinite alternate,
    ninetyNineGradient 4s infinite linear
}

@keyframes ninetyNineGlow {

    from {
        filter:
        drop-shadow(0 0 10px #8800ff)
        drop-shadow(0 0 25px #6fff00);
    }

    to {
        filter:
        drop-shadow(0 0 45px #6a00ff)
        drop-shadow(0 0 90px #6fff00);
    }   
}

@keyframes ninetyNineGradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }  
}

@font-face {
    font-family: "Genesis";
    src: url("Genesis.ttf");
}

.genesis {
    background: linear-gradient(
        90deg,
        #000000 0%,
        #008ccf 25%
        #ffffff 50%,
        #000000 75%,
        #008ccf 100%
    );

    background-size: 800% 100%;
    background-repeat: no-repeat;

    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;

    animation:
        genesisGradient 2s infinite ,
        genesisGlow 1s infinite alternate;
}

@keyframes genesisGlow {

    from {

        filter:

        drop-shadow(0 0 10px #0073ff)

        drop-shadow(0 0 25px #000000);

    }

    to {

        filter:

        drop-shadow(0 0 45px #000000)

        drop-shadow(0 0 90px #0073ff);

    }   
}

@keyframes genesisGradient {

    0% {
        background-position: 0% 100%;
    }
    25% {
        background-position: 100% 100%;
    }
    50% {
        background-position: 0% 0%;
    }
    75% {
        background-position: 100% 0%;
    }
    100% {
        background-position: 0% 100%;
    }

}

.eclipse {
    background: linear-gradient(
    90deg,
    #000000 0%,
    #5d5d5d 20%,
    #ffffff 50%,
    #5d5d5d 80%,
    #000000 100%
);

    background-size: 300% 100%;
    background-repeat: no-repeat;

    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;

    animation:
        eclipseGradient 1s infinite,
        eclipseGlow 1s infinite alternate;
}

@keyframes eclipseGlow {

    from {

        filter:

        drop-shadow(0 0 10px #fdfeff)

        drop-shadow(0 0 25px #000000);

    }

    to {

        filter:

        drop-shadow(0 0 45px #000000)

        drop-shadow(0 0 90px #ffffff);

    }   
}

@keyframes eclipseGradient {

    0% {
        background-position: 0% 100%;
    }
    20% {
        background-position: 100% 100%;
    }
    50% {
        background-position: 0% 0%;
    }
    80% {
        background-position: 100% 0%;
    }
    100% {
        background-position: 0% 100%;
    }

}   

@font-face {
    font-family: "Seraphic";
    src: url("Seraphic.ttf");
}

.seraphic {
    background: linear-gradient(
        90deg,
        #9ffa03 0%,
        #cf0075 25%
        #9ffa03 50%,
        #cf0075 75%,
        #9ffa03 100%
    );

    background-size: 800% 100%;
    background-repeat: no-repeat;

    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;

    animation:
        seraphicGradient 2s infinite ,
        seraphicGlow 1s infinite alternate;

}

@keyframes seraphicGlow {

    from {

        filter:

        drop-shadow(0 0 10px #9ffa03)

        drop-shadow(0 0 25px #cf0075);

    }

    to {

        filter:

        drop-shadow(0 0 45px #cf0075)

        drop-shadow(0 0 90px #9ffa03);

    }
}

@keyframes seraphicGradient {

    0% {
        background-position: 0% 100%;
    }
    25% {
        background-position: 100% 100%;
    }
    50% {
        background-position: 0% 0%;
    }
    75% {
        background-position: 100% 0%;
    }
    100% {
        background-position: 0% 100%;
    }

}   

@font-face {
    font-family: "Shin";
    src: url("Shin.ttf");
}

.shin {

    background: linear-gradient(
        90deg,
        #b03ad7 0%,
        #e4e9eb 25%
        #b03ad7 50%,
        #e4e9eb 75%,
        #b03ad7 100%
    );

    background-size: 400% 100%;
    background-repeat: no-repeat;

    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;

    animation:
        shinGradient 2s infinite ,
        shinGlow 1s infinite alternate;
}

@keyframes shinGlow {

    from {

        filter:

        drop-shadow(0 0 10px #b03ad7)

        drop-shadow(0 0 25px #e4e9eb);

    }

    to {

        filter:

        drop-shadow(0 0 45px #e4e9eb)

        drop-shadow(0 0 90px #b03ad7); 

    }
}

@keyframes shinGradient {

    0% { background-position: 0% 50%; }
    25% { background-position: 100% 50%; }
    50% { background-position: 0% 50%; }
    75% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.siriusshiny {

    background: linear-gradient(
        90deg,
        #00c8ff 0%,
        #0066ff 25%
        #00c8ff 50%,
        #0066ff 75%,
        #00c8ff 100%
    );

    background-size: 400% 100%;
    background-repeat: no-repeat;

    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;

    animation:
        siriusshinyGradient 2s infinite ,
        siriusshinyGlow 1s infinite alternate;

}

@keyframes siriusshinyGlow {

    from {

        filter:

        drop-shadow(0 0 10px #00c8ff)

        drop-shadow(0 0 25px #0066ff);

    }

    to {

        filter:

        drop-shadow(0 0 45px #0066ff)

        drop-shadow(0 0 90px #00c8ff);

    }
}

@keyframes siriusshinyGradient {

    0% {
        background-position: 0% 100%;
    }
    25% {
        background-position: 100% 100%;
    }
    50% {
        background-position: 0% 0%;
    }
    75% {
        background-position: 100% 0%;
    }
    100% {
        background-position: 0% 100%;
    }

}

.starlight {

    background: linear-gradient(
        90deg,
        #fff8f8 0%,
        #ffff05 25%
        #fff8f8 50%,
        #ffff05 75%,
        #fff8f8 100%
    );

    background-size: 400% 100%;
    background-repeat: no-repeat;

    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;

    animation:
        starlightGradient 2s infinite ,
        starlightGlow 1s infinite alternate;
}

@keyframes starlightGlow {

    from {

        filter:

        drop-shadow(0 0 10px #fff8f8)

        drop-shadow(0 0 25px #ffff05);

    }

    to {

        filter:

        drop-shadow(0 0 45px #ffff05)

        drop-shadow(0 0 90px #fff8f8);

    }
}

@keyframes starlightGradient {

    0% {
        background-position: 0% 100%;
    }
    25% {
        background-position: 100% 100%;
    }
    50% {
        background-position: 0% 0%;
    }
    75% {
        background-position: 100% 0%;
    }
    100% {
        background-position: 0% 100%;
    }

}

.ascended {

    background: linear-gradient(
        90deg,
        #49a8ec 0%,
        #21d999 25%
        #49a8ec 50%,
        #21d999 75%,
        #49a8ec 100%
    );

    background-size: 400% 100%;
    background-repeat: no-repeat;

    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;

    animation:
        ascendedGradient 2s infinite ,
        ascendedGlow 1s infinite alternate;
}

@keyframes ascendedGlow {

    from {

        filter:

        drop-shadow(0 0 10px #49a8ec)

        drop-shadow(0 0 25px #21d999);

    }

    to {

        filter:

        drop-shadow(0 0 45px #21d999)

        drop-shadow(0 0 90px #49a8ec);

    }
}

@keyframes ascendedGradient {

    0% {
        background-position: 0% 100%;
    }
    25% {
        background-position: 100% 100%;
    }
    50% {
        background-position: 0% 0%;
    }
    75% {
        background-position: 100% 0%;
    }
    100% {
        background-position: 0% 100%;
    }
}

.prime {

    background: linear-gradient(
        90deg,
        #fff8f8 0%,
        #efef6e 25%
        #32ed7d 50%,
        #00aeff 75%,
        #ff0040 100%
    );

    background-size: 400% 100%;
    background-repeat: no-repeat;

    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;

    animation:
        primeGradient 5s infinite,
        primeGlow 1s infinite alternate;
}

@keyframes primeGlow {

    from {

        filter:

        drop-shadow(0 0 10px #fff8f8)

        drop-shadow(0 0 25px #efef6e);

    }

    to {

        filter:

        drop-shadow(0 0 45px #efef6e)

        drop-shadow(0 0 90px #fff8f8);

    }
}

@keyframes primeGradient {

    0% {
        background-position: 0% 100%;
    }
    25% {
        background-position: 100% 100%;
    }
    50% {
        background-position: 0% 0%;
    }
    75% {
        background-position: 100% 0%;
    }
    100% {
        background-position: 0% 100%;
    }

}

.celestial {

    background-size: 400% 400%;

    animation:
    celestialGlow 1s infinite alternate,
    celestialGradient 4s infinite linear,
    celestialFloat 3s infinite ease-in-out;
}

@keyframes celestialGlow {
    from {
        filter:
        drop-shadow(0 0 10px white)
        drop-shadow(0 0 25px #008ccf);
    }
    to {
        filter:
        drop-shadow(0 0 45px white)
        drop-shadow(0 0 90px #008ccf);
    }
}

@keyframes celestialGradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes celestialFloat {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
    100% {
        transform: translateY(0);
    }
}

@font-face {
    font-family: "luminosity";
    src: url("luminosity.ttf");
}

.luminosity {

    background-size: 600% 400%;

    background: linear-gradient(
        135deg,
        #FFFACD 0%,
        #f6c987 25%,
        #FFFACD 50%,
        #ffca7a 75%,
        #FFFACD 100%
    );

    animation:
    luminosityGlow 1s infinite alternate,
    luminosityGradient 2s infinite linear,
    luminosityFloat 1.5s infinite ease-in-out;
}

@keyframes luminosityGlow {
    from {
        filter:
        drop-shadow(0 0 10px white)
        drop-shadow(0 0 25px #ecf891);
    }
    to {
        filter:
        drop-shadow(0 0 45px white)
        drop-shadow(0 0 90px #e9f192);
    }
}

@keyframes luminosityGradient {

    0% {
        background-position: 0% 50%;
    }

    25% {
        background-position: 600% 50%;
    }

    50% {
        background-position: 0% 50%;
    }

    75% {
        background-position: 600% 50%;
    }

    100% {
        background-position: 0% 50%;
    }


}
    

@keyframes luminosityFloat {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
    100% {
        transform: translateY(0);
    }
}

@font-face {
    font-family: "Skyline";
    src: url("Skyline.ttf");

}

.skyline {

    background-size: 400% 400%;

    background: linear-gradient(
        135deg,
        #B0E0E6 0%,
        #2288e2 25%,
        #B0E0E6 50%,
        #17bdf9 75%,
        #B0E0E6 100%
    );

    animation:
    skylineGlow 1s infinite alternate,
    skylineGradient 5s infinite linear,
    skylineFloat 1.5s infinite ease-in-out;

}

@keyframes skylineGlow {

    from {
        filter:
        drop-shadow(0 0 10px white)
        drop-shadow(0 0 25px #7fc3ff);
    }

    to {
        filter:
        drop-shadow(0 0 45px white)
        drop-shadow(0 0 90px #7fc3ff);
    }
}

@keyframes skylineGradient {

    0% {
        background-position: 0% 50%;
    }

    25% {
        background-position: 400% 50%;
    }

    50% {
        background-position: 0% 50%;
    }

    75% {
        background-position: 400% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes skylineFloat {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-4px);
    }
    100% {
        transform: translateY(0);
    }
}

@font-face {
    font-family: "sovereign";
    src: url("Sovereign.ttf");
}

.sovereign {

    background-size: 400% 400%;

    background: linear-gradient(
        135deg,
        #020079 0%,
        #FFFF00 25%,
        #0021F3 50%,
        #fbff00 75%,
        #020079 100%
    );

    animation:
    sovereignGlow 1s infinite alternate,
    sovereignGradient 5s infinite linear,
    sovereignFloat 1.5s infinite ease-in-out;

}

@keyframes sovereignGlow {

    from {
        filter:
        drop-shadow(0 0 10px white)
        drop-shadow(0 0 25px #ffff00);
    }

    to {
        filter:
        drop-shadow(0 0 45px white)
        drop-shadow(0 0 90px #ffff00);
    }
}

@keyframes sovereignGradient {

    0% {
        background-position: 0% 50%;
    }

    25% {
        background-position: 400% 50%;
    }

    50% {
        background-position: 0% 50%;
    }

    75% {
        background-position: 400% 50%;
    }

    100% {
        background-position: 0% 50%;
    }

}
@keyframes sovereignFloat {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-4px);
    }
    100% {
        transform: translateY(0);
    }    
}

.deity {

    background-size: 400% 400%;

    animation:
    deityGlow 1s infinite alternate,
    deityGradient 4s infinite linear,
    deityFloat 3s infinite ease-in-out;
}

@keyframes deityGlow {

    from {

        filter:

        drop-shadow(0 0 10px white)

        drop-shadow(0 0 25px #e1ff02);

    }


    to {

        filter:

        drop-shadow(0 0 45px rgb(255, 247, 0))

        drop-shadow(0 0 90px #f9f9f9);

    }   
}

@keyframes deityGradient {

    0% {
        background-position: 0% 50%;
    }
    25% {
        background-position: 100% 50%;
    }
    50% {
        background-position: 0% 50%;
    }
    75% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }

}

@keyframes deityFloat {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
    100% {
        transform: translateY(0);
    }
}

.divinity {

    background-size: 400% 400%;
    gap: 10px;
    animation:
    divinityGlow 1s infinite alternate,
    divinityGradient 4s infinite linear,
    divinityFloat 1s infinite ease-in-out;
}

@keyframes divinityGlow {
    from {
        filter: drop-shadow(0 0 10px white)
                drop-shadow(0 0 25px #cfa200);
    }
    to {
        filter: drop-shadow(0 0 45px white)
                drop-shadow(0 0 90px #cfb700);
    }
}

@keyframes divinityGradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes divinityFloat {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
    100% {
        transform: translateY(0);
    }
}

.meteor {

    background-size: 400% 400%;

    animation:
    meteorGlow 1s infinite alternate,
    meteorGradient 4s infinite linear,
    meteorFloat 3s infinite ease-in-out;
}

@keyframes meteorGlow {
    from {
        filter: drop-shadow(0 0 10px white)
                drop-shadow(0 0 25px #962A01);
    }
    to {
        filter: drop-shadow(0 0 45px white)
                drop-shadow(0 0 90px #962A01);
    }
}

@keyframes meteorGradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes meteorFloat {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
    100% {
        transform: translateY(0);
    }
}

.force {

    background-size: 400% 400%;

    animation:
    forceGlow 1s infinite alternate,
    forceGradient 4s infinite linear,
    forceFloat 3s infinite ease-in-out;
}

@keyframes forceGlow {
    from {
        filter: drop-shadow(0 0 10px white)
                drop-shadow(0 0 25px #189bb5);
    }
    to {
        filter: drop-shadow(0 0 45px white)
                drop-shadow(0 0 90px #189bb5);
    }
}

@keyframes forceGradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes forceFloat {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
    100% {
        transform: translateY(0);
    }
}

.technology {

    background-size: 400% 400%;

    animation:
    technologyGlow 1s infinite alternate,
    technologyGradient 2s infinite linear,
    technologyFloat 3s infinite ease-in-out,
    technologyGlitch 0.15s infinite;

}

@keyframes technologyGlow {
    from {
        filter: drop-shadow(0 0 10px white)
                drop-shadow(0 0 25px #00c8ff);
    }
    to {
        filter: drop-shadow(0 0 45px white)
                drop-shadow(0 0 90px #00c8ff);
    }
}

@keyframes technologyGradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 400% 100%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes technologyFloat {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes technologyGlitch {
    0%{transform:translate(0);}
    20%{transform:translate(-6px,3px);}
    40%{transform:translate(6px,-3px);}
    60%{transform:translate(-6px,3px);}
    80%{transform:translate(6px,-3px);}
    100%{transform:translate(0);}
}

@font-face {
    font-family: "Technology";
    src: url("Technology.ttf");
}



.rollReveal{

    animation: rollReveal 0.8s infinite;

}


@keyframes rollReveal{

    0%{
        transform: scale(1);
        filter: brightness(1);
    }

    50%{
        transform: scale(1.2);
        filter: brightness(2);
    }

    100%{
        transform: scale(1);
        filter: brightness(1);
    }

}



#playerNameContainer {
    position: absolute;

    top: 20px;
    left: 20px;

    display: flex;
    align-items: center;

    padding: 8px 16px 8px 14px;

    


    

    z-index: 100;
}

#playerNameContainer:hover {

    transform: translateY(-2px);
}

#levelContainer {
    position: absolute;

    top: 63px;
    left: 20px;

    display: flex;
    align-items: center;
    gap: 8px;

    padding: 6px 14px;

    border-radius: 10px;

    color: #d8a7ff;

    font-family: "KiwiSoda";

    font-size: 21px;
    font-weight: bold;

    letter-spacing: 1px;

    backdrop-filter: blur(8px);

    transition: 0.25s ease;
}


/* brilho ao passar o mouse */

#levelContainer:hover {

    transform: translateY(-2px);

    

}
#playerName {
    font-size: 28px;

    font-weight: bold;

    color: white;

    letter-spacing: 0.5px;

    text-shadow:
        0 0 15px rgba(255,255,255,0.12);

    white-space: nowrap;
}

.silkbound {
animation: silkShine 3s infinite;
}

@keyframes silkShine {
0% {
filter: brightness(1);
}
50% {
filter: brightness(2);
text-shadow: 0 0 20px #7ddfff;
}
100% {
filter: brightness(1);
}
}

.moonlit {
    animation:
        
    moonPulse 0.1s infinite alternate;
}

@keyframes moonPulse {
0%,100% {
text-shadow:0 0 10px #10b9ed;
}
50% {
text-shadow:
0 0 30px #00ffff,
0 0 60px #e2d32b;
}
}

.ultimate {

    animation:
        ultimateGlitch 0.1s infinite alternate
}

@keyframes ultimateGlitch {
0% {transform:translateX(0)}
20% {transform:translateX(-2px)}
40% {transform:translateX(2px)}
100% {transform:translateX(0)}
}

.nexus {

    animation:
        nexus 2s infinite,
        nexusGlitch 0.15s infinite;
}

@keyframes nexus {
    0% {
        filter: hue-rotate(0deg) brightness(1);
        transform: scale(1);
    }

    50% {
        filter: hue-rotate(180deg) brightness(2);
        transform: scale(1.08);
    }

    100% {
        filter: hue-rotate(360deg) brightness(1);
        transform: scale(1);
    }
}

.nexus {
    animation: nexus 3s infinite;
}

@keyframes nexusGlitch {
    0% {transform:translateX(0)}
20% {transform:translateX(-2px)}
40% {transform:translateX(2px)}
100% {transform:translateX(0)}
}