:root {
    --carousel-item-visual-height: 50px; /* The visible height of the item box */
    --carousel-item-gap: 10px;         /* The space below each item */
    --carousel-visible-items: 15;
    --carousel-gradient-start: #480048; /* Dark Purple */
    --carousel-gradient-end: #008080;   /* Medium Blue-Green (Teal) */
    --carousel-text-bright: #FFFF00;   /* Bright Yellow */
    --carousel-text-selected: #AFFFF0; /* Light Yellow */
    --carousel-text-outline: #000000;  /* Black */
    --carousel-curve-depth: 40px; /* The depth of the curve */
    --accent-color: #00EDB5;   /* Teal accent */

}

.carousel-track {
    position: relative;
    width: 100%;
    height: 100%;
}

.player-item {
    position: absolute;
    width: calc(100% - 30px); 
    height: var(--carousel-item-visual-height);
    
    /* Keep border, radius, box-shadow (glow) on the outer item */
    border-left: 1px solid #555;
    border-top: 1px solid #555;
    border-bottom: 1px solid #555;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 5px;
    box-sizing: border-box;
    
    left: calc(var(--carousel-curve-depth) + var(--carousel-item-gap));
    transition: border-color 0.3s ease-out, box-shadow 0.3s ease-out; /* Transition for selected state */
}

.player-item-content {
    width: 100%;
    height: 100%;
    display: flex; /* For centering text if needed, or use line-height */
    align-items: center;
    justify-content: center; /* Or text-align: center if not using flex for centering */
    text-align: center; /* Ensure text is centered */

    color: var(--carousel-text-bright, #FFFF00);
    font-weight: 900;
    text-shadow: 
        -1px -1px 0 var(--carousel-text-outline, #000),  
        1px -1px 0 var(--carousel-text-outline, #000),
        -1px  1px 0 var(--carousel-text-outline, #000),
        1px  1px 0 var(--carousel-text-outline, #000),
        0px  2px 3px rgba(0,0,0,0.5);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    
    background-color: rgba(0, 0, 0, 0.3); /* Fallback transparent background */
    background-image: linear-gradient(
        to right, 
        rgba(72, 0, 72, 0.8), /* Dark Purple with transparency */
        rgba(0, 128, 128, 0.8) /* Medium Blue-Green with transparency */
    );
    
    font-size: 20px;
    overflow: hidden; /* Handles text-overflow for the content itself */
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 10px; /* Padding for the text content */
    box-sizing: border-box; /* Important for padding */
    border-top-left-radius: 20px;
    border-bottom-left-radius: 5px;

    /* Mask applied to the inner content div */
    -webkit-mask-image: linear-gradient(to right, black 80%, transparent 100%);
    mask-image: linear-gradient(to right, black 80%, transparent 100%);
}


.player-item.selected {
    border-color: var(--accent-color, #00ADB5);
    box-shadow: 0 0 4px 6px var(--accent-color, #00ADB5); /* Enhanced glow */
    border-width: 2px; /* Make border slightly thicker or more prominent */
}

.player-item.selected .player-item-content {
    background-image: linear-gradient(
        to right, 
        rgba(140, 25, 130, 0.90), /* Brighter Purple with more opacity */
        rgba(19, 191, 191, 0.90) /* Brighter Blue-Green with more opacity */
    );
    color: var(--carousel-text-selected, #FFFFE0);
}


.carousel-container {
    position: fixed;
    /* Fixed on the right */
    right: -20px;
    top: 2px;
    width: 320px;
    height: 450px; /* actually set in js */
    overflow: hidden;
    user-select: none;
    /* Prevent text selection during scroll */
}

.carousel-track {
    position: relative;
    width: 100%;
    height: 100%;
}