/* Player do YouTube com camada propria (2026-10-23). Neutro, sobre fundo escuro;
   o roxo so marca o estado ativo/foco (docs/10). Sem animacao alem do realce. */
.video-wrapper.player-pronto { overflow: hidden; }

.player-camada {
    position: absolute; inset: 0; z-index: 3;
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: 0; padding: 0; cursor: pointer;
}
.player-camada:focus-visible { outline: 2px solid #A855F7; outline-offset: -2px; }
.player-icone-grande {
    width: 72px; height: 72px; border-radius: 999px;
    background: rgba(11, 8, 18, 0.72); box-shadow: 0 16px 40px -16px rgba(11, 8, 18, 0.5);
    display: none; position: relative;
}
.player-icone-grande::before {
    content: ""; position: absolute; left: 29px; top: 22px;
    border-left: 22px solid #fff; border-top: 14px solid transparent; border-bottom: 14px solid transparent;
}
.player-pausado .player-icone-grande { display: block; }

.player-barra {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
    display: flex; align-items: center; gap: 8px; padding: 8px 12px;
    background: linear-gradient(to top, rgba(11, 8, 18, 0.85), rgba(11, 8, 18, 0));
    color: #fff; font: 600 0.75rem system-ui, -apple-system, "Segoe UI", sans-serif;
}
.player-botao {
    width: 32px; height: 32px; flex: 0 0 32px; border: 0; border-radius: 999px;
    background: transparent; color: #fff; cursor: pointer; position: relative;
}
.player-botao:hover { background: rgba(255, 255, 255, 0.12); }
.player-botao:focus-visible, .player-progresso:focus-visible, .player-volume:focus-visible, .player-velocidade:focus-visible {
    outline: 2px solid #A855F7; outline-offset: 2px;
}

/* Icones desenhados em CSS (sem imagem, sem fonte). */
.player-play::before {
    content: ""; position: absolute; left: 12px; top: 9px;
    border-left: 11px solid currentColor; border-top: 7px solid transparent; border-bottom: 7px solid transparent;
}
.player-play.tocando::before {
    left: 10px; top: 9px; width: 4px; height: 14px; border: 0; background: currentColor; box-shadow: 8px 0 0 currentColor;
}
.player-mudo::before {
    content: ""; position: absolute; left: 8px; top: 12px; width: 6px; height: 8px; background: currentColor;
}
.player-mudo::after {
    content: ""; position: absolute; left: 12px; top: 8px;
    border-right: 9px solid currentColor; border-top: 8px solid transparent; border-bottom: 8px solid transparent;
}
.player-mudo.mudo { opacity: 0.55; }
.player-tela-cheia::before {
    content: ""; position: absolute; left: 9px; top: 9px; width: 14px; height: 14px;
    border: 2px solid currentColor; border-radius: 2px; box-sizing: border-box;
}

.player-tempo { white-space: nowrap; font-variant-numeric: tabular-nums; min-width: 84px; }
.player-progresso { flex: 1; min-width: 60px; accent-color: #A855F7; cursor: pointer; }
.player-volume { width: 72px; accent-color: #A855F7; cursor: pointer; }
.player-velocidade {
    background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 999px; padding: 2px 6px; font: inherit; cursor: pointer;
}
.player-velocidade option { color: #1a1a1a; }

.video-wrapper:fullscreen { width: 100%; height: 100%; padding: 0; background: #000; }
.video-wrapper:fullscreen iframe { position: absolute; inset: 0; width: 100%; height: 100%; }

@media (max-width: 520px) {
    .player-volume, .player-velocidade { display: none; }
    .player-tempo { min-width: 0; }
}