:root {
    --bg: #050505;
    --card: #121212;
    --accent: #ffffff;
    --star-dim: #333;
    --star-bright: #ffd700;
}

body {
    background-color: var(--bg);
    color: var(--accent);
    font-family: 'Inter', sans-serif;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.screen {
    display: none;
    opacity: 0;
    transition: 0.4s;
    text-align: center;
}

/* 3. The Page Wrapper */
/* We make the main screen container transparent so the canvas shows through the gaps */
.screen.active {
    display: block;
    opacity: 1;
    background: transparent !important;
}

.navigation-layout {
    display: flex;
    align-items: center;
    gap: 40px;
}

h1, h2, p, span, b {
    cursor: default !important;
}

/* 2. Keep the 'hand' pointer ONLY for actual clickable buttons and stars */
.action-btn, .nav-btn, .star {
    cursor: pointer !important;
}

/* 3. Ensure the rainbow hover doesn't switch it to anything else */
.archive-rainbow:hover, .rainbow-text:hover {
    cursor: default !important;
}

.card {
    background: var(--card);
    padding: 3rem;
    border-radius: 15px;
    width: 380px;
    border: 1px solid #222;
}

.wide-card {
    width: 600px;
    max-height: 80vh;
    overflow-y: auto;
}

/* The Navigation Buttons */
.nav-btn {
    background: #1a1a1a;
    color: white;
    border: 1px solid #333;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    transition: 0.3s;
}

.nav-btn:hover:not(:disabled) {
    background: #333;
    border-color: #555;
}

.nav-btn:disabled {
    opacity: 0;
    cursor: default;
}

/* The Star Buttons */
.star-rating {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 25px 0;
}

.star {
    background: none;
    border: none;
    color: var(--star-dim);
    font-size: 2.5rem;
    cursor: pointer;
    transition: 0.2s;
}

.star.filled {
    color: var(--star-bright);
}

.action-btn {
    position: relative;
    background: white; /* Default state */
    color: black; /* Text color on white */
    border: none;
    padding: 15px 40px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    font-size: 1rem;
    letter-spacing: 2px;
    transition: background 0.5s ease, color 0.5s ease, transform 0.2s;
    overflow: hidden;
    z-index: 1;
}

.action-btn:hover {
    background: #ff0000; /* Default state */
    color: white; /* Text color on white */
    transition: color 0.5s ease;
}

.hidden {
    display: none;
}

audio {
    width: 100%;
    filter: invert(1);
    margin-bottom: 10px;
}

.progress-container {
    position: fixed;
    top: 0;
    width: 100%;
    height: calc(100%/60);
    min-height: 5px;
    max-height: 30px;
    background: #111;
}

.progress-bar {
    height: 100%;
    background: white;
    width: 0%;
    transition: 0.4s;
}

/* Container to hold arrows and card horizontally */
.navigation-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
}

.nav-arrow {
    background: transparent;
    color: rgba(255, 255, 255, 0.3);
    font-size: 3rem;
    padding: 20px;
    border: none;
    cursor: pointer;
    transition: 0.3s;
}

.nav-arrow:hover {
    color: var(--accent);
    transform: scale(1.1);
}

.nav-arrow:disabled {
    opacity: 0; /* Hide back button on first song */
    cursor: default;
}

.skip-hint {
    font-size: 0.7rem;
    color: #444;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 15px;
}

/* Make the audio player slightly cleaner */
audio {
    height: 35px;
    border-radius: 5px;
}

#song-title {
    text-transform: uppercase;
    letter-spacing: 5px;
    font-weight: 300;
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.9);
}

@keyframes rainbow-flow {
    0% {
        background-position: 0% center;
    }
    100% {
        background-position: 200% center;
    }
}

.archive-rainbow {
    background: linear-gradient(
            to right,
            #ff0000, #ff8800, #ffff00, #00ff00, #00ffff, #0000ff, #cc00ff, #ff0000
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: white !important; /* Starts white */
    transition: color 0.5s ease;
    display: inline-block;
}

.archive-rainbow:hover {
    color: transparent !important; /* Shows the rainbow background on hover */
    animation: rainbow-flow 3s linear infinite;
    cursor: pointer;
}


/* 1. Spacing and Row Hover */
.result-row-stars {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 15px; /* Added more vertical 'breathing room' */
    border-bottom: 1px solid #111;
    transition: all 0.3s ease;
    border: 1px solid transparent; /* Prevents jumping on hover */
    margin: 4px 0;
    border-radius: 4px;
}

/* 1. Spacing and Row Hover */
.result-row-stars {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 15px; /* Added more vertical 'breathing room' */
    border-bottom: 1px solid #111;
    transition: all 0.3s ease;
    border: 1px solid transparent; /* Prevents jumping on hover */
    margin: 4px 0;
    border-radius: 4px;
}

/* 2. New Half-Star Logic */
.res-star {
    font-size: 1.2rem;
    margin-right: 3px;
    color: #222; /* Empty color */
    display: inline-block;
}

/* Base class for filled stars */
.filled {
    color: inherit;
}

/* The Gradient Half-Star */
.res-star.half {
    background: linear-gradient(90deg, currentColor 50%, #222 50%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.white-stars {
    color: #ffffff;
}

.red-stars {
    color: #ff0000;
    text-shadow: 0 0 5px rgba(255, 0, 0, 0.3);
}

/* 3. Header Alignment */
.result-header {
    display: flex;
    justify-content: space-between;
    padding: 10px 15px; /* Match row padding */
    border-bottom: 2px solid #222;
    margin-bottom: 15px;
}

/* Stack the two star lines vertically within the row */
.row-data {
    display: flex;
    flex-direction: column;
    gap: 8px; /* Space between User stars and Global stars */
    align-items: flex-end;
}

/* Align stars and label horizontally */
.stars-line {
    display: flex;
    align-items: center;
    gap: 15px;
}

.inline-label {
    font-size: 0.55rem;
    letter-spacing: 1.5px;
    width: 80px; /* Fixed width so they align perfectly */
    text-align: left;
    font-weight: bold;
    opacity: 0.7;
}

.white-text {
    color: #ffffff;
}

.red-text {
    color: #ff0000;
}

/* Keep the main header simple now */
.result-header {
    border-bottom: 1px solid #222;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.song-card {
    border-color: #ffffff !important; /* Sharp Red Alert border */
}

.song-card, .result-row-stars {
    border: 1px solid transparent; /* Keeps the box from 'jumping' when the border appears */
    transition: all 0.3s ease;
    border-radius: 8px; /* Optional: matches the modern look */
}

/* The Hover State */
.song-card:hover, .result-row-stars:hover {
    border-color: #ff0000 !important; /* Sharp Red Alert border */
    background: rgba(255, 0, 0, 0.03); /* Very faint red tint inside */
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.2); /* Subtle outer glow */
    transform: scale(1.01); /* Tiny 'pop' forward */
}

.landing-page h1 {
    font-size: 4.5rem; /* Large, cinematic size */
    margin-bottom: 10px;
    letter-spacing: 8px;
    text-transform: uppercase;
}

/* Make the Subtitle/Description clearer */
.landing-page p {
    font-size: 1.2rem;
    color: #888;
    letter-spacing: 2px;
    max-width: 600px;
    margin: 0 auto;
}

/* Push the Start Button further down */
.landing-page .action-btn {
    margin-top: 80px; /* Large gap to separate it from the text */
    padding: 20px 60px; /* Slightly larger button for the larger text */
    font-size: 1.1rem;
    letter-spacing: 4px;
}

.result-row-stars:hover {
    border-color: #ff0000 !important;
    background: rgba(255, 0, 0, 0.08); /* Slightly brighter when playing */
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.3);
    cursor: default;
    /* This makes the row look like it's 'broadcasting' */
    animation: pulse-border 2s infinite;
}

@keyframes pulse-border {
    0% {
        border-color: #ff0000;
    }
    50% {
        border-color: #aa0000;
    }
    100% {
        border-color: #ff0000;
    }
}

#drawing-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-color: #000; /* The actual black of your site */
    display: block;
}


/* Ensure your main container doesn't have a black background,
   otherwise it will hide the canvas behind it! */
.container, .screen {
    background: transparent !important;
}

body {
    background-color: #000;
    margin: 0;
    overflow: hidden; /* Prevents scrollbars from messing up coordinates */
}

.card,
.wide-card,
.result-row-stars,
.song-card,
.nav-btn,
.star-rating {
    position: relative;
    z-index: 10; /* Much higher than canvas */
    background-color: #000 !important; /* Forces solid black to mask the line */
}


/* 4. Fix for the Cards */
/* Since your .card has a different color (var(--card)), let's make it solid */
.card {
    background: #000 !important; /* Standardize to black for the masking effect */
    border: 1px solid #222;
}

/* 5. Results Page Specifics */
.result-row-stars {
    background-color: #000 !important;
}

.archive-footer {
    position: fixed;
    bottom: 20px; /* 20px from the bottom */
    width: 100%;
    text-align: center;
    color: rgba(255, 255, 255, 0.4); /* Subtle white (40% opacity) */
    background: rgba(0, 0, 0, 0.2); /* Slight tint so text stays readable over bars */
    font-size: 0.6rem; /* Very small */
    letter-spacing: 2px;
    text-transform: uppercase;
    font-family: 'Inter', monospace;
    z-index: 21; /* Higher than the canvas and UI cards */
    pointer-events: none; /* So it doesn't block drawing or clicking */
}

#visualizer-canvas {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 150px;
    z-index: 1; /* Sits behind UI */
    pointer-events: none; /* Clicks pass through to stars */
    opacity: 0.7;
}

/* 2. The Screens */
.screen {
    position: relative;
    /*z-index: 10; !* Above the canvas *!*/
    background: transparent !important;
}

/* 3. The Card (Ensure it's solid so it masks the bars) */
.card {
    background: #000 !important; /* Use solid black to block visualizer bars */
    position: relative;
    z-index: 20; /* Highest layer for clicking */
    pointer-events: auto;
}

/* 4. The Stars (Make sure they are clickable) */
.star {
    cursor: pointer !important;
    pointer-events: auto !important;
    position: relative;
    z-index: 25;
}

#visualizer-canvas {
    position: fixed;
    bottom: 50px; /* Sits slightly above the footer */
    left: 0;
    width: 100%;
    height: calc(100% - 100px);
    z-index: 1;
    pointer-events: none;

    /* Optional: Subtle grid lines like a medical monitor */
    background-image: linear-gradient(rgba(0, 255, 65, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 255, 65, 0.05) 1px, transparent 1px);
    background-size: 30px 30px;
}

.archive-footer {
    background: #000; /* Ensure footer masks the bottom of the grid */
    padding: 10px 0;
}

#autoplay-control {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.6);
    padding: 10px 15px;
    border: 1px solid #333;
    color: #ff0000; /* Red Alert Red */
    font-family: monospace;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
}

.icon {
    font-size: 1.2rem;
}

#autoplay-control {
    position: fixed;
    top: 25px;
    right: 25px;
    z-index: 1000;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 15px;

    /* MATCHING YOUR CARD STYLE */
    background-color: rgba(0, 0, 0, 0.8); /* Dark semi-transparent */
    border: 1px solid rgba(255, 255, 255, 0.2); /* Subtle white outline */
    border-radius: 12px; /* Matches the roundedness of your song cards */
    padding: 8px 15px;

    font-family: 'Monaco', 'Courier New', monospace;
    color: white;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.speaker-circle {
    width: 40px;
    height: 40px;
    border: 2px solid white; /* White outline */
    border-radius: 50%; /* Circular box */
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    transition: all 0.3s ease;
}

#speaker-svg {
    width: 20px;
    height: 20px;
    color: white; /* Outline color */
}

/* Tool Label Styling */

.tool-label {
    font-size: 0.75rem;
    letter-spacing: 2px;
    white-space: nowrap;
    opacity: 0.9;
}

#autoplay-status {
    font-weight: bold;
    color: #00ff41; /* Using a "System Green" for ON */
}

#autoplay-control:hover {
    border-color: #ff0000;
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.3);
    transform: scale(1.01); /* Tiny 'pop' forward */
}

/* MUTED STATE */
#autoplay-control.muted {
    border-color: rgba(255, 255, 255, 0.1);
}

/* MUTED STATE */
#autoplay-control.muted:hover {
    border-color: #ff0000;
}

#autoplay-control.muted #autoplay-status {
    color: #ff0000; /* Red for OFF */
}

/* Hover Effect */
#autoplay-control:hover .speaker-circle {
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.1);
}

/* Muted State Styles */
#autoplay-control.muted .speaker-circle {
    opacity: 0.4;
    border-style: dashed; /* Optional: adds a "disabled" tactical feel */
}

#autoplay-control.muted .tool-label {
    opacity: 0.4;
}