@view-transition{navigation:auto}
::view-transition-old(root){animation:pageOut .16s ease-in both}
::view-transition-new(root){animation:pageIn .24s ease-out both}
@keyframes pageIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes pageOut{from{opacity:1}to{opacity:0;transform:translateY(-5px)}}
@keyframes cardIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes gentleFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes dialogIn{from{opacity:0;transform:translateY(12px) scale(.975)}to{opacity:1;transform:translateY(0) scale(1)}}
main,.admin-shell{animation:pageIn .3s ease-out both;transition:opacity .12s ease,transform .12s ease}
.is-leaving main,.is-leaving .admin-shell{opacity:0;transform:translateY(-5px)}
.hero-art{animation:gentleFloat 7s ease-in-out infinite}
.product-card,.rule-section,.help-card,.currency-banner,.empty{animation:cardIn .32s ease-out both}
.product-card:nth-child(2){animation-delay:.035s}.product-card:nth-child(3){animation-delay:.07s}.product-card:nth-child(4){animation-delay:.105s}.product-card:nth-child(5){animation-delay:.14s}.product-card:nth-child(6){animation-delay:.175s}
.product-art svg{transition:transform .28s ease,filter .28s ease}
.product-card:hover .product-art svg{transform:translateY(-4px) rotate(-3deg)}
.mode-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px #78519612}
button{transition:background-color .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease,transform .16s ease}
button:active:not(:disabled){transform:scale(.975)}
.category,.header nav a,.footer a{transition:color .18s ease,background-color .18s ease}
dialog[open]{animation:dialogIn .22s ease-out both}
dialog[open]::backdrop{animation:pageIn .18s ease-out both}
.sound-toggle{position:fixed;inset:auto max(20px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) auto;z-index:90;display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:126px;max-width:calc(100vw - 32px);margin:0;background:#7950c5;border:1px solid #6840b3;box-shadow:0 6px 24px #54308a35;border-radius:14px;color:#fff;font-size:13px;font-weight:650;padding:11px 17px;white-space:nowrap}
.sound-toggle:hover{background:#6840b3;border-color:#58319c}
@media(max-width:760px){.sound-toggle{right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));font-size:12px;padding:10px 14px}}
@media(prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}