/* Cinema do AVYLO Player. A tipografia herda a Manrope da interface. */
.player-cinema {
  position: relative;
  background: #000;
  isolation: isolate;
  overflow: hidden;
  color: #f4f7fb;
  font-family: var(--font-ui, "Manrope", sans-serif);
}
.player-cinema video {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  background: #000;
}
.player-dialog.is-native .player-cinema video {
  height: 100%;
  max-height: none;
}
.player-cinema-heading {
  position: absolute;
  inset: 0 0 auto;
  z-index: 6;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  padding: 22px 24px 64px;
  background: linear-gradient(180deg, #05060ab8 0%, #05060a66 42%, transparent 100%);
  transition: opacity 220ms ease;
  pointer-events: none;
}
.player-cinema-heading h2 {
  margin: 0;
  font-family: inherit;
  font-size: clamp(18px, 2.1vw, 28px);
  font-weight: 750;
  letter-spacing: -0.03em;
  line-height: 1.15;
}
.player-cinema-heading p {
  margin: 8px 0 0;
  color: #c5ceda;
  font-size: 13px;
  font-weight: 560;
  letter-spacing: 0.01em;
}
.player-cinema-heading .dialog-close {
  position: static;
  pointer-events: auto;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border: 1px solid #ffffff24;
  border-radius: 50%;
  background: #0c1018b8;
  color: #fff;
  backdrop-filter: blur(10px);
}
.player-cinema .player-controls {
  display: block;
  z-index: 6;
  padding: 56px 22px 16px;
  background: linear-gradient(180deg, transparent 0%, #05060a59 30%, #05060ac2 100%);
}
.player-control-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.player-controls-spacer { flex: 1; }
.player-cinema .player-controls .icon-button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border-color: transparent;
  /* vidro fosco em repouso (não só no hover) — mais "flutuante", igual aos
     players de referência, em vez de ícone solto sem nenhum fundo */
  background: #ffffff14;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #f4f7fb;
  transition: background 150ms ease, color 150ms ease;
}
.player-cinema .player-controls .icon-button:hover,
.player-cinema .player-controls .icon-button:focus-visible {
  background: #ffffff2c;
  color: #9be7ff;
}
.player-cinema .player-controls .icon-button[data-player="toggle"] {
  width: 52px;
  height: 52px;
  background: #fff;
  color: #05060a;
  box-shadow: 0 8px 22px #000a;
  transition: transform 150ms ease, background 150ms ease, color 150ms ease;
}
.player-cinema .player-controls .icon-button[data-player="toggle"] svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
  stroke: none;
}
.player-cinema .player-controls .icon-button[data-player="toggle"]:hover,
.player-cinema .player-controls .icon-button[data-player="toggle"]:focus-visible {
  background: #28c8f8;
  color: #041018;
  transform: scale(1.06);
}
.player-cinema .player-controls .icon-button[data-player="toggle"]:active {
  transform: scale(0.94);
}
.player-timeline {
  position: relative;
  margin-bottom: 8px;
  padding-top: 8px;
}
.player-cinema .player-scrub {
  width: 100%;
  height: 16px;
  margin: 0;
  position: relative;
  display: block;
  z-index: 1;
  cursor: pointer;
  accent-color: #28c8f8;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}
/* Trilha fina com o trecho já assistido preenchido (--fill vem do JS, em %)
   e halo só no ponto do thumb — igual aos players de referência, em vez da
   barra genérica do navegador. */
.player-cinema .player-scrub::-webkit-slider-runnable-track {
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(to right, #28c8f8 0%, #28c8f8 var(--fill, 0%), #ffffff2e var(--fill, 0%), #ffffff2e 100%);
}
.player-cinema .player-scrub::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -4.5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px #0006;
  transition: box-shadow 150ms ease;
}
.player-cinema .player-scrub:hover::-webkit-slider-thumb,
.player-cinema .player-scrub:active::-webkit-slider-thumb,
.player-cinema .player-scrub:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 7px #28c8f840, 0 1px 4px #0006;
}
.player-cinema .player-scrub::-moz-range-track {
  height: 5px;
  border-radius: 999px;
  background: #ffffff2e;
}
.player-cinema .player-scrub::-moz-range-progress {
  height: 5px;
  border-radius: 999px;
  background: #28c8f8;
}
.player-cinema .player-scrub::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: none;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px #0006;
}
.player-cinema .player-scrub:hover::-moz-range-thumb,
.player-cinema .player-scrub:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 7px #28c8f840, 0 1px 4px #0006;
}
.player-markers {
  position: absolute;
  left: 0;
  right: 0;
  top: 14px;
  height: 4px;
  pointer-events: none;
}
.player-marker {
  position: absolute;
  top: 0;
  height: 4px;
  border-radius: 4px;
  background: #8dcff5;
}
.marker-recap { background: #b5a4ed; }
.marker-credits { background: #e3be72; }
.player-hover-card {
  position: absolute;
  transform: translate(-50%, calc(-100% - 14px));
  z-index: 7;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: none;
}
.player-hover-preview {
  display: block;
  width: 160px;
  height: 90px;
  border-radius: 8px;
  background: #0c1018;
  border: 2px solid #ffffff3a;
  box-shadow: 0 14px 30px #000a;
  object-fit: cover;
}
.player-hover-time {
  border-radius: 999px;
  background: #10141ce8;
  color: #fff;
  padding: 4px 8px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  border: 1px solid #ffffff22;
}
.player-volume { width: 78px; accent-color: #28c8f8; }
.player-speed {
  color: #f4f7fb;
  background: #121722cc;
  border: 1px solid #ffffff24;
  border-radius: 999px;
  padding: 7px 10px;
  font: 650 12px/1 var(--font-ui, "Manrope", sans-serif);
}
.player-time {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.player-cinema .player-skip {
  right: 24px;
  bottom: 112px;
  z-index: 6;
  height: auto;
  padding: 11px 16px;
  border-radius: 999px;
  border: 1px solid #ffffff55;
  background: #0c1018e8;
  color: #fff;
  font: 750 13px/1 var(--font-ui, "Manrope", sans-serif);
  letter-spacing: 0.01em;
  backdrop-filter: blur(14px);
  box-shadow: 0 12px 32px #0008;
}
.player-cinema .player-skip:hover,
.player-cinema .player-skip:focus-visible {
  border-color: transparent;
  background: #28c8f8;
  color: #041018;
}
.player-cinema .player-next {
  inset: auto 24px 108px auto;
  width: min(420px, calc(100% - 48px));
  padding: 18px 18px 16px;
  border: 1px solid #ffffff2e;
  border-radius: 18px;
  background: linear-gradient(160deg, #121a2ced, #090c14f2);
  box-shadow: 0 18px 50px #000a, inset 0 1px #ffffff1c;
  backdrop-filter: blur(16px);
  z-index: 7;
  align-content: start;
  gap: 6px;
}
.player-cinema .player-next .eyebrow {
  margin: 0;
  color: #8fdfff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.player-cinema .player-next h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 750;
  letter-spacing: -0.03em;
  line-height: 1.25;
}
.player-cinema .player-count {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 2px;
  color: #d5deea;
  font-size: 14px;
  font-weight: 650;
}
.player-cinema .player-count b {
  display: inline-grid;
  place-items: center;
  min-width: 2.4em;
  height: 2.4em;
  border-radius: 12px;
  background: #28c8f824;
  color: #b8f3ff;
  font-size: 22px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
}
.player-cinema .player-next .detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.player-cinema .player-end {
  padding: 28px 24px 120px;
  background: linear-gradient(180deg, #05050655 10%, #05060af5 70%);
}
.player-cinema .tracks-menu {
  bottom: 104px;
  z-index: 7;
  border-radius: 12px;
  background: #10141ce8;
  backdrop-filter: blur(12px);
}
.player-cinema [hidden] { display: none !important; }
.player-cinema #videoError:not(:empty) {
  position: absolute;
  z-index: 7;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: min(440px, calc(100% - 48px));
  background: #121722ee;
  padding: 18px 22px;
  border: 1px solid #ffffff20;
  border-radius: 14px;
  text-align: center;
}
.player-cinema.is-quiet:not(.is-paused) .player-cinema-heading { opacity: 0; }
.player-cinema:focus-within .player-controls { opacity: 1; pointer-events: auto; }
.player-cinema .player-loading {
  font-family: inherit;
}
@media (max-width: 650px) {
  .player-cinema-heading { padding: 14px 14px 48px; }
  .player-cinema .player-controls { padding: 36px 10px 10px; }
  .player-control-row { gap: 2px; flex-wrap: wrap; }
  .player-volume { width: 48px; }
  .player-cinema .player-controls .icon-button { width: 44px; height: 44px; }
  .player-cinema .player-controls .icon-button[data-player="toggle"] { width: 54px; height: 54px; }
  .player-hover-preview { width: 110px; height: 62px; }
  .player-time { min-width: 72px; font-size: 11px; }
  .player-speed { max-width: 68px; padding: 6px; }
  .player-cinema .player-next {
    right: 12px;
    left: 12px;
    width: auto;
    bottom: 118px;
    padding: 14px;
  }
  .player-cinema .player-skip { right: 12px; bottom: 118px; }
}
@media (prefers-reduced-motion: reduce) {
  .player-cinema-heading,
  .player-cinema .player-controls,
  .player-cinema .player-skip {
    transition: none;
  }
}

/* ===== Refino dos controles, ajuste de tela, faixas, ações no cabeçalho e tela de pausa ===== */
.player-cinema .pl-icon { display: block; width: 22px; height: 22px; }
.player-cinema .player-controls .icon-button { color: #f4f7fb; }
.player-cinema .player-controls .icon-button[aria-pressed="true"] { color: #28c8f8; background: #28c8f81f; }
.player-head-actions { display: flex; align-items: center; gap: 8px; pointer-events: none; }
.player-head-actions > * { pointer-events: auto; }
.player-head-actions .icon-button:not(.dialog-close) { width: 42px; height: 42px; border: 1px solid #ffffff24; border-radius: 50%; background: #0c1018b8; color: #fff; backdrop-filter: blur(10px); display: inline-grid; place-items: center; }
.player-head-actions .icon-button:not(.dialog-close):hover, .player-head-actions .icon-button:not(.dialog-close):focus-visible { background: #ffffff2c; color: #9be7ff; }
.player-head-actions .icon-button[aria-pressed="true"] { color: #28c8f8; border-color: #28c8f866; }
.player-head-actions .icon-button svg { width: 19px; height: 19px; }

/* zoom: preencher a tela corta as bordas pretas */
.player-cinema.is-zoom-fill video, .player-dialog.is-native .player-cinema.is-zoom-fill video { object-fit: cover; }

/* áudio e legendas */
.player-cinema .tracks-menu { right: 22px; bottom: 104px; min-width: 190px; max-width: min(300px, calc(100% - 44px)); padding: 8px; border: 1px solid #ffffff22; border-radius: 14px; background: #0c1018f2; box-shadow: 0 18px 44px #000a; backdrop-filter: blur(14px); display: grid; gap: 4px; }
.player-cinema .tracks-menu[hidden] { display: none; }
.tracks-group h4 { margin: 4px 8px 4px; color: #7d879b; font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.tracks-group + .tracks-group { margin-top: 4px; padding-top: 6px; border-top: 1px solid #ffffff14; }
.player-cinema .tracks-menu button { display: block; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: #dfe6f3; font: 600 13px/1.2 var(--font-ui, "Manrope", sans-serif); text-align: left; cursor: pointer; }
.player-cinema .tracks-menu button:hover, .player-cinema .tracks-menu button:focus-visible { background: #ffffff1a; outline: none; }
.player-cinema .tracks-menu button[aria-checked="true"] { color: #28c8f8; background: #28c8f814; }
.player-cinema .tracks-menu button[aria-checked="true"]::after { content: "✓"; float: right; }

/* tela de pausa: escurece aos poucos e mostra sinopse, elenco e parecidos (só o que houver) */
.player-pause { position: absolute; inset: 0; z-index: 4; display: flex; align-items: center; opacity: 0; pointer-events: none; background: radial-gradient(120% 90% at 20% 40%, #05060ac4 0%, #05060ae8 55%, #05060af5 100%); transition: opacity 650ms ease; }
.player-pause[hidden] { display: none; }
.player-cinema.is-pause-screen .player-pause { opacity: 1; pointer-events: auto; }
.player-pause-body { width: 100%; max-height: 100%; overflow: auto; padding: clamp(72px, 9vh, 110px) clamp(24px, 6vw, 90px) 150px; scrollbar-width: none; }
.player-pause-body::-webkit-scrollbar { display: none; }
.pp-eyebrow { margin: 0 0 8px; color: #28c8f8; font-size: 11px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; }
.pp-title { margin: 0 0 12px; font-size: clamp(24px, 3.2vw, 44px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; }
.pp-title.has-logo { margin-bottom: 14px; }
.pp-logo { display: block; width: auto; height: auto; max-width: min(420px, 70vw); max-height: 150px; object-fit: contain; object-position: left center; filter: drop-shadow(0 2px 14px #000a); }
.pp-title.has-logo small { margin-top: 12px; }
.pp-title small { display: block; margin-top: 8px; color: #9be7ff; font-size: 14px; font-weight: 700; letter-spacing: 0.04em; }
.pp-synopsis { max-width: 640px; margin: 0 0 22px; color: #cfd7e4; font-size: clamp(14px, 1.15vw, 17px); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.pp-block { margin-top: 22px; }
.pp-block h4 { margin: 0 0 10px; color: #8f99ad; font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; }
.pp-cast-row, .pp-related-row { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.pp-cast-row::-webkit-scrollbar, .pp-related-row::-webkit-scrollbar { display: none; }
.pp-cast { flex: 0 0 auto; width: 78px; text-align: center; margin: 0; }
.pp-cast img, .pp-cast .pp-cast-blank { width: 64px; height: 64px; margin: 0 auto 6px; border-radius: 50%; object-fit: cover; background: #1a2030; display: block; border: 1px solid #ffffff1f; }
.pp-cast b { display: block; color: #f2f5fb; font-size: 11.5px; font-weight: 700; line-height: 1.25; }
.pp-cast small { display: block; margin-top: 2px; color: #7d879b; font-size: 10.5px; line-height: 1.25; }
.pp-related-item { flex: 0 0 auto; width: 92px; padding: 0; border: 1px solid #ffffff1f; border-radius: 8px; overflow: hidden; background: #0c1018; cursor: pointer; transition: transform 180ms ease, border-color 180ms ease; }
.pp-related-item:hover, .pp-related-item:focus-visible { transform: translateY(-3px); border-color: #28c8f8; outline: none; }
.pp-related-item img { display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: cover; }
@media (max-width: 650px) { .pp-logo { max-width: 62vw; max-height: 100px; } .player-pause-body { padding: 70px 18px 150px; } .pp-related-item { width: 76px; } .player-cinema .tracks-menu { bottom: 150px; right: 10px; } }
@media (prefers-reduced-motion: reduce) { .player-pause { transition: none; } .pp-related-item { transition: none; } .pp-related-item:hover { transform: none; } }

/* ----- Tela de fim (nativeEndScreen): mensagem + ações à esquerda, títulos parecidos à direita ----- */
.player-cinema .player-end:has(> .pe) { padding: 0; align-content: stretch; background: radial-gradient(90% 80% at 12% 30%, #28c8f81c 0%, transparent 60%), #05060aeb; backdrop-filter: blur(18px) saturate(1.15); -webkit-backdrop-filter: blur(18px) saturate(1.15); }
.pe { width: 100%; height: 100%; overflow: auto; box-sizing: border-box; display: grid; grid-template-columns: minmax(260px, 5fr) minmax(0, 7fr); align-items: center; gap: clamp(28px, 5vw, 84px); padding: clamp(84px, 11vh, 120px) clamp(24px, 6vw, 90px) 132px; scrollbar-width: none; }
.pe::-webkit-scrollbar { display: none; }
.pe.is-solo { grid-template-columns: minmax(0, 640px); }
.pe-main { display: grid; gap: 14px; align-content: center; min-width: 0; }
.pe-eyebrow { margin: 0; color: var(--accent, #28c8f8); font-size: 11px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; }
.pe-title { margin: 0; font-size: clamp(26px, 3.4vw, 48px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.04; text-wrap: balance; }
.pe-title small { display: block; margin-top: 10px; color: #9be7ff; font-size: 14px; font-weight: 700; letter-spacing: 0.04em; }
.pe-note { margin: 0; max-width: 420px; color: #cfd7e4; font-size: clamp(14px, 1.15vw, 17px); line-height: 1.55; }
.pe-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.pe-cast { display: flex; align-items: center; gap: 12px; margin-top: 10px; color: #8f99ad; font-size: 12.5px; line-height: 1.4; }
.pe-faces { display: inline-flex; flex: 0 0 auto; }
.pe-faces img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: #1a2030; border: 2px solid #0b0d13; margin-left: -10px; }
.pe-faces img:first-child { margin-left: 0; }
.pe-side { min-width: 0; }
.pe-head { margin: 0 0 14px; color: #8f99ad; font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; }
.pe-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 18px); }
.pe-pick { display: block; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; min-width: 0; }
.pe-pick img { display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 10px; background: #0c1018; border: 1px solid #ffffff1f; box-shadow: 0 10px 28px #0000006e; transition: transform 200ms var(--ease-out, ease), border-color 200ms ease, box-shadow 200ms ease; }
.pe-pick span { display: block; margin-top: 8px; color: #b6bece; font-size: 12px; font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pe-pick:hover img, .pe-pick:focus-visible img { transform: translateY(-4px); border-color: var(--accent, #28c8f8); box-shadow: 0 16px 36px #00000090, 0 0 0 1px #28c8f866; }
.pe-pick:hover span, .pe-pick:focus-visible span { color: #fff; }
.pe-pick:focus-visible { outline: none; }
.player-end > .pe .pe-eyebrow, .player-end > .pe .pe-title, .player-end > .pe .pe-note, .player-end > .pe .pe-actions, .player-end > .pe .pe-cast, .pe-head, .pe-pick { animation: pe-in 560ms var(--ease-out, ease) both; animation-delay: calc(var(--i, 0) * 70ms + 80ms); }
@keyframes pe-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) {
  .pe { grid-template-columns: minmax(0, 1fr); align-items: start; align-content: start; gap: 26px; padding: 72px 20px 124px; }
  .pe-note { max-width: none; }
}
@media (max-width: 650px) {
  .pe { padding: 118px 18px 152px; }
  .pe-cast { display: none; }
  .pe-title { font-size: 26px; }
  .pe-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .pe-pick img { border-radius: 7px; }
  .pe-pick span { font-size: 10.5px; margin-top: 5px; }
  .pe-actions .button { flex: 1 1 auto; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .player-end > .pe .pe-eyebrow, .player-end > .pe .pe-title, .player-end > .pe .pe-note, .player-end > .pe .pe-actions, .player-end > .pe .pe-cast, .pe-head, .pe-pick { animation: none; }
  .pe-pick img { transition: none; }
  .pe-pick:hover img, .pe-pick:focus-visible img { transform: none; }
}

/* Classificação indicativa no canto (estilo Netflix): entra, fica uns segundos e sai. Só a faixa etária. */
.player-rating { position: absolute; top: 34px; left: 34px; z-index: 6; display: flex; align-items: center; gap: 14px; padding: 4px 0; pointer-events: none; opacity: 0; transform: translateX(-26px); transition: opacity 520ms ease, transform 620ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.player-rating.is-on { opacity: 1; transform: none; }
.player-rating .pr-bar { width: 3px; height: 38px; border-radius: 2px; background: #e5484d; }
.player-rating .pr-label { color: #f2f4f8; font-size: 17px; font-weight: 600; letter-spacing: 0.01em; text-shadow: 0 1px 12px #000c; }
.player-rating .age-badge { transform: scale(1.25); transform-origin: left center; margin-left: 4px; }
.player-stage:not(.is-ready) .player-rating, .player-stage.is-buffering .player-rating { opacity: 0 !important; }
@media (max-width: 650px) { .player-rating { top: 70px; left: 16px; } .player-rating .pr-label { font-size: 14px; } }
@media (prefers-reduced-motion: reduce) { .player-rating { transition: opacity 200ms; transform: none; } }
/* selo quadrado da faixa etária (cores oficiais: L verde, 10 azul, 12 amarelo, 14 laranja, 16 vermelho, 18 preto) */
.player-rating .pr-badge { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 6px; background: var(--age, #3dc46f); color: #fff; font: 800 24px/1 var(--font-ui, inherit); letter-spacing: -0.02em; box-shadow: 0 6px 20px #0009, inset 0 0 0 1px #ffffff2e; }
.player-rating .pr-badge[data-age="L"] { --age: #1fa24a; }
.player-rating .pr-badge[data-age="10"] { --age: #0a8fd1; }
.player-rating .pr-badge[data-age="12"] { --age: #f3c20f; color: #1a1a1a; }
.player-rating .pr-badge[data-age="14"] { --age: #f08a1c; }
.player-rating .pr-badge[data-age="16"] { --age: #e03131; }
.player-rating .pr-badge[data-age="18"] { --age: #141414; box-shadow: 0 6px 20px #0009, inset 0 0 0 2px #ffffff55; }
.player-rating .pr-bar { height: 46px; }
.player-rating .pr-bar { background: linear-gradient(180deg, #28c8f8 0%, #825cff 55%, #ff649f 100%); box-shadow: 0 0 14px #825cff66; }

/* Busca com miniaturas (TV): faixa de quadros em volta do destino, tempo e diferença */
.player-scrubstrip { position: absolute; left: 0; right: 0; bottom: 210px; z-index: 7; display: flex; flex-direction: column; align-items: center; gap: 14px; pointer-events: none; }
.player-scrubstrip .ss-row { display: flex; align-items: center; justify-content: center; gap: 10px; }
.player-scrubstrip .ss-item { flex: 0 0 auto; width: 168px; height: 95px; border-radius: 6px; overflow: hidden; background: linear-gradient(135deg, #1a2033, #0c1018); opacity: 0.72; transition: opacity 120ms; }
.player-scrubstrip .ss-item[hidden] { display: none; }
.player-scrubstrip .ss-item.is-center { width: 252px; height: 142px; opacity: 1; box-shadow: 0 0 0 3px #fff, 0 16px 40px #000c; }
.player-scrubstrip .ss-img, .player-scrubstrip .ss-img canvas { display: block; width: 100%; height: 100%; }
.player-scrubstrip .ss-info { display: flex; align-items: baseline; gap: 12px; color: #fff; text-shadow: 0 1px 14px #000c; }
.player-scrubstrip .ss-time { font-size: 28px; font-weight: 800; font-variant-numeric: tabular-nums; }
.player-scrubstrip .ss-delta { font-size: 16px; font-weight: 600; color: #c3cbdb; font-variant-numeric: tabular-nums; }
.player-stage.is-scrubbing .player-pause { display: none !important; }
.player-scrubstrip .ss-item { width: 148px; height: 83px; }
.player-scrubstrip .ss-item.is-center { width: 252px; height: 142px; }

/* miniaturas da busca: quadro ainda carregando = brilho que passa (só transform; liberado no modo leve da TV) */
.player-scrubstrip .ss-item { position: relative; }
.player-scrubstrip .ss-item.is-empty::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 25%, #ffffff22 50%, transparent 75%);
  transform: translateX(-100%);
  animation: ss-sheen 1.3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes ss-sheen { to { transform: translateX(100%); } }
html[data-fx="lite"] .player-scrubstrip .ss-item.is-empty::after { animation-duration: 1.3s !important; animation-iteration-count: infinite !important; }
@media (prefers-reduced-motion: reduce) { .player-scrubstrip .ss-item.is-empty::after, html[data-fx="lite"] .player-scrubstrip .ss-item.is-empty::after { animation: none !important; } }

/* ===== Classificação indicativa: entrada em sequência (02/11) =====
   Ao ganhar .is-on: a barra de cores "se desenha" de cima para baixo, o texto desliza, o quadrado da faixa salta com um quique e um brilho
   cruza por cima. O estado BASE de cada peça é o visual final (as animações usam fill-mode both), então ao sair o bloco só some com o fade
   do contêiner, sem as peças "desmontarem" antes. Só transform/opacity: roda também no modo leve da TV. */
.player-rating .pr-bar { transform-origin: top center; }
.player-rating .pr-badge { position: relative; overflow: hidden; }
.player-rating .pr-badge::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, #ffffff77 50%, transparent 70%);
  transform: translateX(-130%);
  pointer-events: none;
}
.player-rating.is-on .pr-bar { animation: pr-bar-draw 520ms cubic-bezier(0.2, 0.7, 0.2, 1) 120ms both; }
.player-rating.is-on .pr-label { animation: pr-label-in 460ms ease-out 300ms both; }
.player-rating.is-on .pr-badge { animation: pr-badge-pop 640ms cubic-bezier(0.2, 1.2, 0.4, 1) 440ms both; }
.player-rating.is-on .pr-badge::after { animation: pr-sheen 900ms ease-in-out 1150ms both; }
@keyframes pr-bar-draw { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes pr-label-in { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@keyframes pr-badge-pop {
  0% { opacity: 0; transform: scale(0.35) rotate(-10deg); }
  55% { opacity: 1; transform: scale(1.14) rotate(2deg); }
  80% { transform: scale(0.97); }
  100% { opacity: 1; transform: none; }
}
@keyframes pr-sheen { from { transform: translateX(-130%); } to { transform: translateX(130%); } }
/* modo leve (TV): o reset global zerava duração e atraso; devolve só estas quatro (transform/opacity) */
html[data-fx="lite"] .player-rating.is-on .pr-bar { animation-duration: 520ms !important; animation-delay: 120ms !important; }
html[data-fx="lite"] .player-rating.is-on .pr-label { animation-duration: 460ms !important; animation-delay: 300ms !important; }
html[data-fx="lite"] .player-rating.is-on .pr-badge { animation-duration: 640ms !important; animation-delay: 440ms !important; }
html[data-fx="lite"] .player-rating.is-on .pr-badge::after { animation-duration: 900ms !important; animation-delay: 1150ms !important; }
@media (prefers-reduced-motion: reduce) {
  .player-rating.is-on .pr-bar, .player-rating.is-on .pr-label, .player-rating.is-on .pr-badge, .player-rating.is-on .pr-badge::after,
  html[data-fx="lite"] .player-rating.is-on .pr-bar, html[data-fx="lite"] .player-rating.is-on .pr-label,
  html[data-fx="lite"] .player-rating.is-on .pr-badge, html[data-fx="lite"] .player-rating.is-on .pr-badge::after { animation: none !important; }
}