/* AUTOGENEROVANO CORALEM, neupravovat.
 * Zdroj pravdy je stejnojmenny .less soubor, tento .css se pri kazde
 * synchronizaci prepisuje. Upravy delej v .less souboru. */
/* Světlina 68: styly obrazovky Přehrávač. Každý soubor LESS se překládá zvlášť, proto tu nejsou proměnné ani mixiny jádra; sklo, barvy, tlačítka a pole bere z 001-svetlina. */
/* Prehravac: jeden, DOLE v hlavni sekci jako u hudebniho prehravace. Ondra
   22. 9. 2026: „to prehravaci okenko bych dal vzdycky dolu do te hlavni sekce
   ... ale ve zbytku obrazovky muzes interagovat s vecmi." Nepreklada obsah:
   otevreny prehravac pridava obrazovce spodni odsazeni (`.je-prehravac`). */
.sv-prehravac {
  position: relative;
  z-index: 40;
  flex-shrink: 0;
  width: 100%;
  padding: 10px var(--sv-vnitrek);
  border-top: 1px solid var(--sv-linka);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.28));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32);
  text-shadow: 0 1px 0 var(--sv-odlesk);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-areas: 'nazev rychlost zavri' 'cas cas cas' 'ovladani ovladani ovladani';
  gap: 6px 12px;
  align-items: center;
  animation: sv-prichod 180ms ease;
}
/* Posuvnik prehravace ma tri pasma: prehrano, uz pripraveno, jeste nehotovo. */
.sv-prehravac .sv-posuvnik[data-sv-prehravac-cas] {
  background: linear-gradient(90deg, var(--sv-zluta) 0, var(--sv-zluta) var(--sv-hodnota, 0%), var(--sv-zluta-svetla) var(--sv-hodnota, 0%), var(--sv-zluta-svetla) var(--sv-hotovo, 0%), rgba(20, 28, 24, 0.18) var(--sv-hotovo, 0%), rgba(20, 28, 24, 0.18) 100%);
}
/* Chystani dalsich casti: jemny pruh pod nazvem, aby bylo videt, ze se pracuje. */
/* Řádek stavu má pevnou výšku a je tu od začátku, takže přehrávač nepodskočí,
   když se dogeneruje další část (Ondra 22. 9. 2026: „aby to tak prostě divně
   neposkočilo, ten přehrávač"). */
/* Světlina 20, 21, 58: chystání je malé kolečko v hlavičce vedle Zavřít. Výšku
   hlavičky drží ikona a Zavřít, takže schované kolečko nemusí držet místo a
   za časem nezůstává prázdná díra. */
.sv-prehravac__chystani {
  grid-area: chystani;
  justify-self: start;
  width: var(--sv-tl-maly);
  min-height: var(--sv-tl-maly);
  flex-shrink: 0;
  border-radius: 50%;
  corner-shape: round;
}
.sv-prehravac__chystani.je-schovane {
  display: none;
}
/* Točící se kolečko jde klepnutím zastavit, i když pracuje. */
.sv-prehravac__chystani.je-pracuje {
  pointer-events: auto;
}
/* Světlina 43: přehrávač je karta jako oddíly nad ním: stejné levé a pravé hrany,
   sklo, hrana a stín. Rychlost sedí na PC dole vpravo, je větší a jde po
   desetinách. Ondra 23. 9. 2026: „aby i vpravo a vlevo končil fakt jako ta
   čára ... ten přehrávač fakt designově vylepši", „Měnič rychlosti ... je
   hrozně citlivej ... hrozně pidi", „tu rychlost ... doprava dolů na počítači". */
/* Světlina 58: kolem dokola jen tolik místa, kolik potřebuje: rámeček od čar
   stejně jako karty nad ním, uvnitř nižší okraje a řádky u sebe. Ondra 24. 9.
   2026: „moc prostoru kolem dokola má. Moc velký odsazení jak na počítači tak
   na mobilu", „Přehrávač má zase moc brutální odsazení od levý a pravé strany". */
.sv-prehravac {
  width: auto;
  margin: var(--sv-vnitrek);
  padding: 10px var(--sv-karta-x);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--sv-r-pole);
  corner-shape: squircle;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.18));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), var(--sv-stin-karta);
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  grid-template-areas: 'nazev nazev chystani zavri' 'cas cas cas cas' 'ovladani rychlost rychlost rychlost';
  gap: 6px 10px;
}
.sv-prehravac:not(.sv-prehravac--velky) .sv-prehravac__ovladani {
  justify-content: flex-start;
}
/* Rolovací plocha nad přehrávačem končí na čáře, která sahá od svislé čáry ke svislé. */
.sv-ram.je-prehravac .sv-obrazovky {
  border-bottom: 1px solid var(--sv-linka);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.3);
}
.sv-prehravac__hlava {
  grid-area: nazev;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
/* Světlina 103: hlava malého přehrávače je tlačítko, které ho roztáhne přes
   celou aplikaci; vedle Zavřít je na to i ikona. Horní řádek, podtitul a text
   nahrávky patří jen velkému přehrávači. */
.sv-prehravac__vrch,
.sv-prehravac__prepis,
.sv-prehravac__podtitul {
  display: none;
}
.sv-prehravac__hlava {
  margin: -4px;
  padding: 4px;
  border: 0;
  border-radius: calc(14px * var(--sv-roh-hladky, 1));
  corner-shape: squircle;
  background: transparent;
  font: inherit;
  text-shadow: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--sv-prechod);
}
.sv-prehravac__hlava:not(:disabled):focus-visible {
  background: var(--sv-hover);
}
@media (hover: hover) {
  .sv-prehravac__hlava:not(:disabled):hover {
    background: var(--sv-hover);
  }
}
.sv-prehravac__hlava:disabled {
  cursor: default;
}
.sv-prehravac__akce {
  grid-area: zavri;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 2px;
}
.sv-prehravac__cela {
  width: var(--sv-tl-maly);
  min-height: var(--sv-tl-maly);
  border-radius: 50%;
  corner-shape: round;
}
.sv-prehravac__ikona {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: calc(12px * var(--sv-roh-hladky, 1));
  corner-shape: squircle;
  background: rgba(255, 255, 255, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.sv-prehravac__emoji {
  font-size: 24px;
  line-height: 1;
}
.sv-prehravac__ikona .coral-emoji {
  width: 28px !important;
  height: 28px !important;
  margin: 0 !important;
}
.sv-prehravac__texty {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.sv-prehravac__veta {
  font-size: var(--sv-mini);
  font-weight: 600;
  color: var(--sv-text-2);
  opacity: 0.8;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sv-prehravac__veta:empty {
  display: none;
}
.sv-prehravac__nazev {
  font-size: var(--sv-pismo);
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sv-prehravac [data-sv-akce="prehravac-zavri"] {
  grid-area: zavri;
  justify-self: end;
  width: var(--sv-tl-maly);
  min-height: var(--sv-tl-maly);
  border-radius: 50%;
  corner-shape: round;
}
.sv-prehravac__posun {
  grid-area: cas;
  display: flex;
  align-items: center;
  gap: 10px;
}
.sv-prehravac__cas {
  font-size: var(--sv-mini);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Ovládání uprostřed jako u hudebního přehrávače: zpět, přehrát, dopředu. */
.sv-prehravac__ovladani {
  grid-area: ovladani;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, calc(10.69px + 0.884vw), 22px);
}
.sv-prehravac__skok {
  min-height: var(--sv-tl-maly);
  padding: 0 12px;
  gap: 4px;
  border-radius: 999px;
  corner-shape: round;
  font-size: var(--sv-maly);
}
.sv-prehravac [data-sv-akce="prehravac-hraj"] {
  width: 48px;
  min-height: 48px;
  border-radius: 50%;
  corner-shape: round;
  flex-shrink: 0;
}
.sv-prehravac__rychlost {
  grid-area: rychlost;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--sv-mini);
  font-weight: 700;
}
.sv-prehravac__rychlost > [data-coral-ikona] {
  opacity: 0.75;
}
.sv-prehravac__rychlost span {
  display: inline-block;
  min-width: 44px;
  padding: 2px 7px;
  border-radius: 999px;
  corner-shape: round;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
/* Světlina 30: 1× a 0,9× jsou důležité hodnoty, proto žlutý štítek s tmavým
   písmem; žluté písmo na skle bylo skoro nečitelné (Ondra 23. 9. 2026: „když
   mám žlutou tu rychlost ... tak to číslo je skoro nečitelný"). */
.sv-prehravac__rychlost .sv-hodnota-zluta {
  background: var(--sv-zluta);
  color: var(--sv-text);
  text-shadow: 0 1px 0 rgba(255, 240, 200, 0.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.sv-prehravac__rychlost .sv-posuvnik {
  width: clamp(130px, 12vw, 180px);
  flex: none;
}
/* Světlina 144: písnička hraje svým tempem; místo rychlosti zůstane volné, ať přehrávač neposkočí. */
.sv-prehravac--pisen .sv-prehravac__rychlost {
  visibility: hidden;
}
/* Telefon: prehravac sedi nad spodni listou. `top` musi zustat auto, jinak se
   s `bottom` roztahne pres celou obrazovku. */
/* Telefon: ovladani na dva radky, at se skoky nemackaji s tlacitkem hraj
   (Ondra 22. 9. 2026: „to vpred a vzad tlacitka se moc mackaji s tlacitkem play"). */
@media (max-width: 767px) {
  .sv-prehravac {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas: 'nazev chystani zavri' 'cas cas cas' 'ovladani ovladani ovladani' 'rychlost rychlost rychlost';
    gap: 6px 10px;
    margin: 0 var(--sv-g) 8px;
    padding: 8px var(--sv-karta-x);
  }
  .sv-prehravac__skok {
    padding: 0 14px;
    min-height: 40px;
  }
  /* Světlina 82: rychlost přes celý řádek, ikona začíná na stejné hraně jako
       posuvník času nad ní (Ondra 24. 9. 2026: „na mobilu rovnou bys mohl tu
       rychlost dát skrze celý řádek"). */
  .sv-prehravac__rychlost {
    justify-self: stretch;
    justify-content: flex-start;
    gap: 8px;
  }
  .sv-prehravac__rychlost .sv-posuvnik {
    width: auto;
    flex: 1 1 auto;
  }
}
/* Světlina 64: okno došlého hlasu. Dvě třídy, ať ho mřížka přehrávače pro
   telefon nepřebije. Tlačítka jsou pod hláškou, vedle ní by ji na PC v úzkém
   sloupci zmáčkla do vysoké nudle; na telefonu jdou přes celou šířku. */
.sv-prehravac.sv-prehravac--kvota {
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: 'ikona hlaska zavri' '. akce .';
  gap: 8px 12px;
}
.sv-prehravac--kvota > .sv-prehravac__ikona {
  grid-area: ikona;
}
.sv-prehravac__hlaska {
  grid-area: hlaska;
  min-width: 0;
  font-size: var(--sv-pismo);
  font-weight: 600;
  line-height: 1.4;
  color: var(--sv-text);
}
.sv-prehravac__kvota-akce {
  grid-area: akce;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
@media (max-width: 767px) {
  .sv-prehravac.sv-prehravac--kvota {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: 'ikona hlaska zavri' 'akce akce akce';
    gap: 8px 10px;
  }
  .sv-prehravac__kvota-akce > .sv-tl {
    flex: 1 1 0;
    justify-content: center;
  }
}
/* Zvetseny prehravac v ucicim rezimu: znak pribehu uprostred, pod nim nazev
   a ovladani. Bere celou sirku panelu, protoze v ucicim rezimu je poslech
   to hlavni, co se prave deje. */
/* Světlina 58: sloupce po stranách jsou stejně široké, takže znak stojí přesně
   uprostřed a kolečko chystání vlevo nahoře zrcadlí Zavřít. Rychlost zůstává
   na vlastním řádku, v řádku s ovládáním by se posuvník musel zkrátit. */
.sv-prehravac--velky {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-areas: 'chystani znak zavri' 'nazev nazev nazev' 'cas cas cas' 'ovladani ovladani ovladani' 'rychlost rychlost rychlost';
  gap: 6px 12px;
  border-radius: calc(18px * var(--sv-roh-hladky, 1));
  corner-shape: squircle;
  border: 1px solid var(--sv-linka);
  margin-bottom: 10px;
  padding: var(--sv-karta-y) var(--sv-karta-x);
}
.sv-prehravac__znak {
  grid-area: znak;
  justify-self: center;
  font-size: clamp(64px, calc(55.71px + 2.21vw), 88px);
  line-height: 1;
}
.sv-prehravac__znak img {
  width: 96px;
  height: 96px;
}
.sv-prehravac--velky .sv-prehravac__nazev {
  grid-area: nazev;
  justify-self: center;
  text-align: center;
  font-size: var(--sv-h3);
  white-space: normal;
  max-width: 100%;
}
/* Světlina 57: velký znak nahoře nahrazuje malý u názvu, emoji není dvakrát. */
.sv-prehravac--velky .sv-prehravac__ikona {
  display: none;
}
.sv-prehravac--velky .sv-prehravac__hlava {
  justify-self: stretch;
  justify-content: center;
}
.sv-prehravac--velky .sv-prehravac__texty {
  flex: 1 1 auto;
  align-items: center;
  text-align: center;
}
.sv-prehravac--velky .sv-prehravac__veta {
  max-width: 100%;
}
/* Světlina 82: ve velkém přehrávači stojí všechno na jedné ose, rychlost pod
   ovládáním uprostřed, ne sama v pravém rohu (Ondra 24. 9. 2026: „design
   a učící mód taky chce trošku porovnat ty ikonky tam a všechno"). */
.sv-prehravac--velky .sv-prehravac__rychlost {
  justify-self: center;
}
@media (max-width: 767px) {
  .sv-prehravac--velky {
    gap: 6px 10px;
  }
  .sv-prehravac--velky .sv-prehravac__rychlost {
    justify-self: stretch;
  }
  .sv-prehravac__znak img {
    width: 72px;
    height: 72px;
  }
}
/* Světlina 103: VELKÝ PŘEHRÁVAČ přes celou aplikaci. Ondra 30. 9. 2026:
   „vylepši přehrávač taky, aby šel dát i do fullscreenu jakoby. Teda spíš
   obecně přes celou obrazovku a dával větší smysl“. Leží na skle rámu místo
   obsahu (čára rámu zůstává nad ním). Na počítači vlevo znak, název a velké
   ovládání, vpravo text nahrávky se zvýrazněnou čtenou větou; na telefonu
   nahoře znak s názvem, uprostřed text a dole ovládání pod palcem. Pravidla
   mají dvě třídy, ať je mřížka malého přehrávače pro telefon nepřebije. */
.sv-prehravac.sv-prehravac--cela {
  --sv-cela-x: clamp(16px, calc(4.44px + 3.08vw), 44px);
  --sv-cela-y: clamp(10px, calc(5.4px + 1.2vw), 20px);
  position: absolute;
  inset: var(--sv-g-ram);
  z-index: 49;
  width: auto;
  margin: 0;
  padding: var(--sv-cela-y) var(--sv-cela-x) calc(var(--sv-cela-y) + 10px);
  border: 0;
  border-radius: calc(var(--sv-r) - var(--sv-g-ram));
  corner-shape: squircle;
  background: transparent;
  box-shadow: none;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  grid-template-rows: auto minmax(0, 1fr) auto auto auto auto auto minmax(0, 1fr);
  grid-template-areas: 'vrch vrch' '. prepis' 'znak prepis' 'nazev prepis' 'cas prepis' 'ovladani prepis' 'rychlost prepis' '. prepis';
  gap: clamp(10px, calc(7.5px + 0.66vw), 16px) clamp(24px, calc(1.6px + 5.84vw), 76px);
  align-items: center;
  overflow: hidden;
  animation: sv-prehravac-cela 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes sv-prehravac-cela {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.sv-prehravac.sv-prehravac--cela .sv-prehravac__vrch {
  grid-area: vrch;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--sv-tl-horni);
  padding-right: calc(2 * var(--sv-tl-maly) + 16px);
}
.sv-prehravac__titulek {
  font-size: var(--sv-mini);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
}
/* Kolečko chystání a Zavřít sedí vpravo v horním řádku; roztahovací ikona tu není potřeba. */
.sv-prehravac.sv-prehravac--cela .sv-prehravac__chystani,
.sv-prehravac.sv-prehravac--cela .sv-prehravac__akce {
  position: absolute;
  z-index: 2;
  top: calc(var(--sv-cela-y) + (var(--sv-tl-horni) - var(--sv-tl-maly)) / 2);
}
.sv-prehravac.sv-prehravac--cela .sv-prehravac__akce {
  right: var(--sv-cela-x);
}
.sv-prehravac.sv-prehravac--cela .sv-prehravac__chystani {
  right: calc(var(--sv-cela-x) + var(--sv-tl-maly) + 4px);
}
.sv-prehravac.sv-prehravac--cela .sv-prehravac__cela {
  display: none;
}
/* Znak jako obal desky: skleněná dlaždice s emoji příběhu nebo sluchátky. */
.sv-prehravac.sv-prehravac--cela .sv-prehravac__znak {
  grid-area: znak;
  justify-self: center;
  display: grid;
  place-items: center;
  width: min(clamp(132px, calc(16px + 15.6vw), 232px), 30vh);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: calc(28px * var(--sv-roh-hladky, 1));
  corner-shape: squircle;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.16));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 18px 36px -24px rgba(0, 0, 0, 0.45);
  font-size: min(clamp(60px, calc(4px + 7.3vw), 108px), 14vh);
  line-height: 1;
}
.sv-prehravac.sv-prehravac--cela .sv-prehravac__znak .coral-emoji {
  width: 1em !important;
  height: 1em !important;
  margin: 0 !important;
  vertical-align: 0 !important;
}
/* Světlina 206: u výstupu z knihy je místo emoji obrázek z knihy ke čtené větě,
   kde na straně žádný není, sken strany. Ondra (část 57): „chci jenom vyříznout
   obrázky z knihy. Nebo by stačilo nějak vždycky vzít aspoň nějak tu stránku“.
   Obrázek leží celý (nic se neořízne) na rozostřené kopii sebe sama, mění se
   prolnutím a klepnutím se zvětší. Na počítači velká deska v levém sloupci. */
.sv-prehravac.sv-prehravac--kniha .sv-prehravac__znak {
  display: block;
  width: clamp(180px, 40vw, 320px);
  height: clamp(120px, 22vh, 200px);
  aspect-ratio: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--sv-linka);
  border-radius: var(--sv-r-pole);
  corner-shape: squircle;
  background: rgba(20, 28, 24, 0.08);
  box-shadow: 0 18px 36px -24px rgba(0, 0, 0, 0.45);
  font-size: 0;
}
.sv-prehravac.sv-prehravac--cela.sv-prehravac--kniha .sv-prehravac__znak {
  width: min(100%, 520px);
  height: min(44vh, 460px);
  border-radius: calc(22px * var(--sv-roh-hladky, 1));
}
.sv-prehravac__kniha {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: inherit;
  corner-shape: squircle;
  background: transparent;
  cursor: zoom-in;
  outline: none;
  overflow: hidden;
}
.sv-prehravac__kniha:focus-visible {
  box-shadow: inset 0 0 0 3px rgba(242, 177, 52, 0.6);
}
.sv-prehravac__kniha-vrstva {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(8px, calc(4px + 1vw), 16px);
  opacity: 0;
  transition: opacity 420ms ease;
}
.sv-prehravac__kniha-vrstva.je-videt {
  opacity: 1;
}
.sv-prehravac__kniha-vrstva::before {
  content: '';
  position: absolute;
  inset: -28px;
  background: var(--sv-kniha-obr) center / cover no-repeat;
  filter: blur(24px) saturate(1.15);
  opacity: 0.5;
}
.sv-prehravac .sv-prehravac__znak .sv-prehravac__kniha-vrstva img {
  position: relative;
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  border-radius: calc(10px * var(--sv-roh-hladky, 1));
  corner-shape: squircle;
  background: #fff;
  box-shadow: 0 12px 26px -16px rgba(0, 0, 0, 0.6);
  transition: transform var(--sv-prechod);
}
@media (hover: hover) {
  .sv-prehravac__kniha:hover .sv-prehravac__kniha-vrstva img {
    transform: scale(1.015);
  }
}
.sv-prehravac__kniha-strana {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 1;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--sv-text);
  font-size: var(--sv-mini);
  font-weight: 800;
  line-height: 1.5;
  box-shadow: var(--sv-stin-tl);
  pointer-events: none;
}
.sv-prehravac__kniha-strana[hidden] {
  display: none;
}
.sv-prehravac.sv-prehravac--cela .sv-prehravac__hlava {
  grid-area: nazev;
  justify-self: stretch;
  justify-content: center;
  margin: 0;
  padding: 0;
  border-radius: 0;
}
.sv-prehravac.sv-prehravac--cela .sv-prehravac__ikona {
  display: none;
}
.sv-prehravac.sv-prehravac--cela .sv-prehravac__texty {
  flex: 1 1 auto;
  align-items: center;
  gap: 6px;
  text-align: center;
}
.sv-prehravac.sv-prehravac--cela .sv-prehravac__nazev {
  max-width: 100%;
  font-size: var(--sv-h1);
  font-weight: 800;
  line-height: 1.2;
  white-space: normal;
  text-wrap: balance;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.sv-prehravac.sv-prehravac--cela .sv-prehravac__podtitul {
  display: block;
  font-size: var(--sv-maly);
  font-weight: 600;
  opacity: 0.72;
}
.sv-prehravac.sv-prehravac--cela .sv-prehravac__podtitul:empty,
.sv-prehravac.sv-prehravac--cela .sv-prehravac__veta {
  display: none;
}
.sv-prehravac.sv-prehravac--cela .sv-prehravac__posun,
.sv-prehravac.sv-prehravac--cela .sv-prehravac__rychlost {
  justify-self: center;
  width: 100%;
  max-width: 440px;
}
.sv-prehravac.sv-prehravac--cela .sv-prehravac__posun {
  gap: 12px;
}
.sv-prehravac.sv-prehravac--cela .sv-prehravac__cas {
  font-size: var(--sv-maly);
}
.sv-prehravac.sv-prehravac--cela .sv-prehravac__ovladani {
  justify-content: center;
  gap: clamp(16px, calc(10px + 1.2vw), 28px);
}
.sv-prehravac.sv-prehravac--cela .sv-prehravac__skok {
  min-height: 48px;
  padding: 0 16px;
  font-size: var(--sv-pismo);
}
.sv-prehravac.sv-prehravac--cela [data-sv-akce="prehravac-hraj"] {
  --sv-ikona: 28px;
  width: clamp(64px, calc(54px + 1.6vw), 76px);
  min-height: clamp(64px, calc(54px + 1.6vw), 76px);
}
.sv-prehravac.sv-prehravac--cela .sv-prehravac__rychlost {
  justify-content: center;
}
/* Světlina 215: pruh dílů řady pod názvem. Ondra 7. 10. 2026: „aby ty různý díly,
   pokračování i podcasty dávaly smysl. Abych se v tom neztratil“. Čtený díl je
   zlatý, poslechnuté mají fajfku; pruh se posouvá do stran a čtený drží uprostřed. */
.sv-prehravac__dily[hidden],
.sv-prehravac:not(.sv-prehravac--cela) .sv-prehravac__dily {
  display: none;
}
.sv-prehravac.sv-prehravac--cela.sv-prehravac--rada {
  grid-template-rows: auto minmax(0, 1fr) auto auto auto auto auto auto minmax(0, 1fr);
  grid-template-areas: 'vrch vrch' '. prepis' 'znak prepis' 'nazev prepis' 'dily prepis' 'cas prepis' 'ovladani prepis' 'rychlost prepis' '. prepis';
}
.sv-prehravac.sv-prehravac--cela .sv-prehravac__dily {
  grid-area: dily;
  justify-self: center;
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  width: auto;
  max-width: min(100%, 440px);
  min-width: 0;
  padding: 4px;
  border-radius: var(--sv-r-pole);
  corner-shape: squircle;
  background: rgba(255, 255, 255, 0.14);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
}
.sv-prehravac.sv-prehravac--cela .sv-prehravac__dily .sv-kapitola {
  flex: 0 0 auto;
  max-width: 15em;
}
.sv-prehravac.sv-prehravac--cela .sv-prehravac__dily .sv-kapitola__nazev {
  max-width: 11em;
}
.sv-prehravac.sv-prehravac--cela .sv-prehravac__dily .sv-kapitola[disabled] {
  opacity: 0.5;
}
/* Text nahrávky: karta, která roluje sama a k čtené větě dojíždí; nahoře
   a dole se text ztrácí do skla. */
.sv-prehravac.sv-prehravac--cela .sv-prehravac__prepis {
  grid-area: prepis;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--sv-r-pole);
  corner-shape: squircle;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.12));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), var(--sv-stin-karta);
  overflow: hidden;
}
.sv-prehravac__prepis-text {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 32px clamp(18px, calc(6px + 2vw), 36px);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 32px, #000 calc(100% - 40px), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 32px, #000 calc(100% - 40px), transparent 100%);
}
.sv-prehravac__prepis-text::after {
  content: '';
  display: block;
  height: 22vh;
}
.sv-prehravac__odstavec {
  margin: 0 0 0.9em;
  font-size: clamp(16px, calc(13.6px + 0.5vw), 20px);
  font-weight: 600;
  line-height: 1.6;
}
.sv-prehravac__kdo {
  display: block;
  margin-bottom: 2px;
  font-size: var(--sv-mini);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.65;
}
.sv-prehravac__vt {
  border-radius: calc(6px * var(--sv-roh-hladky, 1));
  corner-shape: squircle;
  opacity: 0.55;
  cursor: pointer;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: opacity var(--sv-prechod), background-color var(--sv-prechod), box-shadow var(--sv-prechod);
}
@media (hover: hover) {
  .sv-prehravac__vt:hover {
    opacity: 0.9;
  }
}
.sv-prehravac__vt.je-ted {
  opacity: 1;
  background: rgba(242, 177, 52, 0.42);
  box-shadow: 0 0 0 3px rgba(242, 177, 52, 0.42);
}
/* Zbytek aplikace je pod velkým přehrávačem schovaný (JS ho dělá i nedosažitelným);
   hlášky zůstávají vidět. Plovoucí nástroje vpravo nahoře by ležely přes Zavřít. */
.sv-ram.je-prehravac-cela > :not(.sv-prehravac):not(.sv-ram__obrys):not(.sv-hlasky) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 140ms ease, visibility 0s linear 140ms;
}
.sv-prehravac-cely .sv-nastroje--volne {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
@media (max-width: 767px) {
  .sv-prehravac.sv-prehravac--cela {
    --sv-cela-x: calc(var(--sv-vnitrek) + var(--sv-karta-x));
    --sv-cela-y: 6px;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr) auto auto auto;
    grid-template-areas: 'vrch vrch' 'znak nazev' 'prepis prepis' 'cas cas' 'ovladani ovladani' 'rychlost rychlost';
    gap: 10px 12px;
    padding-bottom: max(14px, env(safe-area-inset-bottom));
  }
  .sv-prehravac.sv-prehravac--cela.sv-prehravac--rada {
    grid-template-rows: auto auto auto minmax(0, 1fr) auto auto auto;
    grid-template-areas: 'vrch vrch' 'znak nazev' 'dily dily' 'prepis prepis' 'cas cas' 'ovladani ovladani' 'rychlost rychlost';
  }
  .sv-prehravac.sv-prehravac--cela .sv-prehravac__dily {
    justify-self: stretch;
    max-width: none;
    margin-top: 8px;
  }
  .sv-prehravac.sv-prehravac--cela .sv-prehravac__znak {
    width: 64px;
    border-radius: calc(16px * var(--sv-roh-hladky, 1));
    corner-shape: squircle;
    font-size: 36px;
  }
  /* Světlina 206: obrázek z knihy jde na telefonu přes celou šířku nad název. */
  .sv-prehravac.sv-prehravac--cela.sv-prehravac--kniha {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto minmax(0, 1fr) auto auto auto;
    grid-template-areas: 'vrch' 'znak' 'nazev' 'prepis' 'cas' 'ovladani' 'rychlost';
  }
  .sv-prehravac.sv-prehravac--cela.sv-prehravac--kniha.sv-prehravac--rada {
    grid-template-rows: auto auto auto auto minmax(0, 1fr) auto auto auto;
    grid-template-areas: 'vrch' 'znak' 'nazev' 'dily' 'prepis' 'cas' 'ovladani' 'rychlost';
  }
  .sv-prehravac.sv-prehravac--cela.sv-prehravac--kniha .sv-prehravac__znak {
    width: 100%;
    height: clamp(150px, 32vh, 320px);
    border-radius: var(--sv-r-pole);
  }
  .sv-prehravac.sv-prehravac--cela .sv-prehravac__hlava {
    justify-content: flex-start;
  }
  .sv-prehravac.sv-prehravac--cela .sv-prehravac__texty {
    align-items: flex-start;
    gap: 2px;
    text-align: left;
  }
  .sv-prehravac.sv-prehravac--cela .sv-prehravac__nazev {
    font-size: var(--sv-h2);
    -webkit-line-clamp: 2;
  }
  .sv-prehravac.sv-prehravac--cela .sv-prehravac__prepis {
    margin: 0 calc(-1 * var(--sv-cela-x));
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  .sv-prehravac__prepis-text {
    padding: 20px var(--sv-cela-x);
  }
  .sv-prehravac__odstavec {
    font-size: 17px;
  }
  .sv-prehravac.sv-prehravac--cela .sv-prehravac__posun,
  .sv-prehravac.sv-prehravac--cela .sv-prehravac__rychlost {
    max-width: none;
  }
  .sv-prehravac.sv-prehravac--cela .sv-prehravac__rychlost {
    justify-self: stretch;
    justify-content: flex-start;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sv-prehravac.sv-prehravac--cela {
    animation: none;
  }
  .sv-ram.je-prehravac-cela > * {
    transition: none;
  }
}