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

:root {
    --bg-color: #1f2937;
    --container-bg: #374151;
    --eq-bg: #111827;
    --text-primary: #f9fafb;
    --text-secondary: #9ca3af;
    --accent-color: #3b82f6;
    --button-bg: #4b5563;
    --button-hover-bg: #6b7280;
    --slider-track-color: #e5e7eb;
    --slider-thumb-color: var(--accent-color);
    /* Slightly softer, more natural ease-in-out curve */
    --animation-curve: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Entry disclaimer overlay */
#disclaimer-screen {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: radial-gradient(circle at 10% -10%, rgba(59, 130, 246, 0.4), transparent 55%),
                radial-gradient(circle at 90% 110%, rgba(236, 72, 153, 0.35), transparent 55%),
                linear-gradient(145deg, #020617, #020617 40%, #111827 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
    opacity: 1;
    transition: opacity 0.4s var(--animation-curve);
}

#disclaimer-screen.dismissed {
    opacity: 0;
    pointer-events: none;
}

.disclaimer-card {
    max-width: 700px;
    width: 100%;
    background-color: rgba(15, 23, 42, 0.96);
    border-radius: 18px;
    padding: 28px 32px;
    box-shadow: 0 24px 40px rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(148, 163, 184, 0.35);
}

.disclaimer-title {
    margin-top: 0;
    margin-bottom: 12px;
    font-size: 1.4rem;
}

.disclaimer-text {
    margin: 6px 0;
    font-size: 0.95rem;
    color: var(--text-secondary);
}

.disclaimer-list {
    margin: 10px 0 22px;
    padding-left: 20px;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.disclaimer-list li + li {
    margin-top: 4px;
}

.disclaimer-button {
    border: none;
    background-color: var(--accent-color);
    color: #fff;
    padding: 10px 24px;
    border-radius: 999px;
    cursor: pointer;
    font-family: 'Nunito', sans-serif;
    font-size: 0.95rem;
    transition: background-color 0.25s var(--animation-curve),
                transform 0.15s var(--animation-curve),
                box-shadow 0.25s var(--animation-curve);
    box-shadow: 0 10px 25px rgba(37, 99, 235, 0.45);
}

.disclaimer-button:hover {
    background-color: #2563eb;
    transform: translateY(-1px);
    box-shadow: 0 14px 30px rgba(37, 99, 235, 0.55);
}

.disclaimer-button:active {
    transform: translateY(0);
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.5);
}

body {
    background-color: var(--bg-color);
    color: var(--text-primary);
    font-family: 'Nunito', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    padding: 20px;
    box-sizing: border-box;
    /* Faster, smoother background transition so theme changes feel responsive */
    transition: background-color 0.8s var(--animation-curve);
    overflow: hidden;
}

.container {
    background-color: var(--container-bg);
    padding: 30px 40px;
    border-radius: 16px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
    text-align: center;
    width: fit-content;
    min-width: 800px;
    position: relative;
    z-index: 10;
    /* No CSS width animation; width is animated manually in JS for smoothness */
    transition: background-color 0.65s var(--animation-curve),
                box-shadow 0.65s var(--animation-curve),
                border-radius 0.65s var(--animation-curve);
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0; /* Prevent header from shrinking in taskbar mode */
    width: 100%;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.header-track-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

#album-cover-placeholder {
    position: relative;
    width: 72px;
    height: 72px;
    border-radius: 10px;
    background: linear-gradient(135deg, #374151, #111827);
    border: 2px solid rgba(148, 163, 184, 0.7);
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

#album-cover-placeholder i {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-size: 1.3rem;
    transition: opacity 0.3s var(--animation-curve);
}

#album-cover-placeholder.has-cover i {
    opacity: 0;
}

.track-text h1 {
    margin: 4px 0 0;
    font-size: 1rem;
    font-weight: 600;
}
.container:not(.taskbar-mode) header {
    margin-bottom: 25px;
}
.container.taskbar-mode .main-content {
    flex-grow: 1;
}

.settings-icon, .return-icon, .fullscreen-icon, .info-icon {
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-secondary);
    transition: color 0.35s var(--animation-curve), transform 0.35s var(--animation-curve);
}
/* Softer, less jarring hover rotation */
.settings-icon:hover, .return-icon:hover, .fullscreen-icon:hover, .info-icon:hover { 
    color: var(--text-primary); 
    transform: rotate(60deg) scale(1.05);
}
.return-icon { display: none; } 
.container.taskbar-mode .settings-icon { display: none; }
.container.taskbar-mode .return-icon { display: block; }

.main-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
    width: 100%;
    /* --- REFINED ANIMATION --- */
    transition: opacity 0.6s var(--animation-curve);
}
.container.taskbar-mode .main-content {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.audio-player {
    width: 100%;
}

#audio {
    width: 100%;
    display: none; /* hide native controls, use custom UI */
}

.audio-controls {
    display: flex;
    align-items: center;
    gap: 24px;
    width: 100%;
}

.seek-section {
    flex: 1;
}

.transport-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.transport-main-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.transport-secondary-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.transport-toggle {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    font-size: 0.7rem;
}

/* Active shuffle / repeat buttons keep the same dark background as the other
   controls so they don't wash out to grey. The icon is tinted with the
   accent color and the outline stays in the accent color as a state
   indicator. */
.transport-toggle.active {
    background-color: rgba(15, 23, 42, 0.9);
    border-color: var(--accent-color);
    color: var(--accent-color);
}

/* When hovering an active toggle, keep the same look – only the usual
   subtle transform applies from .transport-button:active. */
.transport-toggle.active:hover {
    background-color: rgba(15, 23, 42, 0.9);
    border-color: var(--accent-color);
    color: var(--accent-color);
}

/* Repeat icon variations */
#repeat-button i {
    position: relative;
}

#repeat-button i.repeat-off-icon {
    opacity: 0.7;
}

#repeat-button i.repeat-track-icon::after {
    content: "1";
    position: absolute;
    font-size: 0.55em;
    bottom: -0.1em;
    right: -0.28em;
}

.volume-section {
    width: 110px;
}

.transport-button {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid rgba(148, 163, 184, 0.6);
    background: rgba(15, 23, 42, 0.9);
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s var(--animation-curve),
                border-color 0.2s var(--animation-curve),
                transform 0.15s var(--animation-curve);
}

.transport-button i {
    font-size: 0.8rem;
}

.transport-button:hover {
    background-color: #111827;
    border-color: var(--accent-color);
}

.transport-button:active {
    transform: scale(0.96);
}

.transport-main {
    background-color: var(--accent-color);
    border-color: transparent;
    color: #fff;
}

/* Keep the hover behavior consistent with other buttons so the
   play/pause button doesn't flash a different blue. */
.transport-main:hover {
    background-color: var(--accent-color);
}

#seek-bar {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.4);
    outline: none;
    cursor: pointer;
}

#seek-bar::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--accent-color);
    border: 2px solid #020617;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.3);
}

#seek-bar::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--accent-color);
    border: 2px solid #020617;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.3);
}

#volume-bar {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.4);
    outline: none;
    cursor: pointer;
}

#volume-bar::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--accent-color);
    border: 2px solid #020617;
}

#volume-bar::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--accent-color);
    border: 2px solid #020617;
}

.player-and-queue {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.file-and-queue-controls {
    display: flex;
    justify-content: flex-start;
    margin-top: 8px;
    margin-bottom: 8px;
}

#queue-container {
    width: 100%;
    max-height: 160px;
    overflow-y: auto;
    background-color: rgba(0, 0, 0, 0.25);
    border-radius: 8px;
    padding: 8px 10px;
    box-sizing: border-box;
}

.queue-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

#queue-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.queue-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 6px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: background-color 0.25s var(--animation-curve), color 0.25s var(--animation-curve);
}

.queue-item:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.queue-item.active {
    background-color: var(--accent-color);
    color: #fff;
}

.queue-item-index {
    opacity: 0.6;
    margin-right: 6px;
}

.queue-item-name {
    flex: 1;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.queue-empty {
    font-size: 0.8rem;
    color: var(--text-secondary);
    opacity: 0.7;
}

#clear-queue-button {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 0.8rem;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 999px;
    transition: background-color 0.2s var(--animation-curve), color 0.2s var(--animation-curve);
}

#clear-queue-button:hover {
    background-color: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
}

/* ... (All other styles for sliders, buttons, modal, etc., remain the same) ... */
#file-input { display: none; }
.file-label { background-color: var(--accent-color); color: white; padding: 10px 20px; border-radius: 8px; cursor: pointer; transition: all 0.4s var(--animation-curve); align-self: center; }
#equalizer-container-wrapper {
    position: relative;
    background: radial-gradient(circle at 10% -10%, rgba(59, 130, 246, 0.5), transparent 55%),
                radial-gradient(circle at 90% 110%, rgba(236, 72, 153, 0.35), transparent 55%),
                linear-gradient(145deg, #020617, #020617 35%, #111827 100%);
    border-radius: 18px;
    padding: 26px 30px;
    min-height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    box-shadow: 0 24px 40px rgba(15, 23, 42, 0.9);
    transition: transform 0.5s var(--animation-curve), box-shadow 0.5s var(--animation-curve), background 0.6s var(--animation-curve);
    animation: vizCardEnter 0.6s var(--animation-curve) both;
}

#visualizer-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s var(--animation-curve), filter 0.5s var(--animation-curve);
    z-index: 1;
    filter: blur(0px) saturate(1.2);
}

#visualizer-canvas.show {
    opacity: 1;
    filter: blur(0px) saturate(1.4);
}

#equalizer-container-wrapper::before {
    content: "";
    position: absolute;
    inset: -40%;
    background: radial-gradient(circle at 20% 0%, rgba(59, 130, 246, 0.3), transparent 60%),
                radial-gradient(circle at 80% 100%, rgba(236, 72, 153, 0.3), transparent 60%);
    opacity: 0.5;
    mix-blend-mode: screen;
    pointer-events: none;
    transition: opacity 0.6s var(--animation-curve), transform 1.2s linear;
    transform: translate3d(0, 0, 0);
}

#equalizer-container-wrapper:hover {
    /* No hover transform or shadow change to keep card static */
}

#equalizer-container {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 20px;
    height: 180px;
    position: relative;
    z-index: 2;
    transition: gap 0.5s var(--animation-curve), transform 0.5s var(--animation-curve), opacity 0.5s var(--animation-curve);
}

.slider-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}
.slider { -webkit-appearance:none; appearance: none;width: 8px;height: 150px;background: var(--slider-track-color);outline: none;border-radius: 4px;cursor: pointer;writing-mode: vertical-lr;direction: rtl;transition: background-color 0.5s var(--animation-curve); }
.slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; background: var(--slider-thumb-color); border: 3px solid var(--container-bg); border-radius: 50%; transition: background-color 0.3s var(--animation-curve), border-color 0.5s var(--animation-curve); }
.slider::-moz-range-thumb { width: 24px; height: 24px; background: var(--slider-thumb-color); border: 3px solid var(--container-bg); border-radius: 50%; transition: background-color 0.3s var(--animation-curve), border-color 0.5s var(--animation-curve); }
.frequency-label { font-size: 0.8em; color: var(--text-secondary); white-space: nowrap; }
.controls-wrapper { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.band-controls, .visualizer-controls { display: flex; gap: 15px; justify-content: center; }
.band-button, .viz-button { background-color: var(--button-bg); border: 2px solid transparent; color: var(--text-primary); padding: 8px 18px; border-radius: 8px; cursor: pointer; font-family: 'Nunito', sans-serif; font-size: 0.9em; transition: all 0.3s var(--animation-curve); }
.band-button:hover, .viz-button:hover { background-color: var(--button-hover-bg); }
.band-button.active, .viz-button.active { background-color: var(--eq-bg); border-color: var(--accent-color); transition: background-color 0.3s var(--animation-curve), border-color 0.5s var(--animation-curve); }
.modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.7);
    /* Fade overlay in for smoother appearance */
    animation: fadeIn 0.35s var(--animation-curve);
}

/* When closing, play a short fade-out before hiding the modal */
.modal.closing {
    animation: fadeOut 0.3s var(--animation-curve) forwards;
}

.modal-content {
    background-color: var(--container-bg);
    margin: 10% auto;
    padding: 30px;
    width: 90%;
    max-width: 450px;
    border-radius: 12px;
    position: relative;
    /* Tie modal motion to the global animation curve */
    animation: slideIn 0.45s var(--animation-curve) both;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
}

.color-options-group { padding: 15px 0; border-top: 1px solid rgba(255,255,255,0.1); margin-bottom: 20px; }
.color-options-group h3 { margin-top: 0; color: var(--accent-color); }

/* Align labels and color pickers neatly in the settings modal */
.setting-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    margin: 12px 0;
}

.setting-option label {
    flex: 1;
}

.setting-option input[type="color"] {
    flex-shrink: 0;
}
.close-button, .info-close-button { color: var(--text-secondary); position: absolute; top: 15px; right: 20px; font-size: 28px; font-weight: bold; cursor: pointer; transition: color 0.2s var(--animation-curve); }
.close-button:hover, .info-close-button:hover { color: var(--text-primary); }

/* Info modal layout */
.info-main {
    position: relative;
    opacity: 1;
    transition: opacity 0.4s var(--animation-curve), transform 0.4s var(--animation-curve);
}

.info-main.hidden {
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
}

.info-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    margin-bottom: 10px;
}

/* Subtle easter-egg heart, tucked under the close button */
.info-heart-button {
    position: absolute;
    top: 50px;
    right: 24px;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    opacity: 0.25;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity 0.25s var(--animation-curve),
                color 0.25s var(--animation-curve),
                transform 0.15s var(--animation-curve);
}

.info-heart-button i {
    font-size: 0.9rem;
}

.info-heart-button:hover {
    opacity: 0.9;
    color: var(--accent-color);
    transform: translateY(-1px) scale(1.05);
}

.info-heart-button:active {
    transform: translateY(0) scale(0.96);
}

/* Easter egg logo overlay */
.info-easter-container {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    box-sizing: border-box;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
}

/* (Bright overlay removed – keep container dark and subtle) */

.info-easter-container.show {
    animation: infoEasterEnter 1s var(--animation-curve) forwards;
}

.info-easter-container.hide {
    animation: infoEasterExit 0.6s var(--animation-curve) forwards;
}

.info-easter-logo {
    position: relative;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 2.4rem;
    font-weight: 800;
    background: linear-gradient(135deg, #60a5fa, #a855f7, #ec4899);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 18px rgba(56, 189, 248, 0.4), 0 0 32px rgba(168, 85, 247, 0.3);
    animation: infoEasterGlow 2.2s ease-in-out infinite alternate;
}

.info-easter-logo-top {
    display: block;
    font-size: 1.2rem;
    letter-spacing: 0.25em;
    margin-bottom: 4px;
}

.info-easter-logo-bottom {
    display: block;
    font-size: 2.6rem;
    letter-spacing: 0.28em;
}

@keyframes infoEasterEnter {
    0% {
        opacity: 0;
        transform: scale(0.7) translateY(16px);
        filter: blur(10px);
    }
    55% {
        opacity: 1;
        transform: scale(1.05) translateY(0);
        filter: blur(0px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
        filter: blur(0px);
    }
}

@keyframes infoEasterExit {
    0% {
        opacity: 1;
        transform: scale(1) translateY(0);
        filter: blur(0px);
    }
    100% {
        opacity: 0;
        transform: scale(0.85) translateY(-10px);
        filter: blur(8px);
    }
}

@keyframes infoEasterGlow {
    0% {
        text-shadow: 0 0 10px rgba(56, 189, 248, 0.4), 0 0 20px rgba(168, 85, 247, 0.3);
        transform: scale(1) translateY(0);
    }
    50% {
        text-shadow: 0 0 22px rgba(56, 189, 248, 0.8), 0 0 40px rgba(236, 72, 153, 0.7);
        transform: scale(1.03) translateY(-2px);
    }
    100% {
        text-shadow: 0 0 18px rgba(56, 189, 248, 0.7), 0 0 36px rgba(236, 72, 153, 0.6);
        transform: scale(1) translateY(0);
    }
}

/* Sparkles that shoot out from the logo itself */
.info-easter-sparkles {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.info-sparkle {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: rgba(248, 250, 252, 0.98);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
}

/* 30 sparkles, reusing a set of trajectories with staggered delays */
.info-sparkle.s1,
.info-sparkle.s7,
.info-sparkle.s13,
.info-sparkle.s19,
.info-sparkle.s25 { animation: sparkleFly1 3s ease-out infinite; }

.info-sparkle.s2,
.info-sparkle.s8,
.info-sparkle.s14,
.info-sparkle.s20,
.info-sparkle.s26 { animation: sparkleFly2 3.1s ease-out infinite 0.18s; }

.info-sparkle.s3,
.info-sparkle.s9,
.info-sparkle.s15,
.info-sparkle.s21,
.info-sparkle.s27 { animation: sparkleFly3 3.2s ease-out infinite 0.36s; }

.info-sparkle.s4,
.info-sparkle.s10,
.info-sparkle.s16,
.info-sparkle.s22,
.info-sparkle.s28 { animation: sparkleFly4 3.3s ease-out infinite 0.54s; }

.info-sparkle.s5,
.info-sparkle.s11,
.info-sparkle.s17,
.info-sparkle.s23,
.info-sparkle.s29 { animation: sparkleFly5 3s ease-out infinite 0.72s; }

.info-sparkle.s6,
.info-sparkle.s12,
.info-sparkle.s18,
.info-sparkle.s24,
.info-sparkle.s30 { animation: sparkleFly6 3.4s ease-out infinite 0.9s; }

@keyframes sparkleFlyBase {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.4);
    }
    10% {
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes sparkleFly1 {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
    12%  { opacity: 1; }
    100% { opacity: 0; transform: translate(calc(-50% + 120px), calc(-50% - 60px)) scale(0.05); }
}

@keyframes sparkleFly2 {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
    12%  { opacity: 1; }
    100% { opacity: 0; transform: translate(calc(-50% - 110px), calc(-50% - 40px)) scale(0.05); }
}

@keyframes sparkleFly3 {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
    12%  { opacity: 1; }
    100% { opacity: 0; transform: translate(calc(-50% + 80px), calc(-50% + 90px)) scale(0.05); }
}

@keyframes sparkleFly4 {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
    12%  { opacity: 1; }
    100% { opacity: 0; transform: translate(calc(-50% - 95px), calc(-50% + 95px)) scale(0.05); }
}

@keyframes sparkleFly5 {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
    12%  { opacity: 1; }
    100% { opacity: 0; transform: translate(calc(-50% + 25px), calc(-50% - 120px)) scale(0.05); }
}

@keyframes sparkleFly6 {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
    12%  { opacity: 1; }
    100% { opacity: 0; transform: translate(calc(-50% - 35px), calc(-50% + 130px)) scale(0.05); }
}

/* (Old background nebula/sparkle keyframes removed) */

.apply-button, .reset-button { border: none; color: white; padding: 10px 25px; border-radius: 8px; cursor: pointer; font-family: 'Nunito', sans-serif; font-size: 1em; width: 100%; transition: background-color 0.3s var(--animation-curve); margin-top: 10px; }
input[type="color"] { -webkit-appearance: none; border: none; width: 50px; height: 30px; cursor: pointer; background: none; padding: 0; }
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-webkit-color-swatch { border: 2px solid #ecf0f1; border-radius: 4px; }
.apply-button, .reset-button { border: none; color: white; padding: 10px 25px; border-radius: 8px; cursor: pointer; font-family: 'Nunito', sans-serif; font-size: 1em; width: 100%; transition: background-color 0.3s var(--animation-curve); margin-top: 10px; }
.apply-button { background-color: var(--accent-color); }
.apply-button:hover { background-color: #2563eb; }
.reset-button { background-color: var(--button-bg); border: 2px solid #a94442; }
.reset-button:hover { background-color: #c0392b; }
@keyframes fadeIn { from {opacity: 0;} to {opacity: 1;} }
@keyframes fadeOut { from {opacity: 1;} to {opacity: 0;} }
@keyframes slideIn { from {transform: translateY(-50px) scale(0.95);} to {transform: translateY(0) scale(1);} }

@keyframes vizCardEnter {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* --- Fullscreen mode --- */
#fullscreen-overlay {
    position: fixed;
    inset: 0;
    z-index: 1500;
    overflow: hidden;
    color: var(--text-primary);
    opacity: 0;
    pointer-events: none;
    /* 2s fade for entering/exiting fullscreen */
    transition: opacity 2s var(--animation-curve);
}

#fullscreen-overlay.show {
    opacity: 1;
    pointer-events: auto;
}

/* Crossfade when switching tracks while fullscreen is active.
   We keep the overlay visible and just fade album art layers so
   we never expose the base gradient by itself. */
#fullscreen-overlay.show.changing {
}

/* Base opacities when fullscreen is just showing a single track */
#fullscreen-overlay.show .fullscreen-bg-current {
    opacity: 0.95;
}

#fullscreen-overlay.show .fullscreen-bg-next {
    opacity: 0;
}

/* During a track change, crossfade from the current background
   to the next background instead of fading to the gradient. */
#fullscreen-overlay.show.changing .fullscreen-bg-current {
    opacity: 0;
}

#fullscreen-overlay.show.changing .fullscreen-bg-next {
    opacity: 0.95;
}

#fullscreen-overlay.show .fullscreen-bottom {
    opacity: 1;
    transform: translateY(0);
}

/* Do NOT fade the controls to zero on track change; we keep them
   visible so the new track info appears over the previous one. */

#fullscreen-overlay::before {
    content: "";
    position: absolute;
    inset: -32px;
    background: radial-gradient(circle at 10% 0%, rgba(59,130,246,0.5), transparent 60%),
                radial-gradient(circle at 90% 100%, rgba(236,72,153,0.4), transparent 60%),
                linear-gradient(145deg, #020617, #020617 40%, #111827 100%);
    opacity: 1;
    z-index: -2;
}

.fullscreen-bg {
    position: absolute;
    inset: -32px;
    background-size: cover;
    background-position: center;
    filter: blur(28px) saturate(1.4);
    transform: scale(1.08);
    opacity: 0;
    z-index: -1;
    transition: opacity 2.5s var(--animation-curve);
}

.fullscreen-bg-current {
    opacity: 0.95;
}

.fullscreen-bottom {
    position: absolute;
    left: 40px;
    bottom: 40px;
    display: flex;
    align-items: center;
    gap: 18px;
    opacity: 1;
    transform: translateY(0);
    /* 2.5s fade in/out for track crossfade */
    transition: opacity 2.5s var(--animation-curve), transform 2.5s var(--animation-curve);
}

#fullscreen-cover {
    width: 96px;
    height: 96px;
    border-radius: 14px;
    background-color: #111827;
    background-size: cover;
    background-position: center;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
    border: 2px solid rgba(15, 23, 42, 0.85);
}

.fullscreen-text {
    display: flex;
    flex-direction: column;
}

#fullscreen-title {
    font-size: 1.3rem;
    font-weight: 600;
}

.fullscreen-exit {
    position: absolute;
    top: 24px;
    right: 32px;
    border: none;
    background: rgba(15, 23, 42, 0.7);
    color: var(--text-secondary);
    border-radius: 999px;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.45);
    transition: background-color 0.2s var(--animation-curve), color 0.2s var(--animation-curve), transform 0.15s var(--animation-curve);
}

.fullscreen-exit:hover {
    background: rgba(15, 23, 42, 0.9);
    color: var(--text-primary);
    transform: translateY(-1px);
}