.results-preview {
  position: relative;
  min-width: 0;
  margin-top: 48px;
  padding: clamp(23px, 3.8vw, 40px);
  border: 1px solid #a36c8d70;
  border-radius: 20px;
  background: radial-gradient(ellipse at 12% 0, #c6609412, transparent 65%), #100b10c9;
}

.results-preview-heading h2 {
  margin: 0;
  color: var(--pink, #ffd0e7);
  font: 500 clamp(23px, 3vw, 35px)/1.35 var(--display, sans-serif);
  letter-spacing: -.06em;
}

.results-preview-counts {
  margin: 10px 0 0;
  color: #cbb0c1;
  font: 10px/1.8 var(--mono, monospace);
}

.results-preview-chart { margin: 27px 0 18px; }
.results-preview-scope {
  margin: 0 0 10px;
  color: #cbb0c1;
  font: 10px/1.6 var(--mono, monospace);
}

.results-preview-bar {
  display: flex;
  width: 100%;
  height: 24px;
  overflow: hidden;
  border: 1px solid #d6a9c168;
  border-radius: 20px;
  background: #352030;
}

.results-preview-segment { display: block; flex: none; height: 100%; }
.results-preview-segment.is-played { background: var(--pink, #ffd0e7); }
.results-preview-segment.is-not-played {
  background: repeating-linear-gradient(135deg, #78536b 0 5px, #634259 5px 7px);
}

.results-preview-legend {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 18px;
}

.results-preview-outcome { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; }
.results-preview-percent {
  color: var(--pink, #ffd0e7);
  font: 500 clamp(27px, 3.5vw, 39px)/1.25 var(--display, sans-serif);
  letter-spacing: -.065em;
  font-variant-numeric: tabular-nums;
}

.results-preview-outcome.is-not-played .results-preview-percent { color: #d2b2c7; }
.results-preview-outcome-label { color: #efd6e5; font: 14px/1.5 var(--pixel, monospace); }
.results-preview-outcome-count { flex-basis: 100%; margin-top: 3px; color: #bd9fb2; font: 10px/1.6 var(--mono, monospace); }

.results-preview-note {
  max-width: 76ch;
  margin: 20px 0 0;
  color: #bca0b2;
  font: 9px/1.85 var(--mono, monospace);
}

.results-preview-note a { color: #e8bfd7; text-decoration: underline; text-underline-offset: 3px; }
.results-preview-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 25px; }
.results-preview-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 51px;
  padding: 13px 22px;
  border: 1px solid var(--pink, #ffd0e7);
  border-radius: 30px;
  background: var(--pink, #ffd0e7);
  color: #180d15;
  font: 15px/1.4 var(--pixel, monospace);
  text-align: center;
  text-decoration: none;
}

.results-preview-primary:hover { background: #ffe4f2; }
.results-preview-secondary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--pink, #ffd0e7);
  font: 13px/1.5 var(--pixel, monospace);
  text-decoration: underline;
  text-underline-offset: 5px;
}

.results-preview a:focus-visible { outline: 2px solid var(--pink, #ffd0e7); outline-offset: 5px; }
.results-preview-empty { margin: 20px 0 0; color: #cfb3c6; font: 12px/1.8 var(--mono, monospace); }

@media (max-width: 550px) {
  .results-preview { margin-top: 34px; padding: 22px 18px; border-radius: 14px; }
  .results-preview-heading h2 { font-size: 25px; }
  .results-preview-counts { font-size: 9px; }
  .results-preview-chart { margin-top: 23px; }
  .results-preview-scope { font-size: 9px; }
  .results-preview-legend { gap: 14px; }
  .results-preview-outcome { align-content: start; }
  .results-preview-outcome-label { flex-basis: 100%; margin-top: 4px; font-size: 12px; }
  .results-preview-percent { font-size: 30px; }
  .results-preview-outcome-count { font-size: 9px; }
  .results-preview-actions { gap: 9px; margin-top: 22px; }
  .results-preview-primary { width: 100%; padding-inline: 13px; font-size: 14px; }
  .results-preview-secondary { justify-content: center; width: 100%; font-size: 12px; }
}