/* Opacity-only navigation keeps the incoming layout and sticky header in place. */
@view-transition { navigation: auto; }
html { scrollbar-gutter: stable; scroll-behavior: smooth; scroll-padding-top: var(--navigation-offset, 108px); }
.game-nav { view-transition-name: sweets-navigation; }
.game-nav .nav-buy { line-height: 1; }
::view-transition-group(root) { animation-duration: .26s; }
::view-transition-old(root) { animation: .18s ease-out both sweets-page-out; }
::view-transition-new(root) { animation: .26s cubic-bezier(.2,.7,.2,1) both sweets-page-in; }
::view-transition-group(sweets-navigation) { animation-duration: .26s; }
::view-transition-old(sweets-navigation) { animation: none; opacity: 0; }
::view-transition-new(sweets-navigation) { animation: none; }
@keyframes sweets-page-out { to { opacity: 0; } }
@keyframes sweets-page-in { from { opacity: 0; } to { opacity: 1; } }
/* No outgoing fade or hidden state: slow requests leave the current page usable. */
.navigation-arrival main { animation: sweets-arrival .26s ease-out; }
@keyframes sweets-arrival { from { opacity: .72; } to { opacity: 1; } }
.game-nav nav > a { transition: color .18s ease, background-color .18s ease, border-color .18s ease; }
@media(max-width:800px) { html { scroll-padding-top: var(--navigation-offset, 138px); } }
@media(prefers-reduced-motion:reduce) {
  @view-transition { navigation: none; }
  html { scroll-behavior: auto; }
  .navigation-arrival main { animation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}