/* DJ DISCO — playlista: karta z gramofonem, equalizerem i listą utworów.
   Kolory z palety motywu (--wp--preset--color--…), z zapasem na inny motyw. Karta jest zawsze ciemna,
   nagłówek nad nią bierze kolor sekcji, w której stoi blok. */
.ddpl {
	--ddpl-noc: var(--wp--preset--color--noc, #0b0e14);
	--ddpl-zloto: var(--wp--preset--color--bursztyn, #f0b955);
	--ddpl-dym: var(--wp--preset--color--dym, #f3f4f6);
	--ddpl-popiol: var(--wp--preset--color--popiol, #9aa1ad);
	--ddpl-gradient: linear-gradient(100deg, #f8d27a 0%, #efb24a 55%, #e59a2f 100%);
	position: relative;
}
.ddpl, .ddpl *, .ddpl *::before, .ddpl *::after { box-sizing: border-box; }
.ddpl [hidden] { display: none !important; }

/* ---------- nagłówek ---------- */
.ddpl__glowa { max-width: 44rem; margin: 0 auto clamp(1.75rem, 4vw, 2.75rem); text-align: center; }
.ddpl .ddpl__etykieta {
	display: flex; align-items: center; justify-content: center; gap: .7rem; margin: 0 0 .6rem;
	font-size: .72rem; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: var(--ddpl-zloto);
}
.ddpl .ddpl__etykieta::before, .ddpl .ddpl__etykieta::after { content: ""; width: 1.4rem; height: 2px; background: currentColor; flex: none; }
.ddpl__tytul { margin: 0 0 .9rem; text-wrap: balance; }
.ddpl__zloto {
	background: var(--ddpl-gradient); -webkit-background-clip: text; background-clip: text;
	color: transparent; -webkit-text-fill-color: transparent;
}
.ddpl__opis { max-width: 36rem; margin: 0 auto; font-size: 1.05rem; opacity: .82; }

/* ---------- karta ---------- */
.ddpl__karta {
	position: relative; display: grid;
	grid-template-columns: minmax(14rem, 23rem) minmax(0, 1fr);
	grid-template-areas: "gramofon panel" "lista lista";
	gap: clamp(1.75rem, 4vw, 3.25rem) clamp(1.5rem, 5vw, 4rem); align-items: center;
	max-width: 1120px; margin-inline: auto; padding: clamp(1.25rem, 4vw, 3rem);
	border: 1px solid rgba(240, 185, 85, .2); border-radius: 28px; overflow: hidden;
	background:
		radial-gradient(90% 80% at 0% 0%, rgba(240, 185, 85, .13), transparent 60%),
		radial-gradient(70% 60% at 100% 100%, rgba(240, 185, 85, .06), transparent 70%),
		linear-gradient(165deg, #151a25 0%, #0b0e14 75%);
	box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .05);
	color: var(--ddpl-dym); text-align: left;
}
.ddpl__karta button:focus-visible, .ddpl__karta a:focus-visible { outline: 2px solid var(--ddpl-zloto); outline-offset: 3px; }

/* ---------- gramofon ---------- */
.ddpl__gramofon { grid-area: gramofon; position: relative; width: 100%; max-width: 23rem; aspect-ratio: 1; justify-self: center; }
.ddpl__poswiata {
	position: absolute; inset: -6%; border-radius: 50%; pointer-events: none; opacity: .22;
	background: radial-gradient(circle, rgba(240, 185, 85, .5) 0%, rgba(240, 185, 85, .16) 42%, rgba(240, 185, 85, 0) 68%);
	transition: opacity .1s linear;
}
.ddpl__plyta {
	position: absolute; inset: 4%; border-radius: 50%; cursor: pointer;
	background:
		radial-gradient(circle, transparent 0 55%, rgba(255, 255, 255, .035) 55.4% 56%, transparent 56.4% 74%, rgba(255, 255, 255, .035) 74.4% 75%, transparent 75.4%),
		repeating-radial-gradient(circle, #121318 0 1.5px, #1c1d23 1.5px 2.7px),
		#121318;
	box-shadow: 0 0 0 3px #07080b, 0 0 0 4px rgba(240, 185, 85, .18), 0 24px 50px -16px rgba(0, 0, 0, .9);
	animation: ddpl-obrot 1.8s linear infinite; animation-play-state: paused;
}
.is-gra .ddpl__plyta { animation-play-state: running; }
@keyframes ddpl-obrot { to { transform: rotate(360deg); } }
.ddpl__naklejka {
	position: absolute; inset: 30%; display: grid; place-items: center; border-radius: 50%; overflow: hidden;
	background: var(--ddpl-gradient); color: var(--ddpl-noc); box-shadow: 0 0 0 2px rgba(0, 0, 0, .6);
}
.ddpl__naklejka .ddpl-ik { width: 40%; height: 40%; }
.ddpl__okladka { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: opacity .35s; }
.ddpl__okladka.is-zmiana { opacity: 0; }
.ddpl__trzpien {
	position: absolute; left: 50%; top: 50%; width: 3.4%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
	background: radial-gradient(circle at 35% 35%, #f4f6f8, #9aa1ad 55%, #3b414d); box-shadow: 0 0 0 3px rgba(11, 14, 20, .85);
}
.ddpl__polysk {
	position: absolute; inset: 4%; border-radius: 50%; pointer-events: none; mix-blend-mode: screen;
	background: conic-gradient(from 210deg, transparent 0deg, rgba(255, 255, 255, .09) 25deg, transparent 60deg 180deg, rgba(255, 255, 255, .06) 205deg, transparent 240deg);
}
/* Ramię gramofonu: w spoczynku obok płyty, przy graniu wjeżdża na płytę. */
.ddpl__ramie {
	position: absolute; left: 86%; top: 3%; width: 7%; height: 60%; pointer-events: none;
	transform-origin: 50% 0; transform: rotate(-9deg); transition: transform .9s cubic-bezier(.3, .7, .2, 1);
}
.is-gra .ddpl__ramie { transform: rotate(17deg); }
.ddpl__ramie-os {
	position: absolute; left: 50%; top: 0; z-index: 1; width: 200%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #f1f3f6, #9aa1ad 45%, #2a2f3a 78%);
	box-shadow: 0 6px 14px rgba(0, 0, 0, .6), 0 0 0 3px rgba(11, 14, 20, .6);
}
.ddpl__ramie-pret {
	position: absolute; left: 50%; top: 0; bottom: 12%; width: 22%; min-width: 3px; transform: translateX(-50%); border-radius: 4px;
	background: linear-gradient(90deg, #7d8594, #eef0f3 50%, #7d8594); box-shadow: 2px 6px 10px rgba(0, 0, 0, .45);
}
.ddpl__ramie-glowica {
	position: absolute; left: 50%; bottom: 0; width: 85%; height: 16%; transform: translateX(-50%); border-radius: 3px 3px 7px 7px;
	background: var(--ddpl-gradient); box-shadow: 0 8px 14px rgba(0, 0, 0, .55);
}
/* „Puść mix” na środku płyty — znika po pierwszym kliknięciu. */
.ddpl__start {
	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
	display: inline-flex; align-items: center; gap: .55rem; padding: .85rem 1.35rem .85rem 1.1rem;
	border: 0; border-radius: 999px; background: var(--ddpl-gradient); color: var(--ddpl-noc);
	font: inherit; font-size: .9rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; cursor: pointer;
	box-shadow: 0 14px 34px -10px rgba(240, 185, 85, .75), 0 0 0 6px rgba(11, 14, 20, .55);
	transition: transform .2s, opacity .3s, visibility .3s;
}
.ddpl__start .ddpl-ik { width: 1.2rem; height: 1.2rem; }
.ddpl__start:hover { transform: translate(-50%, -50%) scale(1.05); }
.ddpl__start::before {
	content: ""; position: absolute; inset: -6px; border-radius: inherit; border: 2px solid rgba(240, 185, 85, .6);
	animation: ddpl-puls 2s ease-out infinite; pointer-events: none;
}
@keyframes ddpl-puls { from { transform: scale(1); opacity: .9; } to { transform: scale(1.18, 1.5); opacity: 0; } }
.is-start .ddpl__start { opacity: 0; visibility: hidden; pointer-events: none; }

/* ---------- teraz gra ---------- */
.ddpl__panel { grid-area: panel; min-width: 0; }
.ddpl .ddpl__kategoria {
	display: inline-flex; margin: 0 0 1rem; padding: .38rem .85rem; border: 1px solid rgba(240, 185, 85, .45); border-radius: 999px;
	background: rgba(240, 185, 85, .07); color: var(--ddpl-zloto);
	font-size: .7rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; line-height: 1.2;
}
.ddpl .ddpl__utwor { max-width: none; margin: 0; }
.ddpl__nazwa {
	display: block; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem); font-weight: 800; line-height: 1.1; letter-spacing: -.01em;
	color: var(--ddpl-dym); overflow-wrap: anywhere;
}
.ddpl__wykonawca { display: block; margin-top: .4rem; font-size: 1.05rem; color: var(--ddpl-popiol); }
.ddpl__eq { display: block; width: 100%; height: 92px; margin: 1.3rem 0 .6rem; }
.ddpl__czas { display: flex; align-items: center; gap: .9rem; }
.ddpl__pasek { position: relative; flex: 1; height: 4px; border-radius: 4px; overflow: hidden; background: rgba(255, 255, 255, .1); }
.ddpl__postep { position: absolute; inset: 0; border-radius: inherit; background: var(--ddpl-gradient); transform: scaleX(0); transform-origin: 0 50%; }
.ddpl__licznik { flex: none; font-size: .82rem; font-variant-numeric: tabular-nums; color: var(--ddpl-popiol); }
.ddpl__sterowanie { display: flex; flex-wrap: wrap; align-items: center; gap: .85rem; margin-top: 1.3rem; }
.ddpl__btn {
	display: inline-grid; place-items: center; width: 3rem; height: 3rem; padding: 0;
	border: 1px solid rgba(255, 255, 255, .16); border-radius: 50%; background: rgba(255, 255, 255, .03); color: var(--ddpl-dym);
	cursor: pointer; transition: border-color .2s, color .2s, background-color .2s, transform .2s;
}
.ddpl__btn .ddpl-ik { width: 1.15rem; height: 1.15rem; }
.ddpl__btn:hover { border-color: var(--ddpl-zloto); color: var(--ddpl-zloto); }
.ddpl__btn--graj { width: 4.25rem; height: 4.25rem; border: 0; background: var(--ddpl-gradient); color: var(--ddpl-noc); box-shadow: 0 14px 34px -12px rgba(240, 185, 85, .8); }
.ddpl__btn--graj:hover { color: var(--ddpl-noc); transform: translateY(-2px); }
.ddpl__btn--graj .ddpl-ik { width: 1.6rem; height: 1.6rem; }
.ddpl__btn--graj .ddpl-ik--graj { transform: translateX(2px); }
.ddpl__btn--graj .ddpl-ik--pauza, .is-gra .ddpl__btn--graj .ddpl-ik--graj { display: none; }
.is-gra .ddpl__btn--graj .ddpl-ik--pauza { display: block; }
.ddpl__numer { margin-left: auto; font-size: .85rem; letter-spacing: .08em; font-variant-numeric: tabular-nums; color: var(--ddpl-popiol); }
.ddpl .ddpl__zrodlo { max-width: none; margin: 1.1rem 0 0; font-size: .8rem; }
.ddpl__link { color: var(--ddpl-popiol); text-decoration: underline; text-underline-offset: 3px; }
.ddpl__link:hover { color: var(--ddpl-zloto); }

/* ---------- lista utworów ---------- */
.ddpl .ddpl__lista {
	grid-area: lista; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr)); gap: .65rem;
	max-width: none; margin: 0; padding: 0; list-style: none;
}
.ddpl .ddpl__lista li { max-width: none; margin: 0; }
.ddpl__poz {
	position: relative; display: flex; align-items: center; gap: .8rem; width: 100%; padding: .5rem .85rem .5rem .5rem;
	border: 1px solid rgba(255, 255, 255, .07); border-radius: 16px; background: rgba(255, 255, 255, .025); color: var(--ddpl-dym);
	font: inherit; text-align: left; cursor: pointer; transition: border-color .2s, background-color .2s, transform .2s;
}
.ddpl__poz:hover { border-color: rgba(240, 185, 85, .4); transform: translateY(-1px); }
.ddpl__poz[aria-current="true"] { border-color: rgba(240, 185, 85, .65); background: linear-gradient(90deg, rgba(240, 185, 85, .16), rgba(240, 185, 85, .03)); }
.ddpl__mini {
	flex: none; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 10px; overflow: hidden;
	background: var(--ddpl-gradient); color: var(--ddpl-noc);
}
.ddpl__mini img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ddpl__mini .ddpl-ik { width: 1.3rem; height: 1.3rem; }
.ddpl__poz-tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; line-height: 1.3; }
.ddpl__poz-tekst strong, .ddpl__poz-tekst span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ddpl__poz-tekst strong { font-size: .92rem; font-weight: 700; }
.ddpl__poz-tekst span { font-size: .8rem; color: var(--ddpl-popiol); }
.ddpl__poz-eq { flex: none; display: none; align-items: flex-end; gap: 2px; height: 14px; }
.is-gra .ddpl__poz[aria-current="true"] .ddpl__poz-eq { display: inline-flex; }
.ddpl__poz-eq i { width: 3px; height: 100%; border-radius: 2px; background: var(--ddpl-zloto); transform-origin: 50% 100%; transform: scaleY(.35); }
.is-gra .ddpl__poz[aria-current="true"] .ddpl__poz-eq i { animation: ddpl-skok .8s ease-in-out infinite alternate; }
.is-gra .ddpl__poz[aria-current="true"] .ddpl__poz-eq i:nth-child(2) { animation-duration: .65s; animation-delay: -.35s; }
.is-gra .ddpl__poz[aria-current="true"] .ddpl__poz-eq i:nth-child(3) { animation-duration: .9s; animation-delay: -.6s; }
@keyframes ddpl-skok { from { transform: scaleY(.25); } to { transform: scaleY(1); } }

/* Komunikat dla czytników ekranu; widoczny tylko przy błędzie wczytywania. */
.ddpl__ogloszenie { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ddpl__ogloszenie.is-widoczne { position: static; width: auto; height: auto; margin: 1rem auto 0; clip-path: none; white-space: normal; text-align: center; opacity: .8; }

.ddpl-pusto { padding: 1rem 1.25rem; border: 1px dashed currentColor; border-radius: 12px; opacity: .7; }

/* ---------- telefon ---------- */
@media (max-width: 760px) {
	.ddpl__karta { grid-template-columns: minmax(0, 1fr); grid-template-areas: "gramofon" "panel" "lista"; border-radius: 22px; }
	.ddpl__gramofon { max-width: 16.5rem; }
	.ddpl__panel { text-align: center; }
	.ddpl__eq { height: 72px; }
	.ddpl__sterowanie { justify-content: center; }
	.ddpl__numer { order: 1; width: 100%; margin: 0; text-align: center; }
}

/* =================================================================
   Mini odtwarzacz wysuwany z boku: przy krawędzi języczek z płytką,
   po kliknięciu wysuwa się mała karta (jak pasek social po lewej).
   ================================================================= */
.ddpl-boczny {
	position: fixed; top: 50%; z-index: 1000; transform: translateY(-50%);
	transition: translate .45s cubic-bezier(.2, .8, .2, 1);
}
.ddpl-boczny--prawa { right: 0; }
.ddpl-boczny--prawa:not(.is-otwarta) { translate: 100% 0; }
.ddpl-boczny--lewa { left: 0; top: 24%; }
.ddpl-boczny--lewa:not(.is-otwarta) { translate: -100% 0; }

.ddpl-boczny__uchwyt {
	position: absolute; top: 50%; display: grid; place-items: center; width: 36px; height: 54px; margin: 0; padding: 0;
	border: 1px solid rgba(240, 185, 85, .6); background: rgba(11, 14, 20, .92); color: #f0b955; cursor: pointer;
	transform: translateY(-50%); transition: width .2s, box-shadow .3s;
}
.ddpl-boczny--prawa .ddpl-boczny__uchwyt { right: 100%; border-right: 0; border-radius: 10px 0 0 10px; }
.ddpl-boczny--lewa .ddpl-boczny__uchwyt { left: 100%; border-left: 0; border-radius: 0 10px 10px 0; }
.ddpl-boczny__uchwyt:hover { width: 40px; }
.ddpl-boczny__uchwyt:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ddpl-boczny.is-gra .ddpl-boczny__uchwyt { box-shadow: 0 0 18px -2px rgba(240, 185, 85, .55); }
/* Płytka na języczku: czarny krążek z rowkami i złotą naklejką. */
.ddpl-boczny__krazek {
	width: 24px; height: 24px; border-radius: 50%;
	background:
		radial-gradient(circle, #0b0e14 0 9%, #f0b955 10% 30%, transparent 31%),
		repeating-radial-gradient(circle, #15161b 0 1px, #2a2c33 1px 2px);
	box-shadow: 0 0 0 1px rgba(240, 185, 85, .45);
}
.ddpl-boczny__krazek::after {
	content: ""; display: block; width: 100%; height: 100%; border-radius: 50%;
	background: conic-gradient(from 200deg, transparent 0deg, rgba(255, 255, 255, .22) 30deg, transparent 70deg);
}
.ddpl-boczny.is-gra .ddpl-boczny__krazek, .ddpl-boczny.is-zacheta .ddpl-boczny__krazek { animation: ddpl-obrot 1.8s linear infinite; }
.ddpl-boczny.is-zacheta:not(.is-otwarta) .ddpl-boczny__uchwyt { animation: ddpl-zacheta 1.3s ease-in-out 2; }
@keyframes ddpl-zacheta { 0%, 100% { width: 36px; } 50% { width: 46px; box-shadow: 0 0 20px -2px rgba(240, 185, 85, .6); } }

.ddpl.ddpl--mini {
	width: min(290px, calc(100vw - 56px)); padding: 12px 14px; visibility: hidden;
	border: 1px solid rgba(240, 185, 85, .35);
	background: radial-gradient(120% 90% at 0% 0%, rgba(240, 185, 85, .12), transparent 60%), linear-gradient(165deg, #151a25, #0b0e14 80%);
	box-shadow: 0 24px 50px -18px rgba(0, 0, 0, .85); color: var(--ddpl-dym); font-size: 14px; line-height: 1.4; text-align: left;
	transition: visibility 0s .45s;
}
.ddpl-boczny--prawa .ddpl--mini { border-right: 0; border-radius: 16px 0 0 16px; }
.ddpl-boczny--lewa .ddpl--mini { border-left: 0; border-radius: 0 16px 16px 0; }
.ddpl-boczny.is-otwarta .ddpl--mini { visibility: visible; transition: none; }
.ddpl--mini button:focus-visible, .ddpl--mini a:focus-visible { outline: 2px solid var(--ddpl-zloto); outline-offset: 2px; }
.ddpl .ddpl-mini__etykieta { margin: 0 0 9px; font-size: .62rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--ddpl-zloto); }
.ddpl-mini__gora { display: flex; align-items: center; gap: 12px; }
.ddpl--mini .ddpl__plyta {
	position: relative; inset: auto; flex: none; width: 54px; height: 54px;
	box-shadow: 0 0 0 2px #07080b, 0 0 0 3px rgba(240, 185, 85, .25), 0 8px 18px -6px rgba(0, 0, 0, .8);
}
.ddpl--mini .ddpl__naklejka { inset: 24%; }
.ddpl--mini .ddpl__trzpien { width: 5px; box-shadow: 0 0 0 1.5px rgba(11, 14, 20, .85); }
.ddpl--mini .ddpl__utwor { flex: 1; min-width: 0; }
.ddpl--mini .ddpl__nazwa, .ddpl--mini .ddpl__wykonawca { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ddpl--mini .ddpl__nazwa { font-size: .95rem; line-height: 1.25; letter-spacing: 0; }
.ddpl--mini .ddpl__wykonawca { margin-top: 2px; font-size: .8rem; }
.ddpl--mini .ddpl__eq { height: 30px; margin: 10px 0 4px; }
.ddpl--mini .ddpl__czas { gap: 8px; }
.ddpl--mini .ddpl__licznik { font-size: .7rem; }
.ddpl--mini .ddpl__sterowanie { flex-wrap: nowrap; justify-content: flex-start; gap: 7px; margin-top: 9px; }
.ddpl--mini .ddpl__btn { width: 32px; height: 32px; }
.ddpl--mini .ddpl__btn .ddpl-ik { width: 13px; height: 13px; }
.ddpl--mini .ddpl__btn--graj { width: 40px; height: 40px; box-shadow: 0 8px 20px -8px rgba(240, 185, 85, .8); }
.ddpl--mini .ddpl__btn--graj .ddpl-ik { width: 17px; height: 17px; }
.ddpl--mini .ddpl__numer { order: 0; width: auto; margin: 0 0 0 auto; font-size: .7rem; letter-spacing: .04em; text-align: right; }
.ddpl--mini .ddpl__link { font-size: .68rem; white-space: nowrap; }
@media print { .ddpl-boczny { display: none; } }

@media (prefers-reduced-motion: reduce) {
	.ddpl-boczny { transition: none; }
	.ddpl-boczny.is-gra .ddpl-boczny__krazek, .ddpl-boczny.is-zacheta .ddpl-boczny__krazek, .ddpl-boczny.is-zacheta .ddpl-boczny__uchwyt { animation: none; }
	.ddpl__plyta { animation: none; }
	.ddpl__ramie, .ddpl__okladka { transition: none; }
	.ddpl__start::before { display: none; }
	.is-gra .ddpl__poz[aria-current="true"] .ddpl__poz-eq i { animation: none; transform: scaleY(.8); }
}