/* =============================================================
   Advaslearning Hub — pygame/pygame_styles.css

   Loaded by:
     • app/pygame/page.tsx                    (course landing page)
     • app/pygame/pygame-zero/layout.tsx      (every PZ lesson page)
     • app/pygame/platformer/layout.tsx       (every PLT lesson page)

   The Pygame course was carved out of the Python course's two optional
   modules, and its lesson pages were authored against the Python lesson
   stylesheet — same .lesson-hero / .lesson-section / .homework-gate
   markup contract. Rather than fork 1,200 lines that would immediately
   drift, this sheet imports it and keeps its own file for Pygame-only
   overrides.

   Accent tokens (--accent / --accent-soft / --accent-dark) still come
   from `.level--pz` / `.level--pg` / `.level--plt` in the shared
   /styles.css.

   Add Pygame-specific rules BELOW the import.
   ============================================================= */
@import url("/python/python_styles.css");

/* ---------- Build-log stages (Module 3 · Platformer Project) ----------
   A platformer lesson is a run of small stages, each ending in something
   the student can run. `.stage` wraps one of those; `.checkpoint` is the
   "run it and look for this" box that closes it.
   --------------------------------------------------------------------- */
.stage {
  border: 1px solid var(--line, #E2E8F0);
  border-left: 4px solid var(--accent, #F59E0B);
  border-radius: 12px;
  padding: 16px 18px 4px;
  margin: 22px 0;
  background: #fff;
}

.stage__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.stage__num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: var(--accent, #F59E0B);
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}

.stage__title {
  margin: 0;
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--ink, #0F172A);
}

.stage > p:last-child,
.stage > .callout:last-child {
  margin-bottom: 16px;
}

/* ---------- Run-it checkpoint ---------- */
.checkpoint {
  border: 1px solid #86EFAC;
  background: #F0FDF4;
  border-radius: 12px;
  padding: 14px 16px;
  margin: 16px 0 18px;
}

.checkpoint__title {
  margin: 0 0 6px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #15803D;
}

.checkpoint p { margin: 0 0 8px; }
.checkpoint p:last-child { margin-bottom: 0; }

.checkpoint ul {
  margin: 0;
  padding-left: 20px;
}

.checkpoint ul li { margin-bottom: 4px; }
.checkpoint ul li:last-child { margin-bottom: 0; }

/* ---------- Bug table (symptom -> cause) ---------- */
.bug-table {
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0 18px;
  font-size: 0.94rem;
}

.bug-table th,
.bug-table td {
  border: 1px solid var(--line, #E2E8F0);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}

.bug-table th {
  background: var(--accent-soft, #FEF4E0);
  font-weight: 700;
}

.bug-table td:first-child {
  font-family: var(--font-mono);
  font-size: 0.86rem;
  width: 42%;
}

/* ---------- Starter-kit assets ---------- */
.asset-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 14px 0 18px;
  padding: 0;
  list-style: none;
}

.asset-grid li {
  border: 1px solid var(--line, #E2E8F0);
  border-radius: 12px;
  padding: 12px;
  text-align: center;
  background: #F8FAFC;
  min-width: 150px;
  flex: 1 1 150px;
  margin: 0;
}

.asset-grid img {
  display: block;
  margin: 0 auto 8px;
  max-width: 96px;
  max-height: 96px;
  height: auto;
  image-rendering: auto;
}

.asset-grid code {
  font-size: 0.82rem;
}

.asset-grid span {
  display: block;
  font-size: 0.78rem;
  color: var(--muted, #64748B);
  margin-top: 4px;
}