* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        font-family: 'Orbitron', monospace;
        background: linear-gradient(-45deg, #0a0a0f, #1a0f2e, #2d1b69, #4c1d95, #7c3aed);
        background-size: 400% 400%;
        animation: gradientShift 15s ease infinite;
        color: #ffffff;
        overflow: hidden;
        position: relative;
        min-height: 100vh;
    }

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

    /* Animated particles background */
    .particles {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 1;
    }

    .particle {
        position: absolute;
        width: 4px;
        height: 4px;
        background: rgba(66, 193, 229, 0.6);
        border-radius: 50%;
        animation: float 20s infinite linear;
    }

    @keyframes float {
        0% {
            transform: translateY(100vh) rotate(0deg);
            opacity: 0;
        }
        10% {
            opacity: 1;
        }
        90% {
            opacity: 1;
        }
        100% {
            transform: translateY(-100px) rotate(360deg);
            opacity: 0;
        }
    }

    /* Loader */
    #loader {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, #0f0f23, #1a1a3a);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        z-index: 9999;
        transition: opacity 0.8s ease;
    }

    #loader.fade-out {
        opacity: 0;
        pointer-events: none;
    }

    .loader-logo {
        font-family: 'Press Start 2P', cursive;
        font-size: 3rem;
        color: #42c1e5;
        text-shadow: 0 0 30px rgba(66, 193, 229, 0.8);
        margin-bottom: 2rem;
        animation: logoGlow 2s ease-in-out infinite alternate;
    }

    @keyframes logoGlow {
        from { text-shadow: 0 0 30px rgba(66, 193, 229, 0.8); }
        to { text-shadow: 0 0 50px rgba(66, 193, 229, 1), 0 0 80px rgba(66, 193, 229, 0.6); }
    }

    .loader-grid {
        display: grid;
        grid-template-columns: repeat(4, 15px);
        grid-gap: 5px;
        margin-bottom: 2rem;
    }

    .loader-block {
        width: 15px;
        height: 15px;
        background: linear-gradient(45deg, #42c1e5, #7c3aed);
        border-radius: 2px;
        animation: tetrisLoader 1.5s infinite ease-in-out;
    }

    .loader-block:nth-child(1) { animation-delay: 0s; }
    .loader-block:nth-child(2) { animation-delay: 0.1s; }
    .loader-block:nth-child(3) { animation-delay: 0.2s; }
    .loader-block:nth-child(4) { animation-delay: 0.3s; }
    .loader-block:nth-child(5) { animation-delay: 0.4s; }
    .loader-block:nth-child(6) { animation-delay: 0.5s; }
    .loader-block:nth-child(7) { animation-delay: 0.6s; }
    .loader-block:nth-child(8) { animation-delay: 0.7s; }

    @keyframes tetrisLoader {
        0%, 70%, 100% {
            transform: scale3D(1, 1, 1) rotateY(0deg);
            box-shadow: 0 0 10px rgba(66, 193, 229, 0.3);
        }
        35% {
            transform: scale3D(0.8, 0.8, 1) rotateY(180deg);
            box-shadow: 0 0 25px rgba(255, 225, 0, 0.8);
        }
    }

    .loader-text {
        font-family: 'Orbitron', sans-serif;
        font-size: 1.2rem;
        color: #42c1e5;
        animation: pulse 1.5s infinite;
    }

    @keyframes pulse {
        0%, 100% { opacity: 0.6; }
        50% { opacity: 1; }
    }

    /* Main Game Container */
    #gameContainer {
        position: relative;
        width: 100vw;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 2;
    }

    #tetris {
        display: flex;
        background: rgba(15, 15, 35, 0.85);
        border-radius: 20px;
        border: 2px solid rgba(66, 193, 229, 0.3);
        box-shadow: 
            0 0 50px rgba(66, 193, 229, 0.3),
            inset 0 0 50px rgba(66, 193, 229, 0.1);
        backdrop-filter: blur(10px);
        padding: 20px;
        gap: 20px;
        transform: scale(0.9);
        animation: gameEnter 1s ease-out forwards;
    }

    @keyframes gameEnter {
        from {
            transform: scale(0.8) translateY(50px);
            opacity: 0;
        }
        to {
            transform: scale(1) translateY(0);
            opacity: 1;
        }
    }

    /* Game Scene */
    #scene {
        border: 3px solid #42c1e5;
        border-radius: 10px;
        box-shadow: 
            0 0 30px rgba(66, 193, 229, 0.5),
            inset 0 0 30px rgba(66, 193, 229, 0.1);
        background: linear-gradient(180deg, rgba(15, 15, 35, 0.9), rgba(30, 30, 60, 0.9));
        animation: scenePulse 3s ease-in-out infinite alternate;
    }

    @keyframes scenePulse {
        from { box-shadow: 0 0 30px rgba(66, 193, 229, 0.5), inset 0 0 30px rgba(66, 193, 229, 0.1); }
        to { box-shadow: 0 0 40px rgba(66, 193, 229, 0.7), inset 0 0 40px rgba(66, 193, 229, 0.15); }
    }

    /* Sidebar */
    #sidebar {
        display: flex;
        flex-direction: column;
        gap: 15px;
        min-width: 200px;
    }

    .game-title {
        font-family: 'Press Start 2P', cursive;
        font-size: 1.5rem;
        color: #42c1e5;
        text-align: center;
        text-shadow: 0 0 20px rgba(66, 193, 229, 0.8);
        margin-bottom: 10px;
        animation: titleGlow 2s ease-in-out infinite alternate;
    }

    @keyframes titleGlow {
        from { text-shadow: 0 0 20px rgba(66, 193, 229, 0.8); }
        to { text-shadow: 0 0 30px rgba(66, 193, 229, 1), 0 0 40px rgba(124, 58, 237, 0.5); }
    }

    .info-panel {
        background: linear-gradient(135deg, rgba(15, 15, 35, 0.8), rgba(30, 30, 60, 0.8));
        border: 2px solid rgba(66, 193, 229, 0.4);
        border-radius: 15px;
        padding: 15px;
        backdrop-filter: blur(5px);
        box-shadow: 
            0 5px 20px rgba(0, 0, 0, 0.3),
            inset 0 0 20px rgba(66, 193, 229, 0.1);
        transition: all 0.3s ease;
        animation: panelFloat 4s ease-in-out infinite alternate;
    }

    @keyframes panelFloat {
        from { transform: translateY(0px); }
        to { transform: translateY(-5px); }
    }

    .info-panel:hover {
        border-color: rgba(66, 193, 229, 0.6);
        box-shadow: 
            0 8px 25px rgba(0, 0, 0, 0.4),
            inset 0 0 25px rgba(66, 193, 229, 0.15),
            0 0 30px rgba(66, 193, 229, 0.3);
        transform: translateY(-3px);
    }

    .panel-title {
        font-size: 0.9rem;
        color: #ffe100;
        margin-bottom: 8px;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .panel-value {
        font-size: 2rem;
        font-weight: 900;
        color: #42c1e5;
        text-shadow: 0 0 15px rgba(66, 193, 229, 0.6);
        font-family: 'Press Start 2P', cursive;
        animation: valueGlow 1.5s ease-in-out infinite alternate;
    }

    @keyframes valueGlow {
        from { text-shadow: 0 0 15px rgba(66, 193, 229, 0.6); }
        to { text-shadow: 0 0 25px rgba(66, 193, 229, 0.9); }
    }

    /* Next Piece Panel */
    .next-panel {
        background: linear-gradient(135deg, rgba(15, 15, 35, 0.8), rgba(30, 30, 60, 0.8));
        border: 2px solid rgba(255, 225, 0, 0.4);
        border-radius: 15px;
        padding: 15px;
        text-align: center;
        backdrop-filter: blur(5px);
        box-shadow: 
            0 5px 20px rgba(0, 0, 0, 0.3),
            inset 0 0 20px rgba(255, 225, 0, 0.1);
    }

    .next-panel h3 {
        color: #ffe100;
        margin-bottom: 10px;
        font-size: 0.9rem;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    #preview {
        border: 2px solid #ffe100;
        border-radius: 8px;
        background: rgba(0, 0, 0, 0.5);
        box-shadow: 
            0 0 15px rgba(255, 225, 0, 0.3),
            inset 0 0 15px rgba(255, 225, 0, 0.1);
        margin: 0 auto;
    }

    /* Controls Panel */
    .controls-panel {
        background: linear-gradient(135deg, rgba(15, 15, 35, 0.8), rgba(30, 30, 60, 0.8));
        border: 2px solid rgba(124, 58, 237, 0.4);
        border-radius: 15px;
        padding: 15px;
        backdrop-filter: blur(5px);
        box-shadow: 
            0 5px 20px rgba(0, 0, 0, 0.3),
            inset 0 0 20px rgba(124, 58, 237, 0.1);
    }

    .controls-panel h3 {
        color: #7c3aed;
        margin-bottom: 10px;
        font-size: 0.9rem;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .controls-list {
        list-style: none;
        font-size: 0.8rem;
    }

    .controls-list li {
        padding: 5px 0;
        color: #ffffff;
        opacity: 0.9;
        transition: all 0.3s ease;
    }

    .controls-list li:hover {
        opacity: 1;
        color: #42c1e5;
        transform: translateX(5px);
    }

    /* Game Over Screen */
    #gameOver {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.9);
        display: none;
        justify-content: center;
        align-items: center;
        border-radius: 20px;
        backdrop-filter: blur(10px);
        z-index: 1000;
    }

    .game-over-content {
        text-align: center;
        padding: 40px;
        background: linear-gradient(135deg, rgba(15, 15, 35, 0.9), rgba(30, 30, 60, 0.9));
        border: 3px solid rgba(220, 38, 127, 0.6);
        border-radius: 20px;
        box-shadow: 
            0 0 50px rgba(220, 38, 127, 0.4),
            inset 0 0 30px rgba(220, 38, 127, 0.1);
        animation: gameOverEnter 0.5s ease-out;
    }

    @keyframes gameOverEnter {
        from {
            transform: scale(0.8);
            opacity: 0;
        }
        to {
            transform: scale(1);
            opacity: 1;
        }
    }

    .game-over-content h1 {
        font-family: 'Press Start 2P', cursive;
        font-size: 2rem;
        color: #dc2626;
        text-shadow: 0 0 30px rgba(220, 38, 38, 0.8);
        margin-bottom: 20px;
        animation: gameOverGlow 1s ease-in-out infinite alternate;
    }

    @keyframes gameOverGlow {
        from { text-shadow: 0 0 30px rgba(220, 38, 38, 0.8); }
        to { text-shadow: 0 0 50px rgba(220, 38, 38, 1), 0 0 70px rgba(220, 38, 38, 0.6); }
    }

    .restart-btn {
        font-family: 'Orbitron', sans-serif;
        font-size: 1.1rem;
        font-weight: 700;
        color: #ffffff;
        background: linear-gradient(45deg, #42c1e5, #7c3aed);
        border: none;
        border-radius: 50px;
        padding: 15px 30px;
        cursor: pointer;
        box-shadow: 
            0 5px 20px rgba(66, 193, 229, 0.4),
            0 0 30px rgba(66, 193, 229, 0.2);
        transition: all 0.3s ease;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-top: 20px;
    }

    .restart-btn:hover {
        transform: translateY(-3px) scale(1.05);
        box-shadow: 
            0 8px 25px rgba(66, 193, 229, 0.6),
            0 0 40px rgba(66, 193, 229, 0.4);
        background: linear-gradient(45deg, #52d1f5, #8c4afd);
    }

    .restart-btn:active {
        transform: translateY(-1px) scale(1.02);
    }

    /* Reward animation */
    .reward-display {
        position: absolute;
        top: 20px;
        right: 20px;
        font-family: 'Press Start 2P', cursive;
        font-size: 1.2rem;
        color: #ffe100;
        text-shadow: 0 0 20px rgba(255, 225, 0, 0.8);
        pointer-events: none;
        z-index: 100;
    }

    .reward-animation {
        animation: rewardPop 2s ease-out forwards;
    }

    @keyframes rewardPop {
        0% {
            transform: scale(0) rotate(-180deg);
            opacity: 0;
        }
        50% {
            transform: scale(1.2) rotate(0deg);
            opacity: 1;
        }
        100% {
            transform: scale(0.8) translateY(-100px);
            opacity: 0;
        }
    }

    /* Responsive Design */
    @media (max-width: 768px) {
        #tetris {
            flex-direction: column;
            padding: 15px;
            gap: 15px;
            transform: scale(0.8);
        }
        
        #sidebar {
            min-width: auto;
            width: 100%;
        }
        
        .info-panel {
            padding: 10px;
        }
        
        .game-title {
            font-size: 1.2rem;
        }
        
        .panel-value {
            font-size: 1.5rem;
        }
    }

    /* Additional visual effects */
    .glow-effect {
        animation: continuousGlow 3s ease-in-out infinite alternate;
    }

    @keyframes continuousGlow {
        from {
            box-shadow: 0 0 20px rgba(66, 193, 229, 0.3);
        }
        to {
            box-shadow: 0 0 40px rgba(66, 193, 229, 0.6), 0 0 60px rgba(124, 58, 237, 0.3);
        }
    }