/* ============================================================
   fatekbc.pl — refresh.css (2026-09)
   Dodatki do style.css: seria Protagonist Wars, pasek postępu,
   przycisk "do góry", drobne odświeżenia. Ładować PO style.css.
   ============================================================ */

/* ---------- Scroll progress ---------- */
.progress{
  position:fixed; top:0; left:0; right:0; height:2px;
  background:var(--gild); background-size:200% auto;
  transform-origin:0 50%; transform:scaleX(0);
  z-index:200; pointer-events:none;
}

/* ---------- Back to top ---------- */
.to-top{
  position:fixed; right:22px; bottom:22px; z-index:150;
  width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(15,15,22,.86);
  border:1px solid var(--line);
  color:var(--gold-2); font-size:1.1rem; cursor:pointer;
  backdrop-filter:blur(8px);
  opacity:0; transform:translateY(12px); pointer-events:none;
  transition:opacity .35s var(--ease),transform .35s var(--ease),border-color .3s,background .3s;
}
.to-top.show{ opacity:1; transform:none; pointer-events:auto; }
.to-top:hover{ border-color:var(--gold); background:rgba(201,162,39,.12); }

/* ---------- Hero: nowy chip-link do książek ---------- */
a.chip{ transition:border-color .3s,color .3s,background .3s; }
a.chip:hover{ border-color:var(--gold); color:var(--gold-2); background:rgba(201,162,39,.07); }

/* ---------- Seria: fakty ---------- */
.saga-facts{
  display:flex; flex-wrap:wrap; gap:10px;
  margin-top:26px;
}
.saga-facts .chip b{ color:var(--gold-2); font-weight:700; }

/* ---------- Seria: tomy ---------- */
.saga{
  display:grid; gap:30px;
  margin-top:54px;
  counter-reset:vol;
}
.saga-item{
  position:relative;
  display:grid;
  grid-template-columns:250px 1fr;
  gap:52px;
  padding:40px 44px;
  border:1px solid var(--line-soft);
  border-radius:var(--radius);
  background:
    radial-gradient(120% 80% at 100% 0%,rgba(201,162,39,.07),transparent 55%),
    linear-gradient(180deg,rgba(28,28,40,.55),rgba(15,15,22,.35));
  overflow:hidden;
  transition:border-color .4s var(--ease);
}
.saga-item:hover{ border-color:var(--line); }
.saga-item::after{
  content:attr(data-vol);
  position:absolute; right:26px; top:-18px;
  font-family:'Fraunces',Georgia,serif;
  font-style:italic; font-weight:430;
  font-size:9rem; line-height:1;
  color:rgba(201,162,39,.06);
  pointer-events:none;
}
.saga-side{ display:grid; gap:18px; align-content:start; position:relative; z-index:1; }
.saga-side .cover{ width:100%; }

.en-ed{
  display:flex; align-items:center; gap:14px;
  padding:12px;
  border:1px solid var(--line-soft);
  border-radius:10px;
  background:rgba(10,10,14,.45);
  transition:border-color .3s,background .3s;
}
.en-ed:hover{ border-color:var(--gold); background:rgba(201,162,39,.06); }
.en-ed img{
  width:44px; height:66px; object-fit:cover;
  border-radius:2px 4px 4px 2px;
  box-shadow:0 6px 16px rgba(0,0,0,.5);
  flex:none; background:var(--ink-3);
}
.en-ed span{ display:block; font-size:.76rem; line-height:1.45; color:var(--mist); }
.en-ed b{ display:block; color:var(--paper); font-size:.82rem; font-weight:700; }

.saga-body{ position:relative; z-index:1; min-width:0; }
.saga-body .vol{
  font-family:'JetBrains Mono',monospace;
  font-size:.68rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold);
}
.saga-body h3{
  font-size:clamp(1.55rem,2.8vw,2.1rem);
  margin:12px 0 6px;
}
.saga-body h3 em{
  display:block;
  font-style:italic; font-weight:430;
  font-size:.62em; color:var(--gold-2);
  margin-top:6px;
}
.saga-body .en-title{
  font-family:'JetBrains Mono',monospace;
  font-size:.72rem; letter-spacing:.08em;
  color:var(--mist-2);
  margin-bottom:22px;
}
.saga-body .hook{
  font-family:'Fraunces',Georgia,serif;
  font-style:italic;
  font-size:1.12rem; line-height:1.5;
  color:var(--gold-2);
  border-left:2px solid var(--gold-deep);
  padding-left:18px;
  margin-bottom:20px;
}
.saga-body .desc p{
  color:#c9c5bb;
  font-size:.97rem;
  line-height:1.75;
  margin-bottom:.95em;
  max-width:68ch;
}
.saga-meta{
  display:flex; flex-wrap:wrap; gap:8px 22px;
  margin:22px 0 22px;
  padding-top:18px;
  border-top:1px solid var(--line-soft);
  font-family:'JetBrains Mono',monospace;
  font-size:.7rem; letter-spacing:.06em;
  color:var(--mist);
}
.saga-meta b{ color:var(--paper); font-weight:600; }
.saga-meta .star{ color:var(--gold); }

.book-links a.primary{
  background:var(--gild); background-size:200% auto;
  color:#161103; border-color:transparent;
}
.book-links a.primary:hover{ background-position:90% center; color:#000; }

.saga-cta{
  display:flex; flex-wrap:wrap; gap:14px; align-items:center;
  margin-top:40px;
}

/* ---------- Nawigacja: poprawka łamania menu 760–1100 px ---------- */
.nav-links a{ white-space:nowrap; }
@media (max-width:1100px){
  .nav-links{
    position:fixed; inset:74px 0 auto 0;
    flex-direction:column; align-items:flex-start;
    background:rgba(10,10,14,.97);
    border-bottom:1px solid var(--line);
    padding:22px 28px 30px;
    gap:18px;
    display:none;
  }
  .nav-links.open{ display:flex; }
  .burger{ display:block; }
}

/* ---------- Responsywność ---------- */
@media (max-width:1020px){
  .saga-item{ grid-template-columns:200px 1fr; gap:36px; padding:34px 30px; }
  .saga-item::after{ font-size:7rem; }
}
@media (max-width:760px){
  .saga-item{ grid-template-columns:1fr; gap:26px; padding:26px 20px; }
  .saga-side{ grid-template-columns:150px 1fr; align-items:start; }
  .saga-item::after{ font-size:5.5rem; right:14px; top:-10px; }
  .to-top{ right:14px; bottom:14px; }
}
@media (max-width:420px){
  .saga-side{ grid-template-columns:1fr; max-width:220px; }
}