@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Monoton&display=swap');

body {
    font-family: 'Poppins', sans-serif;
    background: #0F172A; /* slate-900 */
    color: #f8fafc; /* slate-50 */
    min-height: 100vh;
    overflow-x: hidden; /* Prevent horizontal scroll */
}

.neon-text {
    font-family: 'Monoton', cursive;
    color: #10B981; /* teal-500 */
    text-shadow: 0 0 5px #10B981, 0 0 10px #10B981, 0 0 20px #10B981;
}

.pulse-button {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); /* teal-500 */
    }
    70% {
        transform: scale(1.05);
        box-shadow: 0 0 0 15px rgba(16, 185, 129, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
}

.sound-wave {
    display: flex;
    justify-content: center;
    align-items: center; /* Changed from flex-end */
    height: 60px;
}

.sound-wave span {
    display: block;
    width: 5px;
    margin: 0 3px;
    background: #10B981; /* teal-500 */
    animation: wave 1.5s infinite ease-in-out;
    border-radius: 2px; /* Added slight rounding */
}

@keyframes wave {
    0%, 100% {
        height: 5px;
    }
    50% {
        height: 40px;
    }
}

.sound-wave span:nth-child(2) { animation-delay: 0.1s; }
.sound-wave span:nth-child(3) { animation-delay: 0.2s; }
.sound-wave span:nth-child(4) { animation-delay: 0.3s; }
.sound-wave span:nth-child(5) { animation-delay: 0.4s; }
.sound-wave span:nth-child(6) { animation-delay: 0.5s; }
.sound-wave span:nth-child(7) { animation-delay: 0.6s; }
.sound-wave span:nth-child(8) { animation-delay: 0.7s; }

.slider {
    -webkit-appearance: none;
    appearance: none; /* Added standard property */
    width: 100%;
    height: 15px;
    border-radius: 10px;
    background: linear-gradient(to right, #3B82F6, #8B5CF6, #EC4899); /* blue-500, purple-500, pink-500 */
    outline: none;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #F8FAFC; /* slate-50 */
    cursor: pointer;
    border: 2px solid #10B981; /* teal-500 */
}

.slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #F8FAFC; /* slate-50 */
    cursor: pointer;
    border: 2px solid #10B981; /* teal-500 */
}

/* --- Selection Styles --- */
.selectable { /* Primarily for image-based selections */
     transition: all 0.3s ease;
     cursor: pointer;
     position: relative;
     overflow: hidden;
     border: 2px solid #334155; /* slate-700, Default border */
     border-radius: 0.5rem; /* Added rounding */
}

.selectable:hover {
    transform: scale(1.03);
    border-color: #64748B; /* slate-500, Hover border */
}

.selectable.selected {
    border-color: #10B981; /* teal-500, Selected border */
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.6);
    transform: scale(1.02); /* Slightly smaller scale than hover */
}

.selectable-option { /* For non-image options, like venue/time */
    background: #1E293B; /* slate-800 */
     transition: all 0.3s ease;
     cursor: pointer;
     border: 1px solid #334155; /* slate-700 */
     border-radius: 0.5rem; /* Added rounding */
     padding: 1rem; /* Ensure padding */
}
.selectable-option:hover {
     background: #334155; /* slate-700 */
     border-color: #64748B; /* slate-500 */
}
.selectable-option.selected {
     background: #334155; /* slate-700 */
     border-color: #10B981; /* teal-500 */
     box-shadow: 0 0 10px rgba(16, 185, 129, 0.4);
}

.abstract-shape { /* For shape selection */
    background: #1E293B; /* slate-800 */
    transition: all 0.3s ease;
    cursor: pointer;
    padding: 1rem; /* Adjusted padding */
    border: 2px solid #334155; /* slate-700 */
    border-radius: 0.5rem; /* Use consistent rounding */
}

.abstract-shape:hover {
    transform: scale(1.05);
    border-color: #64748B; /* slate-500 */
    background: #334155; /* slate-700 */
}
.abstract-shape.selected {
    transform: scale(1.05); /* Keep scale on select */
    filter: drop-shadow(0 0 8px rgba(16, 185, 129, 0.7)); /* Adjusted drop shadow */
    border-color: #10B981; /* teal-500 */
    background: #334155; /* slate-700 */
}
.mood-board p {
    font-size: 1rem; /* Slightly larger text, default is usually 1rem but explicitly setting */
    padding: 0.75rem 0.5rem; /* Adjust padding if needed */
}
/* --- End Selection Styles --- */
.question-item h3 {
    padding-bottom: 0.5rem; /* Add some space below the question text */
}
.scene-image {
    /* **** CHANGE height **** */
    height: 260px; /* Increased height significantly */
    object-fit: cover;
    display: block; /* Prevent extra space below image */
}

.section {
    display: none;
    animation: fadeIn 0.5s ease-in-out forwards; /* Added animation */
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.section.active {
    display: block;
}

/* Results Card General Styles */
#results .results-card-bg {
    background-color: #161b22; /* Slightly darker than body */
    border: 1px solid rgba(16, 185, 129, 0.5); /* teal border */
    border-radius: 0.75rem; /* Slightly larger rounding */
    padding: 1.5rem 2rem; /* Default padding */
}
@media (min-width: 768px) {
     #results .results-card-bg {
         padding: 2.5rem; /* More padding on larger screens */
     }
}

/* Primary Genre Card specific styling */
#primaryGenreCard {
    background-color: transparent !important; /* Override base */
    border: 2px solid #10b981; /* Green border */
    position: relative; /* Needed for avatar positioning */
    overflow: visible; /* Allow avatar to peek out */
    padding: 1.5rem;
    border-radius: 0.5rem; /* Consistent rounding */
}
#primaryGenreCard > div:first-of-type { /* Target inner flex container */
    padding-top: 10px; /* Reduced top padding as avatar is smaller/offset */
}
#primaryGenreIconContainer {
    background-color: #334155; /* slate-700 */
    border-radius: 50%;
}


/* Secondary Genre Card */
#secondaryGenresContainer .genre-card {
    background: #1E293B; /* slate-800 */
    border: 1px solid #334155; /* slate-700 */
    border-radius: 0.5rem; /* Consistent rounding */
    transition: all 0.3s ease;
    padding: 1.25rem; /* Adjust padding */
}
#secondaryGenresContainer .genre-card:hover {
    transform: translateY(-3px);
    border-color: #10B981; /* teal-500 */
    box-shadow: 0 5px 15px rgba(16, 185, 129, 0.15);
    background: #334155; /* slate-700 */
}
.clickable-genre-card { /* Applied to primary and secondary cards */
    background: #1E293B; /* slate-800 */
    border: 2px solid #334155; /* slate-700 - Default border */
    border-radius: 0.5rem; /* Consistent rounding */
    transition: all 0.3s ease;
    position: relative; /* Important for avatar positioning */
    cursor: pointer;
    .clickable-genre-card:hover {
        transform: translateY(-3px);
        border-color: #64748B; /* slate-500 - Hover border */
        box-shadow: 0 5px 15px rgba(16, 185, 129, 0.1); /* Subtle hover shadow */
        background: #334155; /* slate-700 on hover */
    }
    
    .clickable-genre-card.selected { /* Style for the currently selected card */
        border-color: #10B981; /* teal-500 - Selected border */
        background: #334155; /* Slightly darker background when selected maybe? Or keep slate-700 */
        box-shadow: 0 0 15px rgba(16, 185, 129, 0.4); /* More prominent selected shadow */
        transform: translateY(0); /* Prevent hover transform when selected */
    }
    
    /* Specific override for primary card wrapper if needed, e.g., different padding */
    #primaryGenreCardWrapper {
        padding: 1.5rem; /* Or keep p-6 from Tailwind class */
         /* Ensure avatar remains visible */
         overflow: visible;
    }
    
    /* Ensure the icon/text container inside primary card doesn't block clicks */
    #primaryGenreCardWrapper > .pointer-events-none {
        pointer-events: none;
    }
    
    /* Style secondary cards specifically if needed (likely just use base .clickable-genre-card) */
    #secondaryGenresContainer .clickable-genre-card {
        padding: 1rem; /* Smaller padding for secondary */
    }
    
    
}
/* Make inner elements of clickable cards non-interactive by default */
/* .clickable-genre-card > *:not(a):not(button) { pointer-events: none; } */
/* Let's rely on the avatar pointer-events: none for now, can add this back if needed */


/* Track item now an anchor */
.track-item {
    display: flex; /* Use flex directly on anchor */
    align-items: center; /* Align items vertically */
    justify-content: space-between; /* Space out content and icon */
    background: #1E293B; /* slate-800 */
    border-left: 4px solid #10B981; /* teal-500, Slightly thicker border */
    transition: all 0.2s ease-in-out; /* Faster transition */
    text-decoration: none; /* Remove underline from anchor */
    color: inherit; /* Inherit text color */
    padding: 0.75rem 1rem; /* Adjusted padding */
    border-radius: 0.375rem; /* 6px rounding */
    margin-bottom: 0.5rem; /* Add space between tracks */
}
.track-item:hover {
    background: #334155; /* slate-700 */
    transform: translateX(4px);
    border-left-color: #2dd4bf; /* teal-400 on hover */
}
.track-play-button {
    background-color: #4b5563; /* gray-600 */
    transition: background-color 0.2s ease-in-out;
    border-radius: 50%; /* Make it round */
    width: 2.5rem; /* 40px */
    height: 2.5rem; /* 40px */
    display: inline-flex; /* Use inline-flex */
    align-items: center;
    justify-content: center;
    flex-shrink: 0; /* Prevent shrinking */
    margin-right: 1rem; /* Space after button */
}
.track-play-button:hover {
    background-color: #6b7280; /* gray-500 */
}
.track-play-button i { color: white; font-size: 0.9rem; }
.track-item .text-content { overflow: hidden; /* Prevent text overflow */ } /* Added wrapper for text */
.track-item .external-link-icon {
    color: #64748B; /* slate-500 */
    transition: color 0.2s ease-in-out;
    font-size: 1rem; /* Ensure icon size */
    margin-left: 1rem; /* Space before icon */
    flex-shrink: 0; /* Prevent shrinking */
}
.track-item .external-link-icon:hover {
     color: #10B981; /* teal-500 */
}

/* Loading / Analysis Animation */
.analysis-animation {
    height: 150px;
    width: 150px; /* Give it a fixed size */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin: 1rem auto; /* Center it */
}
.analysis-circle {
    position: absolute;
    top:0; left:0; right:0; bottom:0; /* Center origin */
    border-radius: 50%;
    border: 3px solid; /* Thicker border */
    opacity: 0.8;
    animation: pulsate 2.5s ease-out infinite; /* Slightly faster */
}
.analysis-circle:nth-child(1) { border-color: #10B981; animation-delay: 0s; } /* teal-500 */
.analysis-circle:nth-child(2) { border-color: #3B82F6; animation-delay: 0.5s; width: 66%; height: 66%; } /* blue-500 */
.analysis-circle:nth-child(3) { border-color: #EC4899; animation-delay: 1s; width: 33%; height: 33%; } /* pink-500 */

@keyframes pulsate {
    0% {
        transform: scale(0.1);
        opacity: 0;
    }
    50% {
        opacity: 0.8;
    }
    100% {
        transform: scale(1.2);
        opacity: 0;
    }
}

#progressBar {
    height: 5px;
    background-color: #10B981; /* teal-500 */
    width: 0%; /* Start at 0 */
    transition: width 0.4s ease-out; /* Slightly faster */
    border-radius: 2.5px; /* Round the bar */
}
#quiz .bg-gray-700 { background-color: #334155; } /* Progress bar background */


/* Next Button Visibility */
#nextButton.hidden-button {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
#nextButton:not(.hidden-button) {
     opacity: 1;
     cursor: pointer;
     pointer-events: auto;
     transition: opacity 0.3s ease, background-color 0.2s ease;
}
#nextButton { /* Base style for the button */
    background-color: #0f766e; /* teal-700 */
    color: white;
    font-weight: bold;
    padding: 0.75rem 2rem;
    border-radius: 9999px; /* pill shape */
}
#nextButton:not(.hidden-button):hover {
     background-color: #10B981; /* teal-500 */
}


/* Avatar Styles - Refined */
.vibe-avatar {
    position: absolute;
    top: -15px; /* Further up */
    right: 5px; /* Further right */
    text-align: center;
    animation: bounce-subtle 3s infinite ease-in-out;
    display: flex;
    align-items: center;
    gap: 6px; /* Slightly more gap */
    pointer-events: none; /* CRITICAL FIX: Allow clicks to pass through */
    z-index: 10; /* Ensure it's above card content */
}

.vibe-avatar .main-icon-text {
     display: flex;
     flex-direction: column;
     align-items: center;
}

 .vibe-avatar .main-icon-text i {
    font-size: 2.5rem; /* Slightly smaller icon */
    color: #F59E0B; /* amber-500 */
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.3));
}
.vibe-avatar .main-icon-text span {
    display: block;
    margin-top: -8px; /* Pull text closer */
    font-size: 0.7rem; /* Smaller text */
    font-weight: 600;
    color: #f8fafc;
    background: rgba(16, 185, 129, 0.85); /* teal-500 */
    padding: 1px 5px; /* Adjust padding */
    border-radius: 8px;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2); /* Add subtle shadow */
}

 #memeEmoji {
    font-size: 1.8rem; /* Slightly smaller emoji */
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
    /* animation: pop-in 0.5s ease-out forwards 0.2s; */ /* Optional delayed pop-in */
 }

 /* Optional pop-in animation */
 /* @keyframes pop-in {
     from { transform: scale(0.5) rotate(-15deg); opacity: 0; }
     to { transform: scale(1) rotate(0deg); opacity: 1; }
 } */

@keyframes bounce-subtle {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); } /* Less bounce */
}

/* Action Buttons */
.action-button {
    color: white;
    font-weight: bold;
    padding: 0.75rem 1.75rem;
    border-radius: 9999px; /* pill shape */
    transition: all 0.2s ease-in-out;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.action-button:hover {
     transform: translateY(-2px);
     box-shadow: 0 4px 10px rgba(0,0,0,0.25);
}
.btn-retake {
    background-image: linear-gradient(to right, #7e22ce, #5b21b6); /* purple-700 to violet-700 */
}
.btn-retake:hover {
    background-image: linear-gradient(to right, #9333ea, #7c3aed); /* purple-600 to violet-600 */
}
 .btn-share {
    background-image: linear-gradient(to right, #2563eb, #0891b2); /* blue-600 to cyan-600 */
}
.btn-share:hover {
    background-image: linear-gradient(to right, #3b82f6, #06b6d4); /* blue-500 to cyan-500 */
}
.action-button i {
     margin-right: 0.5rem;
}