:root {
    --bg-color: #f8f8f8;
    --card-bg: #ffffff;
    --accent-color: #1DB954;
    --text-primary: #111111;
    --text-secondary: #666666;
    --border-color: #e5e5e5;
    --shadow-subtle: 0 2px 10px rgba(0, 0, 0, 0.05);
    --shadow-bold: 0 4px 20px rgba(0, 0, 0, 0.1);
    --p1-width: 33.333vw;
    --p2-width: 25vw;
    --p3-width: 18vw;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body,
html {
    width: 100%;
    height: 100vh;
    background-color: #ffffff;
    color: var(--text-primary);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
}

h1,
h2,
.script-font {
    font-family: 'Playball', cursive;
}

.caps-font {
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: 0.05em;
}

#loading {
    position: fixed;
    inset: 0;
    background: var(--bg-color);
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
}

/* Top Bar */
.top-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 50px;
    background: white;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px;
    z-index: 1001;
}

.top-bar-title {
    font-family: 'Courier New', 'Courier', monospace;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    margin: 0;
    color: var(--text-primary);
}

.header-link {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s;
}

.header-link:hover {
    opacity: 0.6;
}

.back-link {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 14px;
    margin-right: 8px;
    transition: color 0.2s;
}

.back-link:hover {
    color: var(--text-primary);
}

.view-toggle {
    display: flex;
    gap: 8px;
}

.view-btn {
    padding: 6px 14px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 2px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.2s;
    color: var(--text-secondary);
}

.view-btn:hover {
    background: var(--bg-color);
    border-color: var(--text-primary);
    color: var(--text-primary);
}

.view-btn.active {
    background: var(--text-primary);
    border-color: var(--text-primary);
    color: white;
}

.resample-btn {
    padding: 6px 12px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 2px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s;
    color: var(--text-secondary);
    display: none;
}

.resample-btn.visible {
    display: block;
}

.resample-btn:hover {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: white;
    transform: rotate(180deg);
}

.container {
    position: relative;
    width: 100vw;
    height: calc(100vh - 50px);
    margin-top: 50px;
    overflow: hidden;

    /* Logic for independent panels */
    --p1-open: 0;
    --p2-open: 0;
    --p3-open: 0;
}

.container.p1-open {
    --p1-open: 1;
}

.container.p2-open {
    --p2-open: 1;
}

.container.p3-open {
    --p3-open: 1;
}




/* Collage Section - Full Screen */
.collage-section {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: calc(100vh - 50px);
    background: var(--bg-color);
    padding: 0;
    /* Removed padding to allow full-canvas scroll */
    padding-bottom: 90px;
    overflow: hidden;
    display: block;
    /* Changed from flex to block to avoid centering issues with large child */
}

/* Removed toggle button for cleaner aesthetic */

.collage-grid {
    position: relative;
    width: 100%;
    height: 100%;
    /* Fill the section */
    margin: 0;
    overflow: auto;
    /* Enable scrolling for its children */
}

/* Grab cursor for panning in genre map */
.container.genre-map-active .collage-section {
    overflow: auto;
}

.container.genre-map-active .collage-grid {
    cursor: grab;
    display: grid;
    place-items: center;
    overflow: auto;
    background: #e0e0e0;
}

.container.genre-map-active .collage-grid:active {
    cursor: grabbing;
}

/* Landing view styles */
.container.landing-active .collage-section {
    width: 100%;
    left: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.container.landing-active .collage-grid {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 100%;
    overflow: visible;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 2px;
    background: #222;
}

/* Non-landing view styles - explicit reset */
.container:not(.landing-active) .collage-section {
    overflow: hidden;
}

.container:not(.landing-active) .collage-grid {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
    grid-template-columns: unset;
    gap: unset;
    background: transparent;
}

.genre-map-wrapper {
    position: relative;
    overflow: hidden;
    /* Clips the child so it doesn't expand scrollWidth/Height */
    margin: auto;
    background: #fafafa;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}




.album-item {
    position: absolute;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 2px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.8s cubic-bezier(0.4, 0.0, 0.2, 1),
        box-shadow 0.6s cubic-bezier(0.165, 0.84, 0.44, 1),
        border 0.6s cubic-bezier(0.165, 0.84, 0.44, 1),
        opacity 0.6s cubic-bezier(0.4, 0.0, 0.2, 1),
        left 0.8s cubic-bezier(0.4, 0.0, 0.2, 1),
        top 0.8s cubic-bezier(0.4, 0.0, 0.2, 1);
    box-shadow: var(--shadow-subtle);
}

.album-item.hovered-front {
    transform: scale(1.05);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.25);
}

/* Size-based relief */
.album-item.size-key {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    border-width: 2px;
}

.album-item.size-large {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.album-item.size-medium {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.album-item.size-small {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.album-item:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-bold);
    border-color: var(--text-primary);
    z-index: 100;
}

.album-item.selected {
    box-shadow: 0 0 0 3px rgba(29, 185, 84, 0.4);
    z-index: 150;
}

.album-item.focused {
    box-shadow: 0 20px 80px rgba(0, 0, 0, 0.4) !important;
    z-index: 200 !important;
}

.explore-btn {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    background: transparent;
    color: rgba(0, 0, 0, 0.4);
    border: 1.5px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    /* Stamp/mark shape */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    z-index: 50;
    cursor: pointer;
    backdrop-filter: blur(2px);
}

.explore-btn:hover {
    color: #111;
    border-color: #111;
    background: rgba(255, 255, 255, 0.5);
    transform: scale(1.1);
    transition-delay: 0s;
}

/* Very subtle delay so it doesn't pop in instantly - refined to 0.6s */
.album-item:hover .explore-btn {
    opacity: 1;
    transform: scale(1);
    transition-delay: 0.6s;
}

.album-item .dblclick-hint {
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;
    text-align: center;
    font-family: 'Courier New', monospace;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.8);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

.album-item:hover .dblclick-hint {
    opacity: 1;
    transition-delay: 1s;
}

.explore-btn:hover {
    background: rgba(255, 255, 255, 0.8);
    color: var(--accent-color);
    border-color: var(--accent-color);
    transform: scale(1.2);
    transition-delay: 0s;
}

.album-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Panel 1: Album Details (rightmost) */
.info-section {
    position: fixed;
    right: calc(-1 * var(--p1-width));
    top: 50px;
    width: var(--p1-width);
    height: calc(100vh - 50px);
    background: white;
    border-left: 1px solid var(--border-color);
    overflow-y: auto;
    transition: right 0.6s cubic-bezier(0.4, 0.0, 0.2, 1);
    z-index: 999;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
}

.container.p1-open .info-section {
    right: 0;
}

.close-panel-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 32px;
    height: 32px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 2px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    line-height: 1;
    color: var(--text-secondary);
    transition: all 0.2s;
    z-index: 10;
}

.close-panel-btn:hover {
    background: var(--text-primary);
    color: white;
    border-color: var(--text-primary);
}

/* Panel 2: Genre Albums (middle) */
.genre-albums-panel {
    position: fixed;
    right: calc(-1 * var(--p2-width));
    top: 50px;
    width: var(--p2-width);
    height: calc(100vh - 50px);
    background: white;
    border-left: 1px solid var(--border-color);
    z-index: 998;
    overflow-x: visible;
    overflow-y: auto;
    transition: right 0.6s cubic-bezier(0.4, 0.0, 0.2, 1);
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
}

.container.p2-open .genre-albums-panel {
    right: calc(var(--p1-open) * var(--p1-width));
}

.genre-albums-panel-content {
    position: relative;
    padding: 40px 30px;
}

/* Panel 3: Related Genres (leftmost) */
.related-genres-panel {
    position: fixed;
    right: calc(-1 * var(--p3-width));
    top: 50px;
    width: var(--p3-width);
    height: calc(100vh - 50px);
    background: var(--bg-color);
    border-left: 1px solid var(--border-color);
    z-index: 997;
    padding: 40px 30px;
    overflow-y: auto;
    transition: right 0.6s cubic-bezier(0.4, 0.0, 0.2, 1);
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.05);
}

.container.p3-open .related-genres-panel {
    right: calc(var(--p1-open) * var(--p1-width) + var(--p2-open) * var(--p2-width));
}

/* Video Overlay (Persistent Mini-Player) */
.video-overlay {
    position: fixed;
    bottom: 80px;
    /* Elevated to clear the 50px player bar */
    left: 20px;
    width: 320px;
    height: auto;
    background: white;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    padding: 10px;
    transition: opacity 0.3s ease, transform 0.3s ease;
    transform: translateY(20px);
    opacity: 0;
}

.video-overlay[style*="display: block"] {
    animation: slideUpPlayer 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

@keyframes slideUpPlayer {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.video-overlay-content {
    width: 100%;
    aspect-ratio: 16/9;
    background: #000;
    border-radius: 2px;
    overflow: hidden;
}

/* Expanded State */
.video-overlay.expanded {
    bottom: 50%;
    left: 50%;
    width: 60vw;
    height: auto;
    transform: translate(-50%, 50%);
    box-shadow: 0 20px 80px rgba(0, 0, 0, 0.5);
    z-index: 2001;
}

.video-overlay.expanded[style*="display: block"] {
    animation: fadeInExpanded 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

@keyframes fadeInExpanded {
    from {
        opacity: 0;
        transform: translate(-50%, 60%);
    }

    to {
        opacity: 1;
        transform: translate(-50%, 50%);
    }
}

/* Discreet Video Controls */
.video-controls {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 32px;
    display: flex;
    justify-content: flex-end;
    /* Align to right */
    align-items: center;
    padding: 0 8px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), transparent);
    z-index: 1001;
    opacity: 0;
    /* Hidden by default */
    transition: opacity 0.2s;
    pointer-events: none;
    /* Let clicks pass through when hidden */
}

.video-overlay:hover .video-controls {
    opacity: 1;
    pointer-events: auto;
}

.video-controls .toggle-expand-btn,
.video-controls .close-panel-btn,
.video-controls .toggle-queue-btn,
.video-controls .show-info-btn {
    position: static;
    /* Reset absolute positioning */
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    cursor: pointer;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    margin-left: 4px;
    transition: all 0.1s;
}

.video-controls .toggle-expand-btn:hover,
.video-controls .close-panel-btn:hover,
.video-controls .toggle-queue-btn:hover,
.video-controls .show-info-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.video-error {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #888;
    text-align: center;
    padding: 10px;
    background: #f0f0f0;
    font-size: 11px;
}

.related-genres-header {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-secondary);
    margin-bottom: 24px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 12px;
}

.related-genres-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.related-genre-item {
    padding: 12px 16px;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 2px;
    cursor: pointer;
    transition: all 0.2s;
}

.related-genre-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.related-genre-count {
    font-size: 10px;
    color: #666;
}

/* Toast Notifications */
.toast-container {
    position: fixed;
    bottom: 70px;
    /* Above player bar */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 3000;
    /* Above everything else */
    pointer-events: none;
}

.toast {
    background: rgba(30, 30, 30, 0.95);
    color: white;
    padding: 10px 20px;
    border-radius: 20px;
    margin-top: 10px;
    font-size: 13px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    align-items: center;
}

.toast.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Resample hint bubble */
.resample-hint {
    position: fixed;
    top: 60px;
    right: 30px;
    background: rgba(30, 30, 30, 0.95);
    color: white;
    padding: 10px 16px;
    border-radius: 4px;
    font-size: 13px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 1100;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.resample-hint.visible {
    opacity: 1;
    transform: translateY(0);
}

.resample-hint .arrow {
    margin-left: 6px;
    font-size: 14px;
}

/* Looking Glass hint bubble */
.looking-glass-hint {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: rgba(30, 30, 30, 0.95);
    color: white;
    padding: 10px 20px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 1100;
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
    pointer-events: none;
}

.looking-glass-hint.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.related-genre-item:hover {
    background: var(--text-primary);
    border-color: var(--text-primary);
    transform: translateX(-4px);
}

.related-genre-item:hover .related-genre-name {
    color: white;
}

.related-genre-item:hover .related-genre-count {
    color: rgba(255, 255, 255, 0.7);
}

.related-genre-item.active {
    background: var(--accent-color);
    border-color: var(--accent-color);
}

.related-genre-item.active .related-genre-name {
    color: white;
}

.related-genre-item.active .related-genre-count {
    color: rgba(255, 255, 255, 0.8);
}

.genre-view-header {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 6px;
    letter-spacing: -0.02em;
}

.genre-view-subtitle {
    font-size: 12px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 32px;
}

/* Vertical bookmark-style toggle button */
.toggle-related-bookmark {
    position: fixed;
    right: calc(var(--p1-open) * var(--p1-width) + var(--p2-open) * var(--p2-width) - 1px);
    top: 50%;
    transform: translateY(-50%);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    padding: 24px 12px;
    background: var(--text-primary);
    border: none;
    border-radius: 4px 0 0 4px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    z-index: 1000;
    box-shadow: -3px 3px 12px rgba(0, 0, 0, 0.25);
}

.bookmark-text {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: white;
}

.toggle-related-bookmark:hover {
    right: calc(var(--p1-open) * var(--p1-width) + var(--p2-open) * var(--p2-width) + 4px);
    background: var(--accent-color);
    box-shadow: -4px 4px 16px rgba(0, 0, 0, 0.3);
}

.genre-albums-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 16px;
}

.genre-album-item {
    cursor: pointer;
    transition: transform 0.2s;
    text-align: center;
}

.genre-album-item:hover {
    transform: scale(1.05);
}

.genre-album-item img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border: 1px solid var(--border-color);
    border-radius: 2px;
    margin-bottom: 8px;
}

.genre-album-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
    line-height: 1.3;
}

.genre-album-artist {
    font-size: 11px;
    color: var(--text-secondary);
}

.genre-panel-header {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 20px;
    color: var(--text-primary);
}

.genre-artists-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 20px;
}

.genre-artist-item {
    cursor: pointer;
    transition: transform 0.2s;
}

.genre-artist-item:hover {
    transform: scale(1.05);
}

.genre-artist-item img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border: 1px solid var(--border-color);
    border-radius: 2px;
    margin-bottom: 8px;
}

.genre-artist-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
}

.genre-artist-count {
    font-size: 10px;
    color: var(--text-secondary);
}

.info-panel {
    padding: 40px;
    max-width: 600px;
}

/* Removed old info-header and view-btn duplicate styles - now in top bar */

.info-instructions {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 30px;
    font-weight: 500;
}

.album-details {
    animation: fadeIn 0.3s ease;
}

.hint {
    color: var(--text-secondary);
    font-style: italic;
    font-size: 14px;
}

.album-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 8px;
    line-height: 1.2;
}

.album-artist {
    font-size: 18px;
    color: var(--text-secondary);
    margin-bottom: 20px;
    font-weight: 400;
}

.album-genres {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
}

.genre-tag {
    background: var(--bg-color);
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid transparent;
}

.genre-tag:hover,
.genre-tag.hover-active {
    background: var(--text-primary);
    color: white;
}

.genre-tag.pinned {
    background: var(--accent-color);
    color: white;
    border: 1px solid var(--accent-color);
    box-shadow: 0 0 0 2px rgba(29, 185, 84, 0.2);
}

.genre-tag.active {
    background: var(--text-primary);
    color: white;
    border: 1px solid var(--text-primary);
}

.track-list-header {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 12px;
    color: var(--text-primary);
}

.track-list {
    list-style: none;
    padding: 0;
}

.track-item {
    padding: 10px 0;
    border-bottom: 1px solid var(--bg-color);
    font-size: 14px;
    line-height: 1.4;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.track-item:last-child {
    border-bottom: none;
}

.track-item {
    cursor: pointer;
    transition: all 0.2s;
    border-left: 2px solid transparent;
    padding-left: 10px;
}

.track-item:hover {
    background: var(--bg-color);
    padding-left: 15px;
}

.track-item.active {
    background: rgba(29, 185, 84, 0.05);
    border-left: 2px solid var(--accent-color);
    padding-left: 15px;
}

.track-item.active .track-name {
    color: var(--accent-color);
    font-weight: 600;
}

.play-button {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: all 0.2s;
    cursor: pointer;
}

.track-item:hover .play-button {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: white;
}

.track-item.active .play-button {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: white;
}

.top-bar-title {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 15px;
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
}

.header-link {
    cursor: pointer;
}

.view-btn {
    background: transparent;
    border: none;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.track-info {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

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

.track-search-link {
    display: inline-block;
    padding: 3px 8px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--bg-color);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: 2px;
    text-decoration: none;
    transition: all 0.2s;
}

.track-search-link:hover {
    background: var(--text-primary);
    border-color: var(--text-primary);
    color: white;
}

.related-albums-section {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

.related-albums-header {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 12px;
    color: var(--text-primary);
}

.related-albums-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 10px;
}

.related-album-item {
    cursor: pointer;
    transition: transform 0.2s;
}

.related-album-item:hover {
    transform: scale(1.05);
}

.related-album-item img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border: 1px solid var(--border-color);
    border-radius: 2px;
}

.related-album-name {
    font-size: 10px;
    margin-top: 4px;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 1024px) {
    .container {
        grid-template-columns: 1fr;
        grid-template-rows: 60vh 1fr;
    }

    .collage-section {
        padding: 20px;
    }

    .info-section {
        border-left: none;
        border-top: 1px solid var(--border-color);
    }
}

/* Command Palette (VS Code style) */
.command-palette {
    position: fixed;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    background: #1e1e1e;
    border: 1px solid #333;
    border-radius: 6px;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5);
    z-index: 3000;
    /* Highest priority */
    color: #ccc;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    display: none;
    flex-direction: column;
}

.command-palette.visible {
    display: flex;
    animation: slideDown 0.1s ease-out;
}

.palette-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    bottom: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.4);
    /* Darker for visibility check */
    z-index: 2999;
    /* Just below palette */
    display: none;
    cursor: default;
    /* Simply clicking away */
}

.palette-backdrop.visible {
    display: block;
}

.palette-search-bar {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    border-bottom: 1px solid #333;
    background: #252526;
}

.search-icon {
    color: #999;
    font-size: 18px;
    margin-right: 10px;
    font-weight: 300;
}

#palette-input {
    background: transparent;
    border: none;
    color: white;
    font-size: 16px;
    width: 100%;
    outline: none;
}

#palette-input::placeholder {
    color: #666;
}

.search-results {
    max-height: 400px;
    overflow-y: auto;
    padding: 8px 0;
}

.search-section-header {
    padding: 8px 15px 4px;
    font-size: 11px;
    text-transform: uppercase;
    color: #666;
    font-weight: 700;
    margin-top: 5px;
}

.search-item {
    padding: 8px 15px;
    display: flex;
    align-items: center;
    cursor: pointer;
    border-bottom: 1px solid #2a2a2a;
    transition: background 0.1s;
}

.search-item:hover {
    background: #2a2a2a;
}

.search-item.selected {
    background: #3a3a3a;
    border-left: 3px solid var(--accent-color);
    padding-left: 12px;
}

.search-item-icon {
    margin-right: 12px;
    color: #888;
    width: 16px;
    text-align: center;
    font-size: 14px;
}

.search-item-details {
    display: flex;
    flex-direction: column;
}

.search-item-title {
    color: white;
    font-size: 14px;
    margin-bottom: 2px;
}

.search-item-subtitle {
    color: #888;
    font-size: 12px;
}

.video-overlay.expanded .command-palette {
    display: none;
}

.queue-section {
    max-height: 400px;
    overflow-y: auto;
    width: 100%;
    /* Full width */
    padding: 0;
    margin: 0;
    display: block;
    /* Normal block layout */
}

.queue-header {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #666;
    margin: 8px 15px 4px;
    /* Added margin to side matching search items */
    display: flex;
    justify-content: space-between;
    align-items: center;
    letter-spacing: 0.05em;
    min-height: 20px;
    /* Ensure height */
    white-space: nowrap;
    /* Prevent wrapping */
}

.queue-list {
    list-style: none;
    padding: 0;
}

.queue-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 8px;
    border-bottom: 1px solid #222;
    font-size: 12px;
    color: white;
    cursor: grab;
    transition: background 0.2s, opacity 0.2s;
}

.queue-item:active {
    cursor: grabbing;
}

.queue-item.dragging {
    opacity: 0.5;
    background: #333;
}

.queue-item.drag-over {
    border-top: 2px solid var(--accent-color);
    background: rgba(255, 255, 255, 0.1);
}

.queue-item:hover {
    background: #222;
}

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

.queue-item-remove {
    cursor: pointer;
    color: #666;
    font-size: 14px;
    padding: 2px 6px;
}

.queue-item-remove:hover {
    color: #f44336;
}

.add-to-queue-btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    margin-left: 6px;
}

/* Persistent Player Bar */
.player-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background: #fff;
    border-top: 1px solid #000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    z-index: 2002;
    color: #000;
    box-shadow: none;
}

.player-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 300px;
}

.player-track-name {
    font-family: 'Courier New', Courier, monospace;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #000;
    text-transform: uppercase;
}

.player-artist-name {
    font-family: 'Courier New', Courier, monospace;
    font-size: 11px;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
}

.player-controls {
    flex: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    /* Reduced gap to fit shuffle button comfortably */
}

.player-btn {
    background: none;
    border: none;
    color: #000;
    font-size: 20px;
    cursor: pointer;
    padding: 5px;
    transition: transform 0.1s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.player-btn:hover {
    transform: scale(1.1);
    color: #000;
}

.player-btn:active {
    transform: scale(0.95);
}

.player-btn.play-btn {
    font-size: 22px;
    width: 34px;
    height: 34px;
    border: 1px solid #000;
    border-radius: 50%;
    color: #000;
    display: flex;
    /* Ensure centering works */
    align-items: center;
    justify-content: center;
    padding-left: 2px;
    /* Visual tweak for play icon center */
}

.player-btn.play-btn:hover {
    background: #000;
    color: #fff;
}

.player-btn.active {
    color: var(--accent-color);
    text-decoration: underline;
}

.player-options {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 15px;
}

.volume-control {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: 10px;
}

#volume-slider {
    width: 60px;
    height: 3px;
    -webkit-appearance: none;
    appearance: none;
    background: #000;
    border-radius: 2px;
    outline: none;
}

#volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    background: #000;
    border-radius: 50%;
    cursor: pointer;
}

#volume-slider::-moz-range-thumb {
    width: 12px;
    height: 12px;
    background: #000;
    border-radius: 50%;
    cursor: pointer;
    border: none;
}



.add-to-queue-btn:hover {
    background: var(--text-primary);
    color: white;
    border-color: var(--text-primary);
}

/* Genre Map View */
/* Genre Map View Specifics */
.genre-map-container {
    position: relative;
    width: 4000px;
    height: 4000px;
    background: #fafafa;
    /* subtle grid background for orientation */
    background-image: radial-gradient(circle, #ddd 1.5px, transparent 1.5px);
    background-size: 150px 150px;
    transform-origin: 0 0;
    will-change: transform;
}

.genre-label {
    position: absolute;
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px 6px;
    box-sizing: border-box;
    text-transform: lowercase;
    overflow: hidden;
    line-height: 1.1;
    text-align: center;
    /* Center label on its (x,y) coordinate to match backend bbox math */
    transform: translate(-50%, -50%);
}

.genre-label:hover {
    z-index: 2000 !important;
    background: var(--accent-color);
    color: white !important;
    transform: translate(-50%, -50%) scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    opacity: 1 !important;
}

.genre-label.size-key {
    background: white;
    border: 2px solid black;
    font-weight: 900;
    box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.1);
    z-index: 100;
}

/* Zoom Controls */
.zoom-controls {
    position: fixed;
    bottom: 70px;
    /* Elevated to stay above player bar but low */
    left: 20px;
    right: auto;
    display: flex;
    flex-direction: row;
    /* Horizontal for bottom-left */
    align-items: center;
    gap: 8px;
    z-index: 3000;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(4px);
    padding: 6px 10px;
    border: 1px solid black;
    box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
}

.zoom-btn {
    width: 28px;
    height: 28px;
    background: white;
    border: 1px solid black;
    font-family: 'Courier New', Courier, monospace;
    font-weight: 900;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
}

.zoom-btn:hover {
    background: #000;
    color: #fff;
}

#zoom-slider {
    width: 100px;
    cursor: pointer;
    accent-color: black;
}

.zoom-value {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.8rem;
    text-align: center;
    font-weight: bold;
}

.genre-label.size-medium {
    font-weight: 400;
    opacity: 0.9;
}

.genre-label.size-small {
    opacity: 0.7;
    font-weight: 400;
    color: #555;
}

/* Top bar separator */
.top-bar-sep {
    color: #ccc;
    font-size: 18px;
    margin: 0 2px;
    user-select: none;
}

.help-toggle-btn {
    background: none;
    border: none;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    font-weight: 700;
    color: #999;
    cursor: pointer;
    padding: 6px 8px;
    transition: color 0.15s;
}

.help-toggle-btn:hover {
    color: var(--text-primary);
}

/* Help overlay */
.help-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
}

.help-card {
    background: white;
    border: 1px solid black;
    box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.1);
    max-width: 480px;
    width: 90%;
    padding: 32px;
    position: relative;
    font-family: 'Courier New', monospace;
}

.help-close {
    position: absolute;
    top: 12px;
    right: 16px;
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
    color: #999;
    line-height: 1;
}

.help-close:hover {
    color: #000;
}

.help-title {
    font-size: 18px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 24px;
}

.help-section {
    margin-bottom: 20px;
}

.help-heading {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #999;
    margin-bottom: 10px;
    font-weight: 700;
}

.help-item {
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 6px;
    color: #444;
}

.help-key {
    font-weight: 700;
    color: #000;
    background: #f0f0f0;
    padding: 1px 6px;
    border-radius: 2px;
    margin-right: 6px;
    font-size: 12px;
}
/* ---- Chromatic grid tiles -------------------------------------------------
   These were inline style.cssText strings assigned per element in
   renderLandingGrid(), which meant ~20,000 CSS string parses on a
   4,000-album archive. Hover is CSS now too, so no per-card JS handlers. */
.landing-album-card {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    cursor: pointer;
    /* Background is set per card from the album's dominant colour. #f5f5f5 is
       only the fallback for a card whose colour failed to extract. */
    background: #f5f5f5;
    transition: transform 0.2s ease;
    z-index: 1;
    /* Four thousand cards is four thousand lots of layout, style and paint.
       content-visibility lets the browser skip all of it for anything off
       screen. The card's own background still paints, so scrolling lands on
       the colour immediately and the cover resolves after. */
    content-visibility: auto;
    contain-intrinsic-size: auto 180px;
}
.landing-album-card > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* Fade the cover in over the colour rather than snapping. The class is set
       by one capturing 'load' listener on the grid, not 4,000 onload closures. */
    opacity: 0;
    transition: opacity 0.28s ease;
}
.landing-album-card > img.loaded { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
    .landing-album-card > img { transition: none; }
}
.landing-album-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.95);
    padding: 8px 10px;
    transform: translateY(100%);
    transition: transform 0.2s ease;
    font-size: 11px;
    line-height: 1.4;
}
.landing-album-info .lai-title,
.landing-album-info .lai-artist {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.landing-album-info .lai-title { font-weight: 700; margin-bottom: 2px; }
.landing-album-info .lai-artist { color: #666; }

.landing-album-card:hover { transform: scale(1.02); z-index: 10; }
.landing-album-card:hover .landing-album-info { transform: translateY(0); }

/* ---- Top bar at narrow widths ---------------------------------------------
   The bar is a fixed 50px flex row; with nothing stopping it, the title wraps
   onto three lines and the last view button gets pushed off the edge. */
.top-bar { gap: 16px; }
.top-bar-title {
    flex: 0 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.top-bar-title .header-link {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}
.view-toggle {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
}
.view-toggle::-webkit-scrollbar { display: none; }
.view-btn { flex: 0 0 auto; white-space: nowrap; }

@media (max-width: 1200px) {
    .top-bar { padding: 0 16px; gap: 12px; }
    .top-bar-title { font-size: 14px; }
    .view-btn { padding: 6px 10px; font-size: 10px; }
    .view-toggle { gap: 6px; }
}
@media (max-width: 1000px) {
    .top-bar-title { font-size: 12px; max-width: 30vw; }
    .view-btn { padding: 5px 8px; letter-spacing: 0.02em; }
}

/* ---- Details panel at narrow widths ---------------------------------------
   --p1-width is 33.333vw, so on a ~1000px window the panel is ~330px and the
   24px title, 18px artist and track rows all wrap to one word per line while
   the round play buttons push past the right edge. */
@media (max-width: 1280px) {
    :root { --p1-width: 380px; }
    .album-title  { font-size: 20px; }
    .album-artist { font-size: 15px; }
}
@media (max-width: 900px) {
    :root { --p1-width: 100vw; }
    .info-section { border-left: none; }
}
.album-details { overflow-wrap: anywhere; }
.track-item { min-width: 0; }
.track-item > *:first-child { min-width: 0; overflow-wrap: anywhere; }
.track-item .play-button { flex: 0 0 30px; }
.track-list-header { overflow-wrap: anywhere; }

/* ---- Genre map: make it scrollable by touch -------------------------------
   `.container:not(.landing-active) .collage-grid` (overflow:hidden) and
   `.container.genre-map-active .collage-grid` (overflow:auto) have identical
   specificity, so the former wins on source order and the grid is clipped.
   Desktop panning still worked because the drag handler assigns scrollLeft /
   scrollTop directly, which ignores overflow:hidden — but touch had neither a
   handler nor native scrolling, so the map was frozen. */
.container.genre-map-active:not(.landing-active) .collage-grid {
    overflow: auto;
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;
    display: grid;
    place-items: center;
}

/* ---- Side panels at narrow widths -----------------------------------------
   p1 (380px) plus p2 (25vw) leaves almost no map on a small window, and the
   genre headers and album titles are long enough to clip. */
.related-genres-panel,
.genre-albums-panel { overflow-wrap: anywhere; }
.related-genres-header,
.genre-albums-panel-content { overflow-wrap: anywhere; }

@media (max-width: 1280px) {
    :root { --p2-width: 300px; }
}
@media (max-width: 1100px) {
    /* One panel at a time: p2 sits over p1 rather than beside it. */
    :root { --p2-width: 320px; }
    .genre-albums-panel { z-index: 1000; }
}
@media (max-width: 900px) {
    :root { --p1-width: 100vw; --p2-width: 100vw; }
    .related-genres-panel,
    .genre-albums-panel { border-left: none; }
}

/* ---- Player bar: stop it crowding at narrow widths ------------------------
   .player-info and .player-options both take flex:1 with a 15px gap, so the
   track name pushes the transport off-centre and the video toggle clips off
   the right edge before the window is even narrow. */
.player-info {
    min-width: 0;
    flex: 1 1 0;
}
.player-track-name,
.player-artist-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.player-controls { flex: 0 0 auto; }
.player-options { flex: 1 1 0; min-width: 0; }
.player-options > * { flex: 0 0 auto; }

@media (max-width: 1100px) {
    .player-bar { padding: 0 12px; }
    .player-options { gap: 10px; }
    .volume-control input[type="range"] { width: 70px; }
}
@media (max-width: 820px) {
    /* Keep transport and the video toggle; the volume slider is the first
       thing that can go, since the phone has hardware volume anyway. */
    .volume-control input[type="range"] { display: none; }
    .player-info { max-width: 40vw; }
}