/* Board-relative magic result; the toolbar and resize handle stay available. */
.game-result {
  position: absolute;
  inset: 1rem;
  z-index: 20;
  container-type: inline-size;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: radial-gradient(ellipse at center, #2c164e55, #21182c38);
}
.game-result[hidden] { display: none; }
.game-result-magic {
  position: relative;
  width: 94%;
  height: 45cqw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff5d4;
  text-align: center;
  isolation: isolate;
  animation: game-result-arrive 850ms cubic-bezier(.16, 1, .3, 1) both;
}
.game-result-magic::before {
  content: "";
  position: absolute;
  inset: -15% 5%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(ellipse, #b68affaa 0%, #8b4dc166 35%, #6c33a300 70%);
  filter: blur(2cqw);
}
.game-result-number {
  font-family: Georgia, serif;
  font-size: var(--result-number-size, 32cqw);
  line-height: 1;
  font-weight: 900;
  color: #ffe283;
  background: linear-gradient(160deg, #fffbe1 12%, #ffe283 38%, #f5b73b 62%, #fff2bc 86%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 1cqw #ffe6a299) drop-shadow(0 1cqw 1cqw #431c65);
}
.game-result-star {
  position: absolute;
  color: #fff2ad;
  font-size: 7cqw;
  line-height: 1;
  text-shadow: 0 0 2cqw #ffe79d, 0 0 4cqw #dc9dff;
  animation: game-result-spark 1100ms ease-out both;
}
.game-result-star:nth-child(1) { left: 8%; top: 6%; }
.game-result-star:nth-child(2) { right: 9%; top: 4%; animation-delay: 80ms; }
.game-result-star:nth-child(3) { left: 1%; top: 48%; font-size: 4cqw; animation-delay: 140ms; }
.game-result-star:nth-child(4) { right: 2%; top: 52%; font-size: 5cqw; animation-delay: 200ms; }
.game-result-star:nth-child(5) { left: 18%; bottom: 0; font-size: 4cqw; animation-delay: 100ms; }
.game-result-star:nth-child(6) { right: 19%; bottom: 0; font-size: 4cqw; animation-delay: 160ms; }
.game-result-announcement { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@keyframes game-result-arrive {
  from { opacity: 0; transform: scale(.55) translateY(3cqw); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes game-result-spark {
  from { opacity: 0; transform: scale(.1) rotate(-70deg); }
  65% { opacity: 1; transform: scale(1.25) rotate(10deg); }
  to { opacity: 1; transform: scale(1) rotate(0); }
}
@media (max-width: 700px) { .game-result { inset: .5rem; } }
@media (prefers-reduced-motion: reduce) {
  .game-result-magic, .game-result-star { animation: none; }
}

.game-result-label { max-width: 90%; margin-top: 2cqw; font-size: clamp(14px, 4cqw, 24px); line-height: 1.3; text-shadow: 0 2px 4px #21182c; }