/* ═══════════════════════════════════════
   2D EDITOR — page-specific styles
   Base theme + navbar/footer/page-hero come from css/styles.css; the
   .level-card / #feed / .status-card look for the community levels section
   below is reused from css/UGClevels.css (loaded before this file, so these
   overrides win). Only the section heading + column count are page-specific.
═══════════════════════════════════════ */

.editor-levels-section {
  max-width: 1024px;
  margin: 0 auto;
  padding: 12px 20px 60px;
}

/* Matches UGClevels.css's .ugc-title exactly (same centered, stroked
   Luckiest Guy heading used across the site) — kept as its own rule since
   this page doesn't otherwise load the UGC page's layout. */
.editor-levels-title {
  font-family: 'Luckiest Guy', cursive;
  font-size: clamp(1.2rem, 2.6vw, 1.9rem);
  color: var(--white);
  text-align: center;
  margin-bottom: 22px;
}

/* Smaller thumbnails than UGClevels.css's own default so more fit across
   this page's narrower (1024px-capped) section: 6 across on a large
   screen, stepping down through a tablet size before landing on 2 for
   phones — .level-card's own aspect-ratio: 1/1 (from UGClevels.css) keeps
   every card square as it shrinks. */
#feed {
  grid-template-columns: repeat(6, 1fr);
}

@media (max-width: 900px) {
  #feed {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 640px) {
  #feed {
    grid-template-columns: repeat(2, 1fr);
  }
}