.assessment-stage {
  position: relative;
}

.assessment-progress {
  min-width: 210px;
}

.assessment-progress #assessmentProgressText {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: end;
  align-items: baseline;
  gap: 4px 10px;
}

.assessment-progress #assessmentProgressText span {
  color: #287c62;
  font-size: 12px;
}

.assessment-progress #assessmentProgressText strong {
  color: #1e3150;
  font-size: 22px;
}

.assessment-progress #assessmentProgressText small {
  grid-column: 1 / -1;
  color: #82928b;
  font-size: 11px;
  font-weight: 600;
}

.assessment-feedback {
  width: min(620px, 100%);
  box-sizing: border-box;
  padding: 12px 16px;
  border-radius: 6px;
  text-align: center;
  transition: background-color 180ms ease, transform 180ms ease;
}

.assessment-feedback.is-correct {
  background: #e6f6ed;
  box-shadow: 0 8px 20px rgba(33, 120, 93, .12);
  transform: translateY(-2px);
}

.assessment-feedback.is-wrong {
  background: #fff4df;
  box-shadow: 0 8px 20px rgba(154, 101, 31, .09);
}

.assessment-companion.streak-active img {
  animation: assessment-bounce 720ms ease-out;
}

.assessment-companion.streak-active strong {
  color: #16745a;
  animation: assessment-pulse 720ms ease-out;
}

.assessment-sparkles {
  position: absolute;
  inset: 45% 50% auto;
  z-index: 3;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.assessment-sparkles i {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: #f0b542;
  animation: assessment-spark 780ms ease-out var(--spark-delay) both;
}

.assessment-sparkles i:nth-child(3n) { background: #4f9e7b; }
.assessment-sparkles i:nth-child(3n + 1) { background: #4f83bc; }
.assessment-sparkles i:nth-child(4n) { background: #ef6d67; }

.assessment-combo-burst {
  position: fixed;
  z-index: 1350;
  top: clamp(110px, 19vh, 190px);
  left: 50%;
  display: grid;
  justify-items: center;
  pointer-events: none;
  filter: drop-shadow(0 12px 16px rgba(105, 48, 9, .24));
  animation: combo-burst 1.05s cubic-bezier(.16,.88,.24,1) both;
}

.assessment-combo-burst::before,
.assessment-combo-burst::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 270px;
  height: 76px;
  background: repeating-conic-gradient(from 3deg, #ffd45c 0 5deg, transparent 5deg 17deg);
  transform: translate(-50%, -50%);
  opacity: .72;
  mask: radial-gradient(ellipse, transparent 0 25%, #000 27% 58%, transparent 60%);
}

.assessment-combo-burst::after { transform: translate(-50%, -50%) rotate(11deg); opacity: .42; }
.assessment-combo-burst strong { position:relative;z-index:1;color:#ff7a18;font:900 clamp(38px,5vw,68px)/1 "Microsoft YaHei",sans-serif;-webkit-text-stroke:2px #fff7d6;text-shadow:0 3px 0 #b93812,0 7px 13px rgba(101,42,8,.28); }
.assessment-combo-burst span { position:relative;z-index:1;margin-top:6px;padding:4px 15px;border-radius:999px;background:#fff8dc;color:#a94512;font-size:14px;font-weight:900;box-shadow:0 3px 0 #eabf56; }

@keyframes combo-burst {
  0% { opacity:0; transform:translate(-50%,-8px) scale(.35) rotate(-7deg); }
  28% { opacity:1; transform:translate(-50%,0) scale(1.14) rotate(2deg); }
  62% { opacity:1; transform:translate(-50%,0) scale(1); }
  100% { opacity:0; transform:translate(-50%,-12px) scale(.92); }
}

@keyframes assessment-bounce {
  0%, 100% { transform: translateY(0) rotate(0); }
  35% { transform: translateY(-13px) rotate(-4deg); }
  65% { transform: translateY(-5px) rotate(4deg); }
}

@keyframes assessment-pulse {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(1.08); }
}

@keyframes assessment-spark {
  from { opacity: 1; transform: translate(0, 0) rotate(0); }
  to { opacity: 0; transform: translate(var(--spark-x), var(--spark-y)) rotate(240deg); }
}

@media (prefers-reduced-motion: reduce) {
  .assessment-companion.streak-active img,
  .assessment-companion.streak-active strong,
  .assessment-sparkles i,
  .assessment-combo-burst { animation: none; }
}

@media (max-width: 680px) {
  .assessment-progress #assessmentProgressText {
    justify-content: start;
  }
}