/* ============================================================
   Pokonaj Wampira — style
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;0,900;1,400&display=swap');

:root{
  --night:      #1c1013;
  --night-2:    #2a1a1e;
  --blood:      #7e1c28;
  --blood-2:    #a12939;
  --blood-dark: #591420;
  --parchment:  #fbf9f4;
  --card:       #ffffff;
  --silver:     #cdbfa8;
  --ink:        #241a17;
  --text:       #2b211c;
  --text-soft:  #5c5147;
  --line:       #e6ddc9;
  --yellow-tag: #8f7a1f;
  --blue-tag:   #17437a;

  --font-display: 'Lato', -apple-system, sans-serif;
  --font-body: 'Lato', -apple-system, sans-serif;

  --radius: 4px;
  --shadow: 0 12px 30px -14px rgba(28,16,19,.45);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--text);
  background:var(--parchment);
  line-height:1.68;
}
img{max-width:100%;display:block;}
.wrap{max-width:1080px;margin:0 auto;padding:0 28px;}
a{color:var(--blood-2);}

/* ---------- top bar ---------- */
.topbar{background:var(--night);color:var(--silver);font-size:14px;}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;padding:10px 28px;}
.topbar a{color:var(--silver);text-decoration:none;opacity:.85;}
.topbar a:hover{opacity:1;}
.topbar .home-link{display:flex;align-items:center;gap:6px;letter-spacing:.04em;text-transform:uppercase;font-size:12px;}
.logo-mark{flex:0 0 auto;color:inherit;}

/* ---------- hero ---------- */
.hero{
  background:var(--parchment);
  color:var(--ink);
  padding:44px 0 40px;
  text-align:center;
  border-bottom:1px solid var(--line);
}
.eyebrow{
  font-size:12px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--blood-2);
  font-weight:700;
  margin:0 0 10px;
}
.hero .subtitle{
  font-size:14.5px;
  color:var(--text-soft);
  margin:0 0 26px;
  font-style:italic;
}
.hero-banner{
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  border:1px solid var(--line);
  max-width:760px;
  margin:0 auto;
}

/* ---------- generic section heading ---------- */
.section-heading{text-align:center;margin:0 0 30px;}
.section-heading h2{
  font-family:var(--font-display);
  font-weight:900;
  font-size:1.7rem;
  letter-spacing:.02em;
  margin:0 0 10px;
  color:var(--ink);
  text-transform:uppercase;
}
.section-heading .rule{width:46px;height:3px;background:var(--blood);margin:0 auto;}

section{padding:54px 0;}
section.alt{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}

/* ---------- intro / fabuła ---------- */
.intro{padding:50px 0 10px;}
.intro-flex{display:flex;gap:34px;align-items:flex-start;}
.intro-flex img{width:150px;flex:0 0 auto;}
.intro-flex p{margin:0;text-align:justify;color:var(--text-soft);}
@media (max-width:640px){.intro-flex{flex-direction:column;align-items:center;} .intro-flex img{width:110px;}}

details.readmore{margin:24px 0 0;border-top:1px solid var(--line);padding-top:18px;}
details.readmore summary{
  cursor:pointer;font-weight:700;font-size:1.02rem;color:var(--blood-2);
  list-style:none;display:flex;align-items:center;gap:8px;text-transform:uppercase;letter-spacing:.03em;font-size:.9rem;
}
details.readmore summary::-webkit-details-marker{display:none;}
details.readmore summary::before{content:"+";font-size:1.3rem;line-height:1;color:var(--blood);}
details.readmore[open] summary::before{content:"–";}
details.readmore .readmore-body{margin-top:16px;}
details.readmore .readmore-body p{text-align:justify;color:var(--text-soft);margin:0 0 16px;}
details.readmore .rm-flex{display:flex;gap:24px;align-items:flex-start;margin-bottom:16px;}
details.readmore .rm-flex img{width:100px;flex:0 0 auto;}
@media (max-width:640px){details.readmore .rm-flex{flex-direction:column;align-items:center;}}

/* ---------- postępy panel ---------- */
.panel{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:30px;
  box-shadow:var(--shadow);
  max-width:520px;
  margin:0 auto;
  text-align:center;
}
.panel h3{margin:0 0 4px;font-size:1.2rem;text-transform:uppercase;letter-spacing:.04em;}
.panel .panel-rule{width:36px;height:2px;background:var(--blood);margin:12px auto 18px;}
.panel p{color:var(--text-soft);}
.progress-row{display:flex;gap:10px;margin-top:6px;}
.progress-row input[type=password]{
  flex:1;padding:11px 13px;border:1px solid var(--line);border-radius:var(--radius);
  background:#fff;font-family:var(--font-body);font-size:14px;
}
.progress-row input[type=password]:focus{outline:2px solid var(--blood-2);outline-offset:1px;}
.btn{
  background:var(--blood);color:#fff;border:none;padding:11px 20px;border-radius:var(--radius);
  font-family:var(--font-body);font-weight:700;font-size:14px;cursor:pointer;
  transition:background .15s ease;white-space:nowrap;text-decoration:none;display:inline-block;
}
.btn:hover{background:var(--blood-dark);}
.form-msg{margin-top:12px;font-size:13.5px;}
.form-msg.error{color:var(--blood-dark);}
.form-msg.ok{color:#3c6b3f;}

/* ---------- table of tasks ---------- */
.table-block{text-align:center;}
.table-block img{margin:0 auto 22px;border:1px solid var(--line);border-radius:var(--radius);}
.legend{max-width:760px;margin:0 auto;text-align:left;font-size:14.5px;color:var(--text-soft);}
.legend ul{padding-left:20px;}
.legend li{margin-bottom:8px;}
.legend .tag-main{color:#3a5fa0;font-weight:700;}
.legend .tag-special{color:#548235;font-weight:700;}
.legend .tag-extra{color:var(--yellow-tag);font-weight:700;}
.legend .tag-blood{color:#c0392b;font-weight:700;}
.table-block .btn{margin-top:18px;}

/* ---------- task cards ---------- */
.task-grid{display:grid;gap:30px;}
.task-grid.cols-2{grid-template-columns:1fr 1fr;}
.task-grid.cols-3{grid-template-columns:1fr 1fr 1fr;}
@media (max-width:760px){
  .task-grid.cols-2, .task-grid.cols-3{grid-template-columns:1fr;}
}
.task-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:26px 24px 22px;
  box-shadow:var(--shadow);
}
.task-card .task-term{
  text-align:center;font-style:italic;color:var(--text-soft);font-size:13.5px;margin:0 0 14px;
}
.task-card img.task-icon{width:84px;margin:0 auto 16px;}
.task-card h3{
  text-align:center;font-size:1.15rem;margin:0 0 4px;color:var(--ink);
  text-transform:uppercase;letter-spacing:.02em;
}
.task-card p{color:var(--text-soft);text-align:justify;margin:0 0 12px;}
.task-card .reward{
  text-align:right;font-size:13.5px;color:var(--text-soft);border-top:1px dashed var(--line);
  padding-top:12px;margin-top:14px;
}
.task-card .reward strong{color:var(--ink);}

/* ---------- recipe cards ---------- */
.recipe-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px;}
@media (max-width:760px){.recipe-grid{grid-template-columns:1fr;}}
.recipe-card{
  background:var(--card);color:var(--text);border-radius:var(--radius);
  padding:26px 24px;text-align:center;box-shadow:var(--shadow);
  border:1px solid var(--line);border-top:3px solid var(--blood);
}
.recipe-card h3{margin:0 0 4px;text-transform:uppercase;letter-spacing:.03em;color:var(--blood-2);}
.recipe-card .recipe-sub{font-size:12.5px;color:var(--text-soft);margin:0 0 16px;font-style:italic;}
.recipe-card ul{list-style:none;padding:0;margin:0;text-align:left;}
.recipe-card ul li{
  padding:8px 0;border-bottom:1px solid var(--line);font-size:14.5px;color:var(--text-soft);
}
.recipe-card ul li:last-child{border-bottom:none;}

/* ---------- tier list (przywileje / rangi) ---------- */
.tier-two-col{display:grid;grid-template-columns:1fr 1fr;gap:40px;}
@media (max-width:860px){.tier-two-col{grid-template-columns:1fr;}}
.tier-col h2{
  font-family:var(--font-display);font-weight:900;text-transform:uppercase;text-align:center;
  font-size:1.4rem;margin:0 0 20px;color:var(--ink);
}
.tier-notice{
  border-radius:var(--radius);padding:18px 20px;margin-bottom:26px;font-size:14px;color:var(--text-soft);
}
.tier-notice.yellow{background:#fbf6d9;border:1px solid #e9dd9a;}
.tier-notice.blue{background:#e5f0ff;border:1px solid #b9d3f2;}
.tier-notice p{margin:0 0 8px;color:var(--ink);}
.tier-notice ul{margin:0;padding-left:20px;}
.tier-notice li{margin-bottom:6px;}

.tier-item{padding:22px 0;border-bottom:1px solid var(--line);}
.tier-item:last-child{border-bottom:none;}
.tier-item img{width:64px;margin:0 auto 12px;}
.tier-item h4{text-align:center;margin:0 0 4px;font-size:1.05rem;text-transform:uppercase;letter-spacing:.02em;}
.tier-item .tier-cond{
  text-align:center;font-style:italic;font-size:13px;margin:0 0 12px;
}
.tier-item .tier-cond.yellow{color:var(--yellow-tag);}
.tier-item .tier-cond.blue{color:var(--blue-tag);}
.tier-item p{color:var(--text-soft);text-align:justify;margin:0 0 10px;}
.tier-item .tier-explain{
  font-size:13.5px;font-style:italic;color:var(--text-soft);background:#f1ebdc;
  padding:12px 14px;border-radius:var(--radius);
}

/* ---------- footer ---------- */
footer{background:var(--night);color:var(--silver);text-align:center;padding:26px 0;font-size:13px;}
footer a{color:var(--blood-2);}