/* ══════════════════════════════════════════════════════════
   CZYTELNIA
   Ustawienia czytania i odtwarzacz muzyki na stronach wpisów.
   Plik wczytywany jako ostatni w <head>, więc nadpisuje
   style zapisane wcześniej w samym wpisie.
   Wspólny dla wszystkich wpisów, jedna zmiana działa wszędzie.
══════════════════════════════════════════════════════════ */

:root{
  --czyt-skala: 1;
  --czyt-szerokosc: 780px;
}

/* Szerokość kolumny tekstu */
.page-wrap{ max-width: var(--czyt-szerokosc); }

/* Rozmiar tekstu */
.page-wrap p,
.page-wrap li,
.page-wrap blockquote{ font-size: calc(1.08rem * var(--czyt-skala)); }
.page-wrap .lead{ font-size: calc(1.25rem * var(--czyt-skala)); }

/* Spokojne tło */
body.czyt-spokoj #starfield{ display: none; }

/* ── Przycisk otwierający ─────────────────────────────── */
.czyt-toggle{
  position: fixed; right: 1.4rem; bottom: 1.4rem; z-index: 1200;
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(6,8,15,0.94); border: 1px solid var(--gold-dim);
  color: var(--gold-light); font-size: 1.1rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 26px rgba(0,0,0,0.55);
  transition: border-color .3s, box-shadow .3s, transform .3s;
}
.czyt-toggle:hover{
  border-color: var(--gold); transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(201,151,58,0.28);
}

/* ── Panel ────────────────────────────────────────────── */
.czyt-panel{
  position: fixed; right: 1.4rem; bottom: 5.2rem; z-index: 1201;
  width: min(330px, calc(100vw - 2.8rem));
  max-height: min(76vh, 640px); overflow-y: auto;
  background: linear-gradient(160deg, rgba(6,8,15,0.985), rgba(13,18,40,0.985));
  border: 1px solid var(--border); border-radius: 4px;
  box-shadow: 0 18px 60px rgba(0,0,0,0.65);
  padding: 1.3rem 1.3rem 1.5rem;
  display: none;
}
.czyt-panel.open{ display: block; }
.czyt-panel::-webkit-scrollbar{ width: 4px; }
.czyt-panel::-webkit-scrollbar-thumb{ background: var(--gold-dim); border-radius: 3px; }

.czyt-head{
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.1rem;
}
.czyt-head strong{
  font-family: 'Cinzel', serif; font-size: 0.66rem; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--gold); font-weight: 400;
}
.czyt-close{
  background: none; border: none; color: var(--text-dim);
  font-size: 1.1rem; cursor: pointer; line-height: 1; padding: 0 0.2rem;
}
.czyt-close:hover{ color: var(--gold-light); }

.czyt-row{ margin-bottom: 1.1rem; }
.czyt-row > label{
  display: block; font-family: 'Cinzel', serif; font-size: 0.58rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-dim); margin-bottom: 0.45rem;
}
.czyt-btns{ display: flex; gap: 0.4rem; flex-wrap: wrap; }
.czyt-btn{
  flex: 1; min-width: 58px;
  background: none; border: 1px solid var(--border); border-radius: 2px;
  color: var(--text-dim); font-family: 'EB Garamond', Georgia, serif;
  font-size: 0.85rem; padding: 0.45rem 0.3rem; cursor: pointer;
  transition: all .3s;
}
.czyt-btn:hover{ border-color: var(--gold-dim); color: var(--gold-light); }
.czyt-btn.active{
  border-color: var(--gold); color: var(--gold-pale);
  background: rgba(201,151,58,0.09);
}

.czyt-sep{ height: 1px; background: var(--border); margin: 1.2rem 0 1.1rem; }

/* ── Odtwarzacz ───────────────────────────────────────── */
.czyt-stage{
  position: relative; width: 100%; aspect-ratio: 16/9;
  background: #000; border: 1px solid var(--border); border-radius: 3px;
  overflow: hidden; margin-bottom: 0.7rem; display: none;
}
.czyt-stage.on{ display: block; }
.czyt-stage iframe{ position: absolute; inset: 0; width: 100%; height: 100%; border: none; }

.czyt-tracks{ list-style: none; margin: 0; padding: 0; max-height: 210px; overflow-y: auto; }
.czyt-tracks::-webkit-scrollbar{ width: 4px; }
.czyt-tracks::-webkit-scrollbar-thumb{ background: var(--gold-dim); border-radius: 3px; }
.czyt-tracks li{ margin: 0; }
.czyt-track{
  width: 100%; text-align: left; background: none; border: none;
  border-bottom: 1px solid rgba(201,151,58,0.09);
  color: var(--text-main); font-family: 'EB Garamond', Georgia, serif;
  font-size: 0.9rem; line-height: 1.35; padding: 0.5rem 0.2rem;
  cursor: pointer; transition: color .3s;
}
.czyt-track small{ display: block; font-size: 0.74rem; color: var(--text-dim); }
.czyt-track:hover{ color: var(--gold-light); }
.czyt-track.playing{ color: var(--gold-pale); }
.czyt-track.playing::before{ content: '♪ '; color: var(--gold); }

.czyt-foot{
  font-size: 0.76rem; color: var(--text-dim); line-height: 1.5;
  margin-top: 0.9rem;
}

@media (max-width: 600px){
  .czyt-toggle{ right: 1rem; bottom: 1rem; width: 44px; height: 44px; }
  .czyt-panel{ right: 1rem; bottom: 4.6rem; }
}
@media print{
  .czyt-toggle, .czyt-panel{ display: none !important; }
}