/* Modal-style presentation, with the authoritative finished board behind it. */
.result-screen { position: fixed; inset: 0; z-index: 10; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; background: var(--scrim); padding: var(--space-4); overflow-y: auto; }
.result-screen > .result-card { position: relative; justify-self: center; min-width: 0; width: min(520px, 100%); max-width: 520px; max-height: calc(100svh - 48px); overflow-x: hidden; overflow-y: auto; padding: var(--space-6); }
.result-card > :not(.confetti) { position: relative; z-index: 1; }
.result-room { color: var(--muted); text-align: center; margin-bottom: var(--space-3); }
#result-heading { text-align: center; font: 900 clamp(2rem, 6vw, 3.6rem)/1.15 var(--font-display); letter-spacing: -.045em; margin: 0; color: var(--purple); }
#result-heading:focus { outline: var(--focus-ring); outline-offset: var(--space-1); border-radius: var(--radius-sm); }
.result-subtitle { text-align: center; color: var(--muted); margin: var(--space-3) 0 var(--space-6); }
.final-counts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); list-style: none; padding: 0; }
.final-counts li { display: grid; min-width: 0; gap: var(--space-3); padding: var(--space-4) var(--space-2); border: var(--border-control) solid var(--purple); border-radius: var(--radius-panel); background: var(--paper); text-align: center; overflow-wrap: anywhere; }
.final-counts span { font-size: var(--text-sm); }
.final-counts strong { font-size: var(--text-xl); }
.total-calls { text-align: center; font-weight: 700; border-bottom: var(--border-control) dashed var(--line); padding: var(--space-3) 0 var(--space-4); }
.rematch-status { min-height: 40px; line-height: 1.5; font-weight: 700; margin: var(--space-4) 0 var(--space-3); }
#result-home { margin-top: var(--space-3); width: 100%; }
.confetti { position: absolute; inset: 0 0 auto; height: 210px; pointer-events: none; z-index: 0; }
.confetti span { position: absolute; left: calc(var(--i) * 7%); width: 9px; height: 16px; background: var(--yellow); border: var(--border-thin) solid var(--purple); }
.confetti span:nth-child(3n) { background: var(--pink); border-radius: 50%; }
.confetti span:nth-child(3n + 1) { background: var(--teal); }
dialog { max-width: min(400px, calc(100vw - 32px)); padding: var(--space-6); border: var(--border-ticket) solid var(--purple); border-radius: var(--radius-ticket); color: var(--ink); background: var(--surface); }
dialog::backdrop { background: var(--scrim); }
dialog h2 { margin-top: 0; }
dialog p { line-height: 1.6; }
.leave-actions { display: grid; gap: var(--space-3); }
.leave-actions .primary { margin: 0; display: block; }
@media (prefers-reduced-motion: reduce) { .confetti { display: none !important; } }