/*-----------------------------------------------------------------------------------------------*/
/* Login
/*-----------------------------------------------------------------------------------------------*/
body {
    background: linear-gradient(135deg, rgb(var(--color-theme-1) / 1.0) 0%, rgb(var(--color-theme-2) / 1.0) 50%, rgb(var(--color-theme-1) / 1.0) 100%);
}
body::after {
    content: none;
}
.card-login {
    margin-top: -2rem;
    width: 400px;
    background-color: rgba(255,255,255,0.97);
}
.card-login .card-body {
    padding: 2.5rem 2rem;
}
.card-login .logo {
    width: 70px;
}
.toast-position {
    top: 12px;
    right: 12px;
}
footer {
    margin: 0; 
    padding: 1rem;
    background: var(--login-footer-bg);
    border: none;
}
.footer-msg {
    color: var(--login-footer-color);
}
.chess-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.25;
    background-size: 90px 90px;
    background-image: 
        linear-gradient(45deg, rgba(0,0,0,0.5) 25%, transparent 25%), 
        linear-gradient(-45deg, rgba(0,0,0,0.5) 25%, transparent 25%), 
        linear-gradient(45deg, transparent 75%, rgba(0,0,0,0.5) 75%), 
        linear-gradient(-45deg, transparent 75%, rgba(0,0,0,0.5) 75%);
    background-position: 0 0, 0 45px, 45px -45px, -45px 0px;
}
.chess-quote {
    margin-top: 1.5rem;
    margin-bottom: -1rem;
}
.floating-pieces {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.floating-piece {
    position: absolute;
    color: rgba(255, 255, 255, 0.1);
    font-size: 3.5rem;
}
/* Peças que sobem */
.floating-piece.up {
    animation: floatUp 25s infinite linear;
}
/* Peças que descem */
.floating-piece.down {
    animation: floatDown 30s infinite linear;
}
@keyframes floatUp {
    0% { 
        transform: translateY(100vh) rotate(0deg) scale(0.8);
        opacity: 0;
    }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { 
        transform: translateY(-100px) rotate(360deg) scale(1.2);
        opacity: 0;
    }
}
@keyframes floatDown {
    0% { 
        transform: translateY(-100px) rotate(0deg) scale(1.2);
        opacity: 0;
    }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { 
        transform: translateY(100vh) rotate(-360deg) scale(0.8);
        opacity: 0;
    }
}
/* Posicionamento das peças que sobem */
.floating-piece.up:nth-child(1) { left: 5%; animation-delay: -3s; }
.floating-piece.up:nth-child(2) { left: 25%; animation-delay: -8s; font-size: 2.8rem; }
.floating-piece.up:nth-child(3) { left: 45%; animation-delay: -15s; }
.floating-piece.up:nth-child(4) { left: 70%; animation-delay: -20s; font-size: 3rem; }
.floating-piece.up:nth-child(5) { left: 85%; animation-delay: -12s; font-size: 2.5rem; }

/* Posicionamento das peças que descem */
.floating-piece.down:nth-child(6) { left: 15%; animation-delay: -5s; }
.floating-piece.down:nth-child(7) { left: 35%; animation-delay: -10s; font-size: 2.8rem; }
.floating-piece.down:nth-child(8) { left: 55%; animation-delay: -18s; }
.floating-piece.down:nth-child(9) { left: 75%; animation-delay: -25s; font-size: 3.2rem; }
.floating-piece.down:nth-child(10) { left: 90%; animation-delay: -2s; font-size: 2.3rem; }

/* mobile */
@media screen and (max-width:575px) {
    .card-login {
        width: 100%;
        margin-left: 1rem;
        margin-right: 1rem;
    }
    .card-login .card-body {
        padding: 1.5rem 1.25rem;
    }
    .chess-pieces {
        font-size: 2rem;
    }
    .chess-background {
        background-size: 60px 60px;
        background-position: 0 0, 0 30px, 30px -30px, -30px 0px;
    }
    .chess-quote {
        margin-bottom: -0.5rem;
    }
    .floating-piece {
        font-size: 2.5rem;
    }
}