/* Player de capítulo (9:16) */
.player {
  position: relative; overflow: hidden; isolation: isolate;
  width: 100%; aspect-ratio: 9 / 16; max-height: 100dvh;
  background: var(--cobalto-noite); color: var(--creme);
  border-radius: 26px;
  box-shadow: 0 0 0 4px var(--marinho), 0 40px 70px -30px rgba(0, 0, 0, 0.7);
  user-select: none; -webkit-user-select: none;
}
.pl-cenas { position: absolute; inset: 0; cursor: pointer; }
.pl-cena { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s ease; }
.pl-cena.ativa { opacity: 1; }
.pl-cena img { width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 40%; }
.pl-cena.anima img { animation: zoom-lento var(--dur, 40s) linear both; }
.player:not(.tocando) .pl-cena.anima img { animation-play-state: paused; }
@keyframes zoom-lento { from { transform: scale(1.02) translateY(0); } to { transform: scale(1.14) translateY(-2%); } }
.pl-sombra { position: absolute; inset: 0; pointer-events: none; background:
  linear-gradient(180deg, rgba(14, 18, 30, 0.72) 0%, rgba(14, 18, 30, 0) 22%, rgba(14, 18, 30, 0) 46%, rgba(14, 18, 30, 0.88) 78%, rgba(14, 18, 30, 0.96) 100%); }

.pl-topo { position: absolute; top: 0; left: 0; right: 0; padding: 12px 14px 0; z-index: 3; }
.pl-barras { display: flex; gap: 4px; }
.pl-barras i { flex: 1; height: 4px; border-radius: 4px; background: rgba(244, 219, 171, 0.28); overflow: hidden; cursor: pointer; padding: 6px 0; background-clip: content-box; }
.pl-barras b { display: block; height: 100%; background: var(--creme); transform-origin: left; transform: scaleX(0); border-radius: 4px; }
.pl-acoes { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; }
.pl-acoes-dir { display: flex; gap: 4px; }
.pl-ic { width: 42px; height: 42px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(14, 35, 80, 0.55); color: var(--creme); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-weight: 800; font-size: 0.85rem; }
.pl-ic svg { width: 22px; height: 22px; }
.pl-cc[aria-pressed='false'] { opacity: 0.55; }
.pl-ref { margin: 6px 2px 0; display: flex; flex-direction: column; gap: 0; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--acafrao); }
.pl-ref b { font-family: var(--fonte-titulo); font-size: 1.05rem; letter-spacing: 0; text-transform: none; color: var(--creme); font-weight: 900; }

/* cartão de abertura: some quando o áudio começa */
.pl-abertura { position: absolute; left: 0; right: 0; bottom: 30%; padding: 0 26px; z-index: 2; text-align: center; transition: opacity 0.6s ease, transform 0.6s ease; pointer-events: none; }
.pl-abertura h2 { font-size: clamp(2.4rem, 11vw, 3.4rem); color: var(--creme); text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45); }
.pl-abertura p:not(.sobrelinha) { font-family: var(--fonte-titulo); font-style: italic; font-weight: 600; font-size: 1.2rem; color: var(--acafrao); margin: 8px 0 0; }
.pl-abertura .sobrelinha { color: var(--creme); opacity: 0.85; }
.player.tocando .pl-abertura, .player.fim .pl-abertura { opacity: 0; transform: translateY(-10px); }

.pl-legenda { position: absolute; left: 0; right: 0; bottom: 132px; padding: 0 24px; z-index: 2; min-height: 6.5em; display: flex; align-items: flex-end; justify-content: center; pointer-events: none; }
.pl-frase { margin: 0; text-align: center; font-family: var(--fonte-titulo); font-weight: 600; font-size: clamp(1.3rem, 5.6vw, 1.65rem); line-height: 1.28; letter-spacing: -0.005em; color: rgba(244, 219, 171, 0.42); text-wrap: balance; }
.pl-frase span { transition: color 0.12s linear; }
.pl-frase span.dita { color: var(--creme); }
.pl-frase span.agora { color: var(--acafrao); }
.player.sem-legenda .pl-legenda { opacity: 0; }
.player.erro .pl-frase { color: var(--creme); font-family: var(--fonte-texto); font-size: 1rem; }

.pl-controles { position: absolute; left: 0; right: 0; bottom: 40px; z-index: 3; display: flex; align-items: center; justify-content: center; gap: 28px; }
.pl-play { width: 72px; height: 72px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--acafrao); color: var(--marinho); box-shadow: 0 3px 0 var(--acafrao-escuro), 0 14px 30px -10px rgba(0, 0, 0, 0.6); }
.pl-play svg { width: 34px; height: 34px; }
.player:not(.tocando):not(.fim).pronto .pl-play { animation: pulsar 2.2s ease-in-out infinite; }
.pl-controles .pl-ic { width: 48px; height: 48px; background: rgba(244, 219, 171, 0.1); }
.pl-controles .pl-ic svg { width: 26px; height: 26px; }
.pl-tempo { position: absolute; left: 24px; right: 24px; bottom: 12px; z-index: 3; display: flex; justify-content: space-between; font-size: 0.78rem; font-variant-numeric: tabular-nums; opacity: 0.7; }

.pl-carregando { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; background: var(--cobalto-noite); transition: opacity 0.4s; }
.pl-carregando span { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(244, 219, 171, 0.25); border-top-color: var(--acafrao); animation: girar 0.9s linear infinite; }
.player.pronto .pl-carregando, .player.erro .pl-carregando { opacity: 0; pointer-events: none; }
.player.esperando .pl-play { opacity: 0.7; }

/* moldura de celular para o player dentro de páginas */
.moldura { width: 100%; max-width: 380px; margin: 0 auto; }