/* dojo.css — nivelurile gamificate (pagina /dojo, FAZA 3).
   Mobile-first; responsive 375/768/1280/2560. Grid 1->2 coloane, fără scroll orizontal.
   Fiecare clasă are o regulă (audit CSS). Fără lățimi fixe > 100vw. */

.dojo { width: 100%; }

/* Lista nivelurilor (taburi orizontale). */
.dojo-levels { display: flex; gap: var(--sp-2); overflow-x: auto;
  padding-bottom: var(--sp-2); margin: 0 0 var(--sp-4); }
.dojo-level { flex: 0 0 auto; display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3); text-decoration: none; color: var(--ink);
  border: var(--border-soft); border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.02); }
.dojo-level:hover { border-color: var(--accent-line); }
.dojo-level.is-active { border-color: var(--accent); background: var(--accent-soft); }
.dojo-level-pos { color: var(--ink-dim); font-size: var(--fs-xs); }
.dojo-level-title { font-weight: 600; font-size: var(--fs-sm); }

/* Introdusul nivelului + pachete. */
.dojo-intro { margin: 0 0 var(--sp-2); font-size: var(--fs-sm); color: var(--ink-dim); }
.dojo-intro-wrap .dojo-intro { color: var(--ink); }
.dojo-packets { list-style: none; margin: 0 0 var(--sp-3); padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.dojo-pkt-view { padding: var(--sp-1) var(--sp-2); font-size: var(--fs-xs);
  border-radius: var(--radius-sm); border: var(--border-soft); }
.dojo-pkt-view.kind-legit { border-color: var(--accent-line); color: var(--accent-2); }
.dojo-pkt-view.kind-mal { border-color: var(--alert); color: var(--alert); }

/* Grid simulare: 1 coloană pe telefon, 2 pe tabletă+. */
.dojo-body { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); }
.dojo-col { min-width: 0; width: 100%; }
.dojo-col h2 { font-size: var(--fs-md); margin: 0 0 var(--sp-2); }
.dojo-rules-col { min-width: 0; }
.dojo-result-col { min-width: 0; }

/* Reguli (activează + ordonează). */
.dojo-rules { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.dojo-rule { padding: var(--sp-2); border: var(--border-soft);
  border-radius: var(--radius-sm); background: rgba(255,255,255,0.02); }
.dojo-rule.is-active { border-color: var(--accent); background: var(--accent-soft); }
.dojo-rule-head { display: flex; align-items: flex-start; gap: var(--sp-2); }
.dojo-rule-chk { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent); flex-shrink: 0; }
.dojo-rule-text { font-size: var(--fs-sm); color: var(--ink); }
.dojo-rule-cmd { display: block; margin: var(--sp-1) 0 0; padding: var(--sp-1) var(--sp-2);
  background: #04060c; border-radius: var(--radius-sm); font-size: var(--fs-xs);
  overflow-x: auto; white-space: pre-wrap; color: var(--ink-dim); }
.dojo-rule-btns { display: flex; gap: var(--sp-1); margin-top: var(--sp-1); }
.dojo-rule-btns .btn { font-size: var(--fs-xs); padding: 0 var(--sp-2); }

/* Scor + rezultat simulare. */
.dojo-score { font-family: var(--font-mono); font-size: var(--fs-sm);
  color: var(--ink-dim); margin: 0 0 var(--sp-2); }
.dojo-score.is-solved { color: var(--accent-2); font-weight: 600; }
.dojo-result { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1); }
.dojo-pkt { padding: var(--sp-1) var(--sp-2); border-radius: var(--radius-sm);
  border: var(--border-soft); }
.dojo-pkt.is-ok { border-left-color: var(--accent-2); border-left-width: 4px; }
.dojo-pkt.is-bad { border-left-color: var(--alert); border-left-width: 4px; }
.dojo-pkt-t { font-size: var(--fs-sm); color: var(--ink); }
.dojo-pkt-meta { font-size: var(--fs-xs); color: var(--ink-dim); margin-top: var(--sp-1); }

/* Responsive: 2 coloane de la tabletă în sus. */
@media (min-width: 601px) {
  .dojo-body { grid-template-columns: 1fr 1fr; align-items: start; }
}

/* Ecran lat: lățime max. conținut, fără lățimi fixe > 100vw. */
@media (min-width: 1921px) {
  .dojo { max-width: 1500px; }
}

/* Reduced motion: fără tranziții de glow. */
@media (prefers-reduced-motion: reduce) {
  .dojo-level:hover { border-color: var(--border-soft); }
}