#btn-div {
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

/*----------------- BUTTON -----------------*/
.ui-btn span {
    animation: flicker 2s infinite;
}

@keyframes flicker {
    0% {
        color: rgb(101, 255, 255);
        text-shadow: 0 0 10px rgb(101, 255, 255);
    }

    50% {
        color: cyan;
        text-shadow: 0 0 10px cyan;
    }

    100% {
        color: rgb(101, 255, 255);
        text-shadow: 0 0 10px rgb(101, 255, 255);
    }
}

.ui-btn {
    --btn-default-bg: radial-gradient(circle at 30% 30%, #0a0a1f, #000015 80%);
    --btn-padding: 15px 40px;
    --btn-hover-bg: radial-gradient(circle at 70% 70%, #111133, #000010 90%);
    --btn-transition: 0.4s;
    --btn-letter-spacing: 0.15rem;
    --btn-animation-duration: 1.4s;
    --btn-shadow-color: rgba(0, 255, 255, 0.35);
    --btn-shadow: 0 0 25px var(--btn-shadow-color), inset 0 0 15px rgba(0, 255, 255, 0.15);
    --hover-btn-color: #00ffcc;
    --default-btn-color: #cce7ff;
    --font-size: 64px;
    --font-weight: 700;
    --font-family: Menlo, Roboto Mono, monospace;
    border-radius: 18px;
    box-sizing: border-box;
    padding: var(--btn-padding);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--default-btn-color);
    font: var(--font-weight) var(--font-size) var(--font-family);
    background: var(--btn-default-bg);
    border: 2px solid rgba(0, 255, 200, 0.3);
    transition: var(--btn-transition);
    overflow: hidden;
    box-shadow: var(--btn-shadow);
    position: relative;
    letter-spacing: var(--btn-letter-spacing);
    text-transform: uppercase;
}

/* Add twinkling star effect on background */
.ui-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: transparent url("https://www.transparenttextures.com/patterns/stardust.png");
    opacity: 0.2;
    mix-blend-mode: screen;
    animation: starsMove 15s linear infinite;
    pointer-events: none;
}

/* Subtle space drift */
@keyframes starsMove {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 1000px 1000px;
    }
}

.ui-btn span {
    transition: var(--btn-transition);
    position: relative;
    background: inherit;
    text-shadow: 0 0 8px #00ffee, 0 0 15px #00aaff, 0 0 25px #0066ff;
}

.ui-btn span::before {
    position: absolute;
    content: "";
    background: inherit;
    color: var(--hover-btn-color);
    text-shadow: 0 0 12px #00ffff, 0 0 25px #00ccff;
}

.ui-btn:hover,
.ui-btn:focus {
    background: var(--btn-hover-bg);
    border-color: #00ffee;
    box-shadow: 0 0 35px rgba(0, 255, 255, 0.6),
        inset 0 0 25px rgba(0, 255, 255, 0.25);
}

.ui-btn:hover span,
.ui-btn:focus span {
    color: var(--hover-btn-color);
    text-shadow: 0 0 15px #00ffee, 0 0 25px #00ccff, 0 0 35px #0099ff;
}

.ui-btn:hover span::before,
.ui-btn:focus span::before {
    animation: chitchat linear both var(--btn-animation-duration);
}

.ui-btn:hover {
    cursor: url("../img/cur/tile_0097.png"), auto;
}