:root{
  --cream:#fff4e0;
  --peach:#ffe1c4;
  --coral:#ef6c5d;
  --rose:#f49aa3;
  --green:#6aa86c;
  --leaf:#4f8a52;
  --gold:#f5b13d;
  --lavender:#b8a5d9;
  --plum:#7b5ea7;
  --ink:#3d2c2e;
  --soft:#fffaf0;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Quicksand',sans-serif;
  background:var(--cream);
  color:var(--ink);
  line-height:1.6;
  min-height:100vh;
  background-image:
    radial-gradient(circle at 10% 10%, rgba(245,177,61,0.10) 0, transparent 35%),
    radial-gradient(circle at 90% 20%, rgba(184,165,217,0.12) 0, transparent 40%),
    radial-gradient(circle at 50% 80%, rgba(106,168,108,0.08) 0, transparent 45%);
}

/* ===== HEADER / NAV BAR ===== */
.topbar{
  display:flex;justify-content:space-between;align-items:center;
  padding:18px 26px;
  background:var(--soft);
  border-bottom:3px solid var(--ink);
  flex-wrap:wrap;gap:12px;
  position:sticky;top:0;z-index:50;
}
.brand{
  font-family:'Fredoka',sans-serif;font-weight:700;font-size:1.6rem;
  color:var(--coral);text-decoration:none;
  display:inline-flex;align-items:center;gap:8px;
}
.brand .pop{color:var(--plum);}
.topbar-nav{display:flex;gap:10px;flex-wrap:wrap;}
.topbar-nav a{
  text-decoration:none;color:var(--ink);
  background:var(--peach);
  border:3px solid var(--ink);
  padding:8px 16px;border-radius:999px;
  font-family:'Fredoka',sans-serif;font-weight:600;font-size:.95rem;
  box-shadow:3px 3px 0 var(--ink);
  transition:all .15s;
}
.topbar-nav a:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink);}
.topbar-nav a.active{background:var(--gold);}

/* ===== PAGE HEAD ===== */
.page-wrap{
  max-width:1100px;margin:0 auto;
  padding:50px 24px 80px;
}
.page-head{text-align:center;margin-bottom:50px;}
.kicker{
  font-family:'Caveat',cursive;font-size:1.6rem;color:var(--plum);
}
.page-head h1{
  font-family:'Fredoka',sans-serif;font-weight:700;
  font-size:clamp(2.4rem,5vw,3.6rem);
  color:var(--ink);line-height:1;margin-top:4px;
}
.page-head h1 span{color:var(--coral);}

/* ===== CARD GRID (index pages) ===== */
.card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:22px;
}
.story-card,.puzzle-card{
  background:var(--soft);
  border:3px solid var(--ink);
  border-radius:22px;
  padding:22px 20px;
  box-shadow:5px 5px 0 var(--ink);
  text-decoration:none;color:var(--ink);
  display:flex;flex-direction:column;gap:8px;
  transition:transform .15s,box-shadow .15s;
  position:relative;
}
.story-card:hover,.puzzle-card:hover{
  transform:translate(-3px,-3px);
  box-shadow:8px 8px 0 var(--ink);
}
.story-card .emoji,.puzzle-card .emoji{
  font-size:2.6rem;line-height:1;
}
.story-card h3,.puzzle-card h3{
  font-family:'Fredoka',sans-serif;font-weight:600;
  font-size:1.25rem;color:var(--coral);
  margin-top:4px;
}
.story-card p,.puzzle-card p{
  font-size:.95rem;color:var(--ink);opacity:.85;
}
.card-tag{
  position:absolute;top:14px;right:14px;
  background:var(--gold);border:2px solid var(--ink);
  border-radius:999px;
  font-family:'Fredoka',sans-serif;font-weight:600;
  font-size:.75rem;padding:3px 10px;
}
.card-tag.makkelijk{background:#c8e2c9;}
.card-tag.middel{background:#fde6a8;}
.card-tag.uitdagend{background:#f8c8d4;}

/* ===== STORY READER ===== */
.book{
  background:var(--soft);
  border:4px solid var(--ink);
  border-radius:24px;
  padding:50px 50px 40px;
  box-shadow:8px 8px 0 var(--ink);
  max-width:780px;margin:0 auto;
}
.book h2{
  font-family:'Fredoka',sans-serif;font-weight:700;
  font-size:clamp(1.8rem,4vw,2.6rem);
  color:var(--coral);text-align:center;margin-bottom:6px;
}
.book .subtitle{
  text-align:center;font-family:'Caveat',cursive;
  font-size:1.4rem;color:var(--plum);margin-bottom:30px;
}
.book p{
  font-family:'Quicksand',sans-serif;
  font-size:1.1rem;line-height:1.85;
  margin-bottom:14px;color:var(--ink);
}
.book .drop{
  float:left;font-family:'Caveat',cursive;
  font-size:4.5rem;line-height:.9;
  color:var(--coral);padding:6px 10px 0 0;
}
.book .endmark{
  text-align:center;font-family:'Caveat',cursive;
  font-size:1.8rem;color:var(--leaf);margin-top:24px;
}
.story-nav{
  display:flex;justify-content:space-between;align-items:center;
  margin:30px auto 0;max-width:780px;flex-wrap:wrap;gap:12px;
}
.story-nav a,.story-nav button{
  text-decoration:none;color:var(--ink);
  background:var(--gold);
  border:3px solid var(--ink);
  padding:10px 22px;border-radius:999px;
  font-family:'Fredoka',sans-serif;font-weight:600;font-size:1rem;
  box-shadow:3px 3px 0 var(--ink);
  cursor:pointer;
  transition:all .15s;
}
.story-nav a:hover,.story-nav button:hover{
  transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink);
}
.story-nav a.muted{background:var(--peach);}
.story-nav .disabled{
  opacity:.4;pointer-events:none;
}

/* ===== PUZZLE PAGES ===== */
.puzzle-wrap{
  background:linear-gradient(135deg,#ffe7b8,#ffd0c4);
  border:4px solid var(--ink);
  border-radius:32px;
  padding:24px;
  box-shadow:8px 8px 0 var(--ink);
}
.puzzle-status{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;
  gap:12px;margin-bottom:16px;
}
.stat{
  background:var(--soft);
  padding:8px 18px;border-radius:999px;
  border:3px solid var(--ink);
  font-family:'Fredoka',sans-serif;font-weight:600;font-size:1rem;
}
.stat b{color:var(--coral);margin-left:6px;}
.reset-btn,.hint-btn{
  background:var(--coral);color:#fff;
  border:3px solid var(--ink);
  padding:8px 18px;border-radius:999px;
  font-family:'Fredoka',sans-serif;font-weight:600;font-size:.95rem;
  cursor:pointer;
  box-shadow:3px 3px 0 var(--ink);
  transition:all .15s;
}
.hint-btn{background:var(--lavender);}
.reset-btn:hover,.hint-btn:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink);}
.puzzle-instructions{
  background:var(--soft);
  border:3px dashed var(--ink);
  border-radius:18px;
  padding:14px 18px;margin-bottom:18px;
  font-family:'Caveat',cursive;font-size:1.3rem;color:var(--plum);
  text-align:center;
}
.win-msg{
  text-align:center;margin-top:18px;
  font-family:'Caveat',cursive;font-size:2rem;color:var(--leaf);
  min-height:42px;
}

/* ===== RESPONSIVE ===== */
@media (max-width:640px){
  .book{padding:30px 22px;}
  .book p{font-size:1.02rem;}
  .page-wrap{padding:30px 16px 60px;}
  .topbar{padding:14px 18px;}
  .brand{font-size:1.3rem;}
}