.winner-scene,
.show-complete-scene {
  position: absolute;
  left: 54px;
  top: 280px;
  width: 972px;
  height: 778px;
  overflow: hidden;
}

.winner-rays {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 900px;
  height: 900px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255,212,91,.075) 0 7deg, transparent 7deg 15deg);
  mask-image: radial-gradient(circle, black 0 36%, transparent 72%);
  opacity: 0;
  transition: opacity 800ms ease;
}

.winner-label {
  position: absolute;
  left: 0;
  top: 18px;
  width: 972px;
  height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gold);
  font-size: 46px;
  font-weight: 950;
  letter-spacing: .12em;
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity 420ms ease, transform 580ms var(--ease-enter);
}

.winner-main-panel {
  position: absolute;
  left: 0;
  top: 122px;
  width: 972px;
  height: 420px;
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  align-items: center;
  padding: 36px 48px;
  border: 3px solid rgba(255, 212, 91, .7);
  border-radius: 36px;
  background:
    radial-gradient(circle at 22% 50%, rgba(255,212,91,.16), transparent 34%),
    radial-gradient(circle at 80% 14%, rgba(38,231,255,.09), transparent 30%),
    linear-gradient(145deg, rgba(48, 35, 18, .98), rgba(5, 11, 28, .99));
  box-shadow: 0 0 50px rgba(255,212,91,.18), 0 0 100px rgba(38,131,255,.08), inset 0 1px 0 rgba(255,255,255,.08);
  opacity: 0;
  transform: scale(.88);
  transition: opacity 480ms ease 120ms, transform 820ms var(--ease-impact) 120ms;
  overflow: hidden;
}

.winner-emblem {
  width: 190px;
  height: 190px;
  display: grid;
  place-items: center;
  border: 4px solid rgba(255,212,91,.72);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,212,91,.16), rgba(7,13,28,.96) 70%);
  color: var(--color-gold);
  box-shadow: 0 0 38px rgba(255,212,91,.14), inset 0 0 28px rgba(255,212,91,.1);
  font-size: 88px;
  font-weight: 950;
}

.winner-copy { min-width: 0; padding-left: 34px; }
.winner-copy span { color: var(--color-cyan); font-size: 24px; font-weight: 900; letter-spacing: .1em; }
.winner-name {
  display: block;
  margin-top: 14px;
  color: var(--color-white);
  font-size: 76px;
  font-weight: 950;
  line-height: .95;
  letter-spacing: -.045em;
  overflow-wrap: anywhere;
}
.winner-score {
  display: block;
  margin-top: 22px;
  color: var(--color-gold);
  font-size: 58px;
  font-weight: 950;
  letter-spacing: -.035em;
}
.winner-margin { display: block; margin-top: 12px; color: var(--color-muted); font-size: 25px; font-weight: 800; }

.winner-stats-panel {
  position: absolute;
  left: 0;
  top: 564px;
  width: 972px;
  height: 188px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 420ms ease 420ms, transform 620ms var(--ease-enter) 420ms;
}
.winner-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(123,191,255,.22);
  border-radius: 24px;
  background: rgba(7,15,34,.94);
}
.winner-stat span { color: var(--color-muted); font-size: 19px; font-weight: 900; letter-spacing: .085em; }
.winner-stat strong { margin-top: 12px; color: var(--color-white); font-size: 34px; font-weight: 950; text-align: center; }

.winner-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; opacity: 0; transition: opacity 500ms ease 600ms; }
.winner-confetti i {
  position: absolute;
  left: var(--x);
  top: -30px;
  width: var(--w);
  height: var(--h);
  border-radius: 3px;
  background: var(--c);
  transform: rotate(var(--r));
  animation: winner-confetti-fall var(--d) linear var(--delay) infinite;
}

.winner-scene.is-revealed .winner-label,
.winner-scene.is-revealed .winner-main-panel,
.winner-scene.is-revealed .winner-stats-panel { opacity: 1; transform: none; }
.winner-scene.is-celebrating .winner-rays,
.winner-scene.is-celebrating .winner-confetti { opacity: 1; }
.winner-scene.is-celebrating .winner-main-panel { animation: winner-panel-glow 2200ms ease-in-out infinite; }

@keyframes winner-panel-glow { 0%,100% { box-shadow: 0 0 42px rgba(255,212,91,.16), inset 0 1px 0 rgba(255,255,255,.08); } 50% { box-shadow: 0 0 72px rgba(255,212,91,.26), 0 0 110px rgba(38,131,255,.09), inset 0 1px 0 rgba(255,255,255,.08); } }
@keyframes winner-confetti-fall { to { transform: translateY(900px) rotate(calc(var(--r) + 580deg)); } }

.show-complete-panel {
  position: absolute;
  left: 0;
  top: 86px;
  width: 972px;
  height: 500px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 46px;
  border: 2px solid rgba(38,231,255,.42);
  border-radius: 34px;
  background:
    radial-gradient(circle at 50% 14%, rgba(38,231,255,.14), transparent 38%),
    linear-gradient(145deg, rgba(12,31,69,.98), rgba(5,10,25,.99));
  box-shadow: var(--shadow-cyan);
  text-align: center;
}
.show-complete-panel span { color: var(--color-gold); font-size: 28px; font-weight: 900; letter-spacing: .11em; }
.show-complete-panel h1 { margin: 22px 0 0; color: var(--color-white); font-size: 80px; font-weight: 950; line-height: .95; letter-spacing: -.04em; }
.show-complete-panel p { margin: 28px 0 0; color: var(--color-muted); font-size: 32px; font-weight: 750; line-height: 1.15; }
.show-complete-actions {
  position: absolute;
  left: 0;
  top: 610px;
  width: 972px;
  height: 142px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.show-complete-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(123,191,255,.24);
  border-radius: 24px;
  background: rgba(7,15,34,.94);
  text-align: center;
}
.show-complete-action span { color: var(--color-muted); font-size: 18px; font-weight: 900; letter-spacing: .08em; }
.show-complete-action strong { margin-top: 10px; color: var(--color-cyan); font-size: 27px; font-weight: 950; }
.show-complete-scene.is-returning .show-complete-panel { animation: show-complete-return 900ms var(--ease-enter) both; }
@keyframes show-complete-return { 50% { transform: scale(.98); filter: brightness(1.18); } }

.no-flash .winner-confetti,
.reduced-motion .winner-confetti { display: none; }
.reduced-motion .winner-scene *, .reduced-motion .show-complete-scene * { animation: none !important; transition: none !important; }
