/* ====== USTAWIENIA ====== */
:root{
  --bg: #0a0a0a;
  --text: #cde6ff;
  --muted: #8db8d6;
  --brand: #1a6bff;
  --panel: rgba(10,15,20,0.78);
  --panel-soft: rgba(20,30,40,.6);
  --border: rgba(26,107,255,.4);
  --shadow: 0 10px 30px rgba(0,0,0,.4);
  --radius: 16px;
}

/* ====== TŁO ====== */
body{
  margin:0; padding:0;
  font-family: 'Segoe UI', sans-serif;
  background: url('shadow.jpg') no-repeat center center fixed;
  background-size: cover;
  color: var(--text);
  line-height: 1.6;
}

/* ====== OVERLAY LEKKI ====== */
body::before{
  content:""; position:fixed; inset:0;
  background: rgba(0,0,0,.55);
  pointer-events:none; z-index:-1;
}

/* ====== KONTENER OGÓLNY ====== */
.wrap{max-width:1200px;margin:0 auto;padding:24px}
.lead{color:var(--muted);max-width:900px}
.back{color:var(--muted);text-decoration:none}
.back:hover{color:var(--text)}

h1{
  font-size: clamp(28px, 4vw, 48px);
  text-shadow: 0 0 10px rgba(26,107,255,0.5);
  letter-spacing: 1px;
  margin: 8px 0 12px;
}

h2{
  margin: 0 0 8px 0;
  font-size: clamp(22px, 2.8vw, 28px);
}

hr{
  border: 0;
  height: 1px;
  margin: 24px 0;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
}

/* ====== PRZYCISKI / LINKI AKCYJNE ====== */
.btn{
  display:inline-block; text-decoration:none; color:var(--text);
  background: rgba(20,30,40,.9);
  border:1px solid var(--brand);
  border-radius:12px; padding:8px 14px;
  transition:.2s;
}
.btn:hover{ background: rgba(30,45,60,.95) }
.btn.ghost{
  background: transparent;
  border-color: rgba(26,107,255,.5);
}

/* ====== BLOKI SERII (NOWY UKŁAD BEZ KAFLI) ====== */
.series{
  background: var(--panel);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 18px 14px;
  margin: 18px 0;
}

.series > p{
  margin: 6px 0 12px 0;
  color: var(--muted);
}

/* Lista pozycji w ramach serii */
.series-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

/* Każdy wiersz listy: przycisk + opis */
.series-list li{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 12px;
  padding: 10px 12px;
  border-left: 3px solid rgba(26,107,255,.35);
  background: var(--panel-soft);
  border-radius: 10px;
}

/* przycisk wejścia na początek wiersza */
.series-list li .btn{
  margin-right: 4px;
}

/* Wyróżnienia i drobne kursywy w opisach */
.series em{ opacity:.95 }

/* Reakcja na małe ekrany */
@media (max-width: 720px){
  .series{ padding: 16px }
  .series-list li{ padding: 10px }
}

/* ====== GRID KSIĄŻEK (STARE KAFLE – zostawione na przyszłość) ====== */
.books-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:16px; margin:24px 0 8px;
}
@media (max-width: 900px){
  .books-grid{ grid-template-columns: 1fr; }
}

/* Karta e-booka */
.book{
  display:grid; grid-template-columns: 220px 1fr; gap:16px;
  background: var(--panel);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
}
@media (max-width: 640px){
  .book{ grid-template-columns: 1fr; }
}

/* Okładka */
.book img{
  width:100%; height:100%; max-height:320px; object-fit:cover; display:block;
}

/* Meta */
.meta{ padding:14px 14px 12px 0; }
.meta h2{ margin:4px 0 8px 0; font-size:20px }
.meta p{ margin:0 0 12px 0; color:var(--muted); line-height:1.6 }

/* ====== LINKI POWIĄZANE / STOPKA ====== */
.related{
  display:flex; gap:12px; margin-top:20px; flex-wrap:wrap;
}
.related a{
  text-decoration:none; color:var(--text);
  background: rgba(20,30,40,.8);
  border:1px solid var(--brand);
  border-radius:12px; padding:8px 14px;
  transition:.2s;
}
.related a:hover{ background: rgba(30,45,60,.9) }
.footer{ margin-top:28px; color:var(--muted); font-size:14px }

/* Banner serii (Division, Grace itd.) */
.series-banner{
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  height: 180px;
  margin-bottom: 14px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: end;
  justify-content: start;
  box-shadow: var(--shadow);
}

.series-banner::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.7) 100%);
}

.series-banner h2{
  position: relative;
  z-index: 1;
  font-size: 28px;
  font-weight: 600;
  margin: 0 0 12px 16px;
  text-shadow: 0 0 8px rgba(0,0,0,.8);
}

/* ====== UNIWERSALNA SIATKA KAFELKÓW ====== */
.grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap:16px; margin:20px 0;
}
.tile{
  display:flex; flex-direction:column; gap:6px;
  text-decoration:none; color:var(--text);
  background: var(--panel);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:16px; min-height:140px;
  transition:.2s transform,.2s background-color;
}
.tile:hover{ transform: translateY(-2px); background: rgba(20,30,40,.85); }
.tile-title{ font-weight:700; letter-spacing:.5px; }
.tile-desc{ color:var(--muted); font-size:.95rem; }
.tile[aria-disabled="true"]{ opacity:.6; pointer-events:none; }

/* (opcjonalnie, jeśli użyjesz obrazka w kafelku) */
.tile-img{ width:100%; height:140px; object-fit:cover; border-radius:12px; margin-bottom:8px; }