/* Pasek "liga na zywo" nad naglowkiem (dl-liga-live.php + pasek.js).
   Gdy widoczny, <html> dostaje .dl-pasek-on: naglowek, tresc i menu mobilne
   zjezdzaja o wysokosc paska, bo naglowek jest przypiety (position: fixed). */

.dl-live {
	position: fixed; top: 0; left: 0; right: 0; z-index: 10000;
	height: var(--dl-pasek, 36px);
	background: linear-gradient(90deg, #15162c 0%, #262b63 50%, #15162c 100%);
	border-bottom: 1px solid rgba(88, 101, 242, .5);
	box-shadow: 0 2px 14px rgba(88, 101, 242, .18);
	font-family: 'Rajdhani', system-ui, sans-serif;
}
.dl-live[hidden] { display: none !important; }

.dl-live-link {
	display: flex; align-items: center; justify-content: center; gap: 12px;
	height: 100%; padding: 0 16px;
	color: #fff !important; text-decoration: none !important;
	font-weight: 700; font-size: 15px; letter-spacing: .4px; white-space: nowrap;
}
.dl-live-tekst { overflow: hidden; text-overflow: ellipsis; }

/* pulsujaca kropka: czerwona na zywo (lobby, mecz), zlota przy zapisach */
.dl-live-kropka {
	flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%;
	background: #ff4d5e; animation: dl-live-puls 1.6s ease-out infinite;
}
.dl-live-zapisy .dl-live-kropka { background: #eebb60; animation-name: dl-live-puls-z; }
@keyframes dl-live-puls {
	0%   { box-shadow: 0 0 0 0 rgba(255, 77, 94, .75); }
	70%  { box-shadow: 0 0 0 10px rgba(255, 77, 94, 0); }
	100% { box-shadow: 0 0 0 0 rgba(255, 77, 94, 0); }
}
@keyframes dl-live-puls-z {
	0%   { box-shadow: 0 0 0 0 rgba(238, 187, 96, .75); }
	70%  { box-shadow: 0 0 0 10px rgba(238, 187, 96, 0); }
	100% { box-shadow: 0 0 0 0 rgba(238, 187, 96, 0); }
}

.dl-live-etykieta { color: #ff8a96; font-size: 12px; letter-spacing: 1.6px; text-transform: uppercase; }
.dl-live-zapisy .dl-live-etykieta { color: #f3cf8a; }

.dl-live-cta {
	flex: 0 0 auto; background: #5865f2; border-radius: 999px; padding: 3px 12px;
	font-size: 13px; letter-spacing: 1px; text-transform: uppercase;
	transition: background .15s;
}
.dl-live-link:hover .dl-live-cta { background: #4752c4; }
.dl-live-cta::after { content: ' →'; }

/* przesuniecie przypietego naglowka i tresci */
html.dl-pasek-on { --dl-pasek: 36px; }
html.dl-pasek-on .dl-header-container { top: var(--dl-pasek); }
html.dl-pasek-on body { padding-top: calc(var(--dl-h) + var(--dl-pasek)); }
@media (max-width: 950px) {
	html.dl-pasek-on body { padding-top: calc(var(--dl-h-mob) + var(--dl-pasek)); }
	html.dl-pasek-on .dl-menu-mobilne {
		top: calc(var(--dl-h-mob) + var(--dl-pasek));
		max-height: calc(100vh - var(--dl-h-mob) - var(--dl-pasek));
	}
}
@media (max-width: 480px) {
	.dl-live-link { font-size: 14px; gap: 9px; padding: 0 10px; }
	.dl-live-etykieta { display: none; }
	.dl-live-cta { padding: 2px 10px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
	.dl-live-kropka { animation: none; }
	.dl-live-cta { transition: none; }
}