/* Math Games hub — grade + skill filter controls */

.mgh-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: flex-end;
  margin-bottom: 18px;
}

.mgh-filter-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mgh-filter-group label {
  font-size: 0.82rem;
  color: var(--color-text-soft);
}

.mgh-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mgh-chip {
  border: 2px solid var(--color-border);
  background: var(--color-bg-alt);
  color: var(--color-text);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.85rem;
  cursor: pointer;
}

.mgh-chip[aria-pressed="true"] {
  border-color: var(--color-primary);
  background: rgba(79, 216, 224, 0.14);
}

.mgh-skill-select {
  background: var(--color-bg-alt);
  color: var(--color-text);
  border: 2px solid var(--color-border);
  border-radius: 10px;
  padding: 8px 12px;
  font: inherit;
  min-width: 200px;
}

.mgh-card-grade {
  font-size: 0.78rem;
  color: var(--color-text-soft);
  margin-top: 2px;
}

/* Phones: the label now sits beside the controls (listing.css), leaving only ~250px, so the grade chips took three rows.
   They now span the full row (the chips name themselves: "All Grades", "Grades 2-3"; the label stays for screen readers)
   with slightly tighter chips: two rows, every grade visible, no hidden scroller. */
@media (max-width: 600px) {
  .mgh-chip { padding: 6px 10px; font-size: 0.8rem; }
  #mgh-grade-chips { grid-column: 1 / -1; }
  #mgh-grade-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}