/* Finale: outcome banner over the stage, standings + awards in the dock. */

.outcome {
  position: absolute;
  top: 0;
  left: 0; right: 0;
  padding: calc(var(--topbar-h) + var(--safe-t) + 2px) 16px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(6, 6, 15, 0.82) 0%, rgba(6, 6, 15, 0.55) 65%, rgba(6, 6, 15, 0) 100%);
  --accent: var(--c-green);
}
.results[data-outcome="robot"] .outcome { --accent: var(--c-red); }
.results[data-outcome="wipe"] .outcome { --accent: var(--c-pink); }
.outcome-icon { font-size: clamp(2rem, 10vw, 3.4rem); line-height: 1.1; animation: outcome-icon 0.8s cubic-bezier(0.2, 0.9, 0.3, 1.5) both; }
.outcome-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.2rem, 6.6vw, 2.8rem);
  line-height: 1.05;
  overflow-wrap: anywhere;
  text-transform: uppercase;
  color: var(--accent);
  text-shadow: 0 0 30px color-mix(in srgb, var(--accent) 70%, transparent), 0 3px 0 rgba(0, 0, 0, 0.6);
  animation: outcome-title-in 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.2) 0.15s both;
}
@keyframes outcome-title-in { from { opacity: 0; transform: scale(1.5); filter: blur(6px); } }
.outcome-sub { max-width: 36em; font-size: clamp(0.82rem, 3.4vw, 1rem); font-weight: 600; color: var(--c-text); text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9); }
@keyframes outcome-icon { from { opacity: 0; transform: scale(0.2) rotate(-40deg); } }

.panel.results-dock { max-height: 54%; padding-bottom: calc(var(--reactions-h) + 10px + var(--safe-b)); }
.results-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: -6px 0 -4px; }
.results-home { margin-right: -10px; padding: 0 10px; }
.results-foot { flex-direction: row; align-items: stretch; }
.results-foot .btn-lg, .results-foot .scores-wait { flex: 1; min-width: 0; }
.results-foot .scores-wait { display: flex; align-items: center; justify-content: center; min-height: 58px; }
.results-recap { flex: none; min-height: 58px; border-radius: 16px; }
/* Phones: the recap button is an icon beside REMATCH (its label stays for screen readers). */
@media (orientation: portrait) {
  .results-recap { width: 58px; padding: 0; font-size: 1.35rem; }
  .results-recap-label {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

@media (orientation: landscape) and (min-width: 700px) {
  /* Clear of the reactions column on the left; the title is sized by the stage width left of the sidebar (not by the
     safe rect, which this banner itself shapes). */
  .outcome { right: var(--sidebar-w); padding: calc(var(--topbar-h) + var(--safe-t) + 8px) 16px 16px calc(max(12px, var(--safe-l)) + 72px); }
  .outcome-title { font-size: clamp(1.2rem, calc((100vw - var(--sidebar-w)) * 0.058), 2.8rem); }
  .outcome-icon { font-size: clamp(1.6rem, calc((100vw - var(--sidebar-w)) * 0.07), 3.4rem); }
  .panel.results-dock { max-height: none; padding-bottom: calc(20px + var(--safe-b)); }
  .results-foot { flex-wrap: wrap; }
  .results-foot .btn-lg, .results-foot .scores-wait { flex-basis: 100%; }
  .results-recap { flex: 1; min-height: 48px; }
}