/* ========================================
   NEW YEAR 2026 - REALISTIC FIREWORKS
   Pháo hoa bắn lên và nổ tung - FULL SCREEN
   Compatible with Coowon/Old browsers
   ======================================== */

.newyear-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 99999;
    overflow: hidden;
}

/* ========================================
   FIREWORK ROCKET - Pháo bay lên
   ======================================== */
.firework {
    position: absolute;
    bottom: 0;
    width: 6px;
    height: 6px;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -webkit-animation: launchFirework 2.5s ease-out infinite;
    -moz-animation: launchFirework 2.5s ease-out infinite;
    animation: launchFirework 2.5s ease-out infinite;
}

/* Trail khi bay lên */
.firework:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 3px;
    height: 50px;
    margin-left: -1.5px;
    background: -webkit-linear-gradient(top, transparent, currentColor);
    background: linear-gradient(to bottom, transparent, currentColor);
    -webkit-animation: trailFade 2.5s ease-out infinite;
    animation: trailFade 2.5s ease-out infinite;
}

/* Firework Colors - Màu đậm hơn */
.firework.gold { background: #ffa500; color: #ffa500; -webkit-box-shadow: 0 0 10px 3px #ffa500; box-shadow: 0 0 10px 3px #ffa500; }
.firework.red { background: #ff0000; color: #ff0000; -webkit-box-shadow: 0 0 10px 3px #ff0000; box-shadow: 0 0 10px 3px #ff0000; }
.firework.blue { background: #00bfff; color: #00bfff; -webkit-box-shadow: 0 0 10px 3px #00bfff; box-shadow: 0 0 10px 3px #00bfff; }
.firework.purple { background: #ff00ff; color: #ff00ff; -webkit-box-shadow: 0 0 10px 3px #ff00ff; box-shadow: 0 0 10px 3px #ff00ff; }
.firework.green { background: #00ff00; color: #00ff00; -webkit-box-shadow: 0 0 10px 3px #00ff00; box-shadow: 0 0 10px 3px #00ff00; }

/* Firework Positions - Trải đều màn hình */
.firework:nth-child(1) { left: 5%; -webkit-animation-delay: 0s; animation-delay: 0s; }
.firework:nth-child(2) { left: 20%; -webkit-animation-delay: 0.5s; animation-delay: 0.5s; }
.firework:nth-child(3) { left: 50%; -webkit-animation-delay: 1s; animation-delay: 1s; }
.firework:nth-child(4) { left: 80%; -webkit-animation-delay: 1.5s; animation-delay: 1.5s; }
.firework:nth-child(5) { left: 95%; -webkit-animation-delay: 2s; animation-delay: 2s; }

/* Launch Animation - Bay lên cao hơn */
@-webkit-keyframes launchFirework {
    0% { bottom: -10px; opacity: 1; }
    45% { opacity: 1; }
    50% { bottom: 70%; opacity: 0; }
    100% { bottom: 70%; opacity: 0; }
}
@keyframes launchFirework {
    0% { bottom: -10px; opacity: 1; }
    45% { opacity: 1; }
    50% { bottom: 70%; opacity: 0; }
    100% { bottom: 70%; opacity: 0; }
}

@-webkit-keyframes trailFade {
    0%, 45% { opacity: 1; height: 50px; }
    50%, 100% { opacity: 0; height: 0; }
}
@keyframes trailFade {
    0%, 45% { opacity: 1; height: 50px; }
    50%, 100% { opacity: 0; height: 0; }
}

/* ========================================
   EXPLOSION BURST - Vụ nổ pháo hoa LỚN HƠN
   ======================================== */
.explosion {
    position: absolute;
    width: 8px;
    height: 8px;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    opacity: 0;
}

/* Explosion Colors - Màu sáng, đậm */
.explosion.gold { 
    background: #ffa500;
    -webkit-box-shadow: 0 0 0 #ffa500;
    box-shadow: 0 0 0 #ffa500;
    -webkit-animation: explodeGold 2.5s ease-out infinite;
    animation: explodeGold 2.5s ease-out infinite;
}

.explosion.red { 
    background: #ff0000;
    -webkit-box-shadow: 0 0 0 #ff0000;
    box-shadow: 0 0 0 #ff0000;
    -webkit-animation: explodeRed 2.5s ease-out infinite;
    animation: explodeRed 2.5s ease-out infinite;
}

.explosion.blue { 
    background: #00bfff;
    -webkit-box-shadow: 0 0 0 #00bfff;
    box-shadow: 0 0 0 #00bfff;
    -webkit-animation: explodeBlue 2.5s ease-out infinite;
    animation: explodeBlue 2.5s ease-out infinite;
}

.explosion.purple { 
    background: #ff00ff;
    -webkit-box-shadow: 0 0 0 #ff00ff;
    box-shadow: 0 0 0 #ff00ff;
    -webkit-animation: explodePurple 2.5s ease-out infinite;
    animation: explodePurple 2.5s ease-out infinite;
}

.explosion.green { 
    background: #00ff00;
    -webkit-box-shadow: 0 0 0 #00ff00;
    box-shadow: 0 0 0 #00ff00;
    -webkit-animation: explodeGreen 2.5s ease-out infinite;
    animation: explodeGreen 2.5s ease-out infinite;
}

/* Explosion Positions - Khắp màn hình, cả 2 bên */
.explosion:nth-child(6) { top: 15%; left: 5%; -webkit-animation-delay: 0s; animation-delay: 0s; }
.explosion:nth-child(7) { top: 25%; left: 20%; -webkit-animation-delay: 0.5s; animation-delay: 0.5s; }
.explosion:nth-child(8) { top: 20%; left: 50%; -webkit-animation-delay: 1s; animation-delay: 1s; }
.explosion:nth-child(9) { top: 30%; left: 80%; -webkit-animation-delay: 1.5s; animation-delay: 1.5s; }
.explosion:nth-child(10) { top: 18%; left: 95%; -webkit-animation-delay: 2s; animation-delay: 2s; }

/* ========================================
   EXPLOSION KEYFRAMES - Vụ nổ LỚN, SÁNG
   ======================================== */
@-webkit-keyframes explodeGold {
    0%, 48% { opacity: 0; -webkit-transform: scale(0); }
    50% { 
        opacity: 1; 
        -webkit-transform: scale(1);
        -webkit-box-shadow: 0 0 20px 8px #ffa500;
    }
    100% { 
        opacity: 0;
        -webkit-box-shadow: 
            0 -120px 0 2px #ffa500, 0 120px 0 2px #ffcc00,
            120px 0 0 2px #ffa500, -120px 0 0 2px #ffcc00,
            85px -85px 0 2px #ffa500, -85px 85px 0 2px #ffcc00,
            85px 85px 0 2px #ffa500, -85px -85px 0 2px #ffcc00,
            60px -105px 0 2px #ffa500, -60px 105px 0 2px #ffcc00,
            105px 60px 0 2px #ffa500, -105px -60px 0 2px #ffcc00;
    }
}
@keyframes explodeGold {
    0%, 48% { opacity: 0; transform: scale(0); }
    50% { 
        opacity: 1; 
        transform: scale(1);
        box-shadow: 0 0 20px 8px #ffa500;
    }
    100% { 
        opacity: 0;
        box-shadow: 
            0 -120px 0 2px #ffa500, 0 120px 0 2px #ffcc00,
            120px 0 0 2px #ffa500, -120px 0 0 2px #ffcc00,
            85px -85px 0 2px #ffa500, -85px 85px 0 2px #ffcc00,
            85px 85px 0 2px #ffa500, -85px -85px 0 2px #ffcc00,
            60px -105px 0 2px #ffa500, -60px 105px 0 2px #ffcc00,
            105px 60px 0 2px #ffa500, -105px -60px 0 2px #ffcc00;
    }
}

@-webkit-keyframes explodeRed {
    0%, 48% { opacity: 0; -webkit-transform: scale(0); }
    50% { 
        opacity: 1; 
        -webkit-transform: scale(1);
        -webkit-box-shadow: 0 0 20px 8px #ff0000;
    }
    100% { 
        opacity: 0;
        -webkit-box-shadow: 
            0 -130px 0 2px #ff0000, 0 130px 0 2px #ff4444,
            130px 0 0 2px #ff0000, -130px 0 0 2px #ff4444,
            92px -92px 0 2px #ff0000, -92px 92px 0 2px #ff4444,
            92px 92px 0 2px #ff0000, -92px -92px 0 2px #ff4444,
            65px -113px 0 2px #ff0000, -65px 113px 0 2px #ff4444,
            113px 65px 0 2px #ff0000, -113px -65px 0 2px #ff4444;
    }
}
@keyframes explodeRed {
    0%, 48% { opacity: 0; transform: scale(0); }
    50% { 
        opacity: 1; 
        transform: scale(1);
        box-shadow: 0 0 20px 8px #ff0000;
    }
    100% { 
        opacity: 0;
        box-shadow: 
            0 -130px 0 2px #ff0000, 0 130px 0 2px #ff4444,
            130px 0 0 2px #ff0000, -130px 0 0 2px #ff4444,
            92px -92px 0 2px #ff0000, -92px 92px 0 2px #ff4444,
            92px 92px 0 2px #ff0000, -92px -92px 0 2px #ff4444,
            65px -113px 0 2px #ff0000, -65px 113px 0 2px #ff4444,
            113px 65px 0 2px #ff0000, -113px -65px 0 2px #ff4444;
    }
}

@-webkit-keyframes explodeBlue {
    0%, 48% { opacity: 0; -webkit-transform: scale(0); }
    50% { 
        opacity: 1; 
        -webkit-transform: scale(1);
        -webkit-box-shadow: 0 0 20px 8px #00bfff;
    }
    100% { 
        opacity: 0;
        -webkit-box-shadow: 
            0 -110px 0 2px #00bfff, 0 110px 0 2px #66d9ff,
            110px 0 0 2px #00bfff, -110px 0 0 2px #66d9ff,
            78px -78px 0 2px #00bfff, -78px 78px 0 2px #66d9ff,
            78px 78px 0 2px #00bfff, -78px -78px 0 2px #66d9ff,
            55px -96px 0 2px #00bfff, -55px 96px 0 2px #66d9ff,
            96px 55px 0 2px #00bfff, -96px -55px 0 2px #66d9ff;
    }
}
@keyframes explodeBlue {
    0%, 48% { opacity: 0; transform: scale(0); }
    50% { 
        opacity: 1; 
        transform: scale(1);
        box-shadow: 0 0 20px 8px #00bfff;
    }
    100% { 
        opacity: 0;
        box-shadow: 
            0 -110px 0 2px #00bfff, 0 110px 0 2px #66d9ff,
            110px 0 0 2px #00bfff, -110px 0 0 2px #66d9ff,
            78px -78px 0 2px #00bfff, -78px 78px 0 2px #66d9ff,
            78px 78px 0 2px #00bfff, -78px -78px 0 2px #66d9ff,
            55px -96px 0 2px #00bfff, -55px 96px 0 2px #66d9ff,
            96px 55px 0 2px #00bfff, -96px -55px 0 2px #66d9ff;
    }
}

@-webkit-keyframes explodePurple {
    0%, 48% { opacity: 0; -webkit-transform: scale(0); }
    50% { 
        opacity: 1; 
        -webkit-transform: scale(1);
        -webkit-box-shadow: 0 0 20px 8px #ff00ff;
    }
    100% { 
        opacity: 0;
        -webkit-box-shadow: 
            0 -100px 0 2px #ff00ff, 0 100px 0 2px #ff66ff,
            100px 0 0 2px #ff00ff, -100px 0 0 2px #ff66ff,
            71px -71px 0 2px #ff00ff, -71px 71px 0 2px #ff66ff,
            71px 71px 0 2px #ff00ff, -71px -71px 0 2px #ff66ff,
            50px -87px 0 2px #ff00ff, -50px 87px 0 2px #ff66ff,
            87px 50px 0 2px #ff00ff, -87px -50px 0 2px #ff66ff;
    }
}
@keyframes explodePurple {
    0%, 48% { opacity: 0; transform: scale(0); }
    50% { 
        opacity: 1; 
        transform: scale(1);
        box-shadow: 0 0 20px 8px #ff00ff;
    }
    100% { 
        opacity: 0;
        box-shadow: 
            0 -100px 0 2px #ff00ff, 0 100px 0 2px #ff66ff,
            100px 0 0 2px #ff00ff, -100px 0 0 2px #ff66ff,
            71px -71px 0 2px #ff00ff, -71px 71px 0 2px #ff66ff,
            71px 71px 0 2px #ff00ff, -71px -71px 0 2px #ff66ff,
            50px -87px 0 2px #ff00ff, -50px 87px 0 2px #ff66ff,
            87px 50px 0 2px #ff00ff, -87px -50px 0 2px #ff66ff;
    }
}

@-webkit-keyframes explodeGreen {
    0%, 48% { opacity: 0; -webkit-transform: scale(0); }
    50% { 
        opacity: 1; 
        -webkit-transform: scale(1);
        -webkit-box-shadow: 0 0 20px 8px #00ff00;
    }
    100% { 
        opacity: 0;
        -webkit-box-shadow: 
            0 -115px 0 2px #00ff00, 0 115px 0 2px #66ff66,
            115px 0 0 2px #00ff00, -115px 0 0 2px #66ff66,
            81px -81px 0 2px #00ff00, -81px 81px 0 2px #66ff66,
            81px 81px 0 2px #00ff00, -81px -81px 0 2px #66ff66,
            58px -100px 0 2px #00ff00, -58px 100px 0 2px #66ff66,
            100px 58px 0 2px #00ff00, -100px -58px 0 2px #66ff66;
    }
}
@keyframes explodeGreen {
    0%, 48% { opacity: 0; transform: scale(0); }
    50% { 
        opacity: 1; 
        transform: scale(1);
        box-shadow: 0 0 20px 8px #00ff00;
    }
    100% { 
        opacity: 0;
        box-shadow: 
            0 -115px 0 2px #00ff00, 0 115px 0 2px #66ff66,
            115px 0 0 2px #00ff00, -115px 0 0 2px #66ff66,
            81px -81px 0 2px #00ff00, -81px 81px 0 2px #66ff66,
            81px 81px 0 2px #00ff00, -81px -81px 0 2px #66ff66,
            58px -100px 0 2px #00ff00, -58px 100px 0 2px #66ff66,
            100px 58px 0 2px #00ff00, -100px -58px 0 2px #66ff66;
    }
}

/* ========================================
   SPARKLE STARS - Ngôi sao lấp lánh SÁNG HƠN
   ======================================== */
.sparkle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: #ffff00;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -webkit-box-shadow: 0 0 10px 4px #ffff00, 0 0 20px 8px rgba(255,255,0,0.5);
    box-shadow: 0 0 10px 4px #ffff00, 0 0 20px 8px rgba(255,255,0,0.5);
    -webkit-animation: twinkle 1.2s ease-in-out infinite;
    animation: twinkle 1.2s ease-in-out infinite;
}

/* Sparkle positions - Khắp màn hình */
.sparkle:nth-child(11) { top: 8%; left: 3%; -webkit-animation-delay: 0s; animation-delay: 0s; }
.sparkle:nth-child(12) { top: 12%; left: 97%; -webkit-animation-delay: 0.15s; animation-delay: 0.15s; }
.sparkle:nth-child(13) { top: 5%; left: 35%; -webkit-animation-delay: 0.3s; animation-delay: 0.3s; }
.sparkle:nth-child(14) { top: 18%; left: 65%; -webkit-animation-delay: 0.45s; animation-delay: 0.45s; }
.sparkle:nth-child(15) { top: 10%; left: 15%; -webkit-animation-delay: 0.6s; animation-delay: 0.6s; }
.sparkle:nth-child(16) { top: 6%; left: 85%; -webkit-animation-delay: 0.75s; animation-delay: 0.75s; }
.sparkle:nth-child(17) { top: 22%; left: 8%; -webkit-animation-delay: 0.9s; animation-delay: 0.9s; }
.sparkle:nth-child(18) { top: 3%; left: 50%; -webkit-animation-delay: 1.05s; animation-delay: 1.05s; }

@-webkit-keyframes twinkle {
    0%, 100% { opacity: 0.4; -webkit-transform: scale(0.6); }
    50% { opacity: 1; -webkit-transform: scale(1.3); }
}
@keyframes twinkle {
    0%, 100% { opacity: 0.4; transform: scale(0.6); }
    50% { opacity: 1; transform: scale(1.3); }
}

/* ========================================
   MOBILE - Giảm hiệu ứng
   ======================================== */
@media screen and (max-width: 768px) {
    .firework:nth-child(n+4), .explosion:nth-child(n+9) { display: none; }
    .sparkle:nth-child(n+15) { display: none; }
}
@media screen and (max-width: 480px) {
    .firework:nth-child(n+3), .explosion:nth-child(n+8) { display: none; }
    .sparkle:nth-child(n+13) { display: none; }
}