/* Odtwarzacz teledysku zaspiewamy.pl */
.zsp-tv { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; font-family: "Montserrat", system-ui, sans-serif; }
.zsp-tv-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.zsp-tv-seg { display: inline-flex; padding: 4px; gap: 4px; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); }
.zsp-tv-seg button { font: inherit; font-size: .78rem; font-weight: 700; padding: .5rem .9rem; border: 0; border-radius: 999px; background: transparent; color: #E4DEF7; cursor: pointer; white-space: nowrap; }
.zsp-tv-seg button small { font-weight: 500; opacity: .75; }
.zsp-tv-seg button.on { background: linear-gradient(90deg, #7C3AED, #C084FC); color: #fff; }

.zsp-tv-stage { position: relative; overflow: hidden; background: #000; border-radius: 20px; box-shadow: 0 30px 80px -24px rgba(168, 85, 247, .6); color: #fff; transition: width .35s ease; }
.zsp-tv-stage.v { width: min(380px, 100%); aspect-ratio: 9 / 16; }
.zsp-tv-stage.h { width: min(880px, 100%); aspect-ratio: 16 / 9; }

.zsp-tv-scene { position: absolute; inset: 0; opacity: 0; transition: opacity var(--fade, .8s) ease; }
.zsp-tv-scene.on { opacity: 1; }
.zsp-tv-scene .bg { position: absolute; inset: -8%; width: 116%; height: 116%; object-fit: cover; filter: blur(28px) brightness(.55) saturate(1.2); }
.zsp-tv-scene .fg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.zsp-tv-scene.on .fg { animation: zsp-tv-drift var(--drift, 6s) ease-out forwards; }
.zsp-tv-scene.on .fg.kb { animation-duration: calc(var(--drift, 6s) * 1.4); }
@keyframes zsp-tv-drift { from { transform: scale(1); } to { transform: scale(1.05); } }
.zsp-tv-stage[data-profile="energy"] .zsp-tv-scene.on .fg { animation: zsp-tv-punch .45s ease-out, zsp-tv-drift var(--drift, 4s) .45s ease-out forwards; }
@keyframes zsp-tv-punch { from { transform: scale(1.08); filter: brightness(1.35); } to { transform: scale(1); filter: none; } }

.zsp-tv-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .3) 0%, transparent 22%, transparent 58%, rgba(10, 4, 25, .85) 100%); }
.zsp-tv-logo { position: absolute; top: 3.2%; right: 4.5%; height: 22px; width: auto; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .6)); pointer-events: none; }
.zsp-tv-stage.h .zsp-tv-logo { height: 26px; top: 4.5%; right: 3%; }

.zsp-tv-title, .zsp-tv-end { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 0 8%; opacity: 0; transition: opacity 1s; pointer-events: none; }
.zsp-tv-stage.is-intro .zsp-tv-title { opacity: 1; }
.zsp-tv-end { background: rgba(15, 10, 30, .75); }
.zsp-tv-stage.is-end .zsp-tv-end { opacity: 1; }
.zsp-tv-title small { display: block; letter-spacing: .3em; text-transform: uppercase; font-size: .68rem; color: #F5D0FE; margin-bottom: .7rem; }
.zsp-tv-title b, .zsp-tv-end b { display: block; font-size: clamp(1.7rem, 5vw, 3rem); font-weight: 800; line-height: 1.05; text-shadow: 0 6px 30px rgba(0, 0, 0, .6); }
.zsp-tv-title span, .zsp-tv-end span { display: block; margin-top: .7rem; font-size: .95rem; font-weight: 600; color: #FBCFE8; }

.zsp-tv-lyrics { position: absolute; left: 6%; right: 6%; bottom: 9%; text-align: center; min-height: 3.2em; pointer-events: none; }
.zsp-tv-stage.h .zsp-tv-lyrics { bottom: 7%; left: 14%; right: 14%; }
.zsp-tv-line { font-weight: 800; font-size: clamp(1rem, 5vw, 1.35rem); line-height: 1.3; text-shadow: 0 3px 16px rgba(0, 0, 0, .85); transition: opacity .3s, transform .3s; }
.zsp-tv-stage.h .zsp-tv-line { font-size: clamp(1rem, 2.6vw, 1.6rem); }
.zsp-tv-line.out { opacity: 0; transform: translateY(8px); }
.zsp-tv-line .w { display: inline-block; margin: 0 .1em; color: rgba(255, 255, 255, .55); transition: color .12s, transform .12s; }
.zsp-tv-line .w.sung { color: #fff; }
.zsp-tv-line .w.now { color: #F9A8D4; }
.zsp-tv-stage[data-profile="energy"] .zsp-tv-line .w.now { transform: scale(1.12); }

.zsp-tv-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 68px; height: 68px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .7); background: rgba(15, 10, 30, .45); backdrop-filter: blur(6px); color: #fff; display: grid; place-items: center; cursor: pointer; transition: opacity .3s, transform .2s; z-index: 3; }
.zsp-tv-play:hover { transform: translate(-50%, -50%) scale(1.06); }
.zsp-tv-stage.is-playing .zsp-tv-play { opacity: 0; }
.zsp-tv-stage.is-playing:hover .zsp-tv-play { opacity: .9; }
.zsp-tv-stage.is-intro:not(.is-playing) .zsp-tv-play { top: auto; bottom: 16%; transform: translateX(-50%); }
.zsp-tv-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .1); }
.zsp-tv-progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #EC4899, #A855F7); }

@media (prefers-reduced-motion: reduce) { .zsp-tv-scene.on .fg { animation: none !important; } }

/* Sekcja teledysku na stronie piosenki */
.zsp-song-tv { background: radial-gradient(600px 400px at 50% 40%, rgba(168, 85, 247, .3), transparent 70%), linear-gradient(180deg, #120B26 0%, #0F0A1E 100%); color: #fff; padding: 56px 0 60px; text-align: center; }
.zsp-song-tv h2 { color: #fff; font-size: clamp(1.4rem, 3vw, 2rem); margin: 0 0 1.6rem; }
.zsp-song-tv .eyebrow { color: #C4B5FD; }
.zsp-song-tv-note { color: #A79DC9; font-size: .82rem; margin: 1rem 0 0; }

/* v2: tylko poziomo, tło ze zdjęcia, przełącznik z opisami także na telefonie */
.zsp-tv-stage.h { width: 100%; max-width: 880px; }
.zsp-tv-scene .bg-plain { display: block; background: #0F0A1E; }
.zsp-tv-scene video.fg { background: transparent; }
.zsp-tv-seg button b { font-weight: 700; }
@media (max-width: 560px) {
    .zsp-tv-bar, .zsp-tv-seg { width: 100%; }
    .zsp-tv-seg { display: grid; grid-template-columns: 1fr 1fr; border-radius: 16px; }
    .zsp-tv-seg button { white-space: normal; border-radius: 12px; padding: .5rem .4rem; line-height: 1.25; }
    .zsp-tv-seg button small { display: block; font-size: .68rem; }
    .zsp-tv-stage { border-radius: 14px; }
    .zsp-tv-logo, .zsp-tv-stage.h .zsp-tv-logo { height: 16px; top: 5%; right: 4%; }
    .zsp-tv-play { width: 54px; height: 54px; }
    .zsp-tv-title small { font-size: .55rem; margin-bottom: .3rem; }
    .zsp-tv-title b, .zsp-tv-end b { font-size: 1.5rem; }
    .zsp-tv-title span, .zsp-tv-end span { font-size: .8rem; margin-top: .35rem; }
    .zsp-tv-stage.is-intro:not(.is-playing) .zsp-tv-play { bottom: 8%; }
    .zsp-tv-stage.h .zsp-tv-lyrics { left: 6%; right: 6%; bottom: 8%; }
    .zsp-tv-stage.h .zsp-tv-line { font-size: .95rem; }
}
@media (max-width: 560px) {
    .zsp-tv-title { place-items: start center; padding-top: 16%; }
    .zsp-tv-title small { display: none; }
    .zsp-tv-title b { font-size: 1.3rem; }
    .zsp-tv-title span { font-size: .72rem; margin-top: .25rem; }
    .zsp-tv-play { width: 44px; height: 44px; }
    .zsp-tv-play svg { width: 18px; height: 18px; }
    .zsp-tv-stage.is-intro:not(.is-playing) .zsp-tv-play { bottom: 12%; }
}
.zsp-tv-dl { margin-top: 20px; }
.zsp-tv-dl .ic { transform: rotate(90deg); }

/* tylko widoczna scena jest rysowana (rozmyte tło liczone raz, nie dla wszystkich scen) */
.zsp-tv-scene { visibility: hidden; transition: opacity var(--fade, .8s) ease, visibility 0s linear var(--fade, .8s); }
.zsp-tv-scene.on { visibility: visible; transition: opacity var(--fade, .8s) ease, visibility 0s; }
.zsp-tv-scene .bg { filter: blur(22px) brightness(.55) saturate(1.2); transform: translateZ(0); }
.zsp-tv-stage { box-shadow: 0 16px 36px -18px rgba(168, 85, 247, .55); }

/* tło gotowe (wcześniej rozmyte) – bez filtra liczonego przez przeglądarkę */
.zsp-tv-scene .bg { transform: none; }
.zsp-tv-scene .bg.pre { filter: none; inset: 0; width: 100%; height: 100%; }