/* Purposeful micro-interactions: no new space, permanent motion or delayed actions. */
body.intui-ui button{--intui-icon-motion:intui-button-lift}
body.intui-ui button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
body.intui-ui button:enabled:not([aria-disabled=true]):not([data-motion=off]):active{scale:.985}
body.intui-ui button:is(.intui-close,.face-card,.universe-tile):active{scale:1}
body.intui-ui :is(button>.ui-icon,button>.device-home-glyph>svg,button>strong>.ui-icon,button>.universe-trigger-mark,button>.universe-tile-mark,button>.room-mode-art){transform-origin:center;transform-box:fill-box}
body.intui-ui button:enabled:not(.intui-close):not([data-motion=off]):focus-visible>:is(.ui-icon,.universe-trigger-mark,.universe-tile-mark,.room-mode-art),
body.intui-ui button:enabled:focus-visible>.device-home-glyph>svg,
body.intui-ui button:enabled:focus-visible>strong>.ui-icon{animation:var(--intui-icon-motion) .38s ease-out both}
body.intui-ui #homeCreate{--intui-icon-motion:intui-button-create}
body.intui-ui #homeLocal{--intui-icon-motion:intui-button-device}
body.intui-ui #homeSolo{--intui-icon-motion:intui-button-spark}
body.intui-ui #homeRooms>.ui-icon:first-child{--intui-icon-motion:intui-button-explore}
body.intui-ui #homeRooms>.ui-icon:last-child,
body.intui-ui #homeJoin,
body.intui-ui #chatForm>button:last-of-type{--intui-icon-motion:intui-button-forward}
body.intui-ui :is(#gameBack,#directoryBack,#cancelUniverseDialog){--intui-icon-motion:intui-button-back}
body.intui-ui #themeButton{--intui-icon-motion:intui-button-palette}
body.intui-ui #soundButton{--intui-icon-motion:intui-button-sound}
body.intui-ui .universe-trigger{--intui-icon-motion:intui-button-explore}
body.intui-ui .universe-tile{--intui-icon-motion:intui-button-lift}
body.intui-ui .room-mode-card[data-room-kind=master]{--intui-icon-motion:intui-button-crown}
body.intui-ui .room-mode-card[data-room-kind=face]{--intui-icon-motion:intui-button-device}
body.intui-ui #chooseAvatar:focus-visible{box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 16%,transparent)}
@media(hover:hover) and (pointer:fine){
 body.intui-ui button:enabled:not(.intui-close):not([data-motion=off]):hover>:is(.ui-icon,.universe-trigger-mark,.universe-tile-mark,.room-mode-art),
 body.intui-ui button:enabled:hover>.device-home-glyph>svg,
 body.intui-ui button:enabled:hover>strong>.ui-icon{animation:var(--intui-icon-motion) .38s ease-out both}
 body.intui-ui #chooseAvatar:hover{box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 16%,transparent)}
}
@keyframes intui-button-lift{0%,100%{translate:0 0}45%{translate:0 -3px}}
@keyframes intui-button-create{from{rotate:0deg}to{rotate:90deg}}
@keyframes intui-button-device{0%,100%{rotate:0deg}30%{rotate:-9deg}65%{rotate:6deg}}
@keyframes intui-button-spark{0%,100%{scale:1;rotate:0deg}45%{scale:1.16;rotate:12deg}}
@keyframes intui-button-explore{0%,100%{rotate:0deg;translate:0 0}45%{rotate:-7deg;translate:0 -2px}}
@keyframes intui-button-forward{0%,100%{translate:0 0}50%{translate:4px 0}}
@keyframes intui-button-back{0%,100%{translate:0 0}50%{translate:-4px 0}}
@keyframes intui-button-palette{0%,100%{rotate:0deg}35%{rotate:-16deg}70%{rotate:9deg}}
@keyframes intui-button-sound{0%,100%{scale:1}45%{scale:1.13}}
@keyframes intui-button-crown{0%,100%{translate:0 0;rotate:0deg}40%{translate:0 -3px;rotate:-5deg}70%{rotate:3deg}}
@media(prefers-reduced-motion:reduce){
 body.intui-ui button:active{scale:1!important}
 body.intui-ui button:enabled>:is(.ui-icon,.universe-trigger-mark,.universe-tile-mark,.room-mode-art),
 body.intui-ui button:enabled>.device-home-glyph>svg,
 body.intui-ui button:enabled>strong>.ui-icon{animation:none!important}
}