/* Equal-Addition Balance — constant-difference subtraction Habit-Breaker.
   Layered on top of math-rounds.css + number_bonds.css (mode badge, ladder,
   band, lesson carousel, keypad reused). The interaction itself is the
   UNIFIED step-entry pattern (`.hb-steps`, TRAINER_UNIFICATION_SPEC §A) which
   lives in math-rounds.css — this file only keeps the trainer-local extras:
   the speed ghost, the per-level mastery bar, and the boss badge. */

/* ── Speed ghost + mastery bar ── */
.ea-meta { text-align: center; margin-top: 8px; }
.ea-ghost {
  font: 500 12px/1 "Space Grotesk", system-ui, sans-serif;
  color: var(--text-secondary, #94a3b8);
}
.ea-ghost.beat { color: var(--primary, #10b981); font-weight: 600; }

.ea-mastery {
  height: 8px;
  background: var(--border, #e2e8f0);
  border-radius: 999px;
  overflow: hidden;
  margin: 12px auto 0;
  max-width: 320px;
}
.ea-mastery-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--accent, #34d399), var(--primary, #10b981));
  border-radius: 999px;
  transition: width 0.4s ease;
}

/* ── Mobile no-scroll compaction (spec §A NO-SCROLL RULE) ──
   At 390×844 the problem + current step + keypad must ALL fit with zero
   scrolling. Scoped to this page via .hb-compact on .math-rounds-container
   so no other trainer's layout changes; desktop is untouched. */
@media (max-width: 480px) {
  .hb-compact { margin: 8px auto; }
  .hb-compact .math-rounds-header { margin-bottom: 6px; }
  .hb-compact .math-rounds-header h1 { font-size: 1.15rem; }
  .hb-compact .subtitle { font-size: 0.78rem; margin: 2px 0 0; }
  .hb-compact #game-panel { padding: 10px 12px; }
  .hb-compact .nb-ladder { margin-bottom: 4px; }
  .hb-compact .nb-band { font-size: 0.78rem; margin-bottom: 4px; }
  .hb-compact .hud { margin-bottom: 6px; font-size: 0.82rem; }
  .hb-compact .question-box { gap: 8px; }
  .hb-compact .question { font-size: 1.7rem; margin: 0; }
  .hb-compact .hb-steps { margin: 4px auto 0; gap: 8px; }
  .hb-compact .ea-meta { margin-top: 0; }
  .hb-compact .ea-mastery { margin: 4px auto 0; }
  .hb-compact .keypad { gap: 6px; margin-top: 2px; }
  .hb-compact .keypad button { padding: 9px; font-size: 1.1rem; border-radius: 10px; }
}

/* Boss banner */
.ea-boss-badge {
  display: inline-block;
  background: #f59e0b;
  color: #fff;
  font: 700 11px/1 "Space Grotesk", system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 8px;
  border-radius: 6px;
  margin-left: 6px;
}