/* Shared feedback: short, event-driven and independent of gameplay timing.
   Individual transforms preserve existing centring/layout transforms. */
/* Cards meet the edge of their scrollport. Animate the artwork inside their
   rounded clip, never lift or enlarge the outer card beyond that scrollport. */
body .home-level-card:not(:disabled):hover{transform:none;border-color:#9bc8eb}
@media(prefers-reduced-motion:no-preference){
  body button:not(:disabled){transition:scale .16s cubic-bezier(.2,.8,.2,1),filter .16s,border-color .16s,background-color .16s}
  body button:not(:disabled):active{scale:.965}
  body :is(.home-level-card,.stage-card):not(:disabled):active{scale:.985}
  #home-play:not(:disabled):active,#kick-button:not(:disabled):active{scale:.975}
  :is(.home-level-image,.stage-route-image){transition:scale .3s cubic-bezier(.2,.8,.2,1)}
  :is(.home-utility,.hud-blue-control,.balanced-close,.close-button,.target-arrow,.mobile-menu-toggle) :is(img,.material-symbols-rounded){transition:rotate .2s,scale .2s}
  .mobile-menu-status{transition:background-color .18s,color .18s}

  :is(#levels-dialog,#how-dialog,#mobile-menu,#auth-dialog)[open]{animation:ui-panel-in .28s cubic-bezier(.18,.8,.25,1.1) both}
  dialog[open]::backdrop{animation:ui-fade-in .2s ease-out both}
  #how-dialog[open] .help-steps li{animation:ui-item-in .3s ease-out both}
  #how-dialog[open] .help-steps li:nth-child(2){animation-delay:.05s}
  #how-dialog[open] .help-steps li:nth-child(3){animation-delay:.1s}
  #mobile-menu[open] :is(.mobile-menu-main,.mobile-menu-session){animation:ui-item-in .28s .04s ease-out both}
  #levels-dialog[open] .selected-target-image{animation:ui-target-in .24s ease-out both}
  #levels-dialog[data-motion-direction=previous]{--target-enter-x:-12px}
  #levels-dialog[data-motion-direction=next]{--target-enter-x:12px}
  #levels-dialog[open] .stage-card{animation:ui-item-in .26s ease-out both}
  #levels-dialog[open] .stage-card:nth-child(2){animation-delay:.035s}
  #levels-dialog[open] .stage-card:nth-child(3){animation-delay:.07s}
  #shot-stars .star-awarded{animation:ui-star-earned .48s cubic-bezier(.2,.75,.25,1) both;transform-origin:50% 70%}
  #result[data-outcome=retry]:not([hidden]) .result-art{animation:ui-retry-settle .42s .08s ease-out both}
  body.at-home:not(.entering-game) #home-play{animation:ui-item-in .3s ease-out both}
}
@media(prefers-reduced-motion:no-preference) and (hover:hover) and (pointer:fine){
  :is(.balanced-close,.close-button,#auth-close,#mobile-menu-close):hover .material-symbols-rounded{rotate:90deg}
  body button:not(:disabled):hover{scale:1.025}
  body :is(.home-level-card,.stage-card):not(:disabled):hover{scale:1;transform:none}
  :is(.home-level-card,.stage-card):not(:disabled):is(:hover,:focus-visible) :is(.home-level-image,.stage-route-image){scale:1.035}
  #how-dialog .help-steps li:hover .help-art img{animation:ui-help-nudge .38s ease-out}
  .target-arrow:not(:disabled):hover .material-symbols-rounded{scale:1.12}
  body button:not(:disabled):active{scale:.965}
  body :is(.home-level-card,.stage-card):not(:disabled):active{scale:.985}
}
@keyframes ui-panel-in{from{opacity:0;translate:0 8px;scale:.96}to{opacity:1;translate:0 0;scale:1}}
@keyframes ui-item-in{from{opacity:0;translate:0 6px}to{opacity:1;translate:0 0}}
@keyframes ui-fade-in{from{opacity:0}to{opacity:1}}
@keyframes ui-target-in{from{opacity:.5;translate:var(--target-enter-x,0px) 0;scale:1.015}to{opacity:1;translate:0 0;scale:1}}
@keyframes ui-star-earned{0%{scale:.45;rotate:-14deg}55%{scale:1.22;rotate:6deg}78%{scale:.95;rotate:-2deg}100%{scale:1;rotate:0deg}}
@keyframes ui-retry-settle{0%{scale:.9;rotate:-4deg}65%{scale:1.035;rotate:2deg}100%{scale:1;rotate:0deg}}
@keyframes ui-help-nudge{0%,100%{translate:0 0;rotate:0deg}45%{translate:0 -4px;rotate:-4deg}}
/* Also stop a previously running effect if the preference changes mid-session. */
@media(prefers-reduced-motion:reduce){
  body *,body *::before,body *::after,dialog::backdrop{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
html:not(.keyboard-navigation) :is(button,a,#game-canvas):focus{outline:none!important}
html:not(.keyboard-navigation) #google-sign-in:focus-within{outline:none}
html.keyboard-navigation button:focus-visible{outline:2px solid #d7ebff!important;outline-offset:3px}