/* Reset and base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Orbitron', 'Press Start 2P', monospace;
    background: linear-gradient(90deg, #ff0000, #ff8000, #ffff00, #00ff00, #0080ff, #8000ff, #ff0080);
    background-size: 400% 400%;
    animation: rainbowShift 4s ease infinite;
    overflow: hidden;
    height: 100vh;
    position: relative;
}

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

/* Top UI Bar */
.top-ui-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(90deg, #000000, #1a1a1a, #000000);
    border-bottom: 4px solid #00ffff;
    box-shadow: 0 0 30px #00ffff, inset 0 0 20px rgba(0, 255, 255, 0.3);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px;
    z-index: 1000;
    backdrop-filter: blur(5px);
}

.left-stats .stat,
.right-stats .stat {
    color: #00ff00;
    font-size: 28px;
    font-weight: bold;
    text-shadow: 0 0 20px #00ff00, 0 0 40px #00ff00;
    animation: neonPulse 1.5s ease-in-out infinite alternate;
    font-family: 'Press Start 2P', monospace;
}

@keyframes neonPulse {
    from { text-shadow: 0 0 20px #00ff00, 0 0 40px #00ff00; }
    to { text-shadow: 0 0 30px #00ff00, 0 0 60px #00ff00, 0 0 80px #00ff00; }
}

.center-stats {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.killstreak {
    color: #ff0080;
    font-size: 20px;
    font-weight: bold;
    text-shadow: 0 0 15px #ff0080, 0 0 30px #ff0080;
    animation: pinkGlow 2s ease-in-out infinite alternate;
    font-family: 'Press Start 2P', monospace;
}

.break {
    color: #ffff00;
    font-size: 18px;
    font-weight: bold;
    text-shadow: 0 0 15px #ffff00, 0 0 30px #ffff00;
    animation: yellowGlow 1.8s ease-in-out infinite alternate;
    font-family: 'Press Start 2P', monospace;
}

@keyframes pinkGlow {
    from { text-shadow: 0 0 15px #ff0080, 0 0 30px #ff0080; }
    to { text-shadow: 0 0 25px #ff0080, 0 0 50px #ff0080, 0 0 70px #ff0080; }
}

@keyframes yellowGlow {
    from { text-shadow: 0 0 15px #ffff00, 0 0 30px #ffff00; }
    to { text-shadow: 0 0 25px #ffff00, 0 0 50px #ffff00, 0 0 70px #ffff00; }
}

.health-bar {
    width: 100px;
    height: 12px;
    background: linear-gradient(90deg, #ff0000, #ff8000, #ffff00, #00ff00);
    border: 2px solid #ffffff;
    border-radius: 6px;
    box-shadow: 0 0 20px #00ff00, inset 0 0 10px rgba(0, 255, 0, 0.5);
    animation: healthPulse 2s ease-in-out infinite;
}

@keyframes healthPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Main Content */
.main-content {
    height: calc(100vh - 160px);
    margin-top: 80px;
    display: flex;
    position: relative;
    padding: 20px;
    align-items: center;
}

/* Left Side - Organized Grid */
.left-side {
    flex: 1;
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Left Column 1 - Top */
.left-image {
    width: 280px;
    height: 210px;
    top: 8%;
    left: 10%;
    transform: rotate(-12deg);
    animation: leftImageEpic 8s ease-in-out infinite;
    animation-play-state: running;
    animation-delay: 0s;
}

.left-image-2 {
    width: 250px;
    height: 185px;
    top: 28%;
    left: 5%;
    transform: rotate(8deg);
    animation: leftImage2Epic 10s ease-in-out infinite;
    animation-play-state: running;
    animation-delay: 0s;
}

.left-image-3 {
    width: 220px;
    height: 165px;
    top: 48%;
    left: 15%;
    transform: rotate(-6deg);
    animation: leftImage3Epic 12s ease-in-out infinite;
    animation-play-state: running;
    animation-delay: 0s;
}

/* Left Column 2 - Bottom */
.left-image-4 {
    width: 260px;
    height: 190px;
    top: 58%;
    left: 8%;
    transform: rotate(10deg);
    animation: leftImage4Epic 14s ease-in-out infinite;
    animation-play-state: running;
    animation-delay: 0s;
}

.left-image-5 {
    width: 240px;
    height: 175px;
    top: 18%;
    left: 60%;
    transform: rotate(-8deg);
    animation: leftImage5Epic 13s ease-in-out infinite;
    animation-play-state: running;
    animation-delay: 0s;
}

.left-image-6 {
    width: 200px;
    height: 150px;
    top: 48%;
    left: 55%;
    transform: rotate(6deg);
    animation: leftImage6Epic 16s ease-in-out infinite;
    animation-play-state: running;
    animation-delay: 0s;
}

@keyframes leftImageEpic {
    0%, 100% { transform: rotate(-12deg) translateY(0px) scale(1); }
    50% { transform: rotate(-12deg) translateY(-15px) scale(1.05); }
}

@keyframes leftImage2Epic {
    0%, 100% { transform: rotate(8deg) translateY(0px) scale(1); }
    50% { transform: rotate(8deg) translateY(-12px) scale(1.05); }
}

@keyframes leftImage3Epic {
    0%, 100% { transform: rotate(-6deg) translateY(0px) scale(1); }
    50% { transform: rotate(-6deg) translateY(-10px) scale(1.05); }
}

@keyframes leftImage4Epic {
    0%, 100% { transform: rotate(10deg) translateY(0px) scale(1); }
    50% { transform: rotate(10deg) translateY(-14px) scale(1.05); }
}

@keyframes leftImage5Epic {
    0%, 100% { transform: rotate(-8deg) translateY(0px) scale(1); }
    50% { transform: rotate(-8deg) translateY(-11px) scale(1.05); }
}

@keyframes leftImage6Epic {
    0%, 100% { transform: rotate(6deg) translateY(0px) scale(1); }
    50% { transform: rotate(6deg) translateY(-8px) scale(1.05); }
}

/* Center Content - Organized Layout */
.center-content {
    flex: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 100%;
}

.main-title {
    font-size: 120px;
    font-weight: 900;
    color: #ffffff;
    text-shadow: 
        0 0 30px #00ffff,
        0 0 60px #00ffff,
        0 0 90px #00ffff,
        0 0 120px #00ffff,
        5px 5px 0px #000000,
        10px 10px 0px #000000;
    animation: titleEpic 3s ease-in-out infinite alternate;
    margin-bottom: 20px;
    z-index: 100;
    font-family: 'Press Start 2P', monospace;
    letter-spacing: -4px;
}

@keyframes titleEpic {
    from { 
        text-shadow: 
            0 0 30px #00ffff,
            0 0 60px #00ffff,
            0 0 90px #00ffff,
            0 0 120px #00ffff,
            5px 5px 0px #000000,
            10px 10px 0px #000000;
        transform: scale(1);
    }
    to { 
        text-shadow: 
            0 0 40px #ff0080,
            0 0 80px #ff0080,
            0 0 120px #ff0080,
            0 0 160px #ff0080,
            5px 5px 0px #000000,
            10px 10px 0px #000000;
        transform: scale(1.05);
    }
}

.subtitle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 30px;
    z-index: 100;
}

.subtitle-line-1 {
    font-size: 32px;
    font-weight: bold;
    color: #ffff00;
    text-shadow: 
        0 0 20px #ffff00,
        0 0 40px #ffff00,
        0 0 60px #ffff00,
        3px 3px 0px #000000;
    animation: subtitleEpic 2.5s ease-in-out infinite alternate;
    font-family: 'Press Start 2P', monospace;
}

.subtitle-line-2 {
    font-size: 28px;
    font-weight: bold;
    color: #00ff00;
    text-shadow: 
        0 0 20px #00ff00,
        0 0 40px #00ff00,
        0 0 60px #00ff00,
        3px 3px 0px #000000;
    animation: subtitleEpic 2.5s ease-in-out infinite alternate;
    animation-delay: -1.2s;
    font-family: 'Press Start 2P', monospace;
}

@keyframes subtitleEpic {
    from { 
        transform: scale(1) rotate(-1deg);
        text-shadow: 
            0 0 20px currentColor,
            0 0 40px currentColor,
            0 0 60px currentColor,
            3px 3px 0px #000000;
    }
    to { 
        transform: scale(1.1) rotate(1deg);
        text-shadow: 
            0 0 30px currentColor,
            0 0 50px currentColor,
            0 0 70px currentColor,
            3px 3px 0px #000000;
    }
}

/* Center Images - Organized Grid */
.center-image {
    width: 320px;
    height: 230px;
    top: 6%;
    transform: rotate(5deg);
    animation: centerImageEpic 9s ease-in-out infinite;
    animation-play-state: running;
    animation-delay: 0s;
}

.center-image-2 {
    width: 260px;
    height: 180px;
    top: 65%;
    transform: rotate(-4deg);
    animation: centerImage2Epic 11s ease-in-out infinite;
    animation-play-state: running;
    animation-delay: 0s;
}

.center-image-3 {
    width: 240px;
    height: 170px;
    top: 18%;
    left: -15%;
    transform: rotate(8deg);
    animation: centerImage3Epic 12s ease-in-out infinite;
    animation-play-state: running;
    animation-delay: 0s;
}

.center-image-4 {
    width: 200px;
    height: 140px;
    top: 55%;
    right: -12%;
    transform: rotate(-6deg);
    animation: centerImage4Epic 14s ease-in-out infinite;
    animation-play-state: running;
    animation-delay: 0s;
}

@keyframes centerImageEpic {
    0%, 100% { transform: rotate(5deg) translateY(0px) scale(1); }
    50% { transform: rotate(5deg) translateY(-18px) scale(1.05); }
}

@keyframes centerImage2Epic {
    0%, 100% { transform: rotate(-4deg) translateY(0px) scale(1); }
    50% { transform: rotate(-4deg) translateY(-15px) scale(1.05); }
}

@keyframes centerImage3Epic {
    0%, 100% { transform: rotate(8deg) translateY(0px) scale(1); }
    50% { transform: rotate(8deg) translateY(-12px) scale(1.05); }
}

@keyframes centerImage4Epic {
    0%, 100% { transform: rotate(-6deg) translateY(0px) scale(1); }
    50% { transform: rotate(-6deg) translateY(-10px) scale(1.05); }
}

/* Center Videos - Organized Grid */
.center-video-1 {
    width: 280px;
    height: 190px;
    top: 32%;
    left: -8%;
    transform: rotate(-3deg);
    animation: centerVideo1Epic 13s ease-in-out infinite;
    animation-play-state: running;
    animation-delay: 0s;
}

.center-video-2 {
    width: 250px;
    height: 160px;
    top: 42%;
    right: -10%;
    transform: rotate(7deg);
    animation: centerVideo2Epic 15s ease-in-out infinite;
    animation-play-state: running;
    animation-delay: 0s;
}

.center-video-3 {
    width: 220px;
    height: 150px;
    top: 75%;
    transform: rotate(-2deg);
    animation: centerVideo3Epic 17s ease-in-out infinite;
    animation-play-state: running;
    animation-delay: 0s;
}

@keyframes centerVideo1Epic {
    0%, 100% { transform: rotate(-3deg) translateY(0px) scale(1); }
    50% { transform: rotate(-3deg) translateY(-14px) scale(1.05); }
}

@keyframes centerVideo2Epic {
    0%, 100% { transform: rotate(7deg) translateY(0px) scale(1); }
    50% { transform: rotate(7deg) translateY(-12px) scale(1.05); }
}

@keyframes centerVideo3Epic {
    0%, 100% { transform: rotate(-2deg) translateY(0px) scale(1); }
    50% { transform: rotate(-2deg) translateY(-10px) scale(1.05); }
}

/* Right Side - Organized Grid */
.right-side {
    flex: 1;
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Right Column 1 - Top */
.right-image {
    width: 280px;
    height: 210px;
    top: 10%;
    right: 10%;
    transform: rotate(12deg);
    animation: rightImageEpic 11s ease-in-out infinite;
    animation-play-state: running;
    animation-delay: 0s;
}

.right-image-2 {
    width: 250px;
    height: 185px;
    top: 30%;
    right: 5%;
    transform: rotate(-8deg);
    animation: rightImage2Epic 13s ease-in-out infinite;
    animation-play-state: running;
    animation-delay: 0s;
}

.right-image-3 {
    width: 220px;
    height: 165px;
    top: 50%;
    right: 15%;
    transform: rotate(6deg);
    animation: rightImage3Epic 15s ease-in-out infinite;
    animation-play-state: running;
    animation-delay: 0s;
}

/* Right Column 2 - Bottom */
.right-image-4 {
    width: 260px;
    height: 190px;
    top: 60%;
    right: 8%;
    transform: rotate(-10deg);
    animation: rightImage4Epic 17s ease-in-out infinite;
    animation-play-state: running;
    animation-delay: 0s;
}

@keyframes rightImageEpic {
    0%, 100% { transform: rotate(12deg) translateY(0px) scale(1); }
    50% { transform: rotate(12deg) translateY(-18px) scale(1.05); }
}

@keyframes rightImage2Epic {
    0%, 100% { transform: rotate(-8deg) translateY(0px) scale(1); }
    50% { transform: rotate(-8deg) translateY(-15px) scale(1.05); }
}

@keyframes rightImage3Epic {
    0%, 100% { transform: rotate(6deg) translateY(0px) scale(1); }
    50% { transform: rotate(6deg) translateY(-12px) scale(1.05); }
}

@keyframes rightImage4Epic {
    0%, 100% { transform: rotate(-10deg) translateY(0px) scale(1); }
    50% { transform: rotate(-10deg) translateY(-16px) scale(1.05); }
}

/* Floating Image */
.floating-image {
    width: 280px;
    height: 190px;
    top: 45%;
    left: 45%;
    transform: rotate(-5deg);
    animation: floatingImageEpic 16s ease-in-out infinite;
    animation-play-state: running;
    animation-delay: 0s;
    z-index: 60;
}

@keyframes floatingImageEpic {
    0%, 100% { transform: rotate(-5deg) translateY(0px) scale(1); }
    25% { transform: rotate(-5deg) translateY(-20px) scale(1.06); }
    50% { transform: rotate(-5deg) translateY(0px) scale(1); }
    75% { transform: rotate(-5deg) translateY(-15px) scale(1.06); }
}

/* Chaos Images - Base Styles */
.chaos-image {
    position: absolute;
    border-radius: 16px;
    box-shadow: 
        0 0 30px rgba(255, 255, 255, 0.8),
        0 0 60px rgba(255, 255, 255, 0.4),
        0 0 90px rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    z-index: 50;
    border: 3px solid rgba(255, 255, 255, 0.6);
}

.chaos-img,
.chaos-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.chaos-image:hover {
    transform: scale(1.1) rotate(3deg);
    box-shadow: 
        0 0 50px rgba(255, 255, 255, 1),
        0 0 100px rgba(255, 255, 255, 0.8),
        0 0 150px rgba(255, 255, 255, 0.6);
    z-index: 100;
}

.chaos-image:hover .chaos-img,
.chaos-image:hover .chaos-video {
    filter: brightness(1.2) contrast(1.1);
}

/* Error Effects and Glitch */
.error-glitch {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1000;
    animation: errorGlitch 0.3s ease-in-out infinite;
}

@keyframes errorGlitch {
    0%, 100% { 
        opacity: 0;
        transform: translateX(0);
    }
    10% { 
        opacity: 0.1;
        transform: translateX(-2px);
        filter: hue-rotate(180deg);
    }
    20% { 
        opacity: 0.2;
        transform: translateX(2px);
        filter: hue-rotate(90deg);
    }
    30% { 
        opacity: 0.3;
        transform: translateX(-1px);
        filter: hue-rotate(270deg);
    }
    40% { 
        opacity: 0.4;
        transform: translateX(1px);
        filter: hue-rotate(0deg);
    }
    50% { 
        opacity: 0.5;
        transform: translateX(-3px);
        filter: hue-rotate(180deg);
    }
    60% { 
        opacity: 0.6;
        transform: translateX(3px);
        filter: hue-rotate(90deg);
    }
    70% { 
        opacity: 0.7;
        transform: translateX(-2px);
        filter: hue-rotate(270deg);
    }
    80% { 
        opacity: 0.8;
        transform: translateX(2px);
        filter: hue-rotate(0deg);
    }
    90% { 
        opacity: 0.9;
        transform: translateX(-1px);
        filter: hue-rotate(180deg);
    }
}

/* Scanlines Effect */
.scanlines {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 999;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 255, 0, 0.1) 2px,
        rgba(0, 255, 0, 0.1) 4px
    );
    animation: scanlines 0.1s linear infinite;
}

@keyframes scanlines {
    0% { transform: translateY(0); }
    100% { transform: translateY(4px); }
}

/* CRT Flicker */
.crt-flicker {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 998;
    background: radial-gradient(
        circle at center,
        transparent 0%,
        rgba(0, 255, 0, 0.05) 50%,
        transparent 100%
    );
    animation: crtFlicker 0.05s ease-in-out infinite;
}

@keyframes crtFlicker {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.7; }
}

/* Matrix Rain Effect */
.matrix-rain {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 997;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(0, 255, 0, 0.1) 50%,
        transparent 100%
    );
    animation: matrixRain 2s linear infinite;
}

@keyframes matrixRain {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(100%); }
}

/* Glitch Text Effect */
.glitch-text {
    position: relative;
    animation: glitchText 2s ease-in-out infinite;
}

.glitch-text::before,
.glitch-text::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.glitch-text::before {
    animation: glitchBefore 0.3s ease-in-out infinite;
    color: #ff0000;
    z-index: -1;
}

.glitch-text::after {
    animation: glitchAfter 0.3s ease-in-out infinite;
    color: #00ffff;
    z-index: -2;
}

@keyframes glitchText {
    0%, 100% { transform: translate(0); }
    20% { transform: translate(-2px, 2px); }
    40% { transform: translate(-2px, -2px); }
    60% { transform: translate(2px, 2px); }
    80% { transform: translate(2px, -2px); }
}

@keyframes glitchBefore {
    0%, 100% { transform: translate(0); }
    20% { transform: translate(2px, -2px); }
    40% { transform: translate(2px, 2px); }
    60% { transform: translate(-2px, -2px); }
    80% { transform: translate(-2px, 2px); }
}

@keyframes glitchAfter {
    0%, 100% { transform: translate(0); }
    20% { transform: translate(-2px, 2px); }
    40% { transform: translate(-2px, -2px); }
    60% { transform: translate(2px, 2px); }
    80% { transform: translate(2px, -2px); }
}

/* Random Glitch on Images */
.chaos-image {
    position: absolute;
    border-radius: 8px;
    box-shadow: 
        0 0 20px rgba(0, 255, 255, 0.8),
        0 0 40px rgba(0, 255, 255, 0.4),
        0 0 60px rgba(0, 255, 255, 0.2);
    transition: all 0.3s ease;
    animation: randomGlitch 8s ease-in-out infinite;
}

@keyframes randomGlitch {
    0%, 90%, 100% { 
        filter: brightness(1) contrast(1) saturate(1);
        transform: scale(1) rotate(var(--rotation));
    }
    5% { 
        filter: brightness(1.2) contrast(1.3) saturate(1.5);
        transform: scale(1.02) rotate(calc(var(--rotation) + 2deg));
    }
    10% { 
        filter: brightness(0.8) contrast(0.7) saturate(0.5);
        transform: scale(0.98) rotate(calc(var(--rotation) - 1deg));
    }
    15% { 
        filter: brightness(1.1) contrast(1.2) saturate(1.3);
        transform: scale(1.01) rotate(calc(var(--rotation) + 1deg));
    }
    20% { 
        filter: brightness(0.9) contrast(0.8) saturate(0.7);
        transform: scale(0.99) rotate(calc(var(--rotation) - 2deg));
    }
    25% { 
        filter: brightness(1.3) contrast(1.4) saturate(1.6);
        transform: scale(1.03) rotate(calc(var(--rotation) + 3deg));
    }
    30% { 
        filter: brightness(0.7) contrast(0.6) saturate(0.4);
        transform: scale(0.97) rotate(calc(var(--rotation) - 3deg));
    }
    35% { 
        filter: brightness(1.4) contrast(1.5) saturate(1.7);
        transform: scale(1.04) rotate(calc(var(--rotation) + 4deg));
    }
    40% { 
        filter: brightness(0.6) contrast(0.5) saturate(0.3);
        transform: scale(0.96) rotate(calc(var(--rotation) - 4deg));
    }
    45% { 
        filter: brightness(1.5) contrast(1.6) saturate(1.8);
        transform: scale(1.05) rotate(calc(var(--rotation) + 5deg));
    }
    50% { 
        filter: brightness(0.5) contrast(0.4) saturate(0.2);
        transform: scale(0.95) rotate(calc(var(--rotation) - 5deg));
    }
    55% { 
        filter: brightness(1.6) contrast(1.7) saturate(1.9);
        transform: scale(1.06) rotate(calc(var(--rotation) + 6deg));
    }
    60% { 
        filter: brightness(0.4) contrast(0.3) saturate(0.1);
        transform: scale(0.94) rotate(calc(var(--rotation) - 6deg));
    }
    65% { 
        filter: brightness(1.7) contrast(1.8) saturate(2.0);
        transform: scale(1.07) rotate(calc(var(--rotation) + 7deg));
    }
    70% { 
        filter: brightness(0.3) contrast(0.2) saturate(0.05);
        transform: scale(0.93) rotate(calc(var(--rotation) - 7deg));
    }
    75% { 
        filter: brightness(1.8) contrast(1.9) saturate(2.1);
        transform: scale(1.08) rotate(calc(var(--rotation) + 8deg));
    }
    80% { 
        filter: brightness(0.2) contrast(0.1) saturate(0.02);
        transform: scale(0.92) rotate(calc(var(--rotation) - 8deg));
    }
    85% { 
        filter: brightness(1.9) contrast(2.0) saturate(2.2);
        transform: scale(1.09) rotate(calc(var(--rotation) + 9deg));
    }
}

/* Error Popup Effect */
.error-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 0, 0, 0.9);
    color: white;
    padding: 20px;
    border: 3px solid #ff0000;
    border-radius: 10px;
    font-family: 'Press Start 2P', monospace;
    font-size: 16px;
    z-index: 1001;
    animation: errorPopup 0.5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes errorPopup {
    0%, 100% { 
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }
    50% { 
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.1);
    }
}

/* Screen Shake Effect */
.screen-shake {
    animation: screenShake 0.1s ease-in-out infinite;
}

@keyframes screenShake {
    0%, 100% { transform: translate(0, 0); }
    10% { transform: translate(-1px, -1px); }
    20% { transform: translate(1px, -1px); }
    30% { transform: translate(-1px, 1px); }
    40% { transform: translate(1px, 1px); }
    50% { transform: translate(-1px, -1px); }
    60% { transform: translate(1px, -1px); }
    70% { transform: translate(-1px, 1px); }
    80% { transform: translate(1px, 1px); }
    90% { transform: translate(-1px, -1px); }
}

/* Random Color Shift */
.color-shift {
    animation: colorShift 3s ease-in-out infinite;
}

@keyframes colorShift {
    0%, 100% { filter: hue-rotate(0deg); }
    25% { filter: hue-rotate(90deg); }
    50% { filter: hue-rotate(180deg); }
    75% { filter: hue-rotate(270deg); }
}

/* Epilepsy Warning */
.epilepsy-warning {
    position: fixed;
    top: 20px;
    right: 20px;
    background: rgba(255, 0, 0, 0.9);
    color: white;
    padding: 15px;
    border-radius: 8px;
    font-family: 'Press Start 2P', monospace;
    font-size: 12px;
    z-index: 1002;
    animation: epilepsyWarning 2s ease-in-out infinite;
}

@keyframes epilepsyWarning {
    0%, 100% { 
        opacity: 0.8;
        transform: scale(1);
    }
    50% { 
        opacity: 1;
        transform: scale(1.1);
    }
}

/* Bottom UI Bar */
.bottom-ui-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: linear-gradient(90deg, #000000, #1a1a1a, #000000);
    border-top: 4px solid #ff0080;
    box-shadow: 0 4px 30px #ff0080, inset 0 0 20px rgba(255, 0, 128, 0.3);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 40px;
    z-index: 1000;
    backdrop-filter: blur(5px);
}

.file-explorer {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 1;
}

.folder-icon {
    font-size: 36px;
    animation: folderEpic 2.5s ease-in-out infinite;
    filter: drop-shadow(0 0 20px #00ffff);
}

@keyframes folderEpic {
    0%, 100% { transform: translateY(0px) scale(1); }
    50% { transform: translateY(-8px) scale(1.1); }
}

.folder-text {
    color: #00ffff;
    font-weight: 700;
    font-size: 24px;
    text-shadow: 0 0 15px #00ffff, 0 0 30px #00ffff;
    font-family: 'Press Start 2P', monospace;
}

/* Action Buttons in Bottom Bar */
.action-buttons {
    display: flex;
    gap: 30px;
    align-items: center;
    justify-content: center;
    flex: 1;
}

/* Action Buttons */
.action-btn {
    background: linear-gradient(135deg, #ff0080, #ff6b35);
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 25px;
    font-family: 'Press Start 2P', monospace;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 
        0 0 20px rgba(255, 0, 128, 0.6),
        0 0 40px rgba(255, 0, 128, 0.3);
    animation: btnGlow 2s ease-in-out infinite alternate;
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

.action-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s;
}

.action-btn:hover::before {
    left: 100%;
}

.action-btn:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 
        0 0 30px rgba(255, 0, 128, 0.8),
        0 0 60px rgba(255, 0, 128, 0.4),
        0 10px 20px rgba(0, 0, 0, 0.3);
}

.action-btn:active {
    transform: translateY(0) scale(0.98);
}

/* Mobile Responsive Buttons */
@media (max-width: 768px) {
    .action-btn {
        padding: 10px 16px;
        font-size: 12px;
        border-radius: 20px;
        gap: 6px;
    }
    
    /* Hide TEMUmemeFactory on mobile */
    .folder-text {
        display: none;
    }
    
    /* Move buttons to right on mobile */
    .action-buttons {
        justify-content: flex-end;
        gap: 20px;
    }
}

@media (max-width: 480px) {
    .action-btn {
        padding: 8px 14px;
        font-size: 11px;
        border-radius: 18px;
        gap: 5px;
        min-height: 40px;
    }
    
    .action-btn img,
    .action-btn span {
        font-size: 10px;
    }
    
    /* Hide TEMUmemeFactory on small mobile */
    .folder-text {
        display: none;
    }
    
    /* Move buttons to right on small mobile */
    .action-buttons {
        justify-content: flex-end;
        gap: 15px;
    }
}

.ca-btn {
    background: linear-gradient(135deg, #ff0080 0%, #ff4080 50%, #ff80a0 100%);
    color: #ffffff;
}

.ca-btn:hover {
    background: linear-gradient(135deg, #ff4080 0%, #ff80a0 50%, #ffb0c0 100%);
}

.twitter-btn {
    background: linear-gradient(135deg, #00ffff 0%, #40ffff 50%, #80ffff 100%);
    color: #000000;
}

.twitter-btn:hover {
    background: linear-gradient(135deg, #40ffff 0%, #80ffff 50%, #b0ffff 100%);
}

.chat-input {
    display: flex;
    align-items: center;
    flex: 1;
    justify-content: flex-end;
}

.username {
    color: #ffff00;
    font-weight: 700;
    font-size: 20px;
    text-shadow: 0 0 15px #ffff00, 0 0 30px #ffff00;
    font-family: 'Press Start 2P', monospace;
    animation: usernameEpic 3s ease-in-out infinite alternate;
}

@keyframes usernameEpic {
    from { 
        text-shadow: 0 0 15px #ffff00, 0 0 30px #ffff00;
        transform: scale(1);
    }
    to { 
        text-shadow: 0 0 25px #ffff00, 0 0 50px #ffff00, 0 0 70px #ffff00;
        transform: scale(1.05);
    }
}

.crypto-logo {
    font-size: 36px;
    color: #ff8000;
    animation: cryptoEpic 4s ease-in-out infinite;
    filter: drop-shadow(0 0 20px #ff8000);
}

@keyframes cryptoEpic {
    0%, 100% { transform: rotate(-5deg) scale(1); }
    50% { transform: rotate(5deg) scale(1.1); }
}

/* Epic background effects */
.main-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 30%, rgba(255, 0, 128, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(0, 255, 255, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(255, 255, 0, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 10% 80%, rgba(255, 0, 0, 0.1) 0%, transparent 50%);
    pointer-events: none;
    z-index: -1;
}

/* Floating particles */
@keyframes particleEpic {
    0% { transform: translateY(100vh) rotate(0deg) scale(0); opacity: 0; }
    10% { opacity: 1; transform: translateY(90vh) rotate(36deg) scale(1); }
    90% { opacity: 1; transform: translateY(10vh) rotate(324deg) scale(1); }
    100% { transform: translateY(-100px) rotate(360deg) scale(0); opacity: 0; }
}

.particle {
    position: fixed;
    width: 6px;
    height: 6px;
    background: #ffffff;
    border-radius: 50%;
    pointer-events: none;
    animation: particleEpic 8s linear infinite;
    z-index: 1;
    box-shadow: 0 0 10px #ffffff, 0 0 20px #ffffff;
}

/* China Music Button */
.china-music-container {
    position: relative;
    z-index: 100;
    margin-top: 20px;
    display: flex;
    align-items: center;
    gap: 20px;
    justify-content: center;
}

.china-music-btn {
    background: linear-gradient(135deg, #de2910, #ffde00);
    border: 3px solid #ffde00;
    border-radius: 50px;
    padding: 15px 30px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 
        0 0 30px rgba(222, 41, 16, 0.6),
        0 0 60px rgba(255, 222, 0, 0.4),
        0 8px 25px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    gap: 15px;
    font-family: 'Press Start 2P', monospace;
    position: relative;
    overflow: hidden;
    animation: chinaGlow 3s ease-in-out infinite alternate;
}

/* Enhanced visibility when playing */
.china-music-btn.playing {
    transform: scale(1.1);
    border: 4px solid #ffffff;
    box-shadow: 
        0 0 40px rgba(222, 41, 16, 0.9),
        0 0 80px rgba(255, 222, 0, 0.7),
        0 0 120px rgba(255, 255, 255, 0.5),
        0 15px 35px rgba(0, 0, 0, 0.4);
    animation: playingGlow 1.5s ease-in-out infinite alternate;
}

@keyframes playingGlow {
    from { 
        transform: scale(1.1);
        box-shadow: 
            0 0 40px rgba(222, 41, 16, 0.9),
            0 0 80px rgba(255, 222, 0, 0.7),
            0 0 120px rgba(255, 255, 255, 0.5),
            0 15px 35px rgba(0, 0, 0, 0.4);
    }
    to { 
        transform: scale(1.15);
        box-shadow: 
            0 0 50px rgba(222, 41, 16, 1.0),
            0 0 100px rgba(255, 222, 0, 0.9),
            0 0 150px rgba(255, 255, 255, 0.7),
            0 20px 40px rgba(0, 0, 0, 0.5);
    }
}

/* Buy Button */
.buy-btn {
    background: linear-gradient(135deg, #00ff00, #008000);
    border: 3px solid #00ff00;
    border-radius: 50px;
    padding: 15px 30px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 
        0 0 30px rgba(0, 255, 0, 0.6),
        0 0 60px rgba(0, 128, 0, 0.4),
        0 8px 25px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    gap: 15px;
    font-family: 'Press Start 2P', monospace;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    animation: buyGlow 3s ease-in-out infinite alternate;
}

.buy-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.6s;
}

.buy-btn:hover::before {
    left: 100%;
}

.buy-btn:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 
        0 0 40px rgba(0, 255, 0, 0.8),
        0 0 80px rgba(0, 128, 0, 0.6),
        0 15px 35px rgba(0, 0, 0, 0.4);
}

.buy-btn:active {
    transform: translateY(-2px) scale(1.02);
}

.buy-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
    filter: drop-shadow(0 0 10px rgba(0, 255, 0, 0.8));
}

.buy-text {
    color: #ffffff;
    font-size: 14px;
    font-weight: bold;
    text-shadow: 2px 2px 0px #000000;
    animation: buyTextGlow 2.5s ease-in-out infinite alternate;
}

/* Buy Button Animations */
@keyframes buyGlow {
    from { 
        box-shadow: 
            0 0 30px rgba(0, 255, 0, 0.6),
            0 0 60px rgba(0, 128, 0, 0.4),
            0 8px 25px rgba(0, 0, 0, 0.3);
    }
    to { 
        box-shadow: 
            0 0 40px rgba(0, 255, 0, 0.8),
            0 0 80px rgba(0, 128, 0, 0.6),
            0 15px 35px rgba(0, 0, 0, 0.4);
    }
}

@keyframes buyTextGlow {
    from { text-shadow: 2px 2px 0px #000000; }
    to { text-shadow: 2px 2px 0px #000000, 0 0 20px #00ff00; }
}

.china-music-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.6s;
}

.china-music-btn:hover::before {
    left: 100%;
}

.china-music-btn:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 
        0 0 40px rgba(222, 41, 16, 0.8),
        0 0 80px rgba(255, 222, 0, 0.6),
        0 15px 35px rgba(0, 0, 0, 0.4);
}

.china-music-btn:active {
    transform: translateY(-2px) scale(1.02);
}

.music-icon {
    font-size: 24px;
    animation: musicPulse 2s ease-in-out infinite;
}

.music-text {
    color: #ffffff;
    font-size: 14px;
    font-weight: bold;
    text-shadow: 2px 2px 0px #000000;
    animation: textGlow 2.5s ease-in-out infinite alternate;
}

/* China Flag Animation Container */
.china-flag-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.china-flag-overlay.active {
    opacity: 1;
}

/* Red Animated Background */
.red-background-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9998;
    opacity: 0;
    transition: opacity 0.8s ease;
    background: linear-gradient(45deg, 
        #8B0000, #DC143C, #B22222, #CD5C5C, 
        #8B0000, #DC143C, #B22222, #CD5C5C
    );
    background-size: 400% 400%;
    animation: redBackgroundShift 3s ease-in-out infinite;
}

.red-background-overlay.active {
    opacity: 0.3;
}

/* Red Background Animations */
@keyframes redBackgroundShift {
    0% { 
        background-position: 0% 50%;
        filter: hue-rotate(0deg) brightness(1);
    }
    25% { 
        background-position: 100% 50%;
        filter: hue-rotate(15deg) brightness(1.1);
    }
    50% { 
        background-position: 100% 100%;
        filter: hue-rotate(30deg) brightness(1.2);
    }
    75% { 
        background-position: 50% 100%;
        filter: hue-rotate(15deg) brightness(1.1);
    }
    100% { 
        background-position: 0% 50%;
        filter: hue-rotate(0deg) brightness(1);
    }
}

/* Additional Red Effects */
.red-pulse-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9997;
    opacity: 0;
    transition: opacity 0.5s ease;
    background: radial-gradient(
        circle at center,
        rgba(255, 0, 0, 0.1) 0%,
        rgba(139, 0, 0, 0.05) 50%,
        transparent 100%
    );
    animation: redPulse 2s ease-in-out infinite;
}

.red-pulse-overlay.active {
    opacity: 1;
}

@keyframes redPulse {
    0%, 100% { 
        transform: scale(1);
        opacity: 0.1;
    }
    50% { 
        transform: scale(1.2);
        opacity: 0.2;
    }
}

/* Red Border Animation */
.red-border-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9996;
    opacity: 0;
    transition: opacity 0.6s ease;
    border: 4px solid transparent;
    background: linear-gradient(45deg, #FF0000, #8B0000, #DC143C, #B22222);
    background-size: 400% 400%;
    animation: redBorderFlow 4s linear infinite;
    box-sizing: border-box;
}

.red-border-overlay.active {
    opacity: 0.8;
}

@keyframes redBorderFlow {
    0% { 
        background-position: 0% 0%;
        border-color: #FF0000;
    }
    25% { 
        background-position: 100% 0%;
        border-color: #8B0000;
    }
    50% { 
        background-position: 100% 100%;
        border-color: #DC143C;
    }
    75% { 
        background-position: 0% 100%;
        border-color: #B22222;
    }
    100% { 
        background-position: 0% 0%;
        border-color: #FF0000;
    }
}

/* China Flag Styles */
.china-flag {
    position: absolute;
    width: 80px;
    height: 60px;
    background-image: url('china.webp');
    background-size: cover;
    background-repeat: no-repeat;
    animation: flagFloat 4s ease-in-out infinite;
}

/* Multiple flag positions */
.china-flag:nth-child(1) { top: 5%; left: 5%; animation-delay: 0s; }
.china-flag:nth-child(2) { top: 15%; left: 25%; animation-delay: 0.3s; }
.china-flag:nth-child(3) { top: 25%; left: 45%; animation-delay: 0.6s; }
.china-flag:nth-child(4) { top: 35%; left: 65%; animation-delay: 0.9s; }
.china-flag:nth-child(5) { top: 45%; left: 85%; animation-delay: 1.2s; }
.china-flag:nth-child(6) { top: 55%; left: 15%; animation-delay: 1.5s; }
.china-flag:nth-child(7) { top: 65%; left: 35%; animation-delay: 1.8s; }
.china-flag:nth-child(8) { top: 75%; left: 55%; animation-delay: 2.1s; }
.china-flag:nth-child(9) { top: 85%; left: 75%; animation-delay: 2.4s; }
.china-flag:nth-child(10) { top: 10%; right: 10%; animation-delay: 0.2s; }
.china-flag:nth-child(11) { top: 20%; right: 30%; animation-delay: 0.5s; }
.china-flag:nth-child(12) { top: 30%; right: 50%; animation-delay: 0.8s; }
.china-flag:nth-child(13) { top: 40%; right: 70%; animation-delay: 1.1s; }
.china-flag:nth-child(14) { top: 50%; right: 90%; animation-delay: 1.4s; }
.china-flag:nth-child(15) { top: 60%; right: 20%; animation-delay: 1.7s; }
.china-flag:nth-child(16) { top: 70%; right: 40%; animation-delay: 2.0s; }
.china-flag:nth-child(17) { top: 80%; right: 60%; animation-delay: 2.3s; }
.china-flag:nth-child(18) { top: 90%; right: 80%; animation-delay: 2.6s; }
.china-flag:nth-child(19) { top: 12%; left: 50%; animation-delay: 0.4s; }
.china-flag:nth-child(20) { top: 22%; left: 70%; animation-delay: 0.7s; }
.china-flag:nth-child(21) { top: 32%; left: 90%; animation-delay: 1.0s; }
.china-flag:nth-child(22) { top: 42%; left: 10%; animation-delay: 1.3s; }
.china-flag:nth-child(23) { top: 52%; left: 30%; animation-delay: 1.6s; }
.china-flag:nth-child(24) { top: 62%; left: 50%; animation-delay: 1.9s; }
.china-flag:nth-child(25) { top: 72%; left: 70%; animation-delay: 2.2s; }
.china-flag:nth-child(26) { top: 82%; left: 90%; animation-delay: 2.5s; }
.china-flag:nth-child(27) { top: 8%; right: 40%; animation-delay: 0.1s; }
.china-flag:nth-child(28) { top: 18%; right: 60%; animation-delay: 0.4s; }
.china-flag:nth-child(29) { top: 28%; right: 80%; animation-delay: 0.7s; }
.china-flag:nth-child(30) { top: 38%; right: 10%; animation-delay: 1.0s; }
.china-flag:nth-child(31) { top: 48%; right: 30%; animation-delay: 1.3s; }
.china-flag:nth-child(32) { top: 58%; right: 50%; animation-delay: 1.6s; }
.china-flag:nth-child(33) { top: 68%; right: 70%; animation-delay: 1.9s; }
.china-flag:nth-child(34) { top: 78%; right: 90%; animation-delay: 2.2s; }
.china-flag:nth-child(35) { top: 88%; right: 20%; animation-delay: 2.5s; }
.china-flag:nth-child(36) { top: 7%; left: 35%; animation-delay: 0.2s; }
.china-flag:nth-child(37) { top: 17%; left: 55%; animation-delay: 0.5s; }
.china-flag:nth-child(38) { top: 27%; left: 75%; animation-delay: 0.8s; }
.china-flag:nth-child(39) { top: 37%; left: 95%; animation-delay: 1.1s; }
.china-flag:nth-child(40) { top: 47%; left: 5%; animation-delay: 1.4s; }
.china-flag:nth-child(41) { top: 57%; left: 25%; animation-delay: 1.7s; }
.china-flag:nth-child(42) { top: 67%; left: 45%; animation-delay: 2.0s; }
.china-flag:nth-child(43) { top: 77%; left: 65%; animation-delay: 2.3s; }
.china-flag:nth-child(44) { top: 87%; left: 85%; animation-delay: 2.6s; }
.china-flag:nth-child(45) { top: 9%; right: 25%; animation-delay: 0.3s; }
.china-flag:nth-child(46) { top: 19%; right: 45%; animation-delay: 0.6s; }
.china-flag:nth-child(47) { top: 29%; right: 65%; animation-delay: 0.9s; }
.china-flag:nth-child(48) { top: 39%; right: 85%; animation-delay: 1.2s; }
.china-flag:nth-child(49) { top: 49%; right: 5%; animation-delay: 1.5s; }
.china-flag:nth-child(50) { top: 59%; right: 25%; animation-delay: 1.8s; }
.china-flag:nth-child(51) { top: 69%; right: 45%; animation-delay: 2.1s; }
.china-flag:nth-child(52) { top: 79%; right: 65%; animation-delay: 2.4s; }
.china-flag:nth-child(53) { top: 89%; right: 85%; animation-delay: 2.7s; }
.china-flag:nth-child(54) { top: 6%; left: 20%; animation-delay: 0.1s; }
.china-flag:nth-child(55) { top: 16%; left: 40%; animation-delay: 0.4s; }
.china-flag:nth-child(56) { top: 26%; left: 60%; animation-delay: 0.7s; }
.china-flag:nth-child(57) { top: 36%; left: 80%; animation-delay: 1.0s; }
.china-flag:nth-child(58) { top: 46%; left: 100%; animation-delay: 1.3s; }
.china-flag:nth-child(59) { top: 56%; left: 0%; animation-delay: 1.6s; }
.china-flag:nth-child(60) { top: 66%; left: 20%; animation-delay: 1.9s; }
.china-flag:nth-child(61) { top: 76%; left: 40%; animation-delay: 2.2s; }
.china-flag:nth-child(62) { top: 86%; left: 60%; animation-delay: 2.5s; }
.china-flag:nth-child(63) { top: 96%; left: 80%; animation-delay: 2.8s; }
.china-flag:nth-child(64) { top: 4%; right: 15%; animation-delay: 0.2s; }
.china-flag:nth-child(65) { top: 14%; right: 35%; animation-delay: 0.5s; }
.china-flag:nth-child(66) { top: 24%; right: 55%; animation-delay: 0.8s; }
.china-flag:nth-child(67) { top: 34%; right: 75%; animation-delay: 1.1s; }
.china-flag:nth-child(68) { top: 44%; right: 95%; animation-delay: 1.4s; }
.china-flag:nth-child(69) { top: 54%; right: 15%; animation-delay: 1.7s; }
.china-flag:nth-child(70) { top: 64%; right: 35%; animation-delay: 2.0s; }
.china-flag:nth-child(71) { top: 74%; right: 55%; animation-delay: 2.3s; }
.china-flag:nth-child(72) { top: 84%; right: 75%; animation-delay: 2.6s; }
.china-flag:nth-child(73) { top: 94%; right: 95%; animation-delay: 2.9s; }
.china-flag:nth-child(74) { top: 3%; left: 15%; animation-delay: 0.3s; }
.china-flag:nth-child(75) { top: 13%; left: 35%; animation-delay: 0.6s; }
.china-flag:nth-child(76) { top: 23%; left: 55%; animation-delay: 0.9s; }
.china-flag:nth-child(77) { top: 33%; left: 75%; animation-delay: 1.2s; }
.china-flag:nth-child(78) { top: 43%; left: 95%; animation-delay: 1.5s; }
.china-flag:nth-child(79) { top: 53%; left: 15%; animation-delay: 1.8s; }
.china-flag:nth-child(80) { top: 63%; left: 35%; animation-delay: 2.1s; }
.china-flag:nth-child(81) { top: 73%; left: 55%; animation-delay: 2.4s; }
.china-flag:nth-child(82) { top: 83%; left: 75%; animation-delay: 2.7s; }
.china-flag:nth-child(83) { top: 93%; left: 95%; animation-delay: 3.0s; }
.china-flag:nth-child(84) { top: 2%; right: 20%; animation-delay: 0.4s; }
.china-flag:nth-child(85) { top: 12%; right: 40%; animation-delay: 0.7s; }
.china-flag:nth-child(86) { top: 22%; right: 60%; animation-delay: 1.0s; }
.china-flag:nth-child(87) { top: 32%; right: 80%; animation-delay: 1.3s; }
.china-flag:nth-child(88) { top: 42%; right: 100%; animation-delay: 1.6s; }
.china-flag:nth-child(89) { top: 52%; right: 20%; animation-delay: 1.9s; }
.china-flag:nth-child(90) { top: 62%; right: 40%; animation-delay: 2.2s; }
.china-flag:nth-child(91) { top: 72%; right: 60%; animation-delay: 2.5s; }
.china-flag:nth-child(92) { top: 82%; right: 80%; animation-delay: 2.8s; }
.china-flag:nth-child(93) { top: 92%; right: 100%; animation-delay: 3.1s; }
.china-flag:nth-child(94) { top: 1%; left: 25%; animation-delay: 0.5s; }
.china-flag:nth-child(95) { top: 11%; left: 45%; animation-delay: 0.8s; }
.china-flag:nth-child(96) { top: 21%; left: 65%; animation-delay: 1.1s; }
.china-flag:nth-child(97) { top: 31%; left: 85%; animation-delay: 1.4s; }
.china-flag:nth-child(98) { top: 41%; left: 5%; animation-delay: 1.7s; }
.china-flag:nth-child(99) { top: 51%; left: 25%; animation-delay: 2.0s; }
.china-flag:nth-child(100) { top: 61%; left: 45%; animation-delay: 2.3s; }
.china-flag:nth-child(101) { top: 71%; left: 65%; animation-delay: 2.6s; }
.china-flag:nth-child(102) { top: 81%; left: 85%; animation-delay: 2.9s; }
.china-flag:nth-child(103) { top: 91%; left: 5%; animation-delay: 3.2s; }
.china-flag:nth-child(104) { top: 0%; right: 30%; animation-delay: 0.6s; }
.china-flag:nth-child(105) { top: 10%; right: 50%; animation-delay: 0.9s; }
.china-flag:nth-child(106) { top: 20%; right: 70%; animation-delay: 1.2s; }
.china-flag:nth-child(107) { top: 30%; right: 90%; animation-delay: 1.5s; }
.china-flag:nth-child(108) { top: 40%; right: 10%; animation-delay: 1.8s; }
.china-flag:nth-child(109) { top: 50%; right: 30%; animation-delay: 2.1s; }
.china-flag:nth-child(110) { top: 60%; right: 50%; animation-delay: 2.4s; }
.china-flag:nth-child(111) { top: 70%; right: 70%; animation-delay: 2.7s; }
.china-flag:nth-child(112) { top: 80%; right: 90%; animation-delay: 3.0s; }
.china-flag:nth-child(113) { top: 90%; right: 10%; animation-delay: 3.3s; }
.china-flag:nth-child(114) { top: 100%; right: 30%; animation-delay: 3.6s; }
.china-flag:nth-child(115) { top: 5%; left: 10%; animation-delay: 0.7s; }
.china-flag:nth-child(116) { top: 15%; left: 30%; animation-delay: 1.0s; }
.china-flag:nth-child(117) { top: 25%; left: 50%; animation-delay: 1.3s; }
.china-flag:nth-child(118) { top: 35%; left: 70%; animation-delay: 1.6s; }
.china-flag:nth-child(119) { top: 45%; left: 90%; animation-delay: 1.9s; }
.china-flag:nth-child(120) { top: 55%; left: 10%; animation-delay: 2.2s; }
.china-flag:nth-child(121) { top: 65%; left: 30%; animation-delay: 2.5s; }
.china-flag:nth-child(122) { top: 75%; left: 50%; animation-delay: 2.8s; }
.china-flag:nth-child(123) { top: 85%; left: 70%; animation-delay: 3.1s; }
.china-flag:nth-child(124) { top: 95%; left: 90%; animation-delay: 3.4s; }
.china-flag:nth-child(125) { top: 8%; right: 5%; animation-delay: 0.8s; }
.china-flag:nth-child(126) { top: 18%; right: 25%; animation-delay: 1.1s; }
.china-flag:nth-child(127) { top: 28%; right: 45%; animation-delay: 1.4s; }
.china-flag:nth-child(128) { top: 38%; right: 65%; animation-delay: 1.7s; }
.china-flag:nth-child(129) { top: 48%; right: 85%; animation-delay: 2.0s; }
.china-flag:nth-child(130) { top: 58%; right: 5%; animation-delay: 2.3s; }
.china-flag:nth-child(131) { top: 68%; right: 25%; animation-delay: 2.6s; }
.china-flag:nth-child(132) { top: 78%; right: 45%; animation-delay: 2.9s; }
.china-flag:nth-child(133) { top: 88%; right: 65%; animation-delay: 3.2s; }
.china-flag:nth-child(134) { top: 98%; right: 85%; animation-delay: 3.5s; }
.china-flag:nth-child(135) { top: 3%; left: 5%; animation-delay: 0.9s; }
.china-flag:nth-child(136) { top: 13%; left: 25%; animation-delay: 1.2s; }
.china-flag:nth-child(137) { top: 23%; left: 45%; animation-delay: 1.5s; }
.china-flag:nth-child(138) { top: 33%; left: 65%; animation-delay: 1.8s; }
.china-flag:nth-child(139) { top: 43%; left: 85%; animation-delay: 2.1s; }
.china-flag:nth-child(140) { top: 53%; left: 5%; animation-delay: 2.4s; }
.china-flag:nth-child(141) { top: 63%; left: 25%; animation-delay: 2.7s; }
.china-flag:nth-child(142) { top: 73%; left: 45%; animation-delay: 3.0s; }
.china-flag:nth-child(143) { top: 83%; left: 65%; animation-delay: 3.3s; }
.china-flag:nth-child(144) { top: 93%; left: 85%; animation-delay: 3.6s; }
.china-flag:nth-child(145) { top: 7%; right: 15%; animation-delay: 1.0s; }
.china-flag:nth-child(146) { top: 17%; right: 35%; animation-delay: 1.3s; }
.china-flag:nth-child(147) { top: 27%; right: 55%; animation-delay: 1.6s; }
.china-flag:nth-child(148) { top: 37%; right: 75%; animation-delay: 1.9s; }
.china-flag:nth-child(149) { top: 47%; right: 95%; animation-delay: 2.2s; }
.china-flag:nth-child(150) { top: 57%; right: 15%; animation-delay: 2.5s; }
.china-flag:nth-child(151) { top: 67%; right: 35%; animation-delay: 2.8s; }
.china-flag:nth-child(152) { top: 77%; right: 55%; animation-delay: 3.1s; }
.china-flag:nth-child(153) { top: 87%; right: 75%; animation-delay: 3.4s; }
.china-flag:nth-child(154) { top: 97%; right: 95%; animation-delay: 3.7s; }
.china-flag:nth-child(155) { top: 1%; left: 15%; animation-delay: 1.1s; }
.china-flag:nth-child(156) { top: 11%; left: 35%; animation-delay: 1.4s; }
.china-flag:nth-child(157) { top: 21%; left: 55%; animation-delay: 1.7s; }
.china-flag:nth-child(158) { top: 31%; left: 75%; animation-delay: 2.0s; }
.china-flag:nth-child(159) { top: 41%; left: 95%; animation-delay: 2.3s; }
.china-flag:nth-child(160) { top: 51%; left: 15%; animation-delay: 2.6s; }
.china-flag:nth-child(161) { top: 61%; left: 35%; animation-delay: 2.9s; }
.china-flag:nth-child(162) { top: 71%; left: 55%; animation-delay: 3.2s; }
.china-flag:nth-child(163) { top: 81%; left: 75%; animation-delay: 3.5s; }
.china-flag:nth-child(164) { top: 91%; left: 95%; animation-delay: 3.8s; }
.china-flag:nth-child(165) { top: 6%; right: 25%; animation-delay: 1.2s; }
.china-flag:nth-child(166) { top: 16%; right: 45%; animation-delay: 1.5s; }
.china-flag:nth-child(167) { top: 26%; right: 65%; animation-delay: 1.8s; }
.china-flag:nth-child(168) { top: 36%; right: 85%; animation-delay: 2.1s; }
.china-flag:nth-child(169) { top: 46%; right: 5%; animation-delay: 2.4s; }
.china-flag:nth-child(170) { top: 56%; right: 25%; animation-delay: 2.7s; }
.china-flag:nth-child(171) { top: 66%; right: 45%; animation-delay: 3.0s; }
.china-flag:nth-child(172) { top: 76%; right: 65%; animation-delay: 3.3s; }
.china-flag:nth-child(173) { top: 86%; right: 85%; animation-delay: 3.6s; }
.china-flag:nth-child(174) { top: 96%; right: 5%; animation-delay: 3.9s; }
.china-flag:nth-child(175) { top: 4%; left: 20%; animation-delay: 1.3s; }
.china-flag:nth-child(176) { top: 14%; left: 40%; animation-delay: 1.6s; }
.china-flag:nth-child(177) { top: 24%; left: 60%; animation-delay: 1.9s; }
.china-flag:nth-child(178) { top: 34%; left: 80%; animation-delay: 2.2s; }
.china-flag:nth-child(179) { top: 44%; left: 100%; animation-delay: 2.5s; }
.china-flag:nth-child(180) { top: 54%; left: 20%; animation-delay: 2.8s; }
.china-flag:nth-child(181) { top: 64%; left: 40%; animation-delay: 3.1s; }
.china-flag:nth-child(182) { top: 74%; left: 60%; animation-delay: 3.4s; }
.china-flag:nth-child(183) { top: 84%; left: 80%; animation-delay: 3.7s; }
.china-flag:nth-child(184) { top: 94%; left: 100%; animation-delay: 4.0s; }
.china-flag:nth-child(185) { top: 9%; right: 35%; animation-delay: 1.4s; }
.china-flag:nth-child(186) { top: 19%; right: 55%; animation-delay: 1.7s; }
.china-flag:nth-child(187) { top: 29%; right: 75%; animation-delay: 2.0s; }
.china-flag:nth-child(188) { top: 39%; right: 95%; animation-delay: 2.3s; }
.china-flag:nth-child(189) { top: 49%; right: 15%; animation-delay: 2.6s; }
.china-flag:nth-child(190) { top: 59%; right: 35%; animation-delay: 2.9s; }
.china-flag:nth-child(191) { top: 69%; right: 55%; animation-delay: 3.2s; }
.china-flag:nth-child(192) { top: 79%; right: 75%; animation-delay: 3.5s; }
.china-flag:nth-child(193) { top: 89%; right: 95%; animation-delay: 3.8s; }
.china-flag:nth-child(194) { top: 99%; right: 15%; animation-delay: 4.1s; }
.china-flag:nth-child(195) { top: 2%; left: 25%; animation-delay: 1.5s; }
.china-flag:nth-child(196) { top: 12%; left: 45%; animation-delay: 1.8s; }
.china-flag:nth-child(197) { top: 22%; left: 65%; animation-delay: 2.1s; }
.china-flag:nth-child(198) { top: 32%; left: 85%; animation-delay: 2.4s; }
.china-flag:nth-child(199) { top: 42%; left: 5%; animation-delay: 2.7s; }
.china-flag:nth-child(200) { top: 52%; left: 25%; animation-delay: 3.0s; }
.china-flag:nth-child(201) { top: 62%; left: 45%; animation-delay: 3.3s; }
.china-flag:nth-child(202) { top: 72%; left: 65%; animation-delay: 3.6s; }
.china-flag:nth-child(203) { top: 82%; left: 85%; animation-delay: 3.9s; }
.china-flag:nth-child(204) { top: 92%; left: 5%; animation-delay: 4.2s; }
.china-flag:nth-child(205) { top: 0%; right: 40%; animation-delay: 1.6s; }
.china-flag:nth-child(206) { top: 10%; right: 60%; animation-delay: 1.9s; }
.china-flag:nth-child(207) { top: 20%; right: 80%; animation-delay: 2.2s; }
.china-flag:nth-child(208) { top: 30%; right: 100%; animation-delay: 2.5s; }
.china-flag:nth-child(209) { top: 40%; right: 20%; animation-delay: 2.8s; }
.china-flag:nth-child(210) { top: 50%; right: 40%; animation-delay: 3.1s; }
.china-flag:nth-child(211) { top: 60%; right: 60%; animation-delay: 3.4s; }
.china-flag:nth-child(212) { top: 70%; right: 80%; animation-delay: 3.7s; }
.china-flag:nth-child(213) { top: 80%; right: 100%; animation-delay: 4.0s; }
.china-flag:nth-child(214) { top: 90%; right: 20%; animation-delay: 4.3s; }
.china-flag:nth-child(215) { top: 100%; right: 40%; animation-delay: 4.6s; }
.china-flag:nth-child(216) { top: 5%; left: 30%; animation-delay: 1.7s; }
.china-flag:nth-child(217) { top: 15%; left: 50%; animation-delay: 2.0s; }
.china-flag:nth-child(218) { top: 25%; left: 70%; animation-delay: 2.3s; }
.china-flag:nth-child(219) { top: 35%; left: 90%; animation-delay: 2.6s; }
.china-flag:nth-child(220) { top: 45%; left: 10%; animation-delay: 2.9s; }
.china-flag:nth-child(221) { top: 55%; left: 30%; animation-delay: 3.2s; }
.china-flag:nth-child(222) { top: 65%; left: 50%; animation-delay: 3.5s; }
.china-flag:nth-child(223) { top: 75%; left: 70%; animation-delay: 3.8s; }
.china-flag:nth-child(224) { top: 85%; left: 90%; animation-delay: 4.1s; }
.china-flag:nth-child(225) { top: 95%; left: 10%; animation-delay: 4.4s; }
.china-flag:nth-child(226) { top: 8%; right: 45%; animation-delay: 1.8s; }
.china-flag:nth-child(227) { top: 18%; right: 65%; animation-delay: 2.1s; }
.china-flag:nth-child(228) { top: 28%; right: 85%; animation-delay: 2.4s; }
.china-flag:nth-child(229) { top: 38%; right: 5%; animation-delay: 2.7s; }
.china-flag:nth-child(230) { top: 48%; right: 25%; animation-delay: 3.0s; }
.china-flag:nth-child(231) { top: 58%; right: 45%; animation-delay: 3.3s; }
.china-flag:nth-child(232) { top: 68%; right: 65%; animation-delay: 3.6s; }
.china-flag:nth-child(233) { top: 78%; right: 85%; animation-delay: 3.9s; }
.china-flag:nth-child(234) { top: 88%; right: 5%; animation-delay: 4.2s; }
.china-flag:nth-child(235) { top: 98%; right: 25%; animation-delay: 4.5s; }
.china-flag:nth-child(236) { top: 3%; left: 35%; animation-delay: 0.9s; }
.china-flag:nth-child(237) { top: 13%; left: 55%; animation-delay: 1.2s; }
.china-flag:nth-child(238) { top: 23%; left: 75%; animation-delay: 1.5s; }
.china-flag:nth-child(239) { top: 33%; left: 95%; animation-delay: 1.8s; }
.china-flag:nth-child(240) { top: 43%; left: 15%; animation-delay: 2.1s; }
.china-flag:nth-child(241) { top: 53%; left: 35%; animation-delay: 2.4s; }
.china-flag:nth-child(242) { top: 63%; left: 55%; animation-delay: 2.7s; }
.china-flag:nth-child(243) { top: 73%; left: 75%; animation-delay: 3.0s; }
.china-flag:nth-child(244) { top: 83%; left: 95%; animation-delay: 3.3s; }
.china-flag:nth-child(245) { top: 93%; left: 15%; animation-delay: 3.6s; }
.china-flag:nth-child(246) { top: 1%; right: 50%; animation-delay: 1.9s; }
.china-flag:nth-child(247) { top: 11%; right: 70%; animation-delay: 2.2s; }
.china-flag:nth-child(248) { top: 21%; right: 90%; animation-delay: 2.5s; }
.china-flag:nth-child(249) { top: 31%; right: 10%; animation-delay: 2.8s; }
.china-flag:nth-child(250) { top: 41%; right: 30%; animation-delay: 3.1s; }
.china-flag:nth-child(251) { top: 51%; right: 50%; animation-delay: 3.4s; }
.china-flag:nth-child(252) { top: 61%; right: 70%; animation-delay: 3.7s; }
.china-flag:nth-child(253) { top: 71%; right: 90%; animation-delay: 4.0s; }
.china-flag:nth-child(254) { top: 81%; right: 10%; animation-delay: 4.3s; }
.china-flag:nth-child(255) { top: 91%; right: 30%; animation-delay: 4.6s; }
.china-flag:nth-child(256) { top: 101%; right: 50%; animation-delay: 4.9s; }

/* Animations */
@keyframes chinaGlow {
    from { 
        box-shadow: 
            0 0 30px rgba(222, 41, 16, 0.6),
            0 0 60px rgba(255, 222, 0, 0.4),
            0 8px 25px rgba(0, 0, 0, 0.3);
    }
    to { 
        box-shadow: 
            0 0 40px rgba(222, 41, 16, 0.8),
            0 0 80px rgba(255, 222, 0, 0.6),
            0 15px 35px rgba(0, 0, 0, 0.4);
    }
}

@keyframes musicPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

@keyframes textGlow {
    from { text-shadow: 2px 2px 0px #000000; }
    to { text-shadow: 2px 2px 0px #000000, 0 0 20px #ffffff; }
}

@keyframes flagFloat {
    0%, 100% { 
        transform: translateY(0px) rotate(0deg) scale(1);
        opacity: 0.8;
    }
    25% { 
        transform: translateY(-20px) rotate(5deg) scale(1.1);
        opacity: 1;
    }
    50% { 
        transform: translateY(-10px) rotate(-3deg) scale(0.9);
        opacity: 0.9;
    }
    75% { 
        transform: translateY(-15px) rotate(2deg) scale(1.05);
        opacity: 1;
    }
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .china-music-btn {
        padding: 12px 25px;
        gap: 12px;
    }
    
    .music-icon {
        font-size: 20px;
    }
    
    .music-text {
        font-size: 12px;
    }
    
    .china-flag {
        width: 60px;
        height: 45px;
    }
}

@media (max-width: 480px) {
    .china-music-btn {
        padding: 10px 20px;
        gap: 10px;
    }
    
    .music-icon {
        font-size: 18px;
    }
    
    .music-text {
        font-size: 10px;
    }
    
    .china-flag {
        width: 50px;
        height: 38px;
    }
}

/* Mobile Responsive Effects */
@media (max-width: 768px) {
    .error-glitch {
        animation: errorGlitch 0.5s ease-in-out infinite;
    }
    
    .scanlines {
        background: repeating-linear-gradient(
            0deg,
            transparent,
            transparent 1px,
            rgba(0, 255, 0, 0.08) 1px,
            rgba(0, 255, 0, 0.08) 2px
        );
    }
    
    .crt-flicker {
        animation: crtFlicker 0.1s ease-in-out infinite;
    }
    
    .matrix-rain {
        animation: matrixRain 3s linear infinite;
    }
    
    .error-popup {
        padding: 15px;
        font-size: 14px;
    }
    
    .epilepsy-warning {
        top: 10px;
        right: 10px;
        padding: 10px;
        font-size: 10px;
    }
}

@media (max-width: 480px) {
    .error-glitch {
        animation: errorGlitch 0.8s ease-in-out infinite;
    }
    
    .scanlines {
        background: repeating-linear-gradient(
            0deg,
            transparent,
            transparent 1px,
            rgba(0, 255, 0, 0.06) 1px,
            rgba(0, 255, 0, 0.06) 2px
        );
    }
    
    .crt-flicker {
        animation: crtFlicker 0.15s ease-in-out infinite;
    }
    
    .matrix-rain {
        animation: matrixRain 4s linear infinite;
    }
    
    .error-popup {
        padding: 12px;
        font-size: 12px;
    }
    
    .epilepsy-warning {
        top: 5px;
        right: 5px;
        padding: 8px;
        font-size: 9px;
    }
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .main-title {
        font-size: 80px;
    }
    
    .subtitle-line-1 {
        font-size: 24px;
    }
    
    .subtitle-line-2 {
        font-size: 20px;
    }
    
    .top-ui-bar,
    .bottom-ui-bar {
        padding: 0 20px;
    }
    
    .bottom-ui-bar {
        height: 90px;
        padding: 0 20px;
    }
    
    .action-btn {
        padding: 16px 32px;
        font-size: 16px;
        min-width: 140px;
    }
    
    .folder-text {
        font-size: 20px;
    }
    
    .username {
        font-size: 18px;
    }
    
    .file-explorer {
        flex: none;
        justify-content: center;
    }
    
    .action-buttons {
        gap: 20px;
        justify-content: center;
    }
    
    .action-btn {
        padding: 14px 28px;
        font-size: 14px;
    }
    
    .chat-input {
        flex: none;
        justify-content: center;
    }
    
    .left-stats .stat,
    .right-stats .stat {
        font-size: 20px;
    }
    
    .killstreak {
        font-size: 16px;
    }
    
    .break {
        font-size: 14px;
    }
    
    .health-bar {
        width: 80px;
        height: 10px;
    }
    
    /* Mobile image sizing */
    .left-image {
        width: 160px;
        height: 120px;
        top: 8%;
        left: 8%;
    }
    
    .left-image-2 {
        width: 140px;
        height: 105px;
        top: 28%;
        left: 3%;
    }
    
    .left-image-3 {
        width: 120px;
        height: 90px;
        top: 48%;
        left: 12%;
    }
    
    .left-image-4 {
        width: 140px;
        height: 105px;
        top: 58%;
        left: 6%;
    }
    
    .left-image-5 {
        width: 120px;
        height: 90px;
        top: 18%;
        left: 60%;
    }
    
    .left-image-6 {
        width: 100px;
        height: 75px;
        top: 48%;
        left: 55%;
    }
    
    .center-image {
        width: 180px;
        height: 130px;
        top: 6%;
    }
    
    .center-image-2 {
        width: 140px;
        height: 100px;
        top: 65%;
    }
    
    .center-image-3 {
        width: 120px;
        height: 90px;
        top: 18%;
        left: -12%;
    }
    
    .center-image-4 {
        width: 100px;
        height: 70px;
        top: 55%;
        right: -10%;
    }
    
    .center-video-1 {
        width: 140px;
        height: 95px;
        top: 32%;
        left: -6%;
    }
    
    .center-video-2 {
        width: 120px;
        height: 80px;
        top: 42%;
        right: -8%;
    }
    
    .center-video-3 {
        width: 100px;
        height: 70px;
        top: 75%;
    }
    
    .right-image {
        width: 160px;
        height: 120px;
        top: 10%;
        right: 8%;
    }
    
    .right-image-2 {
        width: 140px;
        height: 105px;
        top: 30%;
        right: 3%;
    }
    
    .right-image-3 {
        width: 120px;
        height: 90px;
        top: 50%;
        right: 12%;
    }
    
    .right-image-4 {
        width: 140px;
        height: 105px;
        top: 60%;
        right: 6%;
    }
    
    .floating-image {
        width: 140px;
        height: 95px;
        top: 45%;
        left: 45%;
    }
}

@media (max-width: 480px) {
    .main-title {
        font-size: 60px;
    }
    
    .subtitle-line-1 {
        font-size: 20px;
    }
    
    .subtitle-line-2 {
        font-size: 18px;
    }
    
    .bottom-ui-bar {
        height: 80px;
        padding: 0 15px;
    }
    
    .action-btn {
        padding: 12px 24px;
        font-size: 12px;
        min-width: 120px;
    }
    
    .folder-text {
        font-size: 18px;
    }
    
    .username {
        font-size: 16px;
    }
    
    .file-explorer {
        flex: none;
        justify-content: center;
    }
    
    .action-buttons {
        gap: 15px;
    }
    
    .action-btn {
        padding: 10px 20px;
        font-size: 11px;
        min-width: 100px;
    }
    
    .chat-input {
        flex: none;
        justify-content: center;
    }
    
    .left-stats .stat,
    .right-stats .stat {
        font-size: 18px;
    }
    
    .killstreak {
        font-size: 14px;
    }
    
    .break {
        font-size: 12px;
    }
    
    .health-bar {
        width: 70px;
        height: 8px;
    }
    
    /* Extra small mobile image sizing */
    .left-image {
        width: 120px;
        height: 90px;
        top: 8%;
        left: 8%;
    }
    
    .left-image-2 {
        width: 100px;
        height: 75px;
        top: 28%;
        left: 3%;
    }
    
    .left-image-3 {
        width: 80px;
        height: 60px;
        top: 48%;
        left: 12%;
    }
    
    .left-image-4 {
        width: 100px;
        height: 75px;
        top: 58%;
        left: 6%;
    }
    
    .left-image-5 {
        width: 80px;
        height: 60px;
        top: 18%;
        left: 60%;
    }
    
    .left-image-6 {
        width: 70px;
        height: 50px;
        top: 48%;
        left: 55%;
    }
    
    .center-image {
        width: 140px;
        height: 100px;
        top: 6%;
    }
    
    .center-image-2 {
        width: 100px;
        height: 70px;
        top: 65%;
    }
    
    .center-image-3 {
        width: 80px;
        height: 60px;
        top: 18%;
        left: -10%;
    }
    
    .center-image-4 {
        width: 70px;
        height: 50px;
        top: 55%;
        right: -8%;
    }
    
    .center-video-1 {
        width: 100px;
        height: 70px;
        top: 32%;
        left: -5%;
    }
    
    .center-video-2 {
        width: 80px;
        height: 55px;
        top: 42%;
        right: -6%;
    }
    
    .center-video-3 {
        width: 70px;
        height: 50px;
        top: 75%;
    }
    
    .right-image {
        width: 120px;
        height: 90px;
        top: 10%;
        right: 8%;
    }
    
    .right-image-2 {
        width: 100px;
        height: 75px;
        top: 30%;
        right: 3%;
    }
    
    .right-image-3 {
        width: 80px;
        height: 60px;
        top: 50%;
        right: 12%;
    }
    
    .right-image-4 {
        width: 100px;
        height: 75px;
        top: 60%;
        right: 6%;
    }
    
    .floating-image {
        width: 100px;
        height: 70px;
        top: 45%;
        left: 45%;
    }
}

/* Shopping Cart in Bottom Bar */
.shopping-cart-container {
    display: flex;
    align-items: center;
    gap: 15px;
    background: linear-gradient(135deg, #ff6b35, #ff8c42);
    border: 3px solid #ff8c42;
    border-radius: 50px;
    padding: 15px 30px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 
        0 0 30px rgba(255, 107, 53, 0.6),
        0 0 60px rgba(255, 140, 66, 0.4),
        0 8px 25px rgba(0, 0, 0, 0.3);
    animation: cartGlow 3s ease-in-out infinite alternate;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    color: white;
    min-width: 160px;
    text-align: center;
    font-family: 'Press Start 2P', monospace;
    text-shadow: 2px 2px 0px #000000;
    white-space: nowrap;
}

.shopping-cart-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.6s;
}

.shopping-cart-container:hover::before {
    left: 100%;
}

.shopping-cart-container:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 
        0 0 40px rgba(255, 107, 53, 0.8),
        0 0 80px rgba(255, 140, 66, 0.6),
        0 15px 35px rgba(0, 0, 0, 0.4);
}

.shopping-cart-container:active {
    transform: translateY(-2px) scale(1.02);
}

.shopping-cart-icon {
    font-size: 24px;
    animation: cartPulse 2s ease-in-out infinite;
    filter: drop-shadow(0 0 10px rgba(255, 140, 66, 0.8));
}

.cart-text {
    color: #ffffff;
    font-size: 14px;
    font-weight: bold;
    text-shadow: 2px 2px 0px #000000;
    animation: cartTextGlow 2.5s ease-in-out infinite alternate;
    font-family: 'Press Start 2P', monospace;
}

/* Shopping Cart Animations */
@keyframes cartGlow {
    from { 
        box-shadow: 
            0 0 30px rgba(255, 107, 53, 0.6),
            0 0 60px rgba(255, 140, 66, 0.4),
            0 8px 25px rgba(0, 0, 0, 0.3);
    }
    to { 
        box-shadow: 
            0 0 40px rgba(255, 107, 53, 0.8),
            0 0 80px rgba(255, 140, 66, 0.6),
            0 15px 35px rgba(0, 0, 0, 0.4);
    }
}

@keyframes cartPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

@keyframes cartTextGlow {
    from { text-shadow: 2px 2px 0px #000000; }
    to { text-shadow: 2px 2px 0px #000000, 0 0 20px #ff8c42; }
}

/* Mobile Responsive for Shopping Cart */
@media (max-width: 768px) {
    .shopping-cart-container {
        padding: 12px 25px;
        gap: 12px;
        min-width: 140px;
    }
    
    .shopping-cart-icon {
        font-size: 20px;
    }
    
    .cart-text {
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .shopping-cart-container {
        padding: 10px 20px;
        gap: 10px;
        min-width: 120px;
    }
    
    .shopping-cart-icon {
        font-size: 18px;
    }
    
    .cart-text {
        font-size: 10px;
    }
}