.route-navigation-error {
  position: fixed;
  z-index: 10000;
  inset: auto 1rem max(1rem, env(safe-area-inset-bottom)) auto;
  max-width: calc(100vw - 2rem);
  margin: 0;
  padding: 0.8rem 1rem;
  border: 2px solid currentColor;
  background: #10241a;
  color: #fff7da;
  font: 1rem/1.4 system-ui, sans-serif;
}

.arcade-page .route-navigation-error {
  background: #000033;
  color: #ffff00;
  box-shadow: 4px 4px 0 #ff00ff;
}

a[aria-busy='true'] { cursor: progress; }

/* Route styles are swapped during a same-document handoff. Keep the incoming
   skip link out of layout even during the frame before its own CSS is active. */
.skip-link:not(:focus) {
  position: fixed;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* The browser normally interpolates the root snapshot's bounds between routes.
   Pages with different scroll heights then appear to squeeze or drift vertically
   even when their own transition only moves horizontally or clips a window. */
::view-transition-group(root) {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  overflow: clip;
  animation: none;
}

/* A route snapshot can contain a document taller than the viewport. The
   browser's default fill would squeeze that image into the fixed group. */
::view-transition-old(root),
::view-transition-new(root) {
  object-fit: cover;
  object-position: top center;
}

.quizzes-route-snapshot {
  position: fixed;
  z-index: 100000;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  border: 0;
  background: transparent;
  visibility: hidden;
  pointer-events: none;
  transform-origin: center center;
}

.quizzes-route-snapshot.is-visible { visibility: visible; }

/* The real lead story rises from the Home sign, then its crop opens to the
   whole destination page. No replacement card or opacity handoff is involved. */
html.is-quizzes-route-transition[data-route-arrival='quizzes-prize']::view-transition-old(root),
html.is-quizzes-route-transition[data-route-arrival='quizzes-prize']::view-transition-new(root),
html.is-quizzes-route-transition[data-route-arrival='quizzes-home']::view-transition-old(root),
html.is-quizzes-route-transition[data-route-arrival='quizzes-home']::view-transition-new(root) {
  animation-fill-mode: both;
  mix-blend-mode: normal;
}

html.is-quizzes-route-transition[data-route-arrival='quizzes-prize']::view-transition-old(root) {
  z-index: 0;
  animation: none;
}

html.is-quizzes-route-transition[data-route-arrival='quizzes-prize']::view-transition-new(root) {
  z-index: 1;
  transform-origin: top left;
  animation: quizzes-page-open 760ms cubic-bezier(.58, 0, .16, 1) both;
}

@keyframes quizzes-page-open {
  0% {
    transform: translate(var(--quiz-focus-x), calc(var(--quiz-focus-y) + var(--quiz-focus-lift))) scale(var(--quiz-focus-scale));
    clip-path: inset(var(--quiz-clip-top) var(--quiz-clip-right) var(--quiz-clip-bottom) var(--quiz-clip-left));
  }
  28% {
    transform: translate(var(--quiz-focus-x), var(--quiz-focus-y)) scale(var(--quiz-focus-scale));
    clip-path: inset(var(--quiz-clip-top) var(--quiz-clip-right) var(--quiz-clip-bottom) var(--quiz-clip-left));
  }
  100% { transform: translate(0, 0) scale(1); clip-path: inset(0); }
}

html.is-quizzes-route-transition[data-route-arrival='quizzes-home']::view-transition-new(root) {
  z-index: 0;
  animation: none;
}

html.is-quizzes-route-transition[data-route-arrival='quizzes-home']::view-transition-old(root) {
  z-index: 1;
  transform-origin: top center;
  animation: quizzes-page-return 820ms cubic-bezier(.48, 0, .38, 1) both;
}

@keyframes quizzes-page-return {
  0% { transform: translateY(0) scale(1); }
  68% { transform: translateY(8vh) scale(var(--quiz-return-scale)); }
  100% { transform: translateY(140vh) scale(var(--quiz-return-scale)); }
}

html[data-route-arrival='quizzes-prize'] .paper,
html[data-route-arrival='quizzes-prize'] .stamp {
  animation: none;
}