:root {
  --card:#fff;
  --shadow:0 8px 20px rgba(0,0,0,.08);
  --radius:16px;
  --pink:#FF6EC7;
  --orange:#FFB347;
  --turquoise:#1DD6C9;
  --violet:#9C6EFF;
  --text:#333;
  --text-soft:#555;
  height: 100%;
}

body {
  margin:0;
  font-family:'Nunito', sans-serif;
  background:linear-gradient(180deg,#AEE7FF,#FFF9C4);
  color:var(--text);
  height: 100%;
}

header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 20px;
  background:#fff;
  box-shadow:var(--shadow);
}

.brand {
  display:flex;
  align-items:center;
  font-family:'Baloo 2', cursive;
  font-weight:700;
  gap:10px;
}

.logo {
  width:36px;height:36px;
  border-radius:10px;
  display:grid;place-items:center;
  background:linear-gradient(135deg,var(--turquoise),var(--violet));
  color:#fff;
}

nav a {
  margin:0 8px;
  text-decoration:none;
  font-weight:600;
  color:var(--text);
}

nav a.active {
  color:var(--violet);
}

main {
  max-width:1200px;
  margin:20px auto;
  padding:0 20px;
}

.adventure-hero h2 {
  font-family:'Baloo 2', cursive;
  margin:0 0 8px;
}

.adventure-hero p {
  margin:0 0 18px;
  color:var(--text-soft);
}

.worlds {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:18px;
  margin-bottom:30px;
}

.world-card {
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  cursor:pointer;
  transition:transform .2s ease;
}

.world-card:hover {
  transform:translateY(-4px);
}

.world-top {
  height:120px;
  display:grid;
  place-items:center;
  font-size:40px;
  background:#f3f3f3;
}

.world-body {padding:16px}
.world-title {font-family:'Baloo 2', cursive; display:flex; gap:8px;align-items:center}
.badge {background:linear-gradient(90deg,var(--turquoise),var(--violet));color:#fff;border-radius:999px;padding:2px 8px;font-size:.8rem}
.world-meta {font-size:.9rem;opacity:.8}

.quests {display:none;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.quests.active {display:grid}

.quest {
  background:#fff;
  border-radius:14px;
  border:2px dashed rgba(0,0,0,.08);
  padding:12px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.quest .left {display:flex;gap:10px;align-items:center}
.stars {font-weight:800}

footer {
  padding:20px;
  text-align:center;
  font-size:.85rem;
  opacity:.7;
}