/* Ensure smooth scrolling and base styles */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Background image styling */
.main-background {
    background-image: url('https://ik.imagekit.io/tuo/image/bg.jpeg?updatedAt=1748019386467');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Text highlight gradient for usernames */
.text-highlight-gradient {
    /* Updated color to #ff7300 with its own transparency gradient */
    background-image: linear-gradient(90deg, #ff7300, rgba(255, 115, 0, 0.7));
    -webkit-background-clip: text;
    background-clip: text;
    color: #ff7300;
    display: inline-block; 
    padding-bottom: 0.1em; 
}

/* Barrage item base */
.barrage-item {
    transition: transform 0.2s ease-out, opacity 0.2s ease-out;
}

.barrage-card {
    transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out, height 0.3s ease-in-out;
}

/* Styles for click effects (Thumb and Fireworks) */
.like-icon {
    font-size: 2.8rem; 
    color: #ffcc00; 
    text-shadow: 0 0 10px rgba(255, 204, 0, 0.7);
    animation: like-pop 0.8s ease-out forwards;
    position: absolute;
    left: 50%;
    top: 50%;
    /* transform: translate(-50%, -50%) is applied to the container in JS for thumb effect */
}

@keyframes like-pop {
    0% {
        transform: translate(-50%, -50%) scale(0.3) translateY(10px); /* Adjusted for icon centering */
        opacity: 0;
    }
    30% {
        transform: translate(-50%, -50%) scale(1.3) translateY(-5px); /* Adjusted */
        opacity: 1;
    }
    60% {
        transform: translate(-50%, -50%) scale(0.9) translateY(0px); /* Adjusted */
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(0.8) translateY(-10px); /* Adjusted */
        opacity: 0;
    }
}

.firework-particle {
    position: absolute; 
    width: 6px; 
    height: 6px;
    border-radius: 50%;
    animation: firework-burst 1.2s ease-out forwards;
}

@keyframes firework-burst {
    0% {
        transform: translate(0, 0) scale(1.2); 
        opacity: 1;
    }
    100% {
        transform: translate(var(--firework-x), var(--firework-y)) scale(0);
        opacity: 0;
    }
}

/* Ensuring content text within barrage cards is styled correctly */
.content-text {
    word-break: break-all; 
}

/* Continuous background firework container - if needed for overall positioning or z-index */
#continuous-fireworks-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5; /* Below barrages but above background */
}