#score-dialog {
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: clamp(16px, 5vw, 48px);
  border: 0;
  border-radius: var(--radius-none);
  color: var(--ink);
  background: var(--ground);
}

#score-dialog[open] { display: flex; animation: score-appear .22s ease-out both; }
#score-dialog::backdrop { background: var(--ground); }

.score-stage {
  width: min(100%, 660px);
  margin: auto;
  padding: clamp(20px, 7vh, 58px) clamp(13px, 5vw, 44px);
  border: 1px solid var(--hairline);
  border-top: var(--stroke-horizon) solid var(--horizon);
  background: var(--ground-raised);
  text-align: center;
}

.score-stage::before {
  content: "";
  display: block;
  width: clamp(56px, 10vh, 80px);
  aspect-ratio: 1;
  margin: 0 auto var(--space-3);
  background: var(--brand-mark) center / contain no-repeat;
  animation: score-stamp .46s .08s ease-out both;
}

.score-kicker {
  margin: 0;
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: .25em;
}

#score-title {
  margin: var(--space-2) 0 0;
  font-family: var(--font-display);
  font-size: clamp(28px, 6vw, 46px);
  line-height: 1.08;
  font-weight: 800;
  font-variation-settings: "wdth" 125;
  text-transform: uppercase;
}

.score-summary { margin: 0; color: var(--ink-muted); font-size: clamp(14px, 2.8vw, 17px); font-variant-numeric: tabular-nums; }

.score-continue {
  min-height: 44px;
  margin-top: 23px;
  padding: 10px 22px;
  border: 0;
  border-radius: var(--radius-none);
  color: var(--ground);
  background: var(--ink);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.score-continue:hover { opacity: .9; }

@keyframes score-appear { from { opacity: 0; } to { opacity: 1; } }
@keyframes score-stamp {
  from { opacity: 0; transform: translateY(9px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  #score-dialog[open], .score-stage::before { animation: none; }
}

.score-points {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: var(--space-2);
  margin: 14px 0 11px;
  font-variant-numeric: tabular-nums;
}

#score-point-value {
  font-family: var(--font-display);
  font-size: clamp(58px, 17vw, 108px);
  line-height: 1;
  font-weight: 800;
}

.score-points small { color: var(--ink-muted); font-size: clamp(14px, 3.5vw, 21px); font-weight: 700; }