/* player.css: o tocador do desenho 04, com a barra em forma de dial de rádio (agulha vermelha, escala e as
   estações dos capítulos) e a lâmpada "No ar" que acende quando toca. Depende de: base.css antes. */

/* ------------------------------------------------------------ o painel do tocador */

.toca {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px;
  padding: 16px;
  border: var(--contorno); border-radius: 26px;
  background:
    radial-gradient(rgba(23, 19, 14, .09) 1.2px, transparent 1.6px) 0 0 / 11px 11px,
    var(--amarelo);
  box-shadow: 6px 6px 0 var(--preto);
}

.toca__topo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; }

.toca__capitulo {
  flex: 1 1 160px; min-width: 0; margin: 0;
  font-weight: 800; font-size: 15px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.toca__capitulo-rotulo { color: var(--texto-fraco); font-weight: 700; }

.toca__retomar {
  padding: 4px 12px; border-radius: 999px;
  background: var(--branco); border: 2px solid var(--preto);
  font-size: 14px; font-weight: 700;
}

/* a lâmpada "No ar": apagada parada, vermelha e pulsando quando toca */
.no-ar {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px 5px 9px; border-radius: 8px;
  background: var(--preto); color: #8d806a;
  font-weight: 800; font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
}
.no-ar__lampada { width: 11px; height: 11px; border-radius: 50%; background: #4a4036; }
[data-tocador="tocando"] .no-ar { color: var(--branco); }
[data-tocador="tocando"] .no-ar__lampada {
  background: var(--agulha);
  box-shadow: 0 0 0 3px rgba(255, 59, 31, .3), 0 0 12px var(--agulha);
  animation: lampada-pisca 1.6s ease-in-out infinite;
}

@keyframes lampada-pisca { 50% { opacity: .45; } }

/* ------------------------------------------------------------ o dial (a barra de progresso) */

.dial {
  position: relative;
  height: 64px;
  border: var(--contorno); border-radius: 16px;
  background: #241e17;
  overflow: hidden;
  --cor-foco: var(--preto);
}

/* a escala: risquinhos a cada 12 px e um mais alto a cada 60 px, como no rádio */
.dial::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(to right, rgba(255, 233, 138, .55) 0 2px, transparent 2px 60px) left bottom / 100% 26px no-repeat,
    repeating-linear-gradient(to right, rgba(255, 233, 138, .35) 0 2px, transparent 2px 12px) left bottom / 100% 13px no-repeat;
}

/* o que já tocou ganha um brilho laranja até a agulha */
.dial::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; pointer-events: none;
  width: calc(var(--progresso, 0) * 100%);
  background: linear-gradient(90deg, rgba(255, 106, 61, .05), rgba(255, 106, 61, .55));
}

/* as estações: um ponto no alto do dial onde começa cada capítulo (o radio.js põe) */
.dial__estacao {
  position: absolute; top: 7px; z-index: 1;
  left: calc(var(--onde, 0) * 100%);
  width: 10px; height: 10px; margin-left: -1px; border-radius: 50%;
  background: var(--amarelo); border: 2px solid #241e17;
  pointer-events: none;
}

.dial__barra {
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%; margin: 0;
  background: transparent;
  -webkit-appearance: none; appearance: none;
  cursor: pointer;
}
.dial__barra:focus-visible { outline: 3px solid var(--branco); outline-offset: -6px; }

.dial__barra::-webkit-slider-runnable-track { height: 100%; background: transparent; border: 0; }
.dial__barra::-moz-range-track { height: 100%; background: transparent; border: 0; }

/* a agulha */
.dial__barra::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 8px; height: 58px; margin-top: 0;
  border: 0; border-radius: 4px;
  background: var(--agulha);
  box-shadow: 0 0 0 2px #241e17, 0 0 14px var(--agulha);
}
.dial__barra::-moz-range-thumb {
  width: 8px; height: 58px;
  border: 0; border-radius: 4px;
  background: var(--agulha);
  box-shadow: 0 0 0 2px #241e17, 0 0 14px var(--agulha);
}

.toca__tempos {
  display: flex; justify-content: space-between;
  margin-top: -6px;
  font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------ os botões redondos */

.toca__botoes { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; }

.redondo {
  position: relative;
  display: grid; place-items: center;
  width: 58px; height: 58px; padding: 0;
  border: var(--contorno); border-radius: 50%;
  background: var(--branco); color: var(--preto);
  font-weight: 800; font-size: 15px;
  box-shadow: var(--sombra-dura);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.redondo:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--preto); }
.redondo:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--preto); }
.redondo svg { width: 26px; height: 26px; }

.redondo__numero { position: absolute; bottom: 9px; left: 0; right: 0; font-size: 11px; line-height: 1; }
.redondo--pulo svg { margin-top: -8px; width: 24px; height: 24px; }

.redondo--grande { width: 86px; height: 86px; background: var(--coral); }
.redondo--grande svg { width: 38px; height: 38px; }

/* tocar e pausar: o mesmo botão, desenho trocado pelo estado do player */
.icone-pausa { display: none; }
[data-tocador="tocando"] .icone-tocar { display: none; }
[data-tocador="tocando"] .icone-pausa { display: block; }

.redondo--velocidade { font-size: 16px; font-variant-numeric: tabular-nums; }

.toca__compartilha { display: grid; gap: 10px; }
.toca__compartilha .botao { min-height: 56px; padding: 10px 14px; font-size: 16px; }
.toca__compartilha .toca__baixar { justify-self: center; min-height: 44px; padding: 6px 18px; font-size: 15px; box-shadow: none; background: transparent; border-style: dashed; }
.toca__minuto { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ computador */

@media (min-width: 900px) {
  .toca {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "botoes topo     compartilha"
      "botoes dial     compartilha"
      "botoes tempos   compartilha";
    align-items: center;
    gap: 8px 26px;
    padding: 20px 26px;
  }
  .toca__topo { grid-area: topo; }
  .dial { grid-area: dial; height: 72px; }
  .dial__barra::-webkit-slider-thumb { height: 66px; }
  .dial__barra::-moz-range-thumb { height: 66px; }
  .toca__tempos { grid-area: tempos; margin-top: 0; }
  .toca__botoes { grid-area: botoes; gap: 14px; }
  .toca__compartilha { grid-area: compartilha; width: 300px; }
  .toca__compartilha .toca__baixar { justify-self: stretch; min-height: 52px; background: var(--branco); border-style: solid; box-shadow: var(--sombra-dura); }
  .toca__capitulo { font-size: 16px; }
  .redondo--grande { width: 96px; height: 96px; }
}