/* HTF Puzzle Stats UI v5
   - Makes the Mistakes pill visible and consistently placed
   - Adds solved glow/celebration per-card only
*/

.htf-controls{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

.htf-mistakes-btn{
  margin-left:auto;
  padding:8px 14px !important;
  border-radius:14px !important;
  font-weight:700;
  letter-spacing:.2px;
  border:1px solid rgba(106,169,255,.55) !important;
  background: rgba(10,18,26,.55) !important;
  color:#eaf3ff !important;
  box-shadow: 0 0 0 1px rgba(0,0,0,.25) inset;
}

.htf-mistakes-btn .htf-mistakes-num{
  display:inline-block;
  min-width: 1.2em;
  text-align:right;
  margin-left:6px;
  padding:2px 8px;
  border-radius:12px;
  background: rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.12);
}

/* Per-card completion glow */
.htf-card.htf-solved{
  box-shadow:
    0 0 0 1px rgba(57,217,138,.45),
    0 0 26px rgba(57,217,138,.18) !important;
  outline: 1px solid rgba(57,217,138,.25);
}

/* Quick celebration pulse */
@keyframes htfPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.01); }
  100% { transform: scale(1); }
}

.htf-card.htf-celebrate{
  animation: htfPulse 1.1s ease-in-out 1;
}