/* =========================================================
   DK PLAYER — TRYB DK RADIO
   Osobny ekran radia w palecie DK Radio.
   ========================================================= */
.dk-radio-mode {
  overflow: hidden;
  background: #050302;
}

.dk-radio-screen {
  position: absolute;
  inset: 0;
  overflow: hidden;
  color: #f5e5c6;
  background:
    linear-gradient(rgba(3,2,1,.58), rgba(3,2,1,.70)),
    url('radio.jpg') center/cover no-repeat;
}

.dk-radio-stage-shade {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 27%, rgba(217,173,84,.13), transparent 27%),
    linear-gradient(90deg, rgba(0,0,0,.42), transparent 26%, transparent 74%, rgba(0,0,0,.42));
  pointer-events: none;
}

.dk-radio-screen-inner {
  position: relative;
  z-index: 2;
  width: min(760px, 92%);
  height: 100%;
  margin: 0 auto;
  padding: 2.6% 0 2%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2.1%;
}

.dk-radio-brand { text-align: center; }
.dk-radio-brand p {
  margin: 0 0 3px;
  font-family: Georgia, serif;
  font-size: clamp(11px, 1.2vw, 17px);
  color: #f5e5c6;
}
.dk-radio-brand h2 {
  margin: 0;
  font-family: Georgia, serif;
  font-size: clamp(17px, 2vw, 28px);
  color: #fff1d3;
}

.dk-radio-onair {
  align-self: center;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 17px;
  border: 1px solid rgba(146,45,31,.82);
  border-radius: 5px;
  color: #e9c8ae;
  background: rgba(39,9,5,.48);
  font-size: clamp(7px, .7vw, 10px);
  font-weight: 800;
  letter-spacing: .22em;
}
.dk-radio-onair-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #914433;
  box-shadow: 0 0 8px rgba(145,68,51,.65);
}

.dk-radio-info-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid rgba(217,173,84,.43);
  border-radius: 9px;
  overflow: hidden;
  background: rgba(12,8,5,.77);
}
.dk-radio-info-card {
  min-width: 0;
  padding: 9px 16px;
  color: #f3dfbd;
  text-decoration: none;
  border-right: 1px solid rgba(217,173,84,.22);
}
.dk-radio-info-card:last-child { border-right: 0; }
.dk-radio-info-card strong,
.dk-radio-info-card small,
.dk-radio-info-card > span { display: block; }
.dk-radio-info-card strong { font-size: clamp(9px, .9vw, 13px); letter-spacing: .12em; }
.dk-radio-info-card small { margin: 5px 0; color: #9b7151; font-size: clamp(6px, .6vw, 8px); letter-spacing: .19em; }
.dk-radio-info-card > span { font-size: clamp(8px, .8vw, 11px); }
.green-dot,.blue-dot { display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:6px; }
.green-dot { background:#7cb37c; box-shadow:0 0 8px rgba(124,179,124,.55); }
.blue-dot { background:#6fa8c8; box-shadow:0 0 8px rgba(111,168,200,.55); }

.dk-radio-console {
  padding: 10px 22px 11px;
  border: 1px solid rgba(217,173,84,.48);
  border-radius: 13px;
  background: linear-gradient(180deg, rgba(25,15,8,.87), rgba(10,7,5,.90));
}
.dk-radio-console-title { text-align:center; font-family:Georgia,serif; }
.dk-radio-console-title small { display:block; color:#9d7046; font:7px/1.2 Arial,sans-serif; letter-spacing:.28em; }
.dk-radio-console-title strong { display:block; margin-top:3px; font-size:clamp(13px,1.4vw,20px); font-weight:500; }

.dk-radio-rds {
  display:grid;
  grid-template-columns:44px 1fr 44px;
  align-items:center;
  gap:12px;
  margin-top:9px;
  min-height:38px;
  padding:5px 12px;
  border:1px solid rgba(217,173,84,.36);
  border-radius:7px;
  background:rgba(10,7,5,.72);
  text-align:center;
}
.dk-radio-rds > span { color:#d9ad54; font-size:clamp(9px,.95vw,13px); letter-spacing:.035em; }
.dk-radio-rds-bars { width:42px; height:22px; display:block; }
.dk-radio-rds-bars.mirror { transform:scaleX(-1); }

.dk-radio-controls { display:flex; justify-content:center; gap:10px; margin-top:9px; }
.dk-radio-button {
  min-width:105px;
  padding:7px 16px;
  border:1px solid rgba(217,173,84,.40);
  border-radius:5px;
  color:#d8b987;
  background:rgba(20,13,9,.72);
  font:800 clamp(7px,.7vw,10px)/1 Arial,sans-serif;
  letter-spacing:.20em;
  cursor:pointer;
}
.dk-radio-button.primary { color:#241508; background:linear-gradient(#efd17c,#c88f32); }
.dk-radio-volume { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:8px; margin-top:8px; color:#ad8a63; font:7px/1 Arial,sans-serif; letter-spacing:.12em; }
.dk-radio-volume input { width:100%; accent-color:#d9ad54; }
.dk-radio-listeners { margin-top:5px; text-align:center; color:#80664f; font-size:7px; letter-spacing:.08em; }

.dk-radio-info-ticker {
  display:grid;
  grid-template-columns:150px 1fr;
  min-height:32px;
  align-items:center;
  border:1px solid rgba(217,173,84,.42);
  border-radius:7px;
  overflow:hidden;
  background:rgba(9,6,4,.78);
}
.dk-radio-info-ticker > strong { padding:0 12px; color:#d7b67f; font-size:clamp(7px,.65vw,9px); letter-spacing:.12em; }
.dk-radio-info-viewport { overflow:hidden; white-space:nowrap; padding-right:10px; color:#bc9360; font-size:clamp(7px,.7vw,10px); }

.status-radio { border:0; font:inherit; cursor:pointer; }
.status-control.disabled { opacity:.35; cursor:not-allowed; }
.status-control:disabled { pointer-events:none; }

@media screen and (max-width: 760px) {
  .dk-radio-screen-inner { width:94%; gap:1.6%; }
  .dk-radio-info-card { padding:7px 9px; }
  .dk-radio-console { padding:8px 10px; }
  .dk-radio-info-ticker { grid-template-columns:110px 1fr; }
}


/* DK RADIO INFO — ruchomy ticker. Zmiana wyłącznie wizualna. */
.dk-radio-info-viewport {
  position: relative;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

#playerRadioInfoText {
  display: inline-block;
  width: max-content;
  min-width: max-content;
  padding-left: 100%;
  will-change: transform;
}

#playerRadioInfoText.is-scrolling {
  animation: dkRadioInfoTicker 42s linear infinite;
}

.dk-radio-info-viewport:hover #playerRadioInfoText.is-scrolling {
  animation-play-state: paused;
}

@keyframes dkRadioInfoTicker {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

@media (prefers-reduced-motion: reduce) {
  #playerRadioInfoText.is-scrolling {
    animation: none;
    padding-left: 0;
  }
}


/* =========================================================
   DK PLAYER — FINALNE DOPRACOWANIE TRYBU RADIO
   ========================================================= */

/* Duży ticker Playera zwalnia tylko w trybie DK Radio. */
.ticker-track.ticker-radio-info.ticker-running {
  animation-duration: 34s;
}

/* Kafelek DK Radio staje się przyciskiem zamknięcia w trybie radia. */
.status-radio {
  position: relative;
}

.status-radio-close {
  display: none;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--gold-light);
  font-size: 2rem;
  font-weight: 300;
  line-height: 1;
  text-shadow: 0 0 12px rgba(255,215,0,.28);
}

.status-radio-close.visible {
  display: flex;
}

.status-radio.radio-active {
  background: rgba(255,215,0,.045);
}


/* =========================================================
   DK PLAYER — CZYTELNY PRZYCISK WŁĄCZ / WYŁĄCZ RADIO
   ========================================================= */
.status-radio {
  display: grid !important;
  grid-template-columns: minmax(62px, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 4px 8px !important;
}

.status-radio-image {
  min-width: 0;
  width: 100% !important;
  height: 54px !important;
}

.status-radio-action {
  min-width: 48px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  line-height: 1;
  white-space: nowrap;
}

.status-radio-action small {
  color: var(--muted);
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .13em;
}

.status-radio-action strong {
  color: var(--gold-light);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .10em;
}

.status-radio.radio-active .status-radio-action small {
  color: var(--gold);
}

.status-radio.radio-active .status-radio-action strong {
  color: var(--blue-light);
}

.status-radio:hover .status-radio-action strong,
.status-radio:focus-visible .status-radio-action strong {
  color: var(--gold);
}

@media screen and (max-width: 1100px) {
  .status-radio {
    grid-template-columns: minmax(70px, 1fr) auto !important;
  }

  .status-radio-image {
    height: 50px !important;
  }
}

@media screen and (max-width: 560px) {
  .status-radio {
    gap: 6px;
    padding: 4px 6px !important;
  }

  .status-radio-action small {
    font-size: .52rem;
  }

  .status-radio-action strong {
    font-size: .70rem;
  }
}


/* =========================================================
   DK RADIO W PLAYERZE — PRZESUNIĘCIE CAŁOŚCI W DÓŁ
   TYLKO CSS. HTML / JS / PLAYLISTA BEZ ZMIAN.
   ========================================================= */

.dk-radio-info-ticker {
  display: none !important;
}

/* Audycje/O Radiu przesuwa się w dół, a konsola podąża za nim
   w normalnym układzie flex — oba elementy zachowują wspólny układ. */
.dk-radio-info-row {
  transform: translateY(30px);
}

/* Kompensacja przestrzeni w układzie, żeby druga ramka również
   znalazła się niżej, a nie weszła na pierwszą. */
.dk-radio-console {
  transform: translateY(30px);
}

@media screen and (max-width: 760px) {
  .dk-radio-info-row,
  .dk-radio-console {
    transform: translateY(16px);
  }
}


/* =========================================================
   DK RADIO — KOMPAKTOWY WIDOK W DK PLAYER
   Zmniejszenie samego ekranu Radia po wejściu w tryb RADIO.
   ========================================================= */

.dk-radio-screen-inner {
  width: min(560px, 82%);
  padding: 1% 0 .8%;
  gap: 1%;
}

.dk-radio-brand p {
  font-size: clamp(9px, .8vw, 12px);
}

.dk-radio-brand h2 {
  font-size: clamp(14px, 1.3vw, 20px);
}

.dk-radio-onair {
  padding: 4px 11px;
  gap: 6px;
  font-size: clamp(6px, .6vw, 9px);
}

.dk-radio-info-card {
  padding: 6px 10px;
}

.dk-radio-info-card strong {
  font-size: clamp(8px, .75vw, 11px);
}

.dk-radio-info-card small {
  margin: 3px 0;
}

.dk-radio-info-card > span {
  font-size: clamp(7px, .7vw, 10px);
}

.dk-radio-console {
  padding: 7px 13px 8px;
  border-radius: 10px;
}

.dk-radio-console-title strong {
  font-size: clamp(12px, 1.2vw, 17px);
}

.dk-radio-rds {
  grid-template-columns: 38px 1fr 38px;
  gap: 9px;
  margin-top: 6px;
  min-height: 29px;
  padding: 3px 8px;
}

.dk-radio-rds-bars {
  width: 36px;
  height: 18px;
}

.dk-radio-rds > span {
  font-size: clamp(8px, .8vw, 11px);
}

.dk-radio-controls {
  margin-top: 6px;
  gap: 8px;
}

.dk-radio-button {
  min-width: 84px;
  padding: 5px 11px;
  font-size: clamp(6px, .6vw, 9px);
}

.dk-radio-volume {
  margin-top: 5px;
}

.dk-radio-listeners {
  margin-top: 4px;
}

.dk-radio-info-row,
.dk-radio-console {
  transform: translateY(14px);
}

@media screen and (max-width: 760px) {
  .dk-radio-screen-inner {
    width: 88%;
    padding: .8% 0 .6%;
    gap: .8%;
  }

  .dk-radio-info-row,
  .dk-radio-console {
    transform: translateY(8px);
  }
}