@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

body, html {
    margin: 0;
    padding: 0;
    height: 100vh;
    background: #000;
    color: #121212;
    font-family: system-ui, sans-serif;
    overflow: hidden;
}

.background {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, #1a1a2e, #16213e, #1a1a2e);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
    z-index: 0;
}

.aurora {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.5;
    filter: blur(100px);
    z-index: 1;
}

.aurora::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 50%, 
        rgba(76, 0, 255, 0.1),
        rgba(0, 183, 255, 0.1),
        rgba(0, 255, 200, 0.1));
    animation: aurora 20s ease infinite;
}

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

@keyframes aurora {
    0% { transform: rotate(0deg) scale(1) }
    50% { transform: rotate(180deg) scale(1.5) }
    100% { transform: rotate(360deg) scale(1) }
}

.container {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-active .container {
    pointer-events: none;
}

.container.fullscreen {
    max-width: 100%;
    padding: 40px;
}

.player-wrapper {
    background: rgba(85, 85, 109, 0.6);
    backdrop-filter: blur(10px);
    padding: 30px;
    border-radius: 16px;
    width: 100%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.video-active .player-wrapper {
    background: none;
    backdrop-filter: initial;
    box-shadow: initial;
}

.file-inputs {
    margin-bottom: 20px;
    transition: opacity 0.3s ease;
}

.video-active .file-inputs {
    pointer-events: initial;
}

.file-inputs.hidden {
    display: none;
}

#audioPlayer {
    width: 100%;
    margin-bottom: 20px;
    border-radius: 8px;
    flex-grow: 1; /* Make the audio player grow to fill available space */
}

#audioPlayer.active {
    display: block;
}

#videoPlayer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 1;
    background: #000;
    display: none;
}

#videoPlayer.active {
    display: block;
}

.subtitle-carousel {
    display: flex;
    align-items: center; /* Vertically align child elements */
    justify-content: center; /* Horizontally align child elements */
    height: 100px; /* Ensure enough height for alignment */
    position: relative;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    border-radius: 8px;
}

.video-active .subtitle-carousel {
    height: 100px;
    position: absolute;
    bottom: 100px;
    left: 0;
    right: 0;
    margin: auto;
    pointer-events: initial;
}

.subtitle-line {
    position: absolute;
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center; /* Vertically align content */
    justify-content: center; /* Horizontally align content */
    text-align: center;
    transition: all 0.5s ease-out;
    padding: 0 20px;
    box-sizing: border-box;
    line-height: 1.4;
    color: rgba(255, 255, 255, 1);
    font-size: 1.5em;
    transform-origin: center center;
    font-family: "Inter", sans-serif;
    font-weight: 600;
}

.video-active .subtitle-line {
    height: 20%;
}

/* New styles for speaker labels and formatting */
.speaker-label {
    /* color: #64B5F6; */
    font-weight: 500;
    margin-right: 8px;
}

.subtitle-line u {
    /* color: #FFC107; */
    text-decoration: none;
    /* font-weight: 600; */
}

/* Active line (middle) */
.subtitle-line.active {
    color: #fff;
    scale: 1;
    filter: blur(0px);
    font-weight: 500;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.subtitle-line.active .speaker-label {
    color: #90CAF9;
}

.subtitle-line.active u {
    color: #FFD54F;
}

/* Adjacent lines (one away from middle) */
.subtitle-line.adjacent {
    color: rgba(255, 255, 255, 0.5);
    scale: 0.65;
    filter: blur(1px);
    font-weight: normal;
}

.video-active .subtitle-line.adjacent {
    color: rgba(255, 255, 255, 0.35);
}

/* Outer lines (two away from middle) */
.subtitle-line.outer {
    color: rgba(255, 255, 255, 0.25);
    scale: 0.5;
    filter: blur(2px);
    font-weight: normal;
    opacity: 0.8;
}

.video-active .subtitle-line.outer {
    color: rgba(255, 255, 255, 0.15);
}

.subtitle-line.hidden-top {
    transform: translateY(-60px);
    opacity: 0;
}

.subtitle-line.hidden-bottom {
    transform: translateY(300px);
    opacity: 0;
}

label {
    display: block;
    margin-bottom: 10px;
    font-weight: 500;
    color: #fff;
}

input[type="file"] {
    background: rgba(255, 255, 255, 0.1);
    padding: 10px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    width: 100%;
    margin-bottom: 15px;
}

input[type="file"]::-webkit-file-upload-button {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    color: white;
    margin-right: 10px;
    cursor: pointer;
}

.speed-control {
    position: absolute;
    top: -20px;
    right: 20px;
    background: rgba(25, 25, 35, 0.8);
    backdrop-filter: blur(10px);
    padding: 8px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.video-active .speed-control {
    top: initial;
    bottom: 80px;
    right: 0px;
    pointer-events: initial;
}

.player-wrapper:hover .speed-control {
    opacity: 1;
}

.speed-button, .fullscreen-button {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
    transition: all 0.2s ease;
}

.speed-button:hover, .fullscreen-button:hover {
    background: rgba(255, 255, 255, 0.2);
}

.speed-button.active {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.4);
}

.controls-hint {
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.8em;
    color: rgba(255, 255, 255, 0.6);
    white-space: nowrap;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.player-wrapper:hover .controls-hint {
    opacity: 1;
}


.audio-top {
    display: flex;
    align-items: center; /* Center items vertically */
    margin-bottom: 20px;
    width: 100%; /* Ensure it spans the full width of its container */
}

.audio-top > img.audio-image {
    margin-right: 20px; /* Add spacing between the image and the audio player container */
    max-width: 15%;
}

.audio-top > .audio-player {
    flex-grow: 1; /* Make the audio player container grow to fill available space */
}

/* Style the audio element itself if needed */
.audio-top > .audio-player > audio {
    width: 100%; /* Make the audio controls span the width of its container */
}

/* Optional: Style the header within the audio player */
.audio-top > .audio-player > header {
    margin-bottom: 10px; /* Add some space below the header */
}

header h2.albumTitle {
    margin-bottom: 5px;
    text-align: left;
    color: white;
    font-weight: 800;
}

header h4.trackNum {
    margin-bottom: 10px;
    text-align: left;
    font-weight: 500;
    font-style: italic;
    color: white;
}

.return-to-index {
    position: absolute;
    left: 50%;
    top: 20px; /* Adjust as needed */
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    text-align: center;
    margin: 0;
    pointer-events: auto; /* Ensure the button is clickable */
    z-index: 10; /* Make sure it's above overlays */
}

.return-to-index .btn {
    background-color: transparent; /* Transparent background */
    color: white; /* White text */
    padding: 10px 35px;
    font-weight: 700;
    border-radius: 5px;
    border-color: #ffffff15;
    border-width: 3px;
    text-decoration: none;
    font-size: 16px;
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition */
}

.return-to-index .btn:hover,
.return-to-index .btn:focus {
    background-color: rgba(255, 255, 255, 0.2); /* White background with alpha */
    text-decoration: none; /* Remove underline */
    color: white;
}

.return-to-index .btn:active {
    background-color: rgba(255, 255, 255, 0.3); /* Slightly darker on click */
    color: white;
}

.track-navigation {
    display: flex;
    justify-content: space-between;
    margin-top: 25px; /* Add some spacing from the subtitle carousel */
}

.track-navigation .btn {
    width: 175px; /* Optional: Set a consistent width for the buttons */
    
    background-color: transparent; /* Transparent background */
    color: white; /* White text */
    padding: 10px 15px;
    border-radius: 5px;
    border-color: #fff;
    text-decoration: none;
    font-size: 16px;
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition */
}

.track-navigation .btn:hover,
.track-navigation .btn:focus {
    background-color: rgba(255, 255, 255, 0.2); /* White background with alpha */
    text-decoration: none; /* Remove underline */
    color: white;
    border-color: #fff;
}

@media screen and (max-width: 768px) {
    .return-to-index {
        /* display: none; Hide the button on screens smaller than 768px */
        position: relative;
        margin-bottom: 1em;
    }
}

/* Rotation animation */
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.rotate {
    animation: rotate 10s linear infinite;
    animation-play-state: paused; /* Start with the animation paused */
}

/* Responsive design for phones in portrait mode */
@media (max-width: 768px) {
    .player-wrapper {
        /* margin-top: 20px; Add adjustable margin at the top */
        /* margin-bottom: 10px; Optional: Add margin at the bottom */
        align-self: flex-start; /* Position the element at the top */
    }

    .audio-top {
        display: flex;
        flex-direction: column; /* Stack elements vertically */
        align-items: center; /* Center elements horizontally */
        margin-bottom: 20px;
        width: 100%; /* Ensure it spans the full width of its container */
    }

    .audio-top > img.audio-image {
        margin: 0 auto 10px; /* Center the image and add spacing below */
        max-width: 100%; /* Make the image the same width as the container */
        width: 65%; /* Ensure it matches the width of the audio player */
        height: auto; /* Maintain aspect ratio */
    }

    .audio-top > .audio-player {
        width: 100%; /* Ensure the audio player spans the full width */
        text-align: center; /* Center-align the content */
    }

    header h2.albumTitle {
        margin: 10px 0 5px; /* Add spacing above and below */
        text-align: center; /* Center-align the text */
        color: white;
        font-size: 1.5em; /* Adjust font size for smaller screens */
        font-weight: 800;
    }

    header h4.trackNum {
        margin: 5px 0 15px; /* Add spacing above and below */
        text-align: center; /* Center-align the text */
        font-weight: 500;
        font-size: 1.2em; /* Adjust font size for smaller screens */
        font-style: italic;
        color: white;
    }

    .subtitle-carousel {
        position: relative;
        bottom: 0; /* Ensure it stays at the bottom */
        width: 100%; /* Span the full width of the container */
        margin-top: 20px; /* Add spacing above the subtitle container */
    }
}