@font-face {
  font-family: "Speed Run Archivo";
  src: url("/blog/site/fonts/archivo-700.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 700;
}

[data-scoop-speed-run="overlay"] {
  position: fixed;
  z-index: 2147483000;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  contain: layout paint style;
  font-family: "Speed Run Archivo", "Arial Black", sans-serif;
}

[data-scoop-speed-run="hud"] {
  position: absolute;
  top: max(10px, env(safe-area-inset-top));
  left: 50%;
  width: max-content;
  max-width: calc(100vw - 32px);
  transform: translateX(-50%);
  filter: drop-shadow(0 9px 16px rgba(0, 0, 0, 0.46));
  isolation: isolate;
}

[data-scoop-speed-run="score-plate"] {
  position: relative;
  display: grid;
  box-sizing: border-box;
  width: max-content;
  min-width: 9.5rem;
  max-width: 100%;
  min-height: 2.75rem;
  padding: 3px;
  border: 1px solid rgba(255, 241, 173, 0.76);
  border-radius: 11px;
  background:
    linear-gradient(115deg, #fff0a8 0%, #a9650c 16%, #ffe596 34%, #7e4004 52%, #f8ce67 72%, #8d4b08 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 0 0 1px rgba(57, 24, 0, 0.82),
    0 0 24px rgba(255, 154, 28, 0.26);
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px),
    calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
}

[data-scoop-speed-run="score-plate"]::before,
[data-scoop-speed-run="score-plate"]::after {
  position: absolute;
  z-index: 2;
  top: 50%;
  width: 9px;
  height: 18px;
  border: 1px solid #ffdc72;
  background: linear-gradient(#4b2200, #f7c54b 48%, #3a1700 52%);
  content: "";
  transform: translateY(-50%) skewY(-18deg);
}

[data-scoop-speed-run="score-plate"]::before { left: -6px; }
[data-scoop-speed-run="score-plate"]::after { right: -6px; transform: translateY(-50%) skewY(18deg); }

[data-scoop-speed-run="score"] {
  position: relative;
  z-index: 1;
  display: block;
  box-sizing: border-box;
  min-width: 0;
  padding: 0.58rem 1.35rem 0.52rem;
  overflow: hidden;
  border: 1px solid rgba(255, 217, 112, 0.42);
  border-radius: 8px;
  background:
    linear-gradient(105deg, rgba(255, 255, 255, 0.11), transparent 35%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, #202630 0%, #090c12 55%, #161009 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -2px 8px rgba(0, 0, 0, 0.72);
  color: #fff4bd;
  font-size: clamp(1rem, 2vw, 1.25rem);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: 0.055em;
  line-height: 1.15;
  text-align: center;
  text-shadow: 0 1px 0 #5b2e00, 0 0 9px rgba(255, 197, 77, 0.38);
  text-transform: uppercase;
  transform-origin: 50% 50%;
}

[data-scoop-speed-run="score-value"] {
  display: block;
  overflow-wrap: anywhere;
}

.scoop-speed-run-score--tick {
  animation: scoop-speed-run-score-tick 620ms cubic-bezier(.16, 1.35, .36, 1);
}

[data-scoop-speed-run="activation"] {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(92vw, 70rem);
  color: #fff7c7;
  font-size: clamp(3.5rem, 5vw, 6rem);
  font-weight: 700;
  letter-spacing: clamp(0.02em, 0.8vw, 0.105em);
  line-height: 1.4;
  overflow-wrap: anywhere;
  text-align: center;
  text-shadow:
    0 2px 0 #ffc83d,
    0 5px 0 #d65a00,
    0 9px 0 #6f1900,
    0 15px 22px rgba(0, 0, 0, 0.72),
    0 0 34px rgba(255, 180, 27, 0.7);
  transform: translate(-50%, -50%);
  transform-origin: 50% 50%;
  animation: scoop-speed-run-slam 2.4s cubic-bezier(.16, 1, .3, 1) both;
}

[data-scoop-speed-run="activation"]::before,
[data-scoop-speed-run="activation"]::after {
  position: absolute;
  z-index: -1;
  inset: 50% auto auto 50%;
  border: 3px solid rgba(255, 211, 82, 0.75);
  border-radius: 50%;
  content: "";
  transform: translate(-50%, -50%);
  animation: scoop-speed-run-ring 1.1s ease-out both;
}

[data-scoop-speed-run="activation"]::after {
  border-color: rgba(255, 103, 13, 0.58);
  animation-delay: 100ms;
}

[data-scoop-speed-run="effects"] {
  position: absolute;
  z-index: 5;
  inset: 0;
  pointer-events: none;
  perspective: 700px;
  transform-style: preserve-3d;
}

[data-scoop-speed-run-effect] {
  position: absolute;
  top: max(10px, env(safe-area-inset-top));
  left: 50%;
  width: min(15rem, calc(100vw - 24px));
  height: 7.5rem;
  pointer-events: none;
  transform: translateX(-50%);
  transform-style: preserve-3d;
}

.scoop-speed-run-flame {
  position: absolute;
  bottom: 1.25rem;
  width: 1.4rem;
  height: 3.8rem;
  margin-left: -0.7rem;
  border-radius: 64% 36% 62% 38% / 76% 64% 36% 24%;
  background:
    radial-gradient(ellipse at 50% 78%, #fffce4 0 9%, #ffd24a 18%, #ff7517 43%, rgba(217, 25, 0, 0.7) 62%, transparent 75%);
  filter: drop-shadow(0 0 7px rgba(255, 94, 0, 0.8));
  mix-blend-mode: screen;
  opacity: 0;
  transform-origin: 50% 100%;
  transform-style: preserve-3d;
  will-change: transform, opacity;
}

.scoop-speed-run-score--fire {
  color: #fffbd9;
  text-shadow:
    0 1px 0 #fff0a6,
    0 3px 0 #ff8c19,
    0 6px 0 #8e2400,
    -7px -5px 13px rgba(255, 45, 0, 0.8),
    7px -9px 15px rgba(255, 181, 28, 0.82),
    0 0 25px rgba(255, 72, 0, 0.92);
  transform: perspective(260px) rotateX(-7deg);
}

.scoop-speed-run-score--calm-fire {
  color: #fffbd9;
  box-shadow: inset 0 0 20px rgba(255, 133, 21, 0.38);
  text-shadow: 0 2px 0 #a73c00, 0 0 18px rgba(255, 117, 23, 0.76);
}

@keyframes scoop-speed-run-score-tick {
  0% { transform: scale(1); }
  38% { color: #fff; transform: scale(1.18) translateZ(16px); }
  100% { transform: scale(1); }
}

@keyframes scoop-speed-run-slam {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(3.4) rotate(-5deg); filter: blur(12px); }
  18% { opacity: 1; transform: translate(-50%, -50%) scale(0.88) rotate(1deg); filter: blur(0); }
  27% { transform: translate(-50%, -50%) scale(1.07) rotate(0); }
  38%, 72% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -54%) scale(1.04); }
}

@keyframes scoop-speed-run-ring {
  from { width: 3rem; height: 3rem; opacity: 0.9; }
  to { width: min(90vw, 62rem); height: min(45vw, 25rem); opacity: 0; }
}

@media (max-width: 600px) {
  [data-scoop-speed-run="hud"] {
    top: max(7px, env(safe-area-inset-top));
    max-width: calc(100vw - 24px);
  }

  [data-scoop-speed-run="score-plate"] {
    min-width: 8.25rem;
  }

  [data-scoop-speed-run="score"] {
    padding: 0.5rem 1rem 0.46rem;
    font-size: 1rem;
  }

  [data-scoop-speed-run="activation"] {
    width: calc(100vw - 24px);
    font-size: clamp(2rem, 10vw, 3rem);
    line-height: 1.5;
  }

  [data-scoop-speed-run-effect] {
    top: max(7px, env(safe-area-inset-top));
    width: min(13rem, calc(100vw - 20px));
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-scoop-speed-run="activation"] {
    text-shadow: 0 2px 0 #a73c00, 0 0 14px rgba(255, 167, 34, 0.58);
    animation: scoop-speed-run-calm 1.2s ease-out both;
  }

  [data-scoop-speed-run="activation"]::before,
  [data-scoop-speed-run="activation"]::after,
  .scoop-speed-run-flame {
    display: none;
  }

  .scoop-speed-run-score--tick {
    animation: none;
  }
}

@keyframes scoop-speed-run-calm {
  0%, 100% { opacity: 0; }
  20%, 72% { opacity: 1; }
}