/*
  Media player flutuante (issue #2 - "Tocar midia no site").
  Skin retro estilo mp3 player anos 2000, seguindo a paleta ja usada no
  site (cyan/lime sobre fundo escuro, fonte Space Mono). Fica fixo no
  canto da tela, independente de rolagem ou pagina.
*/
.llya-player{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:9999;
  width:220px;
  font-family:"Space Mono",Menlo,Monaco,ui-monospace,monospace;
  background:linear-gradient(180deg,#061b27,#031522);
  border:1px solid #246978;
  border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.45),0 0 0 1px rgba(78,249,250,.08) inset;
  padding:10px;
  color:#edf6f5;
  user-select:none;
}

.llya-player__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:10px;
  letter-spacing:.08em;
  color:#8faab3;
  margin-bottom:6px;
  text-transform:uppercase;
}

.llya-player__header span{
  color:#4ef9fa;
}

.llya-player__minimize{
  background:none;
  border:none;
  color:#8faab3;
  cursor:pointer;
  font-family:inherit;
  font-size:12px;
  line-height:1;
  padding:2px 4px;
}
.llya-player__minimize:hover{color:#ccff7e}

.llya-player__screen{
  background:#000c18;
  border:1px solid #16434e;
  border-radius:6px;
  padding:8px 10px;
  margin-bottom:8px;
  overflow:hidden;
}

.llya-player__track{
  font-size:12px;
  color:#ccff7e;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.llya-player__status{
  font-size:10px;
  color:#8faab3;
  margin-top:2px;
}

.llya-player__bar{
  height:3px;
  background:#16434e;
  border-radius:2px;
  margin-top:6px;
  overflow:hidden;
}

.llya-player__bar-fill{
  height:100%;
  width:0%;
  background:#4ef9fa;
  transition:width .2s linear;
}

.llya-player__controls{
  display:flex;
  gap:6px;
}

.llya-player__btn{
  flex:1;
  background:#031522;
  border:1px solid #246978;
  color:#edf6f5;
  border-radius:6px;
  padding:6px 0;
  font-family:inherit;
  font-size:12px;
  cursor:pointer;
  transition:background .15s,color .15s;
}

.llya-player__btn:hover{
  background:#0b2a3a;
  color:#4ef9fa;
}

.llya-player__btn--accent{
  color:#000c18;
  background:#4ef9fa;
  border-color:#4ef9fa;
}
.llya-player__btn--accent:hover{
  background:#ccff7e;
  border-color:#ccff7e;
}

.llya-player.is-minimized .llya-player__screen,
.llya-player.is-minimized .llya-player__controls{
  display:none;
}

.llya-player__resume{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:9999;
  background:#031522;
  border:1px solid #246978;
  color:#4ef9fa;
  border-radius:50%;
  width:44px;
  height:44px;
  font-size:16px;
  cursor:pointer;
  display:none;
  align-items:center;
  justify-content:center;
}
.llya-player__resume.is-visible{
  display:flex;
}

@media (max-width:480px){
  .llya-player{
    right:10px;
    bottom:10px;
    width:180px;
  }
}