/* The training area: streak banner, weak-spot list, the daily quest, and the drill itself. */

.train-streak {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(255, 139, 61, .18), rgba(12, 20, 45, .8));
  border: 1px solid rgba(255, 139, 61, .35);
  text-align: start;
}
.train-flame { font-size: 30px; line-height: 1; }
.train-streak b { display: block; font-size: 15px; font-weight: 900; }
.train-streak small { font-size: 12px; opacity: .78; font-weight: 700; line-height: 1.5; }

.weak-list { display: flex; flex-direction: column; gap: var(--s2); }
.weak-item {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3); border-radius: 14px;
  background: rgba(255, 255, 255, .06); border: 1px solid var(--line);
  text-align: start;
}
.weak-label {
  font-family: var(--fd); font-size: 20px; font-weight: 900; color: var(--hot);
  min-width: 52px; text-align: center;
}
.weak-body { flex: 1; min-width: 0; }
.weak-body span { font-size: 13px; font-weight: 700; opacity: .85; display: block; margin-bottom: var(--s1); }

.quest {
  padding: var(--s3) var(--s4); border-radius: 16px;
  background: rgba(124, 77, 255, .12); border: 1px solid rgba(124, 77, 255, .4);
  text-align: start;
}
.quest.done { background: rgba(182, 255, 60, .12); border-color: rgba(182, 255, 60, .5); }
.quest b { display: block; font-size: 14px; font-weight: 900; margin-bottom: var(--s2); }
.quest small { display: block; font-size: 12px; opacity: .78; font-weight: 700; margin-top: var(--s1); }

/* -------------------------------------------------------------- the drill */
.drill-head { display: flex; flex-direction: column; gap: var(--s2); margin-bottom: var(--s4); }
.drill-counter { font-size: 13px; font-weight: 800; opacity: .75; }
.drill-progress { height: 8px; }
.drill-expr {
  margin: var(--s4) 0;
  text-shadow: 0 0 26px rgba(0, 229, 255, .4);
}
.drill-options { max-width: 460px; margin: 0 auto; }
.drill-feedback {
  min-height: 3.4em;
  margin-top: var(--s4);
  display: flex; flex-direction: column; align-items: center; gap: var(--s1);
  font-size: 15px; font-weight: 800;
}
.drill-feedback.good { color: #b6ff3c; }
.drill-feedback.bad { color: #ffd7dc; }
.drill-solved {
  font-family: var(--fd); font-size: clamp(20px, 4.4vmin, 30px); font-weight: 900; color: #fff;
  background: rgba(255, 77, 94, .16); border: 1px solid rgba(255, 77, 94, .45);
  border-radius: 12px; padding: var(--s1) var(--s4);
}

.drill-summary { display: flex; flex-direction: column; align-items: center; gap: var(--s1); margin-bottom: var(--s4); }
.drill-summary .ico { font-size: clamp(40px, 9vmin, 64px); line-height: 1; }
.drill-summary h3 { margin: 0; font-size: clamp(20px, 4vmin, 28px); font-weight: 900; }
.drill-summary p { margin: 0; opacity: .8; font-size: 14px; font-weight: 700; }

.corrections { display: flex; flex-wrap: wrap; gap: var(--s2); justify-content: center; }
.correction {
  font-family: var(--fd); font-size: 14px; font-weight: 800;
  padding: var(--s1) var(--s3); border-radius: 10px;
  background: rgba(255, 198, 61, .14); border: 1px solid rgba(255, 198, 61, .4);
}