/* Coral - vzhled vlastního přehrávače.

   Stejně jako jádro nezná ani tenhle soubor jedinou konkrétní službu. Chytá se
   výhradně na naše třídy cvdp-pl-* a na proměnné, které jádro dosadí na rámec.
   Používá ho rozšíření i stránka přehrávače ve WordPressu, proto se sem nesmí
   dostat nic, co platí jen na jedné z nich.

   NATIVNÍ OVLÁDÁNÍ ZŮSTÁVÁ VOLNÉ, a to dvakrát:
   1. Kořen overlaye má pointer-events: none, takže klik projde na video i tam,
      kde overlay leží. Klikací je jen pilulka a otevřený panel.
   2. Obojí sedí u pravého okraje ve svislém středu a panel má výšku omezenou
      pásmem --cvdp-pl-nahore a --cvdp-pl-dole, které jádro spočítá z rozměru
      nativní lišty. Do horní ani spodní lišty se tedy nedostane.

   Žádná bílá, žádné bílé inset linky, žádný focus kroužek od prohlížeče. */

/* ═══ filtr obrazu ═══════════════════════════════════════════════════════ */
/* Filtr míří na element s obrazem. Proměnné sedí na rámci schválně: přehrávače
   si atribut style na videu při každé změně rozměru přepisují a inline filtr by
   tím zmizel.

   RÁM SE FILTRUJE STEJNĚ JAKO VIDEO. Když obraz veze <iframe> z cizí adresy
   (stránka přehrávače ve WordPressu), dovnitř nevidíme, ale filter kreslí
   prohlížeč až nad hotovým obrazem, takže sytost i jas fungují úplně stejně.
   Schválně jen přímý potomek rámce: filtr na libovolném vnořeném rámu by
   sáhl i na reklamní a jiné rámy, které s obrazem nemají nic společného. */

.cvdp-pl-plocha video,
.cvdp-pl-plocha > iframe {
  filter: saturate(var(--cvdp-pl-sytost, 100%)) brightness(var(--cvdp-pl-jas, 100%));
}

/* ═══ kořen overlaye ═════════════════════════════════════════════════════ */

.cvdp-pl {
  position: absolute;
  inset: 0;
  z-index: 68;
  pointer-events: none;
  /* Panel se posouvá, a posuvník kreslí prohlížeč. Bez tmavého schématu je
     světlý, tedy bílý pruh přes obraz. */
  color-scheme: dark;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  line-height: 1.45;
  color: #9dfff1;
}
.cvdp-pl * { box-sizing: border-box; }

/* ═══ titulky v obraze ═══════════════════════════════════════════════════ */

.cvdp-pl-titulky {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 6%;
  pointer-events: none;
  font-size: calc(clamp(15px, 2.3vw, 30px) * var(--cvdp-pl-velikost, 1));
  line-height: 1.34;
  /* Titulek roste od svého kraje, tak se mu výška omezí pásmem mezi
     nativními lištami. Bez toho se dlouhý titulek na malém obrazu vysypal
     přes ovládání přehrávače. max() drží hodnotu nezápornou, jinak by
     prohlížeč celou deklaraci zahodil. */
  max-height: max(0px, calc(100% - var(--cvdp-pl-nahore, 64px) - var(--cvdp-pl-dole, 77px) - 20px));
  overflow: hidden;
}
.cvdp-pl-titulky[hidden],
.cvdp-pl-titulky[data-prazdno="ano"] { display: none; }

.cvdp-pl-titulky[data-svisle="nahore"] { top: calc(var(--cvdp-pl-nahore, 64px) + 10px); }
.cvdp-pl-titulky[data-svisle="dole"]   { bottom: calc(var(--cvdp-pl-dole, 76px) + 10px); }

/* Uprostřed se HUD neváže na 50 % rámce, ale vyplní pásmo mezi oběma
   nativními lištami a řádky si v něm vycentruje sám. Titulek na plnou
   velikost se tak nemá jak dostat přes nativní ovládání ani tehdy, když má
   víc řádků, než se do středu vejde. */
.cvdp-pl-titulky[data-svisle="stred"] {
  top: var(--cvdp-pl-nahore, 64px);
  bottom: var(--cvdp-pl-dole, 76px);
  justify-content: center;
}

.cvdp-pl-titulky[data-vodorovne="vlevo"]  { align-items: flex-start; text-align: left; }
.cvdp-pl-titulky[data-vodorovne="stred"]  { align-items: center; text-align: center; }
.cvdp-pl-titulky[data-vodorovne="vpravo"] { align-items: flex-end; text-align: right; }

.cvdp-pl-radek {
  max-width: 100%;
  padding: 3px 13px;
  border: 1px solid rgba(120, 255, 236, .16);
  border-radius: 9px;
  background: rgba(13, 8, 36, .76);
  color: #9dfff1;
  font-weight: 500;
  text-shadow: 0 1px 3px rgba(13, 8, 36, .9);
}

/* ═══ pilulka, která ovládání vyvolá ═════════════════════════════════════ */
/* Schovaná, dokud si ji člověk nevyvolá myší u pravého okraje nebo zkratkou. */

.cvdp-pl-spinac {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  padding: 7px 14px;
  border: 1px solid rgba(204, 16, 70, .55);
  border-radius: 999px;
  background: rgba(13, 8, 36, .88);
  color: #ffc4e3;
  font: inherit;
  font-weight: 600;
  letter-spacing: .04em;
  cursor: pointer;
  outline: none;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 6px 18px rgba(13, 8, 36, .6);
  transition: opacity .22s ease, border-color .18s ease, background .18s ease;
}
.cvdp-pl[data-vyzvano="ano"] .cvdp-pl-spinac {
  opacity: 1;
  pointer-events: auto;
}
.cvdp-pl-spinac:hover { border-color: #cc1046; background: rgba(38, 34, 140, .9); }
.cvdp-pl-spinac:focus-visible {
  border-color: #78ffec;
  box-shadow: 0 0 0 3px rgba(120, 255, 236, .28);
}

/* ═══ panel ══════════════════════════════════════════════════════════════ */
/* Otevírá se vlevo od pilulky a výška je svázaná s bezpečným pásmem, takže se
   nativní lišty ani nedotkne. */

.cvdp-pl-panel {
  position: absolute;
  right: 96px;
  /* PANEL VISÍ POD HORNÍM PÁSMEM A ROSTE DOLŮ. Svisle vycentrovaný byl dřív
     a přesně na tom seděla chyba: vycentrovaný panel se musel vejít do
     dvojnásobku toho VĚTŠÍHO pásma, takže se v krátkém obraze buď nevešel
     vůbec, nebo mu spodní mez 44 px držela výšku a on slezl na nativní
     lištu. Zavěšený panel má strop přesně na velikost volného pásma, takže
     se do lišty nedostane při žádné velikosti obrazu.
     Odsazení je proměnná, protože v úzkém přehrávači se panel posouvá pod
     pilulku, viz blok na konci souboru. */
  --cvdp-pl-odsazeni: 10px;
  top: calc(var(--cvdp-pl-nahore, 64px) + var(--cvdp-pl-odsazeni));
  width: 264px;
  max-width: calc(100% - 112px);
  /* max() drží hodnotu nezápornou. Kdyby vyšla záporná, prohlížeč deklaraci
     zahodí a panel zůstane bez stropu. Nula znamená, že v obraze není místo,
     a panel není vidět; jádro navíc v takové chvíli nastaví data-tesno. */
  max-height: max(0px, calc(100% - var(--cvdp-pl-nahore, 64px) - var(--cvdp-pl-dole, 77px) - var(--cvdp-pl-odsazeni) - 10px));
  overflow-y: auto;
  padding: 13px;
  border: 1px solid rgba(120, 255, 236, .26);
  border-radius: 15px;
  background: radial-gradient(120% 100% at 70% 0%, #26228c 0%, #12082e 55%, #0d0824 100%);
  box-shadow: 0 14px 34px rgba(13, 8, 36, .68);
  pointer-events: auto;
}
.cvdp-pl-panel[hidden] { display: none; }

/* ═══ obraz, do kterého se ovládání nevejde ══════════════════════════════ */
/* Když mezi nativními lištami nezbude použitelné místo, nekreslí se v obraze
   nic. Pravidlo je nadřazené i otevřenému panelu, ať se ovládání nemá jak
   dostat přes lištu přehrávače. */

.cvdp-pl[data-tesno="ano"] .cvdp-pl-spinac,
.cvdp-pl[data-tesno="ano"] .cvdp-pl-panel,
.cvdp-pl[data-tesno="ano"] .cvdp-pl-titulky { display: none; }

.cvdp-pl-nadpis {
  margin: 14px 0 8px;
  color: #ffc4e3;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.cvdp-pl-nadpis:first-child { margin-top: 0; }

.cvdp-pl-napoveda {
  margin: 8px 0 0;
  color: #7e83b8;
  font-size: 11px;
  line-height: 1.5;
}

/* ═══ posuvníky ══════════════════════════════════════════════════════════ */

.cvdp-pl-posuvnik { margin-bottom: 10px; }

.cvdp-pl-hlava {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 3px;
  font-size: 11.5px;
  color: #9dfff1;
}
.cvdp-pl-hodnota { color: #ffc4e3; font-variant-numeric: tabular-nums; }

.cvdp-pl-tah {
  width: 100%;
  height: 18px;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.cvdp-pl-tah::-webkit-slider-runnable-track {
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(120, 255, 236, .42), rgba(204, 16, 70, .68));
}
.cvdp-pl-tah::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -6px;
  border: 1px solid rgba(204, 16, 70, .8);
  border-radius: 50%;
  background: #ffc4e3;
  box-shadow: 0 2px 6px rgba(13, 8, 36, .75);
}
.cvdp-pl-tah::-moz-range-track {
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(120, 255, 236, .42), rgba(204, 16, 70, .68));
}
.cvdp-pl-tah::-moz-range-thumb {
  width: 15px;
  height: 15px;
  border: 1px solid rgba(204, 16, 70, .8);
  border-radius: 50%;
  background: #ffc4e3;
  box-shadow: 0 2px 6px rgba(13, 8, 36, .75);
}
/* Firefox kreslí u range vlastní tečkovaný rámeček, ten se ruší tudy. */
.cvdp-pl-tah::-moz-focus-outer { border: 0; }
.cvdp-pl-tah:focus-visible::-webkit-slider-thumb { border-color: #78ffec; }
.cvdp-pl-tah:focus-visible::-moz-range-thumb { border-color: #78ffec; }

/* ═══ tlačítka ═══════════════════════════════════════════════════════════ */

.cvdp-pl-tlacitko {
  display: block;
  width: 100%;
  margin-bottom: 7px;
  padding: 8px 10px;
  border: 1px solid rgba(120, 255, 236, .24);
  border-radius: 11px;
  background: rgba(120, 255, 236, .05);
  color: #9dfff1;
  font: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
  outline: none;
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.cvdp-pl-tlacitko:hover { border-color: rgba(120, 255, 236, .5); }
.cvdp-pl-tlacitko:focus-visible {
  border-color: #78ffec;
  box-shadow: 0 0 0 3px rgba(120, 255, 236, .22);
}
.cvdp-pl-tlacitko-zap,
.cvdp-pl-tlacitko-duraz {
  border-color: rgba(204, 16, 70, .58);
  background: rgba(204, 16, 70, .13);
  color: #ffc4e3;
}

.cvdp-pl-dvojice { display: flex; flex-direction: column; }

.cvdp-pl-mriz {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.cvdp-pl-stitek {
  padding: 5px 10px;
  border: 1px solid rgba(120, 255, 236, .24);
  border-radius: 999px;
  background: rgba(120, 255, 236, .05);
  color: #9dfff1;
  font: inherit;
  font-size: 11.5px;
  cursor: pointer;
  outline: none;
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.cvdp-pl-stitek:hover {
  border-color: rgba(204, 16, 70, .6);
  background: rgba(204, 16, 70, .12);
  color: #ffc4e3;
}
.cvdp-pl-stitek:focus-visible {
  border-color: #78ffec;
  box-shadow: 0 0 0 3px rgba(120, 255, 236, .22);
}

/* ═══ úzký přehrávač ═════════════════════════════════════════════════════ */
/* Na malém obrazu se panel roztáhne pod pilulku, ať se pořád vejde do pásma
   mezi nativní lišty. */

@media (max-width: 640px) {
  .cvdp-pl-panel {
    right: 12px;
    width: calc(100% - 24px);
    max-width: none;
    /* Pilulka se tu stěhuje nad panel, tak se panel odsune o její výšku. */
    --cvdp-pl-odsazeni: 52px;
  }
  /* Pilulka se odsune nad panel, těsně pod horní nativní lištu, ať jde panel
     pořád zavřít a ani tady se nic nekreslí přes ovládání přehrávače. */
  .cvdp-pl[data-otevreno="ano"] .cvdp-pl-spinac {
    top: calc(var(--cvdp-pl-nahore, 64px) + 6px);
    bottom: auto;
    transform: none;
    z-index: 2;
  }
}