/* Flip 7 motion: slow ambient life, immediate touch feedback, clear game events. */
body{isolation:isolate;background-image:none}
body::before{content:"";position:fixed;inset:-38px;z-index:-1;pointer-events:none;background-image:radial-gradient(#c4b98b28 1.8px,transparent 2px),radial-gradient(#c4b98b1c 1.5px,transparent 2px);background-size:19px 19px;background-position:0 0,9px 9px}
html[data-motion="full"] body::before{animation:paper-drift 22s linear infinite}
html[data-motion="full"] .home-brand{animation:brand-arrive .8s cubic-bezier(.22,1,.36,1) both}
html[data-motion="full"] .wordmark{animation:brand-breathe 4.8s ease-in-out infinite;transform-origin:50% 55%;will-change:transform}
html[data-motion="full"] .mascot{animation:mascot-float 3.8s ease-in-out infinite;will-change:transform}
html[data-motion="full"] .home-actions>.two-buttons{animation:menu-arrive .6s .1s cubic-bezier(.22,1,.36,1) both}
html[data-motion="full"] .home-actions>.btn{animation:menu-arrive .6s .18s cubic-bezier(.22,1,.36,1) both}
html[data-motion="full"] .home-account-tools{animation:menu-arrive .6s .26s cubic-bezier(.22,1,.36,1) both}
/* Keep the page visible during navigation and background refreshes. */
html[data-motion] .page,html[data-motion] .tutorial{animation:none}
html[data-motion="full"] #app[data-page-enter="true"] :is(.online-modes,.mode-intro,.search-title){animation:content-arrive .38s cubic-bezier(.22,1,.36,1) both}
@keyframes content-arrive{from{transform:scale(.985)}to{transform:scale(1)}}
/* Occupied seats remain readable when another player arrives. */
@keyframes match-arrive{from{transform:scale(.96)}to{transform:scale(1)}}
html[data-motion="full"] .modal,html[data-motion="full"] .account-panel,html[data-motion="full"] .friends-panel,html[data-motion="full"] .install-panel{animation:panel-arrive .42s cubic-bezier(.22,1,.36,1) both}
html[data-motion="full"] .modal-backdrop,html[data-motion="full"] .account-backdrop,html[data-motion="full"] .friends-backdrop{animation:veil-arrive .3s ease-out both}
html[data-motion="full"] .mode-icon{animation:mode-float 4s ease-in-out infinite}
html[data-motion="full"] .mode-1 .mode-icon{animation-delay:-1.3s}html[data-motion="full"] .mode-2 .mode-icon{animation-delay:-2.6s}
html[data-motion="full"] .setup-illustration>svg{animation:mode-float 4.5s ease-in-out infinite}
html[data-motion="full"] .search-card-left{animation:search-shuffle-left 2.5s ease-in-out infinite!important}
html[data-motion="full"] .search-card-right{animation:search-shuffle-right 2.5s ease-in-out infinite!important}
html[data-motion="full"] .search-card-front{animation:search-shuffle-front 2.5s ease-in-out infinite!important}
html[data-motion="full"] .search-glint{animation:search-twinkle 2.5s ease-in-out infinite!important}
html[data-motion="full"] .search-dot{animation:search-dot-bounce 1.2s ease-in-out infinite!important}
html[data-motion="full"] .search-dot.two{animation-delay:.15s!important}html[data-motion="full"] .search-dot.three{animation-delay:.3s!important}
html[data-motion="full"] .rank-up .reward-old{animation-name:rank-out-up!important}html[data-motion="full"] .rank-down .reward-old{animation-name:rank-out-down!important}
html[data-motion="full"] .rank-up .reward-new{animation-name:rank-in-up!important}html[data-motion="full"] .rank-down .reward-new{animation-name:rank-in-down!important}
html[data-motion="full"] .rank-confetti{display:block}
.btn,.mode-button{transition:transform .22s cubic-bezier(.22,1,.36,1),box-shadow .22s ease,background-color .18s ease}
.btn:active:not(:disabled){transform:translateY(5px) scale(.975);transition-duration:80ms}.mode-button:active:not(:disabled){transform:translateY(4px) scale(.975);transition-duration:80ms}
@media(hover:hover){.mode-button:hover{transform:translateY(-4px) rotate(-.5deg)}.home-actions .btn:hover{transform:translateY(-3px)}.playing-card[data-card-id]:hover{filter:drop-shadow(0 5px 0 #25283030) brightness(1.04)}}
html[data-motion="reduced"] body::before{animation:none}html[data-motion="reduced"] .wordmark{animation:none;transform:rotate(-6deg)}html[data-motion="reduced"] .mascot{animation:none}html[data-motion="reduced"] .page,html[data-motion="reduced"] .modal,html[data-motion="reduced"] .account-panel,html[data-motion="reduced"] .friends-panel{animation:veil-arrive .2s ease-out both}html[data-motion="reduced"] .mode-icon,html[data-motion="reduced"] .setup-illustration>svg,html[data-motion="reduced"] .deck,html[data-motion="reduced"] .search-card,html[data-motion="reduced"] .search-glint{animation:none!important}html[data-motion="reduced"] .rank-confetti{display:none}html[data-motion="reduced"] .search-dot{animation:search-soft-dot 2s ease-in-out infinite!important}
html[data-motion="reduced"] .rank-up .reward-old{animation-name:rank-short-out-up!important}html[data-motion="reduced"] .rank-down .reward-old{animation-name:rank-short-out-down!important}html[data-motion="reduced"] .rank-up .reward-new{animation-name:rank-short-in-up!important}html[data-motion="reduced"] .rank-down .reward-new{animation-name:rank-short-in-down!important}
@keyframes paper-drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(38px,38px,0)}}
@keyframes brand-breathe{0%,100%{transform:rotate(-6deg) scale(.98)}50%{transform:rotate(-4.8deg) scale(1.035)}}
@keyframes mascot-float{0%,100%{transform:rotate(6deg) translateY(0)}50%{transform:rotate(9deg) translateY(-8px)}}
@keyframes brand-arrive{from{opacity:0;translate:0 16px}to{opacity:1;translate:0 0}}
@keyframes menu-arrive{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
html[data-motion="reduced"] .page,html[data-motion="reduced"] .tutorial{animation:none}
@keyframes panel-arrive{from{opacity:0;transform:translateY(18px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes veil-arrive{from{opacity:0}to{opacity:1}}
@keyframes mode-float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-5px) rotate(2deg)}}