/* ==================== Playlist flutuante do casal (Etapa 18) ===== */
.c-radio { position: fixed; left: 16px; bottom: 16px; z-index: 140; }
.c-radio-toggle {
  width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--c3); color: var(--c1); display: grid; place-items: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.2); transition: transform .2s;
}
.c-radio-toggle:hover { transform: scale(1.06); }

.c-radio-painel {
  position: absolute; bottom: 64px; left: 0; width: 280px;
  background: var(--c1); border: 1px solid color-mix(in srgb, var(--c3) 30%, transparent);
  border-radius: 16px; box-shadow: 0 14px 40px rgba(0,0,0,.2); padding: 16px;
  animation: cPwaSobe .3s ease;
}
.c-radio-topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.c-radio-topo strong { font-size: .88rem; color: var(--c2); }

.c-radio-atual { text-align: center; margin-bottom: 12px; }
.c-radio-titulo { display: block; font-family: var(--f-titulo); font-size: 1.05rem; color: var(--c2); }
.c-radio-artista { display: block; font-size: .78rem; color: var(--c2); opacity: .68; margin-top: 2px; }

.c-radio-controles { display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: 10px; }
.c-radio-controles button {
  background: none; border: 0; cursor: pointer; color: var(--c2); opacity: .8;
  display: grid; place-items: center; padding: 4px;
}
.c-radio-controles button:hover { opacity: 1; }
#cRadioTocar {
  width: 44px; height: 44px; border-radius: 50%; background: var(--c3); color: var(--c1); opacity: 1;
}

.c-radio-externo {
  display: block; text-align: center; font-size: .8rem; color: var(--c3);
  text-decoration: underline; margin-bottom: 10px;
}

.c-radio-lista {
  list-style: none; margin: 0; padding: 0; max-height: 160px; overflow-y: auto;
  border-top: 1px solid color-mix(in srgb, var(--c3) 22%, transparent); padding-top: 8px;
}
.c-radio-lista li {
  padding: 8px 6px; border-radius: 8px; font-size: .8rem; color: var(--c2);
  cursor: pointer; opacity: .75;
}
.c-radio-lista li:hover { background: color-mix(in srgb, var(--c3) 8%, transparent); }
.c-radio-lista li.ativa { opacity: 1; font-weight: 600; color: var(--c3); }

@media (max-width: 480px) {
  .c-radio-painel { width: calc(100vw - 32px); }
}

/* Indicador de "toque para ativar o som" enquanto está mudo */
.c-radio-toggle.c-radio-mudo::after {
  content: '🔇'; position: absolute; top: -4px; right: -4px;
  font-size: .7rem; background: var(--c1); border-radius: 50%;
  width: 20px; height: 20px; display: grid; place-items: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
}
.c-radio-toggle { position: relative; }