/* Tetris-inspired loading animation */

/* Tetromino colors */
:root {
    --tetromino-i: #00f0f0; /* I-piece (cyan) */
    --tetromino-j: #0000f0; /* J-piece (blue) */
    --tetromino-l: #f0a000; /* L-piece (orange) */
    --tetromino-o: #f0f000; /* O-piece (yellow) */
    --tetromino-s: #00f000; /* S-piece (green) */
    --tetromino-t: #a000f0; /* T-piece (purple) */
    --tetromino-z: #f00000; /* Z-piece (red) */
}

/* Main menu loading overlay - Modified to only cover main-menu */
.main-menu-loading {
    position: absolute;
    /* Position relative to its parent (.main-menu) */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(30, 30, 46, 0.85);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 100;
    border-radius: 12px;
    overflow: hidden;
    /* Ensure it doesn't affect elements outside main-menu */
    pointer-events: none;
}

/* Re-enable pointer events for the loading content */
.main-menu-loading > * {
    pointer-events: auto;
}

/* Loading message */
.main-menu-loading p {
    color: var(--light-text);
    font-size: 18px;
    font-weight: 500;
    margin-top: 20px;
    text-align: center;
    z-index: 10;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* Tetris pieces container */
.tetris-loader {
    position: relative;
    width: 200px;
    height: 100px;
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}

/* Individual tetromino for animation */
.tetromino {
    position: absolute;
    width: 20px;
    height: 20px;
    opacity: 0;
    border-radius: 2px;
    animation: fall 2s ease-in infinite;
}

/* Different tetromino colors */
.tetromino-i { background-color: var(--tetromino-i); }
.tetromino-j { background-color: var(--tetromino-j); }
.tetromino-l { background-color: var(--tetromino-l); }
.tetromino-o { background-color: var(--tetromino-o); }
.tetromino-s { background-color: var(--tetromino-s); }
.tetromino-t { background-color: var(--tetromino-t); }
.tetromino-z { background-color: var(--tetromino-z); }

/* Falling animation for tetrominos */
@keyframes fall {
    0% {
        top: -50px;
        opacity: 1;
        transform: translateX(0) rotate(0deg);
    }
    50% {
        opacity: 0.8;
        transform: translateX(var(--x-offset, 0)) rotate(var(--rotation, 0deg));
    }
    100% {
        top: 150px;
        opacity: 0;
        transform: translateX(calc(var(--x-offset, 0) * 2)) rotate(calc(var(--rotation, 0deg) * 2));
    }
}

/* Position tetrominos at different starting points */
.tetromino:nth-child(1) {
    left: 20px;
    animation-delay: 0s;
    --x-offset: 10px;
    --rotation: 45deg;
}

.tetromino:nth-child(2) {
    left: 50px;
    animation-delay: 0.2s;
    --x-offset: -15px;
    --rotation: -30deg;
}

.tetromino:nth-child(3) {
    left: 80px;
    animation-delay: 0.4s;
    --x-offset: 5px;
    --rotation: 60deg;
}

.tetromino:nth-child(4) {
    left: 110px;
    animation-delay: 0.6s;
    --x-offset: -10px;
    --rotation: -45deg;
}

.tetromino:nth-child(5) {
    left: 140px;
    animation-delay: 0.8s;
    --x-offset: 15px;
    --rotation: 30deg;
}

.tetromino:nth-child(6) {
    left: 170px;
    animation-delay: 1s;
    --x-offset: -5px;
    --rotation: -60deg;
}

.tetromino:nth-child(7) {
    left: 80px;
    animation-delay: 1.2s;
    --x-offset: 20px;
    --rotation: 90deg;
}

/* Grid background effect */
.grid-background {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 20px 20px;
    z-index: 1;
}