.flaps {
  --flap-h: 2.5rem;
  --flap-top: #1c3554;
  --flap-bottom: #152b47;
  --flap-ink: var(--c-text);

  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--flap-h) * 0.16) calc(var(--flap-h) * 0.32);
  font-family: var(--font-display);
  font-size: calc(var(--flap-h) * 0.6);
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  color: var(--flap-ink);
}

.flaps--accent {
  --flap-top: #f7c23a;
  --flap-bottom: #eeb11c;
  --flap-ink: var(--c-accent-ink);
}

.flaps__word {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--flap-h) * 0.08);
}

.flaps__gap { width: calc(var(--flap-h) * 0.16); }

.flaps__sep {
  padding-inline: calc(var(--flap-h) * 0.04);
  font-weight: 600;
  color: var(--c-text-muted);
}

.flap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--flap-h) * 0.7);
  height: var(--flap-h);
  border-radius: calc(var(--flap-h) * 0.1);
  background: linear-gradient(180deg, var(--flap-top) 0 50%, var(--flap-bottom) 50% 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 2px 4px rgba(0, 0, 0, 0.35);
  perspective: calc(var(--flap-h) * 5);
}

.flap::before {
  content: attr(data-prev);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  background: linear-gradient(180deg, var(--flap-top) 0 50%, transparent 50%);
  clip-path: inset(0 0 50% 0);
  transform-origin: 50% 50%;
  visibility: hidden;
}

.flap.is-flipping::before {
  visibility: visible;
  animation: mechanica-flap 80ms ease-in both;
}

@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  [data-flaps] .flap:not(.is-flipping) {
    color: color-mix(in srgb, var(--flap-ink) 30%, transparent);
  }
}

.flap::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  z-index: 1;
  height: 4px;
  margin-top: -2px;
  background:
    linear-gradient(var(--c-bg-deep), var(--c-bg-deep)) left center / 2px 4px no-repeat,
    linear-gradient(var(--c-bg-deep), var(--c-bg-deep)) right center / 2px 4px no-repeat,
    linear-gradient(rgba(7, 17, 32, 0.85), rgba(7, 17, 32, 0.85)) center / 100% 1px no-repeat;
}

@keyframes mechanica-flap {
  to { transform: rotateX(-90deg); }
}

.scoreboard {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  max-width: 100%;
  padding: var(--sp-4) var(--sp-6);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius);
  background-color: rgba(7, 17, 32, 0.84);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

.scoreboard::after {
  content: "";
  position: absolute;
  inset: 6px;
  pointer-events: none;
  background:
    radial-gradient(circle at 3px 3px, rgba(255, 255, 255, 0.3) 1.4px, transparent 2px) left top / 6px 6px no-repeat,
    radial-gradient(circle at 3px 3px, rgba(255, 255, 255, 0.3) 1.4px, transparent 2px) right top / 6px 6px no-repeat,
    radial-gradient(circle at 3px 3px, rgba(255, 255, 255, 0.3) 1.4px, transparent 2px) left bottom / 6px 6px no-repeat,
    radial-gradient(circle at 3px 3px, rgba(255, 255, 255, 0.3) 1.4px, transparent 2px) right bottom / 6px 6px no-repeat;
}

.scoreboard__cell {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-inline: var(--sp-6);
}

.scoreboard__cell:first-child { padding-left: 0; }
.scoreboard__cell:last-child { padding-right: 0; }
.scoreboard__cell + .scoreboard__cell { border-left: 1px solid var(--c-line); }

.scoreboard__label {
  font-family: var(--font-display);
  font-size: var(--fs-tiny);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.scoreboard__value {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 2.5rem;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
}

.scoreboard__value small {
  margin-top: 2px;
  font-family: var(--font-body);
  font-size: var(--fs-tiny);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--c-text-muted);
}

.scoreboard__value--accent { color: var(--c-accent); }

.scoreboard__result {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

@media (max-width: 700px) {
  .scoreboard .flaps { --flap-h: 2.125rem; }
}

@media (max-width: 400px) {
  .scoreboard .flaps { --flap-h: 1.875rem; }
}