/* =========================================================
   Auren • YouTube Modal — v4.16 (vídeo preto resolvido + radius)
   - Recorte no wrapper .ytp-clip (não no iframe/dialog)
   - Iframe sem clip-path/transform (evita bugs de GPU)
   ========================================================= */

:root{
  --ytp-maxw: 1100px;
  --card-radius: 14px;         /* raio do player */
  --overlay-alpha: .58;        /* escuridão do fundo */

  --ctrl-size: 36px;
  --icon-size: 22px;
  --ctrl-gap: 10px;
  --x-hit: 36px;
  --x-outside-gap: 10px;
  --x-outside-top: 0px;
  --x-icon-nudge-y: -6px;
  --arrow-icon-nudge-y: 0px;

  --auren-crimson: 220,20,60;
}

/* Scrollbar estável quando o body é travado */
html{ scrollbar-gutter: stable; }

.ytp-modal{
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,var(--overlay-alpha));
  opacity: 0;
  overflow: hidden;
}
.ytp-modal.is-hidden{ display: none; }
.ytp-modal:not(.is-hidden){ animation: ytp-in .14s ease both; }
@keyframes ytp-in{ from{opacity:0} to{opacity:1} }

.ytp-backdrop{ position: absolute; inset: 0; background: transparent; }

/* Âncora do player */
.ytp-shell{
  position: relative;
  width: min(96vw, var(--ytp-maxw));
  aspect-ratio: 16 / 9;
  margin:
    env(safe-area-inset-top)
    env(safe-area-inset-right)
    env(safe-area-inset-bottom)
    env(safe-area-inset-left);
}

/* Dialog sem overflow/radius (o recorte acontece em .ytp-clip) */
.ytp-dialog{
  position: absolute; inset: 0;
  background: transparent;
  overflow: visible;
  border: 0;
}

/* Área do player */
.ytp-body{ position: relative; height: 100%; min-height: 0; }

/* Recorte seguro: o radius está aqui */
.ytp-clip{
  position: absolute; inset: 0;
  background: #000;
  border-radius: var(--card-radius);
  overflow: hidden; /* recorta o iframe sem afetar a renderização */
}

/* Contêiner que recebe o <iframe> do YT API */
#ytp-embed{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  background: #000;
}

/* O IFRAME ocupa 100% e NÃO recebe clip/transform */
#ytp-embed iframe{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  border: 0 !important;
  background: #000 !important;
}

/* ---------- Controles ---------- */
.ytp-arrow{
  position: absolute; z-index: 2;
  width: var(--ctrl-size); height: var(--ctrl-size);
  border: 0; border-radius: 9999px;
  background: transparent;
  color: #fff;
  display: grid; place-items: center;
  cursor: pointer; user-select: none; padding: 0; font-size: 0;
  outline: none !important; box-shadow: none !important;
  -webkit-tap-highlight-color: transparent;
}
.ytp-arrow::before{
  content: ""; width: var(--icon-size); height: var(--icon-size);
  background-size: contain; background-position: center; background-repeat: no-repeat;
  transform: translateY(var(--arrow-icon-nudge-y)) scale(var(--s,1));
  transition: transform .14s cubic-bezier(.2,.9,.3,1);
}
.ytp-arrow-left::before{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23fff' d='M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z'/></svg>");
}
.ytp-arrow-right::before{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23fff' d='M8.59 16.59 10 18l6-6-6-6-1.41 1.41L13.17 12z'/></svg>");
}
.ytp-arrow:hover::before{ --s: 1.12; }

.ytp-arrow{ top: 50%; transform: translateY(-50%); }
.ytp-arrow-left{  left:  var(--ctrl-gap); }
.ytp-arrow-right{ right: var(--ctrl-gap); }

/* Fechar (hitbox pequena) */
.ytp-close-outside{
  position: absolute; z-index: 2;
  width: var(--x-hit); height: var(--x-hit);
  top:   var(--x-outside-top);
  right: calc(-1 * (var(--x-hit) + var(--x-outside-gap)));
  border: 0; border-radius: 9999px;
  background: transparent; color: #fff;
  display: grid; place-items: center;
  cursor: pointer; user-select: none; padding: 0; font-size: 0;
  outline: none !important; box-shadow: none !important;
  -webkit-tap-highlight-color: transparent;
}
.ytp-close-outside::before{
  content: ""; width: var(--icon-size); height: var(--icon-size);
  background-size: contain; background-position: center; background-repeat: no-repeat;
  transform: translateY(var(--x-icon-nudge-y)) scale(var(--s,1));
  transition: transform .14s cubic-bezier(.2,.9,.3,1);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23fff' d='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/></svg>");
}
.ytp-close-outside:hover::before{ --s: 1.12; }

@media (max-width: 900px){
  .ytp-close-outside{ right: var(--ctrl-gap); }
}

/* Focus visível só teclado */
.ytp-arrow:focus-visible, .ytp-close-outside:focus-visible{
  box-shadow: 0 0 0 2px rgba(var(--auren-crimson), .55) inset;
  border-radius: 9999px;
}

/* Baixa altura: garante caber */
@media (max-height: 520px){
  .ytp-shell{ height: calc(100vh - 24px); aspect-ratio: auto; }
}

/* Impressão */
@media print{ .ytp-modal{ display: none !important; } }