/* Layout metrics — kept in one place so panels sit above the player bar.
   The custom transport bar (artwork + seek) is taller than the old native one. */
:root {
    --bmp-player-h: 64px;
}

/* Theme Variables */
#bmp-player-container {
    --light-bg: #ffffff;
    --light-text: #1a1a1a;
    --light-secondary: #666666;
    --light-border: rgba(0, 0, 0, 0.1);
    --light-accent: #2563eb;
    --light-hover: #1d4ed8;

    --dark-bg: #1a1a1a;
    --dark-text: #ffffff;
    --dark-secondary: #a3a3a3;
    --dark-border: rgba(255, 255, 255, 0.1);
    --dark-accent: #3b82f6;
    --dark-hover: #60a5fa;

    --player-bg: var(--light-bg);
    --player-text: var(--light-text);
    --player-secondary: var(--light-secondary);
    --player-border: var(--light-border);
    --player-accent: var(--light-accent);
    --player-hover: var(--light-hover);
}

/* Main Player Container */
#bmp-player-container {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 998;
    background: var(--player-bg);
    border-top: 1px solid var(--player-border);
    color: var(--player-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    transition: background 0.3s ease, color 0.3s ease;
    text-shadow: none;
    animation: bmp-slide-up 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes bmp-slide-up {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

/* The custom transport drives a hidden <audio> engine */
#bmp-global-player {
    display: none;
}

/* Player bar layout */
.bmp-bar {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
}

.bmp-bar-spacer {
    flex: 1 1 auto;
}

/* Now playing: artwork + title/artist */
.bmp-np {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 0 1 240px;
}

.bmp-art-wrap {
    position: relative;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
}

.bmp-art {
    width: 44px;
    height: 44px;
    border-radius: 6px;
    object-fit: cover;
    background: var(--player-border);
    visibility: hidden;
}

.bmp-np-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
}

.bmp-np-title {
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--player-text);
    text-decoration: none;
    cursor: pointer;
}

a.bmp-np-title:hover { text-decoration: underline; }

/* Nothing playing: not a real link. */
.bmp-np-title.bmp-np-title-off {
    cursor: default;
    text-decoration: none;
}

.bmp-np-artist {
    font-size: 12px;
    color: var(--player-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bmp-np-artist:empty {
    display: none;
}

/* Animated equalizer overlay on the artwork while playing */
.bmp-eq {
    position: absolute;
    inset: 0;
    display: none;
    align-items: flex-end;
    justify-content: center;
    gap: 2px;
    padding: 8px;
    background: rgba(0, 0, 0, 0.45);
    border-radius: 6px;
}

.bmp-playing .bmp-eq {
    display: flex;
}

.bmp-eq i {
    width: 3px;
    background: #fff;
    border-radius: 1px;
    animation: bmp-eq 0.9s ease-in-out infinite;
}

.bmp-eq i:nth-child(1) { height: 40%; animation-delay: -0.4s; }
.bmp-eq i:nth-child(2) { height: 90%; animation-delay: -0.2s; }
.bmp-eq i:nth-child(3) { height: 60%; animation-delay: -0.6s; }
.bmp-eq i:nth-child(4) { height: 80%; animation-delay: 0s; }

@keyframes bmp-eq {
    0%, 100% { transform: scaleY(0.35); }
    50%      { transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
    #bmp-player-container { animation: none; }
    .bmp-eq i { animation: none; }
    /* Overlays still appear/disappear, just without the slide/fade motion. */
    #bmp-lyrics-overlay,
    #bmp-queue-panel,
    .bmp-lyrics-content {
        transition: visibility 0s;
        transform: none;
    }
}

/* Transport cluster */
.bmp-transport {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}

.bmp-playpause {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    background: var(--player-accent);
    color: #fff;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.2s ease;
}

.bmp-playpause:hover {
    background: var(--player-hover);
    transform: scale(1.06);
}

.bmp-playpause .bmp-icon-pause { display: none; }
.bmp-playing .bmp-playpause .bmp-icon-play { display: none; }
.bmp-playing .bmp-playpause .bmp-icon-pause { display: block; }

/* Time display */
.bmp-time {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--player-secondary);
    font-variant-numeric: tabular-nums;
    flex: 0 0 auto;
}

.bmp-time-sep { opacity: 0.6; }

/* Full-width seek bar along the top edge of the player */
.bmp-seek {
    position: relative;
    height: 6px;
    margin-top: -3px;
    cursor: pointer;
    touch-action: none;
}

.bmp-seek::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 4px;
    transform: translateY(-50%);
    background: var(--player-border);
    transition: height 0.12s ease;
}

.bmp-seek-buffered,
.bmp-seek-fill {
    position: absolute;
    left: 0;
    top: 50%;
    height: 4px;
    transform: translateY(-50%);
    border-radius: 0 2px 2px 0;
    pointer-events: none;
}

.bmp-seek-buffered {
    width: 0;
    background: var(--player-secondary);
    opacity: 0.35;
}

.bmp-seek-fill {
    width: 0;
    background: var(--player-accent);
}

.bmp-seek-thumb {
    position: absolute;
    top: 50%;
    left: 0;
    width: 12px;
    height: 12px;
    margin-left: -6px;
    border-radius: 50%;
    background: var(--player-accent);
    transform: translateY(-50%) scale(0);
    transition: transform 0.12s ease;
    pointer-events: none;
}

.bmp-seek:hover .bmp-seek-thumb,
.bmp-seek:focus .bmp-seek-thumb {
    transform: translateY(-50%) scale(1);
}

.bmp-seek:hover::before { height: 6px; }

/* Volume */
.bmp-volume {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}

.bmp-volume-slider {
    position: relative;
    width: 80px;
    height: 16px;
    cursor: pointer;
    touch-action: none;
    display: flex;
    align-items: center;
}

.bmp-volume-slider::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 4px;
    border-radius: 2px;
    background: var(--player-border);
}

.bmp-volume-fill {
    position: absolute;
    left: 0;
    width: 100%;
    height: 4px;
    border-radius: 2px;
    background: var(--player-accent);
}

/* Icon-button image glyphs (lyrics / sheet music) follow the theme */
.bmp-icon-button img {
    opacity: 0.75;
    transition: opacity 0.2s ease;
}

.bmp-icon-button:hover img { opacity: 1; }

[data-theme="dark"] .bmp-icon-button img { filter: invert(1); }

/* Volume mute icon swap */
.bmp-volume .bmp-icon-vol-off { display: none; }
.bmp-muted .bmp-volume .bmp-icon-vol-on { display: none; }
.bmp-muted .bmp-volume .bmp-icon-vol-off { display: block; }

/* Button Styles */
.bmp-button {
    align-items: center;
    background: var(--player-accent);
    border: none;
    border-radius: 6px;
    color: white;
    cursor: pointer;
    display: inline-flex;
    font-size: 14px;
    font-weight: 500;
    gap: 6px;
    height: 36px;
    padding: 0 16px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.bmp-button:hover {
    background: var(--player-hover);
    color: white;
}

.bmp-icon-button {
    align-items: center;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--player-secondary);
    cursor: pointer;
    display: flex;
    height: 36px;
    justify-content: center;
    padding: 0 8px;
    transition: all 0.2s ease;
}

.bmp-icon-button:hover {
    background: var(--player-border);
    color: var(--player-text);
}

/* Active shuffle / repeat toggles */
.bmp-icon-button.bmp-active {
    color: var(--player-accent);
}

.bmp-icon-button:disabled {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
}

/* Repeat-one indicator */
#bmp-repeat {
    position: relative;
}

#bmp-repeat[data-mode="one"]::after {
    content: "1";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 9px;
    font-weight: 700;
}

#bmp-close-player {
    align-items: center;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--player-secondary);
    cursor: pointer;
    display: flex;
    font-size: 20px;
    height: 36px;
    justify-content: center;
    padding: 0;
    transition: all 0.2s ease;
    width: 36px;
}

#bmp-close-player:hover {
    background: var(--player-border);
    color: var(--player-text);
}

/* Song Title Styles */
#bmp-current-song {
    color: var(--player-text);
    font-weight: 500;
    margin-left: 4px;
}

.bmp-play-song {
    color: var(--player-accent);
    position: relative;
    text-decoration: none;
    transition: color 0.2s ease;
}

.bmp-play-song:hover {
    color: var(--player-hover);
}

.bmp-currently-playing {
    font-weight: 500;
}

.bmp-currently-playing::before {
    content: "▶";
    font-size: 12px;
    left: -1.2em;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

/* Image Overlay Styles */
.bmp-image-container {
    position: relative !important;
    display: block;
    width: 100%;
    height: 100%;
}

.bmp-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bmp-image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
    z-index: 2;
    border-radius: 25px;
}

figure:hover .bmp-image-container .bmp-image-overlay {
    opacity: 1;
    pointer-events: auto;
}

.bmp-overlay-play {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    padding: 0;
    opacity: 0.9;
    transition: transform 0.2s ease, opacity 0.2s ease;
    width: 96px;
    height: 96px;
}

.bmp-overlay-play:hover {
    transform: scale(1.1);
    opacity: 1;
}

.bmp-overlay-info {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 20px;
    color: white !important;
    text-decoration: none !important;
    font-size: 14px;
    transition: background-color 0.2s ease;
}

.bmp-overlay-info:hover {
    background: rgba(0, 0, 0, 0.8);
    color: white !important;
    text-decoration: none !important;
}

/* Lyrics Overlay */
#bmp-lyrics-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: var(--bmp-player-h);
    background: rgba(0, 0, 0, 0.86);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    /* Hidden by default; .bmp-open fades it in (no display toggle, so it can
       animate). visibility keeps it non-interactive while transparent. */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}

#bmp-lyrics-overlay.bmp-open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s ease;
}

.bmp-lyrics-content {
    background: var(--player-bg);
    border-radius: 8px;
    max-width: 800px;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    transform: translateY(10px) scale(0.985);
    transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}

#bmp-lyrics-overlay.bmp-open .bmp-lyrics-content {
    transform: none;
}

.bmp-lyrics-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid var(--player-border);
}

.bmp-lyrics-header h3 {
    margin: 0;
    color: var(--player-text);
}

.bmp-close-lyrics {
    background: transparent;
    border: none;
    color: var(--player-secondary);
    cursor: pointer;
    font-size: 20px;
    padding: 4px;
    transition: color 0.2s ease;
}

.bmp-close-lyrics:hover {
    color: var(--player-text);
}

#bmp-lyrics-text {
    padding: 20px;
    margin: 0;
    overflow-y: auto;
    font-family: monospace;
    white-space: pre-wrap;
    color: var(--player-text);
    font-size: 14px;
    line-height: 1.5;
    flex-grow: 1;
}

/* Up Next / queue panel */
#bmp-queue-panel {
    position: fixed;
    bottom: var(--bmp-player-h);
    right: 0;
    width: 360px;
    max-width: 100%;
    max-height: 50vh;
    background: var(--player-bg, #fff);
    color: var(--player-text, #1a1a1a);
    border: 1px solid var(--player-border, rgba(0, 0, 0, 0.1));
    border-radius: 8px 0 0 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.2);
    /* Slide up + fade in from the player bar. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity 0.2s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0s linear 0.22s;
}

#bmp-queue-panel.bmp-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.2s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.bmp-queue-content {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.bmp-queue-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--player-border, rgba(0, 0, 0, 0.1));
}

.bmp-queue-header h3 {
    margin: 0;
    font-size: 15px;
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.bmp-queue-count {
    font-size: 12px;
    font-weight: 400;
    color: var(--player-secondary, #666);
}

.bmp-close-queue {
    background: transparent;
    border: none;
    color: var(--player-secondary, #666);
    cursor: pointer;
    font-size: 18px;
}

.bmp-queue-list {
    margin: 0;
    padding: 8px;
    list-style: none;
    overflow-y: auto;
}

.bmp-queue-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 8px;
    transition: background 0.14s ease;
}

.bmp-queue-item:hover {
    background: var(--player-hover-bg, rgba(127, 127, 127, 0.12));
}

/* Now-playing row: accent tint + a small accent rail on the left. */
.bmp-queue-item.bmp-queue-current {
    background: color-mix(in srgb, var(--player-accent, #6ea8fe) 16%, transparent);
    box-shadow: inset 3px 0 0 var(--player-accent, #6ea8fe);
}
.bmp-queue-item.bmp-queue-current .bmp-queue-item-title { color: var(--player-accent, #6ea8fe); }

.bmp-queue-item-play {
    flex-grow: 1;
    min-width: 0; /* let long titles ellipsize instead of overflowing */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    text-align: left;
    padding: 0;
}

.bmp-queue-item-title {
    font-weight: 600;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bmp-queue-item-artist {
    font-size: 12px;
    font-weight: 400;
    color: var(--player-secondary, #666);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bmp-queue-item-duration {
    flex: 0 0 auto;
    font-size: 12px;
    color: var(--player-secondary, #666);
    font-variant-numeric: tabular-nums;
}

.bmp-queue-remove {
    flex: 0 0 auto;
    background: transparent;
    border: none;
    color: var(--player-secondary, #666);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    opacity: 0;
    transition: opacity 0.14s ease, color 0.14s ease;
}

.bmp-queue-item:hover .bmp-queue-remove,
.bmp-queue-item.bmp-queue-current .bmp-queue-remove { opacity: 1; }

.bmp-queue-remove:hover {
    color: var(--player-text, #1a1a1a);
}

.wp-block-post-featured-image a {
    display:flex;
    height:inherit;
    width: inherit;
}

#bmp-visualizer-container {
    position: fixed;
    bottom: var(--bmp-player-h); /* sit flush on top of the player bar */
    left: 0;
    right: 0;
    height: 200px;
    /* Glass: semi-transparent + blur the page content behind. The canvas draws
       in "overlay" mode (transparent background), so only the bars sit on top —
       the bars stay sharp; just the backdrop is blurred. */
    background: rgba(12, 14, 20, 0.42);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
    backdrop-filter: blur(18px) saturate(1.2);
    border-top: 1px solid var(--player-border);
    z-index: 997;
}

/* audioMotion's canvas must stay transparent for the glass to show through. */
#bmp-visualizer-container canvas {
    background: transparent !important;
}

/* Over-visualizer synced lyric line: one line at a time, fading in with an
   animated rainbow gradient. */
.bmp-viz-lyric {
    position: absolute;
    top: 16px;
    left: 0;
    right: 0;
    z-index: 998;
    text-align: center;
    padding: 0 90px 0 24px; /* keep clear of the preset menu */
    pointer-events: none;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.bmp-viz-lyric.bmp-viz-lyric-show {
    opacity: 1;
    transform: none;
}

.bmp-viz-lyric-text {
    font-size: clamp(20px, 3vw, 34px);
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.15;
    background: linear-gradient(90deg, #22d3ee, #a855f7, #ec4899, #ffd07a, #22d3ee);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: bmp-viz-hue 6s linear infinite;
    filter: drop-shadow(0 2px 14px rgba(0, 0, 0, 0.55));
}

@keyframes bmp-viz-hue {
    to { background-position: 300% 50%; }
}

/* On/off toggle sits beside the preset select. */
.bmp-viz-lyric-opt {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 8px;
    color: #f2f4f8;
    font-size: 13px;
    cursor: pointer;
    vertical-align: middle;
}

@media (prefers-reduced-motion: reduce) {
    .bmp-viz-lyric-text { animation: none; background-position: 0 50%; }
}

@media (max-width: 600px) {
    .bmp-viz-lyric-text { font-size: 18px; }
    .bmp-viz-lyric { top: 10px; }
}

/* Preset (style) menu overlaid on the visualizer */
.bmp-preset-selector {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 999;
    background: rgba(20, 23, 31, 0.72);
    -webkit-backdrop-filter: blur(10px) saturate(1.3);
    backdrop-filter: blur(10px) saturate(1.3);
    border-radius: 8px;
    padding: 4px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.bmp-preset-selector select {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #f2f4f8;
    font-size: 14px;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    outline: none;
}

.bmp-preset-selector select option { color: #1a1a1a; }

.bmp-preset-selector select:hover {
    border-color: #6ea8fe;
}

/* Active state for the visualizer on/off toggle in the bar */
#bmp-visualizer-button {
    opacity: 0.75;
    transition: opacity 0.2s ease, color 0.2s ease;
}

#bmp-visualizer-button:hover {
    opacity: 1;
}

#bmp-visualizer-button.bmp-active {
    opacity: 1;
    color: var(--player-accent);
}

/* Adjust player z-index to ensure proper stacking */
#bmp-player-container {
    z-index: 998;
}

/* Mobile Styles */
@media (max-width: 782px) {
    .bmp-bar {
        padding: 6px 10px;
        gap: 4px;
    }

    /* Keep the essentials: artwork, transport, seek. Hide the rest. */
    .bmp-time,
    .bmp-volume,
    #bmp-shuffle,
    #bmp-repeat,
    #bmp-post-link {
        display: none;
    }

    .bmp-np {
        flex: 1 1 auto;
    }

    .bmp-button {
        padding: 0 12px;
    }
    #bmp-visualizer-container {
        height: 150px;
    }
}

@media (hover: none) {
    .bmp-image-overlay {
        background: rgba(0, 0, 0, 0.3);
        opacity: 1;
        pointer-events: auto;
    }
}
/* Synced (LRC) lyrics — dim lines, the active line brightens; the container
   scrolls to keep it centred. Works in the detail pane and the overlay. */
.bmp-lyrics-text.bmp-lyrics-synced {
    position: relative;
    max-height: 60vh;
    overflow-y: auto;
}

.bmp-lrc-line {
    padding: 3px 0;
    opacity: 0.4;
    cursor: pointer;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.bmp-lrc-line:hover { opacity: 0.7; }

.bmp-lrc-line.bmp-lrc-active {
    opacity: 1;
    font-weight: 700;
    transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
    .bmp-lrc-line { transition: opacity 0.25s ease; transform: none; }
    .bmp-lrc-line.bmp-lrc-active { transform: none; }
}

/* Enhanced LRC (word-level / karaoke): keep the three levels — inactive lines
   are dim (gray), the active line is fully lit (white), and only the word being
   sung right now takes the accent colour. The rest of the active line stays
   white so the whole line reads clearly. */
.bmp-lrc-line-words .bmp-lrc-word {
    transition: color 0.12s ease, text-shadow 0.12s ease;
}

.bmp-lrc-line.bmp-lrc-active .bmp-lrc-word-active {
    color: #22d3ee;
    text-shadow: 0 0 12px rgba(34, 211, 238, 0.45);
}

@media (prefers-reduced-motion: reduce) {
    .bmp-lrc-line-words .bmp-lrc-word { transition: none; }
}

/* ---- Karaoke (full-screen) mode --------------------------------------- *
 * Pure presentation: the body.bmp-karaoke class re-stages existing pieces —
 * the lyrics overlay becomes a full-screen synced-lyrics surface and the
 * visualizer becomes the animated backdrop. The transport bar stays put. */

/* Expand-to-full-screen toggle, shown next to the lyrics heading (detail pane
   and the lyrics overlay). Compact, quiet, brightens on hover / when active. */
.bmp-karaoke-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border: 0;
    background: transparent;
    color: var(--player-secondary, #9aa4b2);
    cursor: pointer;
    border-radius: 6px;
    line-height: 0;
    transition: color 0.15s ease, background 0.15s ease;
}
.bmp-karaoke-toggle:hover { color: var(--player-text, #e8eef7); background: rgba(255, 255, 255, 0.08); }

.bmp-icon-collapse { display: none; }
body.bmp-karaoke .bmp-karaoke-toggle .bmp-icon-expand { display: none; }
body.bmp-karaoke .bmp-karaoke-toggle .bmp-icon-collapse { display: inline; }
body.bmp-karaoke .bmp-karaoke-toggle { color: #22d3ee; }

/* Detail-pane lyrics heading becomes a row: title + expand button. */
.bmp-detail-heading-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.bmp-lyrics-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

body.bmp-karaoke { overflow: hidden; }

/* Visualizer → full-screen backdrop. */
body.bmp-karaoke #bmp-visualizer-container {
    display: block !important;
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    max-width: none;
    margin: 0;
    border-radius: 0;
    z-index: 100000;
    background: radial-gradient(130% 100% at 50% 0%, #16233f 0%, #0a1120 55%, #05080f 100%);
}
body.bmp-karaoke #bmp-visualizer-container canvas { opacity: 0.85; }
/* The small preset menu and single-line viz lyric are redundant here. */
body.bmp-karaoke .bmp-preset-selector,
body.bmp-karaoke #bmp-viz-lyric { display: none !important; }

/* Lyrics overlay → full-screen karaoke lyric surface. */
body.bmp-karaoke #bmp-lyrics-overlay {
    inset: 0;
    bottom: 0;
    z-index: 100010;
    padding: 0;
    background: radial-gradient(120% 90% at 50% 35%, rgba(5, 8, 15, 0.30), rgba(5, 8, 15, 0.80));
}
body.bmp-karaoke .bmp-lyrics-content {
    background: transparent;
    max-width: 1100px;
    width: 100%;
    height: 100vh;
    max-height: 100vh;
    box-sizing: border-box;
    padding: 6vh 24px calc(var(--bmp-player-h, 72px) + 5vh);
    transform: none;
}
body.bmp-karaoke .bmp-lyrics-header {
    border: 0;
    padding: 10px 10px 0;
    justify-content: flex-end; /* just the close button, top-right */
}
body.bmp-karaoke .bmp-lyrics-header h3 { display: none; }
body.bmp-karaoke .bmp-close-lyrics { font-size: 26px; color: rgba(255, 255, 255, 0.75); }

/* Big, centred lyric text; the existing line/word highlighting carries over. */
body.bmp-karaoke #bmp-lyrics-text {
    font-family: inherit;
    text-align: center;
    color: #fff; /* inactive lines dim to gray, active stays white */
    max-height: none;
    overflow-y: auto;
    padding: 0 8px;
    -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 86%, transparent);
            mask-image: linear-gradient(transparent, #000 12%, #000 86%, transparent);
}
body.bmp-karaoke #bmp-lyrics-text .bmp-lrc-line {
    font-size: clamp(24px, 4.2vw, 52px);
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -0.01em;
    padding: 10px 0;
    transform: none;
}
body.bmp-karaoke #bmp-lyrics-text .bmp-lrc-line.bmp-lrc-active { transform: none; }
/* Plain (non-synced) lyrics stay readable and centred too. */
body.bmp-karaoke #bmp-lyrics-text:not(.bmp-lyrics-synced) {
    white-space: pre-wrap;
    font-size: clamp(16px, 2vw, 22px);
    line-height: 1.6;
    opacity: 0.9;
}

/* Keep the transport bar usable, floating above the stage. */
body.bmp-karaoke #bmp-player-container {
    z-index: 100020;
    background: rgba(8, 12, 22, 0.72);
    -webkit-backdrop-filter: blur(14px);
            backdrop-filter: blur(14px);
}