/* Subtitle style overlay + sheet controls */

.player {
  --cc-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --cc-size: 22px;
  --cc-bg: 55;
  --cc-shadow: 3;
  --cc-stroke: 0;
  --cc-bottom: 12%;
}

.cc-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--cc-bottom, 12%);
  z-index: 4;
  display: flex;
  justify-content: center;
  pointer-events: none;
  padding: 0 6%;
}
.cc-overlay[hidden] {
  display: none !important;
}
.cc-box {
  max-width: 92%;
  text-align: center;
}
.cc-text {
  display: inline;
  font-family: var(--cc-font);
  font-size: var(--cc-size);
  line-height: 1.35;
  color: #fff;
  white-space: pre-wrap;
  padding: 0.12em 0.42em;
  border-radius: 0.2em;
  background: rgba(0, 0, 0, calc(var(--cc-bg) * 0.01));
  -webkit-text-stroke: calc(var(--cc-stroke) * 1px) #000;
  paint-order: stroke fill;
  text-shadow:
    0 0 calc(var(--cc-shadow) * 1px) rgba(0, 0, 0, 0.95),
    0 calc(var(--cc-shadow) * 0.35px) calc(var(--cc-shadow) * 0.9px)
      rgba(0, 0, 0, 0.75);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Hide browser-drawn cues; we render via .cc-overlay */
.player.cc-custom video::cue {
  opacity: 0 !important;
  color: transparent !important;
  background: transparent !important;
  text-shadow: none !important;
}

.ps-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 14px 8px;
}
.ps-chip {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: #e8e8e8;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}
.ps-chip.selected {
  border-color: rgba(255, 144, 0, 0.65);
  background: rgba(255, 144, 0, 0.14);
  color: var(--accent);
  font-weight: 600;
}
.ps-slider {
  padding: 4px 14px 10px;
}
.ps-slider-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
}
.ps-slider-label {
  font-size: 12.5px;
  color: #e6e6e6;
}
.ps-slider-val {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  font-variant-numeric: tabular-nums;
}
.ps-slider input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
  height: 18px;
  cursor: pointer;
}
.ps-sheet.ps-wide {
  min-width: 240px;
  max-width: min(300px, 78%);
  max-height: min(78%, 480px);
}