/* Player do Seraph: mesma tipografia e a mesma frieza do resto do site. */
.sph-player {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 50;
  width: min(420px, calc(100vw - 48px));
  font-family: IBMPlexMono-Regular, ui-monospace, monospace;
  color: #fff;
  user-select: none;
  -webkit-user-select: none;
}
.sph-barra {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(24, 28, 36, .58);
  border: 1px solid rgba(255, 255, 255, .22);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.sph-b {
  flex: none;
  background: none;
  border: 0;
  color: #fff;
  font: inherit;
  font-size: 12px;
  line-height: 1;
  padding: 6px 7px;
  cursor: pointer;
  opacity: .78;
  transition: opacity .2s;
}
.sph-b:hover { opacity: 1; }
.sph-play { font-size: 15px; }
.sph-player.tocando .sph-play { font-size: 12px; }
.sph-player.tocando .sph-play::before { content: "\23F8"; }
.sph-player.tocando .sph-play { font-size: 0; }
.sph-player.tocando .sph-play::before { font-size: 14px; }
.sph-info { flex: 1 1 auto; min-width: 0; }
.sph-nome {
  font-family: IBMPlexMono-Medium, ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .06em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 6px;
}
.sph-trilho {
  height: 3px;
  background: rgba(255, 255, 255, .22);
  cursor: pointer;
}
.sph-trilho i { display: block; height: 100%; width: 0; background: #fff; }
.sph-tempo { flex: none; font-size: 10.5px; opacity: .75; font-variant-numeric: tabular-nums; }
.sph-faixas {
  display: none;
  list-style: none;
  margin: 6px 0 0;
  padding: 6px 0;
  max-height: 46vh;
  overflow-y: auto;
  background: rgba(24, 28, 36, .62);
  border: 1px solid rgba(255, 255, 255, .18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.sph-player.aberto .sph-faixas { display: block; }
.sph-faixas li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: baseline;
  padding: 7px 14px;
  font-size: 11px;
  cursor: pointer;
  opacity: .8;
}
.sph-faixas li:hover { opacity: 1; background: rgba(255, 255, 255, .07); }
.sph-faixas li.ativa { opacity: 1; background: rgba(255, 255, 255, .12); }
.sph-num { opacity: .6; font-variant-numeric: tabular-nums; }
.sph-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sph-bpm, .sph-dur { opacity: .6; font-size: 10px; font-variant-numeric: tabular-nums; }
.sph-faixas::-webkit-scrollbar { width: 5px; }
.sph-faixas::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .3); }
@media (max-width: 640px) {
  .sph-player { left: 12px; right: 12px; bottom: 12px; width: auto; }
  .sph-bpm { display: none; }
}