/* Magical scenes stay inside the bordered game window. */
.game-window .completion-scene {
  position: absolute; inset: 0; z-index: 260; isolation: isolate;
  display: grid; place-items: center; overflow: hidden;
  border-radius: inherit; padding: clamp(12px, 2vw, 25px);
  background: #151020; color: #fff0cf; font-family: var(--sans);
  box-shadow: inset 0 0 0 1px #edcf8e85, inset 0 0 70px #070710bf;
  animation: completion-scene-reveal .45s ease-out both;
}
.completion-scene::before, .completion-scene::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: -1;
}
.completion-scene::before {
  background: linear-gradient(#130e1c15, #170d26a6), url('assets/scenes/run-complete.webp') center / cover no-repeat;
  opacity: .93; animation: completion-scene-palace 5s ease-out both;
}
.completion-scene-win::before {
  background-image: linear-gradient(#130e1c14, #170d269c), url('assets/scenes/victory.webp');
  animation-duration: 9s;
}
.completion-scene::after {
  background: radial-gradient(ellipse at 50% 43%, #edc78312 0, #100b2140 51%, #100a1ccc 100%);
  box-shadow: inset 0 0 0 5px #e9cc8410;
}
.completion-scene-stage {
  width: min(100%, 960px); height: 100%; min-height: 0;
  display: grid; grid-template-rows: auto minmax(64px, 1fr) auto auto auto;
  align-items: center; justify-items: center; gap: clamp(8px, 1.3vh, 14px);
  text-align: center; position: relative;
}
.completion-scene-header { width: 100%; margin: 0; padding: 0; }
.completion-scene-eyebrow {
  margin: 0 0 12px; color: #f2d397; font-size: 10px; letter-spacing: 2.6px;
  font-weight: 500; text-transform: uppercase; text-shadow: 0 2px 10px #170b21;
}
.completion-scene-title {
  margin: 0; color: #fff2d0; font-family: var(--serif); font-size: clamp(30px, 4.7vw, 56px);
  line-height: 1.06; letter-spacing: -1.5px; font-weight: 400; text-wrap: balance;
  text-shadow: 0 2px 15px #080610, 0 0 30px #dab27142;
}
.completion-scene-win .completion-scene-title { font-size: clamp(38px, 6vw, 70px); }
.completion-scene-subtitle {
  margin: 12px 0 0; font-size: clamp(12px, 1.7vw, 18px); letter-spacing: 1px;
  color: #ead3aa; line-height: 1.4; text-shadow: 0 2px 8px #080610;
}
.completion-scene-win .completion-scene-subtitle { color: #ffde9a; }
.completion-scene-visual {
  position: relative; width: 100%; height: 100%; min-height: 0;
  display: grid; place-items: center; container-type: size; overflow: clip;
}
.completion-scene-medallion {
  position: relative; display: grid; place-items: center; flex-shrink: 0;
  border-radius: 50%; border: 1px solid #ffde8aac;
  background: radial-gradient(circle, #8b653267, #302039ce 55%, #c99c472b 70%, #282031ba);
  box-shadow: 0 0 0 5px #eaca7230, inset 0 0 0 4px #f5d58336,
    inset 0 0 30px #f6d08f20, 0 0 44px #e6bc5b47, 0 8px 25px #0008;
}
.completion-scene-main-medallion {
  width: clamp(62px, 47cqmin, 172px); height: clamp(62px, 47cqmin, 172px);
  animation: completion-scene-heart 5s ease-in-out both;
}
.completion-scene-win .completion-scene-main-medallion {
  width: clamp(50px, 33cqmin, 130px); height: clamp(50px, 33cqmin, 130px);
  animation-duration: 9s;
}
.completion-scene-web {
  position: absolute; inset: 8%; border-radius: 50%; opacity: .9;
  background: repeating-conic-gradient(from 0deg, #edce8800 0deg 42.8deg, #f8d9907a 43deg 43.8deg, #edce8800 44deg 45deg),
    repeating-radial-gradient(circle, transparent 0 12%, #f3d59572 12.7% 13.3%, transparent 14% 25%);
  border: 1px solid #f0cd8561; animation: completion-scene-web-spin 5s ease-out both;
}
.completion-scene-win .completion-scene-web { animation-duration: 9s; }
.completion-scene-jewel {
  position: relative; width: 29%; height: 29%; object-fit: contain;
  filter: drop-shadow(0 0 10px #ffe1a0); z-index: 1;
}
.completion-scene-orbit {
  position: absolute; left: 50%; top: 50%; width: 100cqmin; height: 100cqmin;
  translate: -50% -50%; pointer-events: none;
  animation: completion-scene-orbit-spin 5s cubic-bezier(.2, .6, .2, 1) both;
}
.completion-scene-win .completion-scene-orbit { animation-duration: 9s; }
.completion-scene-thread {
  position: absolute; left: 50%; top: 50%; width: clamp(22px, 9cqmin, 40px);
  height: clamp(22px, 9cqmin, 40px); margin: -12px 0 0 -12px;
  animation: completion-scene-thread-weave 4.5s ease-in-out both;
  animation-delay: var(--thread-delay);
}
.completion-scene-glimmer {
  display: block; width: 100%; height: 100%;
  background-image: url('assets/effects/flyby-sparkles.webp'); background-size: 500% 400%;
  background-repeat: no-repeat; filter: drop-shadow(0 0 10px #ffe0a9);
}
.completion-scene-emblems { position: absolute; inset: 0; pointer-events: none; }
.completion-scene-emblem-position {
  position: absolute; left: 50%; top: 50%; width: 0; height: 0;
  transform: rotate(var(--emblem-angle)) translateY(calc(-1 * clamp(41px, 35cqmin, 132px))) rotate(var(--emblem-return-angle));
}
.completion-scene-small-medallion {
  position: absolute; left: 0; top: 0;
  width: clamp(25px, 13cqmin, 50px); height: clamp(25px, 13cqmin, 50px);
  margin: 0; transform: translate(-50%, -50%); animation: completion-scene-emblem-rise 1.4s ease-out both;
  animation-delay: var(--emblem-delay); box-shadow: 0 0 0 3px #eaca721c, 0 0 20px #edcc8650;
}
.completion-scene-cast {
  width: 100%; max-width: 820px; display: grid; grid-template-columns: repeat(18, minmax(0, 1fr));
  align-items: end; gap: 7px 4px; min-height: 0; padding: 0 4px;
}
.completion-scene-cast-figure {
  grid-column: span 2; width: 100%; max-width: 68px; justify-self: center;
  aspect-ratio: .8; display: block; position: relative;
  filter: drop-shadow(0 0 6px #e1c5838a); animation: completion-scene-cast-arrive .85s ease-out both;
  animation-delay: calc(.4s + var(--cast-delay));
}
.completion-scene-cast-figure:nth-child(10) { grid-column: 2 / span 2; grid-row: 2; }
.completion-scene-cast-sprite {
  position: absolute; inset: 0; display: block; background-repeat: no-repeat; background-size: 500% 400%;
  animation: completion-scene-cast-idle 2.5s step-end infinite;
}
.completion-scene-progress { margin: 0; width: 100%; }
.completion-scene-count { margin: 0; font-family: var(--serif); font-size: clamp(18px, 2.1vw, 26px); color: #fff0c9; }
.completion-scene-run-count { margin: 6px 0 0; font-size: 10px; letter-spacing: 1.4px; color: #dac1ac; text-transform: uppercase; }
.completion-scene-progress-rail { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
.completion-scene-progress-bead { width: 8px; height: 8px; border: 1px solid #dacba35a; border-radius: 50%; background: #160e2380; }
.completion-scene-progress-bead[data-earned='true'] { background: #e9c575; border-color: #ffe0a0; box-shadow: 0 0 8px #f3d1929c; }
.completion-scene-footer { width: 100%; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; }
.completion-scene-return-copy { margin: 0; color: #d5becd; font-size: 11px; line-height: 1.4; }
.completion-scene-skip {
  min-height: 44px; padding: 0 18px; border: 1px solid #ddc28b91; border-radius: 8px;
  background: #241c31d6; color: #fff0cc; box-shadow: inset 0 1px #ffebbc17; font-size: 11px; font-weight: 600;
}
.completion-scene-skip:hover { background: #49334ecc; border-color: #f4d598; }
.completion-scene-skip:focus-visible { outline: 2px solid #ffe1a3; outline-offset: 3px; }
.completion-scene[data-reduced-motion='true'], .completion-scene[data-reduced-motion='true'] *,
.completion-scene[data-reduced-motion='true']::before, .completion-scene[data-reduced-motion='true']::after { animation: none !important; transition: none !important; }
.completion-scene[data-reduced-motion='true'] .completion-scene-thread {
  opacity: .85; transform: rotate(var(--thread-angle)) translateY(calc(-1 * clamp(44px, 36cqmin, 145px)));
}
@keyframes completion-scene-reveal { from { opacity: 0; } to { opacity: 1; } }
@keyframes completion-scene-palace { from { transform: scale(1.035); } to { transform: scale(1); } }
@keyframes completion-scene-heart { 0% { opacity: 0; transform: scale(.8); } 20% { opacity: 1; transform: scale(1); } 75% { box-shadow: 0 0 0 7px #eaca7240, 0 0 65px #e6bc5b8a; } 100% { transform: scale(1); } }
@keyframes completion-scene-web-spin { from { transform: rotate(-90deg); } to { transform: rotate(90deg); } }
@keyframes completion-scene-orbit-spin { from { transform: rotate(-20deg); } to { transform: rotate(225deg); } }
@keyframes completion-scene-thread-weave {
  0% { opacity: 0; transform: rotate(var(--thread-angle)) translateY(calc(-1 * clamp(54px, 44cqmin, 170px))) scale(.4); }
  20%, 58% { opacity: 1; transform: rotate(var(--thread-angle)) translateY(calc(-1 * clamp(44px, 36cqmin, 145px))) scale(1); }
  91%, 100% { opacity: 0; transform: rotate(var(--thread-angle)) translateY(0) scale(.35); }
}
@keyframes completion-scene-emblem-rise { from { opacity: 0; transform: translate(-50%, -50%) scale(.3); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes completion-scene-cast-arrive { from { opacity: 0; transform: translateY(13px); } to { opacity: 1; transform: translateY(0); } }
@keyframes completion-scene-cast-idle {
  0% { background-position: 0% 0%; } 5% { background-position: 25% 0%; } 10% { background-position: 50% 0%; } 15% { background-position: 75% 0%; } 20% { background-position: 100% 0%; }
  25% { background-position: 0% 33.333%; } 30% { background-position: 25% 33.333%; } 35% { background-position: 50% 33.333%; } 40% { background-position: 75% 33.333%; } 45% { background-position: 100% 33.333%; }
  50% { background-position: 0% 66.667%; } 55% { background-position: 25% 66.667%; } 60% { background-position: 50% 66.667%; } 65% { background-position: 75% 66.667%; } 70% { background-position: 100% 66.667%; }
  75% { background-position: 0% 100%; } 80% { background-position: 25% 100%; } 85% { background-position: 50% 100%; } 90% { background-position: 75% 100%; } 95% { background-position: 100% 100%; }
}
@media (max-width: 700px) {
  .game-window .completion-scene { padding: 17px 12px; }
  .completion-scene-stage { gap: 12px; }
  .completion-scene-eyebrow { font-size: 8px; letter-spacing: 1.8px; margin-bottom: 10px; }
  .completion-scene-title { font-size: 35px; letter-spacing: -.8px; }
  .completion-scene-win .completion-scene-title { font-size: 46px; }
  .completion-scene-subtitle { font-size: 13px; margin-top: 10px; }
  .completion-scene-cast { max-width: 360px; gap: 5px 2px; }
  .completion-scene-cast-figure { width: 100%; }
  .completion-scene-return-copy { flex-basis: 100%; font-size: 10px; }
  .completion-scene-footer { gap: 8px; }
}
@media (max-height: 500px) {
  .game-window .completion-scene { padding: 10px 14px; }
  .completion-scene-stage { gap: 5px; grid-template-rows: auto minmax(40px, 1fr) auto auto auto; }
  .completion-scene-eyebrow { margin-bottom: 4px; font-size: 7px; letter-spacing: 1.3px; }
  .completion-scene-title, .completion-scene-win .completion-scene-title { font-size: 29px; letter-spacing: -.7px; }
  .completion-scene-subtitle { margin-top: 4px; font-size: 11px; }
  .completion-scene-count { font-size: 17px; }
  .completion-scene-run-count { font-size: 8px; margin-top: 3px; }
  .completion-scene-progress-rail { margin-top: 6px; gap: 6px; }
  .completion-scene-progress-bead { width: 5px; height: 5px; }
  .completion-scene-cast { display: flex; justify-content: center; flex-wrap: nowrap; gap: 3px; }
  .completion-scene-cast-figure { width: min(22px, calc((100% - 48px) / 17)); flex-shrink: 0; }
  .completion-scene-footer { gap: 9px; flex-wrap: nowrap; }
  .completion-scene-return-copy { flex-basis: auto; font-size: 9px; }
  .completion-scene-skip { min-height: 44px; padding-inline: 12px; font-size: 10px; }
  .completion-scene-main-medallion { width: 58px; height: 58px; }
  .completion-scene-win .completion-scene-main-medallion { width: 42px; height: 42px; }
  .completion-scene-emblem-position { transform: rotate(var(--emblem-angle)) translateY(-40px) rotate(var(--emblem-return-angle)); }
  .completion-scene-small-medallion { width: 23px; height: 23px; }
}