/* ===============================
   Cards & Containers
   =============================== */

/* Generic card */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:var(--space-4);
  box-shadow:0 1px 0 rgba(0,0,0,.03);
}

/* Info box (accented) */
.info-box{ composes: card; /* (conceptual) */ }
.info-box{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:var(--space-4);
  box-shadow:0 1px 0 rgba(0,0,0,.03);
}
.info-box--accent{
  border-color:color-mix(in oklch, var(--accent-500), white 70%);
  background:color-mix(in oklch, var(--accent-100), white 60%);
}
.info-box h3{
  margin-bottom:var(--space-2);
  font-family:var(--font-ui);
  font-weight:700;
  color:var(--accent-700);
}
.info-box p{color:var(--text-muted);}

/* Puzzle card (for listing puzzles) */
.puzzle-card{
  display:grid; grid-template-columns:72px 1fr; gap:var(--space-3);
  align-items:center;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:var(--space-3);
}
.puzzle-card__thumb{
  width:72px; height:72px; border-radius:12px;
  background:linear-gradient(135deg, var(--accent-100), #fff);
  display:grid; place-items:center; font-size:24px;
  border:1px solid color-mix(in oklch, var(--accent-300), white 50%);
}
.puzzle-card__title{
  font-family:var(--font-ui); font-weight:700; margin-bottom:4px;
}
.puzzle-card__meta{
  color:var(--text-muted); font-size:14px;
}
.badge{
  display:inline-block; padding:2px 8px; border-radius:999px;
  background:var(--accent-100); color:var(--accent-700);
  border:1px solid color-mix(in oklch, var(--accent-300), white 40%);
  font-family:var(--font-ui); font-weight:600; font-size:12px;
}