/* Visual do modal das candidatas de voz (site/escolha-de-elenco.html), trazido
   pra dentro do player. Prefixo r- em tudo pra nao esbarrar no CSS do player,
   e as variaveis ficam na raiz do modal porque o player nao tem esse tema. */

#btn-cenas { display: none !important; }

/* Faixa so pra destacar o botao: escura no topo, some descendo. Nao recebe
   clique (pointer-events: none), senao clicar nela nao passaria a fala. */
#rate-faixa {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 130px;
  z-index: 6;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(6, 4, 16, 0.85) 0%, rgba(6, 4, 16, 0.55) 45%, rgba(6, 4, 16, 0) 100%);
}

#btn-rate {
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 7;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 800;
  cursor: pointer;
  padding: 9px 20px;
  border-radius: 999px;
  border: none;
  background: linear-gradient(180deg, #c2adff, #9d7bff);
  color: #1a1330;
  box-shadow: 0 8px 22px -10px rgba(0, 0, 0, 0.8);
  transition: filter 0.12s;
}
#btn-rate:hover { filter: brightness(1.06); }

.r-ov {
  --surface: #191430; --surface-2: #221b3d; --border: #2e2750; --border-2: #3a3163;
  --text: #f3f0ff; --text-2: #ada3cc; --text-3: #756b96;
  --accent: #9d7bff; --accent-2: #c2adff; --red: #f6768a;
  position: fixed; inset: 0; background: rgba(6, 4, 16, 0.74); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; z-index: 9999; padding: 20px;
  font-family: "Manrope", -apple-system, system-ui, "Segoe UI", sans-serif; color: var(--text);
}
.r-modal { width: min(760px, 96vw); max-height: 90vh; overflow: auto; background: var(--surface);
  border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.7); }
.r-top { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px; border-bottom: 1px solid var(--border); }
.r-top h3 { margin: 0; font-size: 17px; font-weight: 800; }
.r-cena { color: var(--accent-2); font-weight: 700; }
.r-x { background: transparent; border: none; color: var(--text-2); font-size: 18px; cursor: pointer; line-height: 1; }
.r-x:hover { color: var(--text); }
.r-body { padding: 20px; }
.r-crit { padding: 16px 0; border-bottom: 1px solid var(--border); }
.r-crit:first-of-type { padding-top: 0; }
.r-crit-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.7px; color: var(--text);
  font-weight: 800; margin-bottom: 12px; }
.r-stars { display: flex; align-items: flex-start; justify-content: flex-start; gap: 14px; max-width: 340px; }
.r-star { display: flex; flex-direction: column; align-items: center; gap: 5px; cursor: pointer; flex: 1; }
.r-star-ico { font-size: 40px; line-height: 1; color: var(--border-2); transition: color 0.08s, transform 0.1s; }
.r-star:hover .r-star-ico { transform: scale(1.14); }
.r-star.on .r-star-ico { color: #ffc83d; }
.r-star-lbl { font-size: 12px; font-weight: 700; color: var(--text-3); font-variant-numeric: tabular-nums; pointer-events: none; }
.r-star.on .r-star-lbl { color: var(--accent-2); }
.r-campo { margin-top: 14px; }
.r-campo label { display: block; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.7px;
  color: var(--text-2); font-weight: 700; margin-bottom: 6px; }
.r-campo label .r-opc { text-transform: none; letter-spacing: 0; color: var(--text-3); font-weight: 600; }
.r-campo input, .r-campo textarea { width: 100%; font-family: inherit; font-size: 14px; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; resize: vertical; }
.r-campo input:focus, .r-campo textarea:focus { outline: none; border-color: var(--accent); }
.r-campo textarea { min-height: 76px; }
.r-erro { color: var(--red); font-size: 12.5px; font-weight: 600; margin-top: 12px; }
.r-acoes { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.r-btn-sec { font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; padding: 10px 18px;
  border-radius: 999px; border: 1px solid var(--border-2); background: transparent; color: var(--text-2); transition: all 0.12s; }
.r-btn-sec:hover { color: var(--text); border-color: var(--accent); }
.r-btn-pri { font-family: inherit; font-size: 13px; font-weight: 800; cursor: pointer; padding: 10px 20px;
  border-radius: 999px; border: none; background: linear-gradient(180deg, var(--accent-2), var(--accent)); color: #1a1330; transition: filter 0.12s; }
.r-btn-pri:hover { filter: brightness(1.06); }
.r-btn-pri:disabled { filter: none; opacity: 0.9; cursor: default; }