@view-transition{navigation:auto}

/* The old screen remains opaque while the destination finishes its local
   layout. Only composited transforms/opacity animate; no board resize/blur. */
::view-transition-group(root){animation-duration:220ms;animation-timing-function:cubic-bezier(.2,.7,.25,1)}
::view-transition-image-pair(root){isolation:isolate}
::view-transition-old(root),::view-transition-new(root){mix-blend-mode:plus-lighter}
::view-transition-old(root){animation:screen-old-forward 220ms cubic-bezier(.2,.7,.25,1) both}
::view-transition-new(root){animation:screen-new-forward 220ms cubic-bezier(.2,.7,.25,1) both}
html[data-screen-transition="back"]::view-transition-old(root){animation-name:screen-old-back}
html[data-screen-transition="back"]::view-transition-new(root){animation-name:screen-new-back}
html:not([data-screen-transition-ready])::view-transition-old(root),
html:not([data-screen-transition-ready])::view-transition-new(root){animation-play-state:paused}
@keyframes screen-old-forward{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-12px)}}
@keyframes screen-new-forward{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:translateX(0)}}
@keyframes screen-old-back{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(22px)}}
@keyframes screen-new-back{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:translateX(0)}}

/* Native dialog top-layer retention lets every close path animate, including
   Escape/Android Back, without a JS timer or a temporarily clickable board. */
@supports (transition-behavior:allow-discrete){
  .game-dialog{
    opacity:0;transform:translateY(8px) scale(.985);
    transition:opacity 150ms ease-out,transform 150ms ease-out,
      display 150ms allow-discrete,overlay 150ms allow-discrete;
  }
  .game-dialog[open]{opacity:1;transform:none}
  /* A fill-both keyframe entrance masks the close transition. Use reversible
     transitions for outcome cards too, retaining their more pronounced entry. */
  .game-dialog.result-dialog[open],.game-dialog.blocked-dialog[open]{animation:none;transition-duration:260ms,260ms,150ms,150ms}
  .game-dialog::backdrop{opacity:0;transition:opacity 150ms ease-out,display 150ms allow-discrete,overlay 150ms allow-discrete}
  .game-dialog[open]::backdrop{opacity:1}
  .game-dialog.result-dialog[open]::backdrop,.game-dialog.blocked-dialog[open]::backdrop{animation:none}
  @starting-style{
    .game-dialog[open]{opacity:0;transform:translateY(8px) scale(.985)}
    .game-dialog.result-dialog[open],.game-dialog.blocked-dialog[open]{opacity:0;transform:translateY(12px) scale(.97)}
    .game-dialog[open]::backdrop{opacity:0}
  }
}
@media(prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
  .game-dialog,.game-dialog::backdrop{transition:none!important}
}