body{font-family: 'Open Sans', Arial, sans-serif;background:#fffdf8;color:#1a1d2b;margin:0}
.wrapper{max-width:1000px;margin:auto;padding:20px}
.header{background:#fff3da;border:1px solid #eee;border-radius:14px;padding:20px;margin-bottom:20px}
h1{margin:0 0 6px}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.gallery .art{border:1px solid #eee;border-radius:10px;padding:10px;background:#fff}
.gallery img{width:100%;border-radius:8px}
.footer{margin-top:40px;font-size:14px;color:#555;text-align:center}
.empty{padding:20px;border:1px dashed #ccc;border-radius:10px;text-align:center;color:#888}

/* --- Milestone badge display --- */
.badge-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
  gap:12px;
  margin-top:20px;
  margin-bottom:18px;
}

.badge {
  background:#fff;
  border:1px solid #eee;
  border-radius:12px;
  text-align:center;
  padding:10px;
  box-shadow:0 2px 4px rgba(0,0,0,0.04);
  transition:transform 0.2s ease;
}

.badge:hover { transform:translateY(-3px); }

.badge .icon {
  width:60px;
  height:60px;
  margin:0 auto 8px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:28px;
  color:#fff;
  font-weight:700;
}
.badge .name {
  font-size:13px;
  font-weight:600;
  color:#1a1d2b;
}
/* Vivid background */
body {
  background:
    radial-gradient(1200px 600px at -10% -10%, rgba(255, 214, 165, 0.45), transparent 60%),
    radial-gradient(900px 500px at 110% 0%, rgba(166, 231, 216, 0.45), transparent 60%),
    radial-gradient(900px 600px at 50% 110%, rgba(197, 191, 255, 0.45), transparent 60%),
    #fffdf8; /* fallback */
}

/* Keep main cards readable on vivid bg */
.header, .card, .page, .badge {
  backdrop-filter: saturate(110%) blur(0.5px);
}

/* badge grid */
.badge-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
  gap:12px;
  margin-bottom:18px;
}
.badge {
  background:#fff;
  border:1px solid var(--border, #ece7de);
  border-radius:12px;
  text-align:center;
  padding:10px;
  position:relative;
  transition:transform .2s ease, filter .2s ease, opacity .2s ease;
}
.badge:hover { transform:translateY(-3px); }
.badge .icon {
  width:60px;height:60px;margin:0 auto 8px;border-radius:50%;
  display:grid;place-items:center;font-size:28px;color:#fff;font-weight:700;
}
.badge .name { font-size:13px;font-weight:600;color:var(--ink, #172033); }

/* Locked vs unlocked visual states */
.badge.locked {
  filter: grayscale(1) saturate(.5);
  opacity: .65;
}
.badge.unlocked {
  filter: none;
  opacity: 1;
}
.badge.unlocked .icon { opacity: 1; }
.badge.unlocked .name { color: #1a1d2b; font-weight: 700; }
.badge.unlocked::after{
  content:"✓";
  position:absolute; top:6px; right:8px;
  background:#22c55e; color:#fff; font-size:12px; font-weight:700;
  width:18px; height:18px; border-radius:50%;
  display:grid; place-items:center;
}

/* progress bar */
.progress-rail{height:10px;background:#f1efe9;border-radius:999px;overflow:hidden}
.progress-bar{height:100%;background:#45c7b0;width:0;transition:width .4s ease}

/* --- How it works card --- */
.how-card { padding-top: 14px; }
.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 0 0 8px 0;
  padding: 0;
}
.step { display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: start; }
.step .icon {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; background: #fff3da; font-size: 18px;
  border: 1px solid var(--border, #ece7de);
}
.step-title { font-weight: 700; }
.step-text { color: var(--muted, #6b7280); font-size: 14px; }

/* legend for badge states */
.legend {
  display: flex; align-items: center; gap: 14px;
  padding: 8px 10px; border: 1px dashed var(--border, #ece7de);
  border-radius: 10px; background:#fff;
  font-size: 14px; color: var(--muted, #6b7280);
}
.legend .dot {
  width: 18px; height: 18px; border-radius: 50%; display: inline-grid; place-items:center;
  border: 1px solid var(--border, #ece7de); font-weight:700; font-size: 12px;
}
.legend .dot.locked { background:#eaeaea; color:#888; }
.legend .dot.done { background:#45c7b0; color:#fff; }
.legend .dot.check { width: 22px; height: 22px; }