@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap');

:root{
  --ru-purple:#7b2c86;
  --ru-purple-dark:#4f1959;
  --ru-white:#ffffff;
  --ru-soft:#f7eef9;
  --ru-red:#ef233c;
  --ru-green:#b5ff63;
}

.ru-top-player{
  position:sticky;
  top:0;
  z-index:99999;
  width:100%;
  background:var(--ru-white);
  border-bottom:3px solid var(--ru-purple);
  box-shadow:0 8px 24px rgba(123,44,134,.16);
  font-family:'Roboto', Arial, Helvetica, sans-serif;
}

.ru-player-inner{
  display:grid;
  grid-template-columns:120px 1fr;
  width:100%;
}

.ru-brand{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:14px 16px;
  background:var(--ru-purple);
  color:var(--ru-white);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.5px;
}

.ru-brand-live{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  font-size:12px;
  white-space:nowrap;
}

.ru-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background:var(--ru-red);
  box-shadow:0 0 0 0 rgba(239,35,60,.65);
  animation:ruPulse 1.6s infinite;
}

.ru-signals{
  display:grid;
  grid-template-columns:1fr 1fr;
  background:var(--ru-white);
}

.ru-signal{
  position:relative;
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
  padding:12px 18px;
  color:var(--ru-purple-dark);
  border-left:1px solid rgba(123,44,134,.18);
}

.ru-signal.is-playing,
.ru-signal.is-open{background:var(--ru-soft);}

.ru-signal-number{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border:2px solid var(--ru-purple);
  border-radius:999px;
  color:var(--ru-purple);
  font-size:18px;
  font-weight:900;
  flex:0 0 auto;
}

.ru-play-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:58px;
  height:58px;
  border:0;
  border-radius:999px;
  background:var(--ru-purple);
  color:var(--ru-white);
  font-size:0;
  font-weight:900;
  line-height:0;
  min-width:58px;
  min-height:58px;
  aspect-ratio:1 / 1;
  padding:0;
  overflow:hidden;
  -webkit-appearance:none;
  appearance:none;
  cursor:pointer;
  transition:transform .18s ease, opacity .18s ease, background-color .18s ease;
  flex:0 0 auto;
}

.ru-signal.is-playing .ru-play-btn{
  background:var(--ru-green);
  color:var(--ru-purple);
}

.ru-play-btn svg{
  display:block;
  width:46%;
  height:46%;
  fill:currentColor;
  pointer-events:none;
}

.ru-play-btn .ru-play-icon{
  transform:translateX(4%);
}

.ru-play-btn .ru-pause-icon{
  width:42%;
  height:42%;
}

.ru-play-btn:hover{transform:scale(1.06);}
.ru-play-btn:active{transform:scale(.96);}

.ru-loading-dots{
  display:block;
  font-size:34px;
  line-height:1;
  color:currentColor;
  transform:translateY(-5px);
}

.ru-signal-text{
  display:flex;
  flex-direction:column;
  min-width:0;
  line-height:1.08;
  text-transform:uppercase;
}

.ru-signal-text strong{
  font-size:15px;
  color:var(--ru-purple);
  letter-spacing:.4px;
  font-weight:900;
}

.ru-signal-text span{
  margin-top:4px;
  font-size:12px;
  color:var(--ru-purple-dark);
  opacity:.82;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}

.ru-signal.has-metadata .ru-now-playing{
  text-transform:none;
  opacity:1;
  color:#222;
  font-weight:500;
}

.ru-eq{
  display:none;
  align-items:flex-end;
  gap:3px;
  height:18px;
  margin-left:auto;
  flex:0 0 auto;
}

.ru-signal.is-playing .ru-eq{display:inline-flex;}

.ru-eq i{
  display:block;
  width:3px;
  border-radius:999px;
  background:var(--ru-purple);
  animation:ruBars .85s ease-in-out infinite;
}

.ru-eq i:nth-child(1){height:8px;animation-delay:0s;}
.ru-eq i:nth-child(2){height:14px;animation-delay:.12s;}
.ru-eq i:nth-child(3){height:10px;animation-delay:.24s;}
.ru-eq i:nth-child(4){height:17px;animation-delay:.36s;}

.ru-signal.has-error .ru-now-playing{color:#b00020;opacity:1;}

@keyframes ruPulse{
  0%{box-shadow:0 0 0 0 rgba(239,35,60,.65);}
  70%{box-shadow:0 0 0 8px rgba(239,35,60,0);}
  100%{box-shadow:0 0 0 0 rgba(239,35,60,0);}
}

@keyframes ruBars{
  0%,100%{transform:scaleY(.45);opacity:.65;}
  50%{transform:scaleY(1);opacity:1;}
}

@media(max-width:820px){
  .ru-player-inner{grid-template-columns:1fr;}
  .ru-brand{padding:8px 14px;}
  .ru-brand-live{font-size:12px;}
  .ru-signals{grid-template-columns:1fr;}
  .ru-signal{
    padding:10px 14px;
    border-left:0;
    border-top:1px solid rgba(123,44,134,.18);
  }
  .ru-signal-number{width:30px;height:30px;font-size:15px;}
  .ru-play-btn{width:50px;height:50px;min-width:50px;min-height:50px;font-size:0;}
  .ru-play-btn svg{width:46%;height:46%;}
  .ru-play-btn .ru-pause-icon{width:42%;height:42%;}
  .ru-signal-text strong{font-size:15px;}
  .ru-signal-text span{font-size:12px;}
}