/* ============================================================================
 * Spicy Lyrics page — port of Spicy Lyrics 6.1.1 (ContentBox.css, NowBar,
 * DynamicBG, ViewControls) for NeonWave's fullscreen lyrics (#karaokeOverlay).
 *  - No Canvas: centred media card (cover) with view controls, heart, playback
 *    and vertical volume shown on hover; timeline + title under it.
 *  - Canvas: the video fills the left, metadata/timeline/controls bottom-left.
 * ========================================================================== */

.spl-page {
    position: fixed; inset: 0; z-index: 9000; overflow: hidden;
    display: none; color: #fff; background: #000;
    font-family: SpicyLyrics, Inter, "Segoe UI", system-ui, sans-serif;
    --spl-media: min(32vw, 58vh);
    opacity: 0; transition: opacity 0.3s ease;
}
.spl-page.active { opacity: 1; }
.spl-page > *:not(.spl-bg):not(.spl-video):not(.spl-video-veil) { position: relative; z-index: 2; }
/* hide everything from the old karaoke skin */
.spl-page .karaoke-bg-gradient, .spl-page .karaoke-bg-veil, .spl-page .karaoke-bg-glow,
.spl-page .karaoke-header, .spl-page .karaoke-content { display: none !important; }

/* ── Dynamic background (Spicy DynamicBG: blurred cover, saturate 2.5, brightness .65) ── */
.spl-bg {
    position: absolute; inset: 0; z-index: 0; overflow: hidden;
    filter: saturate(2.2) brightness(0.75);
    background: radial-gradient(circle at 50% 50%, rgba(20, 24, 38, 0.95), #000 100%);
}
.spl-bg-blob {
    position: absolute; width: 140%; height: 140%; left: -20%; top: -20%;
    background-image: var(--karaoke-artwork, none);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    filter: blur(60px); opacity: 0.9; transform-origin: center;
    animation: spl-spin 45s linear infinite;
    will-change: transform;
}
.spl-bg-blob-2 {
    width: 120%; height: 120%; left: 15%; top: 10%;
    opacity: 0.7; animation-duration: 60s; animation-direction: reverse;
    mix-blend-mode: screen;
}
.spl-bg-blob-3 {
    width: 100%; height: 100%; left: -20%; top: 20%;
    opacity: 0.6; animation-duration: 75s;
}
@keyframes spl-spin { from { transform: rotate(0deg) scale(1.1); } to { transform: rotate(360deg) scale(1.1); } }

/* ── Canvas video (fills the left like Spicy's NowBar media in fullscreen) ── */
.spl-video { position: absolute; inset: 0 auto 0 0; width: 58%; z-index: 1; overflow: hidden; display: none; }
.spl-page.has-video-bg .spl-video { display: block; }
.spl-video video, .spl-video iframe {
    width: 100% !important; height: 100% !important; object-fit: cover; border: 0;
    -webkit-mask-image: linear-gradient(90deg, #000 55%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 55%, transparent 100%);
}
.spl-video-veil {
    position: absolute; inset: 0; z-index: 1; pointer-events: none; display: none;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.55) 100%);
}
.spl-page.has-video-bg .spl-video-veil { display: block; }

/* ── Menu "•••" top-left (window controls live top-right in Electron) ── */
.spl-menu {
    position: absolute !important; top: 18px; left: 22px; border: 0; background: none; color: #fff;
    font-size: 18px; letter-spacing: 2px; cursor: pointer; opacity: 0.9; -webkit-app-region: no-drag;
}

/* ── Layout ── */
.spl-nowbar {
    position: absolute !important; top: 0; bottom: 0; left: 0; width: 46%;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
}
.spl-lyrics {
    position: absolute !important; top: 0; bottom: 0; right: 0; left: 46%;
    overflow-y: auto; scrollbar-width: none; padding: 0 6vw 0 1vw;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 10%, #000 85%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 10%, #000 85%, transparent 100%);
}
.spl-lyrics::-webkit-scrollbar { display: none; }
.spl-page.NowBarHidden .spl-nowbar { display: none; }
.spl-page.NowBarHidden .spl-lyrics { left: 0; padding: 0 14vw; }
.spl-page.LyricsHidden .spl-lyrics { display: none; }
.spl-page.LyricsHidden .spl-nowbar { width: 100%; }

/* ── Media card (no Canvas) ── */
.spl-media {
    position: relative; width: var(--spl-media); height: var(--spl-media); border-radius: 8px; overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45); background: rgba(255, 255, 255, 0.08);
}
.spl-media > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.spl-media-shade { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.35); opacity: 0; transition: opacity 0.25s ease; }
.spl-media:hover .spl-media-shade { opacity: 1; }
.spl-view-controls, .spl-heart, .spl-controls, .spl-volume { opacity: 0; transition: opacity 0.25s ease; }
.spl-media:hover .spl-view-controls, .spl-media:hover .spl-heart, .spl-media:hover .spl-controls, .spl-media:hover .spl-volume { opacity: 1; }

/* View controls: 6 round glass buttons */
.spl-view-controls {
    position: absolute; top: 11%; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; z-index: 3;
}
.spl-vc {
    width: 46px; height: 46px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    color: #fff; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.28);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: background 0.2s ease, transform 0.15s ease;
}
.spl-vc:hover { background: rgba(255, 255, 255, 0.2); }
.spl-vc:active { transform: scale(0.94); }
.spl-vc svg { width: 18px; height: 18px; }

/* Big heart in the middle */
.spl-heart {
    position: absolute; left: 50%; top: 50%; width: 50%; height: 50%; transform: translate(-50%, -48%);
    border: 0; background: none; cursor: pointer; z-index: 2; padding: 0;
}
.spl-heart svg { width: 100%; height: 100%; overflow: visible; }
.spl-heart .spl-heart-outline { fill: transparent; transition: fill 0.2s ease; }
.spl-heart.Filled .spl-heart-outline { fill: #fff; }
.spl-heart:hover { transform: translate(-50%, -48%) scale(1.03); }
.spl-heart.press02 { animation: spl-press 0.1s ease; }
.spl-heart.reverse_press02 { animation: spl-press 0.16s ease reverse; }
@keyframes spl-press { 50% { transform: translate(-50%, -48%) scale(0.92); } }

/* Playback controls row */
.spl-controls {
    position: absolute; left: 0; right: 0; bottom: 9%; display: flex; align-items: center; justify-content: center; gap: 7%; z-index: 3;
}
.spl-pc { border: 0; background: none; color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 4px; transition: transform 0.15s ease, opacity 0.15s ease; }
.spl-pc:hover { transform: scale(1.06); }
.spl-pc:active { transform: scale(0.92); }
.spl-pc svg { fill: currentColor; }
.spl-shuffle svg, .spl-repeat svg { width: 22px; height: 18px; opacity: 0.55; }
.spl-shuffle.Enabled svg, .spl-repeat.Enabled svg { opacity: 1; filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.6)); }
.spl-repeat.One::after { content: "1"; position: absolute; font-size: 9px; font-weight: 800; margin: -18px 0 0 22px; }
.spl-prev svg, .spl-next svg { width: 40px; height: 23px; }
.spl-prev svg { transform: rotate(180deg); }
.spl-play svg { width: 30px; height: 36px; }

/* Vertical volume slider inside the card (right edge) */
.spl-volume {
    position: absolute; right: 4%; top: 34%; height: 33%; width: 22px; z-index: 3;
    display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
    border-radius: 11px; background: rgba(255, 255, 255, 0.25); overflow: hidden; --v: 0.8;
}
.spl-volume::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--v) * 100%); background: #fff; border-radius: 11px; }
.spl-volume input { position: absolute; inset: 0; opacity: 0; cursor: pointer; writing-mode: vertical-lr; direction: rtl; width: 100%; height: 100%; margin: 0; }
.spl-volume svg { position: relative; width: 11px; height: 11px; margin-bottom: 6px; color: #333; pointer-events: none; }

/* Timeline under the card */
.spl-timeline { width: var(--spl-media); display: flex; align-items: center; gap: 14px; margin-top: 26px; }
.spl-time { font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, 0.7); min-width: 34px; font-variant-numeric: tabular-nums; }
.spl-time:last-child { text-align: right; }
.spl-slider {
    --p: 0; position: relative; flex: 1; height: 8px; border-radius: 4px; cursor: pointer; touch-action: none;
    background: rgba(255, 255, 255, 0.3); border: 1px solid rgba(255, 255, 255, 0.45); overflow: hidden;
}
.spl-slider-fill { position: absolute; inset: 0 auto 0 0; width: calc(var(--p) * 100%); background: #fff; border-radius: 4px; }

/* Title & artist centred under the timeline */
.spl-meta { width: var(--spl-media); text-align: center; margin-top: 18px; }
.spl-title { font-size: clamp(22px, 2.1vw, 34px); font-weight: 800; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spl-artist { font-size: clamp(15px, 1.35vw, 22px); color: rgba(255, 255, 255, 0.65); margin-top: 4px; }

/* ── Canvas mode: metadata, timeline and controls bottom-left over the video ── */
.spl-page.has-video-bg .spl-nowbar { justify-content: flex-end; align-items: flex-start; padding: 0 0 26px 26px; width: 34%; }
.spl-page.has-video-bg .spl-lyrics { left: 46%; }
.spl-page.has-video-bg .spl-media { position: static; width: auto; height: auto; overflow: visible; box-shadow: none; background: none; order: 3; display: flex; align-items: center; gap: 22px; margin-top: 18px; }
.spl-page.has-video-bg .spl-media > img, .spl-page.has-video-bg .spl-media-shade { display: none; }
.spl-page.has-video-bg .spl-meta { order: 1; text-align: left; width: min(30vw, 480px); margin-top: 0; }
.spl-page.has-video-bg .spl-timeline { order: 2; width: min(30vw, 480px); flex-direction: column; align-items: stretch; gap: 8px; margin-top: 18px; position: relative; }
.spl-page.has-video-bg .spl-timeline .spl-slider { order: 0; height: 6px; flex: none; }
.spl-page.has-video-bg .spl-timeline .spl-time { position: absolute; top: 14px; font-size: 12px; }
.spl-page.has-video-bg .spl-timeline .spl-time:first-child { left: 0; }
.spl-page.has-video-bg .spl-timeline .spl-time:last-child { right: 0; }
.spl-page.has-video-bg .spl-title { font-size: 22px; }
.spl-page.has-video-bg .spl-artist { font-size: 15px; }
.spl-page.has-video-bg .spl-controls, .spl-page.has-video-bg .spl-heart, .spl-page.has-video-bg .spl-volume { position: static; opacity: 1; transform: none; }
.spl-page.has-video-bg .spl-heart { width: 30px; height: 30px; margin-top: 22px; }
.spl-page.has-video-bg .spl-heart:hover { transform: scale(1.06); }
.spl-page.has-video-bg .spl-heart svg path { stroke-width: 60; }
.spl-page.has-video-bg .spl-controls { gap: 22px; margin-top: 22px; }
.spl-page.has-video-bg .spl-play svg { width: 22px; height: 28px; }
.spl-page.has-video-bg .spl-prev svg, .spl-page.has-video-bg .spl-next svg { width: 30px; height: 18px; }
.spl-page.has-video-bg .spl-volume { width: 82px; height: 6px; flex-direction: row; margin-top: 22px; border-radius: 3px; overflow: visible; }
.spl-page.has-video-bg .spl-volume::before { top: 0; height: 100%; width: calc(var(--v) * 100%); bottom: auto; }
.spl-page.has-video-bg .spl-volume input { writing-mode: horizontal-tb; direction: ltr; }
.spl-page.has-video-bg .spl-volume svg { position: absolute; left: -20px; top: -3px; color: #fff; margin: 0; }
.spl-page.has-video-bg .spl-view-controls { position: fixed; top: 16px; left: 72px; right: auto; opacity: 1; justify-content: flex-start; }
.spl-page.has-video-bg .spl-vc { width: 42px; height: 42px; }
.spl-page.has-video-bg .spl-media .spl-view-controls { z-index: 5; }

/* Idle: controls fade out like Spicy (no mouse for ~2.6 s) */
.spl-page.is-idle .spl-menu, .spl-page.is-idle.has-video-bg .spl-view-controls,
.spl-page.is-idle.has-video-bg .spl-controls, .spl-page.is-idle.has-video-bg .spl-heart, .spl-page.is-idle.has-video-bg .spl-volume {
    opacity: 0.08; transition: opacity 0.6s ease;
}
.spl-page.is-idle { cursor: none; }

/* Compact mode: no lyrics column chrome, media smaller */
.spl-page.CompactMode { --spl-media: min(24vw, 44vh); }

/* ── Lyrics inside the page (SpicyLyricsRenderer, large) ── */
.spl-page .sl-root.sl-large { --sl-size: clamp(34px, 3.3vw, 58px); gap: 18px; padding: 40vh 0; }
.spl-page .sl-line { font-weight: 700; letter-spacing: -0.015em; line-height: 1.16; }
.spl-page .sl-line.NotSung, .spl-page .sl-line.Sung { opacity: 0.55; }
.spl-page .sl-line { filter: blur(calc(var(--sl-blur, 0px) * 1.4)); }
.spl-page .sl-line.NotSung .sl-word:not(.sl-letters), .spl-page .sl-line.Sung .sl-word:not(.sl-letters),
.spl-page .sl-line.NotSung .sl-letter, .spl-page .sl-line.Sung .sl-letter, .spl-page .sl-line.sl-sweep:not(.Active) {
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85)) !important;
}
.spl-page .sl-dots { height: calc(var(--sl-size) * 0.9); gap: 14px; }
.spl-page .sl-dots span { width: 16px; height: 16px; }
.spl-page .lyrics-state { font-size: 28px; font-weight: 700; color: rgba(255, 255, 255, 0.6); padding-top: 45vh; }
.spl-page .sl-credit { font-size: 14px; }

/* Undo the old karaoke column sizing (it forced 100vw and overflowed) */
.spl-page .spl-lyrics.karaoke-right { width: auto !important; height: auto !important; padding: 0 6vw 0 1vw !important; box-sizing: border-box; }
.spl-page.NowBarHidden .spl-lyrics.karaoke-right { padding: 0 14vw !important; }
.spl-page #karaokeLyricsContent { width: 100%; padding-right: 0 !important; min-width: 0; }
.spl-page .sl-line { max-width: 100%; flex-wrap: wrap !important; white-space: normal; }
/* Brighter, more vivid dynamic background (closer to Spicy's Kawarp) */
.spl-bg { filter: saturate(2.5) brightness(0.8); }
.spl-bg-blob { filter: blur(60px); opacity: 1; }

/* Canvas mode: keep the volume slider (and its fill / hit area) inside itself */
.spl-page.has-video-bg .spl-volume { position: relative !important; }
/* The Canvas video is shown sharp in Spicy's NowBar (old karaoke blurred it) */
.spl-page .karaoke-video-bg video, .spl-page .karaoke-video-bg iframe { filter: none !important; }
.spl-page .spl-video.karaoke-video-bg { inset: 0 auto 0 0 !important; width: 58% !important; z-index: 1 !important; }
.spl-page.has-video-bg .spl-media { flex-wrap: nowrap; }
.spl-page.has-video-bg .spl-heart { order: 0; margin-top: 0; }
.spl-page.has-video-bg .spl-controls { order: 1; margin-top: 0; }
.spl-page.has-video-bg .spl-volume { order: 2; margin: 0 0 0 26px; }

/* Kawarp canvas (js/spicy-bg.js) — Spicy .spicy-dynamic-bg: saturate(2.5) brightness(.65) */
.spl-bg.has-kawarp { filter: saturate(2.2) brightness(1.05) !important; }
.spl-bg .spl-kawarp {
    position: absolute; inset: 0; width: 100%; height: 100%; display: block;
    z-index: 1; opacity: 0; transition: opacity 0.6s ease;
}
.spl-bg.kawarp-ready .spl-kawarp { opacity: 1; }
.spl-bg .spl-bg-blob { z-index: 0; transition: opacity 0.6s ease; }
.spl-bg.kawarp-ready .spl-bg-blob { opacity: 0.5; }

/* ── Compact mode (Spicy "EnableCompactMode"): small cover + title on top,
      lyrics below; hovering the cover grows it smoothly and reveals the controls ── */
.spl-page.CompactMode { --cmp-h: max(54px, 15vh); --cmp-left: max(48px, calc((100vw - 1000px) / 2)); }
.spl-page.CompactMode .spl-nowbar {
    position: absolute !important; top: 2.5vh; left: var(--cmp-left); right: auto; bottom: auto; width: auto; z-index: 10;
    display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto; align-items: center; column-gap: 32px;
}
.spl-page.CompactMode .spl-media {
    grid-column: 1; grid-row: 1; width: var(--cmp-h); height: var(--cmp-h); border-radius: 6px;
    transition: width 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), height 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.spl-page.CompactMode .spl-media:hover { width: min(56vh, 36vw); height: min(56vh, 36vw); }
.spl-page.CompactMode .spl-meta { grid-column: 2; grid-row: 1; align-self: center; text-align: left; width: auto; margin: 0; }
.spl-page.CompactMode .spl-title { font-size: clamp(24px, 2.3vw, 36px); }
.spl-page.CompactMode .spl-artist { font-size: clamp(15px, 1.3vw, 20px); }
.spl-page.CompactMode .spl-timeline { display: none; }
/* controls only once the cover has grown enough */
.spl-page.CompactMode .spl-media:not(:hover) .spl-view-controls,
.spl-page.CompactMode .spl-media:not(:hover) .spl-heart,
.spl-page.CompactMode .spl-media:not(:hover) .spl-controls,
.spl-page.CompactMode .spl-media:not(:hover) .spl-volume,
.spl-page.CompactMode .spl-media:not(:hover) .spl-media-shade { opacity: 0 !important; transition: opacity 0.1s; }
.spl-page.CompactMode .spl-media:hover .spl-view-controls,
.spl-page.CompactMode .spl-media:hover .spl-heart,
.spl-page.CompactMode .spl-media:hover .spl-controls,
.spl-page.CompactMode .spl-media:hover .spl-volume { transition: opacity 0.3s ease 0.25s; }
.spl-page.CompactMode .spl-media:hover .spl-vc { width: 40px; height: 40px; }
.spl-page.CompactMode .spl-lyrics.karaoke-right,
.spl-page.CompactMode .spl-lyrics {
    left: var(--cmp-left) !important; right: var(--cmp-left) !important; top: calc(2.5vh + var(--cmp-h) + 2vh) !important;
    padding: 0 !important;
}
.spl-page.CompactMode .sl-root.sl-large { padding: 3vh 0 45vh; }
/* Canvas video is not used in compact mode (cover instead, like Spicy) */
.spl-page.CompactMode .spl-video, .spl-page.CompactMode .spl-video-veil { display: none !important; }
.spl-page.CompactMode.has-video-bg .spl-media > img, .spl-page.CompactMode.has-video-bg .spl-media-shade { display: block; }
.spl-page.CompactMode.has-video-bg .spl-media { position: relative; display: block; overflow: hidden; background: rgba(255,255,255,.08); box-shadow: 0 20px 60px rgba(0,0,0,.45); }
.spl-page.CompactMode.has-video-bg .spl-controls, .spl-page.CompactMode.has-video-bg .spl-heart, .spl-page.CompactMode.has-video-bg .spl-volume, .spl-page.CompactMode.has-video-bg .spl-view-controls { position: absolute; }
.spl-page.CompactMode.has-video-bg .spl-nowbar { padding: 0; justify-content: initial; align-items: center; }
.spl-page.CompactMode.has-video-bg .spl-meta { order: initial; }

/* Normal mode: the cover grows slightly and smoothly on hover */
.spl-page:not(.CompactMode) .spl-media { transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.spl-page:not(.CompactMode):not(.has-video-bg) .spl-media:hover { transform: scale(1.04); }
/* Compact: the growing cover stays above the lyrics, which slide down with it */
.spl-page.CompactMode .spl-nowbar { z-index: 20 !important; }
.spl-page.CompactMode .spl-lyrics { z-index: 1 !important; transition: top 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }
.spl-page.CompactMode:has(.spl-media:hover) .spl-lyrics.karaoke-right, .spl-page.CompactMode:has(.spl-media:hover) .spl-lyrics { top: calc(2.5vh + min(56vh, 36vw) + 2vh) !important; }
.spl-page.CompactMode .spl-lyrics.karaoke-right { z-index: 1 !important; transition: top 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }

/* Idle: never hide the cursor nor the way out; controls only dim slightly */
.spl-page.is-idle { cursor: auto !important; }
.spl-page.is-idle .spl-menu, .spl-page.is-idle.has-video-bg .spl-view-controls,
.spl-page.is-idle.has-video-bg .spl-controls, .spl-page.is-idle.has-video-bg .spl-heart, .spl-page.is-idle.has-video-bg .spl-volume {
    opacity: 0.55 !important;
}
.spl-page .spl-view-controls .spl-vc[title="Fermer"] { opacity: 1 !important; }
/* Canvas mode: view controls always visible top-left, above the video */
.spl-page.has-video-bg .spl-view-controls { z-index: 50 !important; opacity: 1; }
.spl-page.has-video-bg .spl-nowbar { padding-bottom: max(26px, 3vh) !important; }
.spl-page.has-video-bg .spl-vc { background: rgba(0,0,0,0.45) !important; border-color: rgba(255,255,255,0.35) !important; }
.spl-page.has-video-bg .spl-menu { z-index: 50 !important; text-shadow: 0 1px 6px rgba(0,0,0,.6); }

/* NowBar hidden: keep the round view controls (to bring it back), hide the rest,
   lyrics use the whole width, no Canvas video */
.spl-page.NowBarHidden .spl-nowbar { display: block !important; position: static !important; width: 0 !important; height: 0 !important; padding: 0 !important; }
.spl-page.NowBarHidden .spl-nowbar > :not(.spl-media),
.spl-page.NowBarHidden .spl-media > :not(.spl-view-controls) { display: none !important; }
.spl-page.NowBarHidden .spl-media { position: static !important; width: 0 !important; height: 0 !important; overflow: visible !important; box-shadow: none !important; background: none !important; transform: none !important; }
.spl-page.NowBarHidden .spl-view-controls {
    position: fixed !important; top: 16px !important; left: 72px !important; right: auto !important;
    opacity: 1 !important; z-index: 60 !important; justify-content: flex-start !important;
}
.spl-page.NowBarHidden .spl-vc { width: 42px !important; height: 42px !important; background: rgba(0,0,0,.35) !important; }
.spl-page.NowBarHidden .spl-video, .spl-page.NowBarHidden .spl-video-veil { display: none !important; }
.spl-page.NowBarHidden .spl-lyrics.karaoke-right, .spl-page.NowBarHidden .spl-lyrics {
    left: 0 !important; right: 0 !important; top: 0 !important; padding: 0 max(48px, calc((100vw - 1100px) / 2)) !important;
}

/* Canvas video: cover the left area (no YouTube letterbox) and let the Kawarp
 * background show through any black left in the video itself. */
.spl-video { container-type: size; }
.spl-video iframe {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: max(100cqw, 177.78cqh) !important; height: max(100cqh, 56.25cqw) !important;
}

/* Readability on light covers (Spicy DynamicBG: saturate 2.5 + brightness .65).
 * Forced here, plus a light veil so white artwork never goes past mid-grey. */
.spl-page .spl-bg, .spl-page .spl-bg.has-kawarp { filter: saturate(2.5) brightness(0.65) !important; }
.spl-page .spl-bg::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: radial-gradient(120% 100% at 50% 40%, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.42));
}
.spl-page .sl-line { text-shadow: 0 1px 18px rgba(0, 0, 0, 0.18); }

/* Duets / feats (Spicy "OppositeAligned"): the other artist's lines sit on the other side */
.sl-line.sl-opposite { justify-content: flex-end; text-align: right; transform-origin: right center; }
.sl-line.sl-opposite .sl-group, .sl-line.sl-opposite .sl-word { transform-origin: right center; }
.sl-line.sl-opposite.sl-sweep { text-align: right; }

/* ── Spicy Lyrics ViewControls / PlaybackControls (default.css + ContentBox.css) ──
 * Liquid-glass round buttons, hidden until the cursor moves, 0.3s fade; the hovered
 * button springs up (scale 1.015) while its siblings dim; pressed = 0.94. */
.spl-page {
    --material-regular-bg: rgba(255, 255, 255, 0.08);
    --material-regular-blur: blur(12px) saturate(1.6) brightness(1.05);
}
.spl-page .spl-view-controls { gap: 6px !important; transition: opacity 0.3s ease, transform 0.3s ease !important; }
.spl-page .spl-vc {
    background: var(--material-regular-bg) !important; border: 0 !important; border-radius: 100rem !important; color: #fff !important;
    -webkit-backdrop-filter: var(--material-regular-blur); backdrop-filter: var(--material-regular-blur);
    box-shadow: 0 10px 24px -8px rgba(8, 10, 18, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.36),
        inset 0 0 0 1px rgba(255, 255, 255, 0.16), inset 0 -1px 0 rgba(255, 255, 255, 0.18) !important;
    transition: scale 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease !important;
    transform: none !important;
}
.spl-page .spl-vc:hover {
    scale: 1.015; background: rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 14px 32px -8px rgba(8, 10, 18, 0.5), 0 0 22px -4px rgba(255, 255, 255, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.48),
        inset 0 0 0 1px rgba(255, 255, 255, 0.22), inset 0 -1px 0 rgba(255, 255, 255, 0.24) !important;
}
.spl-page .spl-vc:active { scale: 0.94; }
.spl-page .spl-view-controls:has(.spl-vc:hover) > .spl-vc:not(:hover) { opacity: 0.78; }
.spl-page .spl-controls:hover > *:not(:hover) { opacity: 0.5; transition: opacity 0.2s ease; }
.spl-page .spl-controls > * { transition: opacity 0.2s ease, transform 0.175s cubic-bezier(0.37, 0, 0.63, 1); }
.spl-page .spl-controls > *:active { transform: scale(0.9); }

/* Show on mouse move, fade out when idle (replaces the old "dim to 0.55") */
.spl-page.has-video-bg .spl-view-controls, .spl-page.has-video-bg .spl-controls, .spl-page.has-video-bg .spl-heart,
.spl-page.has-video-bg .spl-volume, .spl-page.has-video-bg .spl-timeline, .spl-page.has-video-bg .spl-meta, .spl-page .spl-menu {
    transition: opacity 0.3s ease, transform 0.3s ease !important;
}
.spl-page.is-idle .spl-menu, .spl-page.is-idle.has-video-bg .spl-view-controls,
.spl-page.is-idle.has-video-bg .spl-controls, .spl-page.is-idle.has-video-bg .spl-heart, .spl-page.is-idle.has-video-bg .spl-volume,
.spl-page.is-idle .spl-view-controls .spl-vc[title="Fermer"] {
    opacity: 0 !important; pointer-events: none;
}
.spl-page.is-idle.has-video-bg .spl-view-controls { transform: translateY(-6px); }
.spl-page.is-idle.has-video-bg .spl-controls, .spl-page.is-idle.has-video-bg .spl-heart, .spl-page.is-idle.has-video-bg .spl-volume { transform: translateY(6px); }
.spl-page.is-idle { cursor: none !important; }

/* ── Spicy 6.4 Canvas Immersive (CanvasImmersive.css) ── */
.spl-page > canvas.spl-ambient {
    position: absolute !important; inset: 0; width: 100%; height: 100%; z-index: 0 !important; pointer-events: none;
    opacity: 0; transition: opacity 900ms cubic-bezier(0.23, 1, 0.32, 1);
}
.spl-page.CanvasImmersive > canvas.spl-ambient { opacity: 1; }
.spl-page .spl-bg { transition: opacity 900ms cubic-bezier(0.23, 1, 0.32, 1); }
.spl-page.CanvasImmersive .spl-bg { opacity: 0; }
/* the video stage is translucent so the blurred backdrop carries through; dimmed like Spicy's veil,
   with a dark ramp at the bottom so the dock (title, timeline, buttons) stays readable */
.spl-page.CanvasImmersive .spl-video { opacity: 0.75; transition: opacity 900ms cubic-bezier(0.23, 1, 0.32, 1); }
.spl-page.CanvasImmersive .spl-video::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.6) 30%, transparent 58%), rgba(0, 0, 0, 0.2);
    /* fade out toward the lyrics exactly like the video, so no hard edge */
    -webkit-mask-image: linear-gradient(90deg, #000 55%, transparent 100%); mask-image: linear-gradient(90deg, #000 55%, transparent 100%);
}
.spl-page.CanvasImmersive .spl-video video { object-position: 50% 40%; }

/* Songwriter credits + per-song offset toast */
.sl-writers { margin-bottom: 6px; font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, 0.7); }
.spl-offset-toast { position: absolute; left: 50%; bottom: 120px; transform: translateX(-50%); z-index: 20; padding: 8px 14px; border-radius: 999px; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(12px); color: #fff; font-size: 13px; font-weight: 600; opacity: 0; transition: opacity .2s; pointer-events: none; }
.spl-offset-toast.show { opacity: 1; }

/* Narrow window: Spicy drops the side Canvas and keeps only the blurred ambient background */
@media (max-width: 1000px) {
  .spl-page .spl-video, .spl-page .spl-video-veil { opacity: 0 !important; pointer-events: none; }
}
/* No visible scrollbar on the lyrics, like Spicy */
.spl-page .spl-lyrics, .spl-page #karaokeLyricsContent { scrollbar-width: none; }
.spl-page .spl-lyrics::-webkit-scrollbar, .spl-page #karaokeLyricsContent::-webkit-scrollbar { display: none; }
body.nw-system-font .sl-line, body.nw-system-font .sl-word { font-family: "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif !important; }