.hero-score{

  margin-top:20px;

  text-align:center;
}

.score-label{

  opacity:0.7;

  font-size:18px;

  text-align: center;
}

/* =========================
   SCORE GLOW
========================= */

.hero-score{

  position:relative;

  display:flex;
  flex-direction:column;

  align-items:center;
  justify-content:center;
}

.score-ring{

  position:absolute;

  width:180px;
  height:180px;

  border-radius:50%;

  background:

    radial-gradient(
      circle,
      rgba(255,69,58,.22),
      transparent 70%
    );

  filter:blur(10px);

  animation:
    rotateGlow 10s linear infinite,
    pulseGlow 3s ease-in-out infinite;

  z-index:-1;
}

@keyframes rotateGlow{

  from{
    transform:rotate(0deg);
  }

  to{
    transform:rotate(360deg);
  }
}

@keyframes pulseGlow{

  0%{
    opacity:.5;
    scale:.95;
  }

  50%{
    opacity:1;
    scale:1.05;
  }

  100%{
    opacity:.5;
    scale:.95;
  }
}

.score-main{

  font-size:48px;
  font-weight:800;

  margin-top:6px;
  
  text-shadow:

  0 0 12px
  rgba(255, 237, 193, 0.4),

  0 0 28px
  rgba(255, 41, 30, 0.25);
}

.score-details{

  display:grid;

  grid-template-columns:
    repeat(2,1fr);

  gap:18px;
}

.mini-score{

  background:#29272789;

  border-radius:18px;

  padding:18px;

  text-align:center;

  min-width:0;

  overflow:hidden;
}

.mini-score span{

  opacity:0.7;

  font-size:14px;
}

.mini-score strong{

  display:block;

  margin-top:8px;

  font-size:14px;

  line-height:1.1;

  overflow:hidden;

  text-overflow:ellipsis;

  white-space:nowrap;
}

.boost strong{

  color:#ff453a;

  animation:pulse 1.5s infinite;
}

@keyframes pulse{

  0%{
    opacity:0.6;
  }

  50%{
    opacity:1;
  }

  100%{
    opacity:0.6;
  }
}