/* Board-relative achievement card; the toolbar and resize handle stay available. */
.game-result {
  --glow: #ffd36b;
  --ink-1: #fffbe1; --ink-2: #ffe283; --ink-3: #f5b73b; --ink-4: #fff2bc;
  --card-1: #3b1f68; --card-2: #1e1236;
  --rim-1: #fff0b3; --rim-2: #e9a93a; --rim-3: #8a4fd0;
  --medal-1: #fff4c7; --medal-2: #f7c348; --medal-3: #b8741c;
  --shade: #431c65;
  --backdrop: #1d0f33;
  position: absolute;
  inset: 1rem;
  z-index: 20;
  container-type: inline-size;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 8px;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--backdrop) 45%, transparent), color-mix(in srgb, var(--backdrop) 75%, transparent));
  backdrop-filter: blur(2px) saturate(.85);
  -webkit-backdrop-filter: blur(2px) saturate(.85);
  animation: game-result-fade 400ms ease-out both;
}
.game-result[hidden], .game-result [hidden] { display: none; }

/* Slow light rays behind the card. */
.game-result-rays {
  position: absolute;
  width: 140cqw;
  aspect-ratio: 1;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--glow) 34%, transparent) 0deg 7deg, transparent 7deg 22.5deg);
  -webkit-mask-image: radial-gradient(circle, #000 0%, #0008 30%, transparent 62%);
  mask-image: radial-gradient(circle, #000 0%, #0008 30%, transparent 62%);
  animation: game-result-spin 24s linear infinite, game-result-fade 900ms ease-out both;
}

.game-result-magic {
  position: relative;
  width: 84%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 7cqw 5cqw 6cqw;
  border: .9cqw solid transparent;
  border-radius: 7cqw;
  color: #fff5d4;
  text-align: center;
  background:
    radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--glow) 28%, transparent), transparent 65%) padding-box,
    linear-gradient(170deg, var(--card-1), var(--card-2)) padding-box,
    linear-gradient(150deg, var(--rim-1), var(--rim-2) 40%, var(--rim-3) 75%, var(--rim-1)) border-box;
  box-shadow: 0 0 6cqw color-mix(in srgb, var(--glow) 45%, transparent), 0 3cqw 6cqw #0008, inset 0 .5cqw 0 #ffffff22;
  animation: game-result-arrive 750ms cubic-bezier(.2, 1.5, .4, 1) both;
}
.game-result .game-result-magic:has(.game-result-icon:not([hidden])) { margin-top: 10cqw; padding-top: 0; }

/* Icon sits in a medallion that rises out of the card's top edge. */
.game-result-icon {
  display: grid;
  place-items: center;
  width: 26cqw;
  aspect-ratio: 1;
  margin-top: -14cqw;
  border-radius: 50%;
  font-size: 14cqw;
  line-height: 1;
  background: radial-gradient(circle at 35% 30%, var(--medal-1), var(--medal-2) 45%, var(--medal-3) 100%);
  box-shadow: 0 0 0 1cqw var(--card-2), 0 0 0 1.6cqw var(--rim-2), 0 0 7cqw color-mix(in srgb, var(--glow) 80%, transparent), inset 0 -1.5cqw 2cqw #0004, inset 0 1cqw 1.5cqw #fff8;
  animation: game-result-drop 800ms 150ms cubic-bezier(.2, 1.6, .4, 1) both;
}
.game-result-icon:not([hidden]) + .game-result-number,
.game-result-icon:not([hidden]) + .game-result-title { margin-top: 3.5cqw; }

.game-result-number, .game-result-title {
  font-family: Georgia, serif;
  font-weight: 900;
  line-height: 1.05;
  color: var(--ink-2);
  background: linear-gradient(170deg, var(--ink-1) 15%, var(--ink-2) 40%, var(--ink-3) 65%, var(--ink-4) 90%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 1.2cqw color-mix(in srgb, var(--glow) 55%, transparent)) drop-shadow(0 .8cqw .6cqw var(--shade));
  animation: game-result-rise 600ms 250ms cubic-bezier(.16, 1, .3, 1) both;
}
.game-result-number { font-size: var(--result-number-size, 32cqw); }
.game-result-title { font-size: var(--result-title-size, 14cqw); }

.game-result-label {
  max-width: 100%;
  box-sizing: border-box;
  margin-top: 3.5cqw;
  padding: .45em 1.1em;
  border: 1px solid #ffffff2e;
  border-radius: 999px;
  background: #ffffff14;
  font-size: clamp(13px, 3.6cqw, 22px);
  font-weight: 600;
  line-height: 1.35;
  color: #fff8e6;
  text-shadow: 0 1px 2px #0007;
  animation: game-result-rise 600ms 400ms cubic-bezier(.16, 1, .3, 1) both;
}

.game-result-action {
  margin-top: 3.5cqw;
  min-width: 44px;
  min-height: 44px;
  padding: .5em 1.6em;
  border: 1px solid var(--rim-2);
  border-radius: 999px;
  background: linear-gradient(var(--medal-1), var(--medal-2));
  color: var(--card-2);
  font: inherit;
  font-size: clamp(14px, 4cqw, 24px);
  font-weight: 700;
  cursor: pointer;
  animation: game-result-rise 600ms 550ms cubic-bezier(.16, 1, .3, 1) both;
}
.game-result-action:focus-visible { outline: 3px solid var(--ink-1); outline-offset: 3px; }

.game-result-star {
  position: absolute;
  left: var(--x);
  top: var(--y);
  translate: -50% -50%;
  color: var(--ink-4);
  font-size: var(--size, 5cqw);
  line-height: 1;
  text-shadow: 0 0 2cqw var(--glow), 0 0 4cqw #dc9dff;
  animation: game-result-spark 900ms var(--delay, 0ms) ease-out both, game-result-twinkle 2.4s calc(var(--delay, 0ms) + 900ms) ease-in-out infinite;
}
.game-result-announcement { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Modes: success keeps the golden magic; fail cools it down; draw turns silver. */
.game-result[data-mode="fail"] {
  --glow: #8fb0ff;
  --ink-1: #f4f8ff; --ink-2: #d4e1ff; --ink-3: #93acec; --ink-4: #eef3ff;
  --card-1: #1f2f5c; --card-2: #121a33;
  --rim-1: #d9e4ff; --rim-2: #7d95d6; --rim-3: #3c4f8f;
  --medal-1: #eef3ff; --medal-2: #a9bdea; --medal-3: #4f639e;
  --shade: #1c2a65;
  --backdrop: #0e1730;
}
.game-result[data-mode="fail"] .game-result-rays { display: none; }
.game-result[data-mode="fail"] .game-result-star { opacity: .5; animation: game-result-spark 900ms var(--delay, 0ms) ease-out both; }
.game-result[data-mode="fail"] .game-result-icon { animation: game-result-drop 800ms 150ms cubic-bezier(.2, 1.6, .4, 1) both, game-result-wobble 700ms 950ms ease-in-out both; }
.game-result[data-mode="draw"] {
  --glow: #e6e0ff;
  --ink-1: #ffffff; --ink-2: #ece8f6; --ink-3: #b6afcc; --ink-4: #f7f5fb;
  --card-1: #3a3456; --card-2: #1f1b30;
  --rim-1: #ffffff; --rim-2: #b9b2d2; --rim-3: #6f6696;
  --medal-1: #ffffff; --medal-2: #d6d1e6; --medal-3: #7f789c;
  --shade: #2c2443;
  --backdrop: #1c1830;
}
.game-result[data-mode="draw"] .game-result-rays { opacity: .55; }

@keyframes game-result-fade { from { opacity: 0; } }
@keyframes game-result-spin { to { rotate: 360deg; } }
@keyframes game-result-arrive {
  from { opacity: 0; transform: scale(.6) translateY(6cqw); }
  to { opacity: 1; transform: none; }
}
@keyframes game-result-drop {
  from { opacity: 0; transform: translateY(-10cqw) scale(.4) rotate(-25deg); }
  to { opacity: 1; transform: none; }
}
@keyframes game-result-rise {
  from { opacity: 0; transform: translateY(3cqw); }
  to { opacity: 1; transform: none; }
}
@keyframes game-result-spark {
  from { opacity: 0; transform: scale(.1) rotate(-70deg); }
  65% { opacity: 1; transform: scale(1.3) rotate(10deg); }
  to { opacity: 1; transform: none; }
}
@keyframes game-result-twinkle {
  50% { opacity: .45; transform: scale(.75) rotate(20deg); }
}
@keyframes game-result-wobble {
  20% { rotate: -9deg; } 40% { rotate: 7deg; } 60% { rotate: -4deg; } 80% { rotate: 2deg; }
}
@media (max-width: 600px) { .game-result { inset: .5rem; } }
@media (prefers-reduced-motion: reduce) {
  .game-result, .game-result *, .game-result *::before { animation: none !important; }
}