/* Had — doplňky ke sdílenému designu */

.screen {
  box-shadow:
    0 0 0 1px rgba(51, 255, 102, .05),
    0 24px 70px rgba(0, 0, 0, .55),
    0 0 90px rgba(51, 255, 102, .05);
}

.screen .overlay {
  background: radial-gradient(ellipse at center, rgba(8, 9, 11, .5), rgba(8, 9, 11, .82));
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  animation: had-fade .35s ease both;
}

.screen .overlay-title {
  font-size: 46px;
  text-shadow: 0 0 34px rgba(255, 92, 51, .35);
  animation: had-pop .55s cubic-bezier(.2, 1.4, .4, 1) both;
}

.screen .overlay-sub { animation: had-fade .5s .12s ease both; }

.stat-value { align-self: flex-start; transform-origin: left center; }
.stat-value.bump { animation: had-bump .35s ease; }

@keyframes had-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes had-pop {
  from { opacity: 0; transform: scale(.82); }
  to { opacity: 1; transform: none; }
}

@keyframes had-bump {
  35% { transform: scale(1.18); text-shadow: 0 0 18px rgba(255, 92, 51, .65); }
}